Updated shoelace library to 2.18.0; Additional styling corrections including fixing issues with carousel-item and default theme switch

Author: MarkoDojkic

src/main/resources/static/css/index.css

@@ -282,4 +282,51 @@ sl-radio-group[name='predefinedDataSelection']::part(form-control-input) {
 sl-alert {
     white-space: normal;
     overflow-wrap: break-word;
+}
+
+/* Hide vertical scrollbar for WebKit browsers (Chrome, Safari) */
+sl-carousel-item::-webkit-scrollbar {
+    width: 0; /* Hide vertical scrollbar */
+}
+
+/* Hide vertical scrollbar for Firefox */
+sl-carousel-item {
+    scrollbar-width: none; /* Hide vertical scrollbar */
+}
+
+/* For Edge and Internet Explorer */
+sl-carousel-item {
+    -ms-overflow-style: none; /* Hide scrollbar */
+}
+
+@media (max-width: 451px) {
+    #jiraActivityStreamDiv {
+        font-size: 0.42vw;
+        text-align: center;
+        font-family: monospace;
+    }
+}
+
+@media (min-width: 551px) and (max-width: 780px) {
+    #jiraActivityStreamDiv {
+        font-size: 0.59vw;
+        text-align: center;
+        font-family: monospace;
+    }
+}
+
+@media (min-width: 780px) and (max-width: 1180px) {
+    #jiraActivityStreamDiv {
+        font-size: 0.78vw;
+        text-align: center;
+        font-family: monospace;
+    }
+}
+
+@media (min-width: 1180px) {
+    #jiraActivityStreamDiv {
+        font-size: 0.95vw;
+        text-align: center;
+        font-family: monospace;
+    }
 }

src/main/resources/static/js/developers.js

@@ -1,3 +1,5 @@
+import 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/alert/alert.js';
+
 $(window).on("load", async () => {
     await Promise.all([
         customElements.whenDefined("sl-tab-panel"),
@@ -10,18 +12,35 @@ $(window).on("load", async () => {
         const themeSwitch = $('#theme-switch');
 
         themeSwitch.on('sl-change', (event) => {
+            alert = Object.assign(document.createElement('sl-alert'), {
+                variant: 'primary',
+                closable: false,
+                duration: 1000,
+                innerHTML: `
+                    <sl-icon name="info-circle" slot="icon"></sl-icon>
+                    Theme switched to ${event.target.checked ? 'dark' : 'light'}
+                `
+            });
+
             if (event.target.checked) {
                 $('html').addClass('sl-theme-dark');
                 themeDarkLink.removeAttr('disabled');
                 themeLightLink.attr('disabled', 'disabled');
+
             } else {
                 $('html').removeClass('sl-theme-dark');
                 themeDarkLink.attr('disabled', 'disabled');
                 themeLightLink.removeAttr('disabled');
             }
+
+            document.body.append(alert);
+            alert.toast();
         });
 
-        setTimeout(() => themeSwitch.click(), 1);
+        const switchThemeInterval = setInterval(() => {
+            themeSwitch.click();
+            clearInterval(switchThemeInterval);
+        }, 100);
 
         $('.sl-rating-developer').each((index, slRating) => slRating.getSymbol = (() => '<sl-icon name="code-slash"></sl-icon>')); // Change icon for every sl-rating with class .rating-developers
         $(".developerExperienceSlRange").each((index, slRange) => slRange.tooltipFormatter = value => `Developer experience - ${value}/10`); // Change tooltip message on each slRange instances
@@ -106,15 +125,16 @@ $(window).on("load", async () => {
     const developersCarousel = $("#sl-tab-panel-1 sl-carousel")[0];
     $(developersCarousel.shadowRoot).find("#scroll-container").css("overflow-y", "auto");
 
-    const observer = new MutationObserver(mutationsList => {
-        for (const mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'inert') {
-                mutation.target.removeAttribute('inert');
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            // Check if the mutation is related to the 'inert' attribute
+            if ((mutation.type === 'attributes' && mutation.attributeName === 'inert') || mutation.target.hasAttribute('inert')) {
+                mutation.target.removeAttribute('inert'); // Remove the 'inert' attribute
             }
-        }
+        });
     });
 
-    observer.observe(developersCarousel, { childList: true, subtree: true, attributes: true });
+    observer.observe(developersCarousel, { childList: true, subtree: true, attributeFilter: ["inert"] });
 })
 
 function setupResize() {

src/main/resources/static/js/index.js

@@ -1,15 +1,7 @@
-import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/components/alert/alert.js';
-import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/components/popup/popup.js';
+import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/alert/alert.js';
+import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/popup/popup.js';
 import {ansi2html_string} from './ansi2html.js';
 
-const observer = new MutationObserver(mutationsList => {
-    for (const mutation of mutationsList) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'inert') {
-            mutation.target.removeAttribute('inert');
-        }
-    }
-});
-
 $(window).on("load", async () => {
     const themeLightLink = $('#theme-light');
     const themeDarkLink = $('#theme-dark');
@@ -31,9 +23,14 @@ $(window).on("load", async () => {
             flatpickrDark.attr('disabled', 'disabled');
             flatpickrLight.removeAttr('disabled');
         }
+
+        notifyInfo(`Theme switched to ${event.target.checked ? 'dark' : 'light'}`)
     });
 
-    setTimeout(() => themeSwitch.click(), 1);
+    const switchThemeInterval = setInterval(() => {
+        themeSwitch.click();
+        clearInterval(switchThemeInterval);
+    }, 100);
 
     flatpickr("sl-input[name='epicCreatedOn']", {
         enableTime: true,
@@ -1020,6 +1017,15 @@ function updateCustomEpicsList() {
         const customUserStories = $("#customUserStories")[0];
         const customTechnicalTasks = $("#customTechnicalTasks")[0];
 
+        const observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                // Check if the mutation is related to the 'inert' attribute
+                if ((mutation.type === 'attributes' && mutation.attributeName === 'inert') || mutation.target.hasAttribute('inert')) {
+                    mutation.target.removeAttribute('inert'); // Remove the 'inert' attribute
+                }
+            });
+        });
+
         currentPredefinedData.forEach((value, key) => {
             $("#epicsWrapper").append(`<sl-card id="epic_#${key}" style="height:100%; --border-color: rgb(150, 2, 253, 1); text-align: -webkit-center;" xmlns="http://www.w3.org/1999/html">
                 <strong>ID: ${value.epicId}</strong>
@@ -1058,10 +1064,7 @@ function updateCustomEpicsList() {
 
                     const userStoriesCarousel = $("sl-tab-panel[name='customUserStoriesViewTab'] sl-carousel");
 
-                    setTimeout(() => {
-                        $(userStoriesCarousel[0].shadowRoot).find("#scroll-container").css("overflow-y", "auto");
-                        observer.observe(userStoriesCarousel[0], { childList: true, subtree: true, attributes: true });
-                    }, 500);
+                    observer.observe(userStoriesCarousel[0], { childList: true, subtree: true, attributeFilter: ["inert"] });
 
                     $(userStoriesCarousel).on('sl-slide-change', event => {
                         $(customUserStories.shadowRoot).find("#title slot").html($(customUserStories.shadowRoot).find("#title slot").html().split("(")[0] + "(Currently viewing Epic: '" + $(event.target.children).filter((index, child) => $(child).attr('class') && $(child).attr('class').includes('--is-active'))[0].id.split("Of")[1] + "')");
@@ -1076,10 +1079,7 @@ function updateCustomEpicsList() {
 
                         const technicalTasksCarousel = $("sl-tab-panel[name='customTechnicalTasksViewTab'] sl-carousel");
 
-                        setTimeout(() => {
-                            $(technicalTasksCarousel[0].shadowRoot).find("#scroll-container").css("overflow-y", "auto");
-                            observer.observe(technicalTasksCarousel[0], { childList: true, subtree: true, attributes: true });
-                        }, 500);
+                        observer.observe(technicalTasksCarousel[0], { childList: true, subtree: true, attributeFilter: ["inert"] });
 
                         $(technicalTasksCarousel).on('sl-slide-change', event => {
                             $(customTechnicalTasks.shadowRoot).find("#title slot").html($(customTechnicalTasks.shadowRoot).find("#title slot").html().split("(")[0] + "(Currently viewing User story: '" + $(event.target.children).filter((index, child) => $(child).attr('class') && $(child).attr('class').includes('--is-active'))[0].id.split("Of")[1] + "')");
@@ -1108,7 +1108,7 @@ function updateCustomEpicsList() {
 function updateCustomUserStoriesList(relatedEpicId, userStories) {
     const userStoriesCarousel = $("sl-tab-panel[name='customUserStoriesViewTab'] sl-carousel");
 
-    userStoriesCarousel.append(`<sl-carousel-item id="userStoriesOf${relatedEpicId}" style="display: grid; grid-template-columns: repeat(var(--numberOfColumns), 1fr); height: 100%; row-gap: 1%; column-gap: 1%; text-align: -webkit-center;"></sl-carousel-item>`)
+    userStoriesCarousel.append(`<sl-carousel-item id="userStoriesOf${relatedEpicId}" style="display: grid; grid-template-columns: repeat(var(--numberOfColumns), 1fr); height: 100%; width: 99%; row-gap: 1%; column-gap: 1%; text-align: -webkit-center; overflow-y: auto;"></sl-carousel-item>`)
 
     const userStorySlSelect = $("sl-select[name='selectedUserStory']");
 
@@ -1151,9 +1151,9 @@ function updateCustomUserStoriesList(relatedEpicId, userStories) {
 }
 
 function updateCustomTechnicalTasksList(relatedUserStoryId, technicalTasks) {
-    const technicalTaskCarousel = $("sl-tab-panel[name='customTechnicalTasksViewTab'] sl-carousel");
+    const technicalTasksCarousel = $("sl-tab-panel[name='customTechnicalTasksViewTab'] sl-carousel");
 
-    technicalTaskCarousel.append(`<sl-carousel-item id="technicalTaskOf${relatedUserStoryId}" style="display: grid; grid-template-columns: repeat(var(--numberOfColumns), 1fr); height: 100%; row-gap: 1%; column-gap: 1%; text-align: -webkit-center;"></sl-carousel-item>`)
+    technicalTasksCarousel.append(`<sl-carousel-item id="technicalTaskOf${relatedUserStoryId}" style="display: grid; grid-template-columns: repeat(var(--numberOfColumns), 1fr); height: 100%; width: 99%; row-gap: 1%; column-gap: 1%; text-align: -webkit-center; overflow-y: auto;"></sl-carousel-item>`)
 
     setTimeout(() => $($("#customTechnicalTasks")[0].shadowRoot).find("#title slot").html("Manage technical tasks for predefined application flow (Currently viewing User story: '" + relatedUserStoryId + "')"), 500);
 

src/main/resources/templates/developersPage.html

@@ -3,12 +3,12 @@
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <title>Software development simulator - Developers page</title>
-        <link type="text/css" id="theme-light" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/light.css" integrity="sha512-/wsGyRaDm069iXIoScQcUGhJKd5ifFvwidDeiaUA1moLaLQJrIDuskK6ZTYaibFvQT1wxgQhc51apWB6XShnzg==" crossorigin="anonymous">
-        <link type="text/css" id="theme-dark" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/dark.css" integrity="sha512-EiN8ncJeSJDtpZJTPNIvJ8MB6kdj7mPe5nQVK9cc9Ci8+92F3mUy3xHufAUzqKqCteas7rBLLmahmHYu35mJIA==" crossorigin="anonymous">
+        <link type="text/css" id="theme-light" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css" integrity="sha512-/wsGyRaDm069iXIoScQcUGhJKd5ifFvwidDeiaUA1moLaLQJrIDuskK6ZTYaibFvQT1wxgQhc51apWB6XShnzg==" crossorigin="anonymous">
+        <link type="text/css" id="theme-dark" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css" integrity="sha512-EiN8ncJeSJDtpZJTPNIvJ8MB6kdj7mPe5nQVK9cc9Ci8+92F3mUy3xHufAUzqKqCteas7rBLLmahmHYu35mJIA==" crossorigin="anonymous">
         <link type="text/css" rel="stylesheet" th:href="@{/css/developers.css}"/>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/shoelace-autoloader.js" integrity="sha512-iTpkJ1vB9YD5jFwrppJ+0A6NIa8faZcY+iQTmkg4bkOfEw2R1OlLZnxsC43GzqHX92i87xCLULbYnFpBZFbAxA==" crossorigin="anonymous"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js" integrity="sha512-Op8WeqWF7nCUmV9JTE/qM2VxVJJs4nwGbWQkUk6cNkCEFRLpe+/PVDeMtHlMdEX8mTmaPpEFyPnJThLZzsLhIg==" crossorigin="anonymous"></script>
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous"></script>
-        <script type="module" th:src="@{/js/developers.js}"></script>
+        <script type="module" th:src="@{/js/developers.js}" defer></script>
     </head>
     <body>
         <div id="titleContainer" style="position: absolute; text-align: center;">

src/main/resources/templates/index.html

@@ -3,16 +3,16 @@
     <head>
         <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
         <title>Software development simulator - Home page</title>
-        <link type="text/css" id="theme-light" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/light.css" integrity="sha512-/wsGyRaDm069iXIoScQcUGhJKd5ifFvwidDeiaUA1moLaLQJrIDuskK6ZTYaibFvQT1wxgQhc51apWB6XShnzg==" crossorigin="anonymous">
-        <link type="text/css" id="theme-dark" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/dark.css" integrity="sha512-EiN8ncJeSJDtpZJTPNIvJ8MB6kdj7mPe5nQVK9cc9Ci8+92F3mUy3xHufAUzqKqCteas7rBLLmahmHYu35mJIA==" crossorigin="anonymous">
+        <link type="text/css" id="theme-light" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css" integrity="sha512-/wsGyRaDm069iXIoScQcUGhJKd5ifFvwidDeiaUA1moLaLQJrIDuskK6ZTYaibFvQT1wxgQhc51apWB6XShnzg==" crossorigin="anonymous">
+        <link type="text/css" id="theme-dark" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css" integrity="sha512-EiN8ncJeSJDtpZJTPNIvJ8MB6kdj7mPe5nQVK9cc9Ci8+92F3mUy3xHufAUzqKqCteas7rBLLmahmHYu35mJIA==" crossorigin="anonymous">
         <link type="text/css" id="flatpickr-light" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ==" crossorigin="anonymous">
         <link type="text/css" id="flatpickr-dark" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css" integrity="sha512-fRrsq2NfGA3jgajOMPsvcxypg4Nhcm8cf+/FFT49o8cfXx0I1TagS6SieQgGqwlxVYP6sdYbqqny2e7F0bTjbQ==" crossorigin="anonymous">
         <link type="text/css" rel="stylesheet" th:href="@{/css/index.css}"/>
         <script type="module" src="https://cdn.jsdelivr.net/npm/flatpickr" integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA==" crossorigin="anonymous"></script>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/shoelace-autoloader.js" integrity="sha512-iTpkJ1vB9YD5jFwrppJ+0A6NIa8faZcY+iQTmkg4bkOfEw2R1OlLZnxsC43GzqHX92i87xCLULbYnFpBZFbAxA==" crossorigin="anonymous"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js" integrity="sha512-Op8WeqWF7nCUmV9JTE/qM2VxVJJs4nwGbWQkUk6cNkCEFRLpe+/PVDeMtHlMdEX8mTmaPpEFyPnJThLZzsLhIg==" crossorigin="anonymous"></script>
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" integrity="sha512-nlrGqnXyDyswl/oRH13cQUfr7ZsQs0XxVAZP0Ygs1hzJcq0PiBgTzqnI3YSEFosXOPznrul6lDYcwVvc7gX0UA==" crossorigin="anonymous"></script>
-        <script type="module" th:src="@{/js/index.js}"></script>
+        <script type="module" th:src="@{/js/index.js}" defer></script>
     </head>
     <body>
         <header style="display: flex; align-items: center; justify-content: center; text-align: center;">
@@ -77,7 +77,7 @@
     </body>
 
     <sl-dialog id="jiraActivityStream" label="Jira Activity Stream" style="--width: 96vw">
-        <div style="text-align: center; font-family: monospace"></div>
+        <div id="jiraActivityStreamDiv"></div>
     </sl-dialog>
 
     <sl-dialog id="customEpics" label="Manage epics for predefined application flow" style="--width: 96vw">
@@ -132,7 +132,7 @@
             <sl-tab panel="customUserStoriesAddTab" slot="nav">Add</sl-tab>
             <sl-tab disabled panel="customUserStoriesEditTab" slot="nav">Edit</sl-tab>
 
-            <sl-tab-panel name="customUserStoriesViewTab">
+            <sl-tab-panel name="customUserStoriesViewTab" style="overflow: hidden">
                 <p>There aren't any user stories created in this session</p>
             </sl-tab-panel>
             <sl-tab-panel name="customUserStoriesAddTab">
@@ -176,7 +176,7 @@
             <sl-tab panel="customTechnicalTasksAddTab" slot="nav">Add</sl-tab>
             <sl-tab disabled panel="customTechnicalTasksEditTab" slot="nav">Edit</sl-tab>
 
-            <sl-tab-panel name="customTechnicalTasksViewTab">
+            <sl-tab-panel name="customTechnicalTasksViewTab" style="overflow: hidden">
                 <p>There aren't any technical tasks created in this session</p>
             </sl-tab-panel>
             <sl-tab-panel name="customTechnicalTasksAddTab">