change border color on tab change

hedyorg · Nov 8, 2024 · 1ac7236 · 1ac7236
1 parent 2f25e1f
commit 1ac7236
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 17 deletions.
diff --git a/static/css/generated.full.css b/static/css/generated.full.css
@@ -347060,10 +347060,6 @@ div[class^="ace_incorrect_hedy_code"] {
     margin-right: 4rem;
   }
 
-  .lg\:mt-0 {
-    margin-top: 0px;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -347137,6 +347133,11 @@ div[class^="ace_incorrect_hedy_code"] {
     padding-right: 0px;
   }
 
+  .lg\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -120234,17 +120234,18 @@ def note_with_error(value, err):
         tab.removeClass("not-selected-adv");
         tab.addClass("adv-selected");
         let tab_title = document.getElementById("adventure_name");
+        let level_adventure_title = document.getElementById("level_adventure_title");
         tab_title.textContent = tab.text().trim();
         const type = tab.data("type");
-        tab_title.classList.remove("border-green-300", "border-[#fdb2c5]", "border-blue-300", "border-blue-900");
+        level_adventure_title == null ? void 0 : level_adventure_title.classList.remove("border-green-300", "border-[#fdb2c5]", "border-blue-300", "border-blue-900");
         if (type == "teacher") {
-          tab_title.classList.add("border-green-300");
+          level_adventure_title == null ? void 0 : level_adventure_title.classList.add("border-green-300");
         } else if (type == "command") {
-          tab_title.classList.add("border-[#fdb2c5]");
+          level_adventure_title == null ? void 0 : level_adventure_title.classList.add("border-[#fdb2c5]");
         } else if (type == "special") {
-          tab_title.classList.add("border-blue-300");
+          level_adventure_title == null ? void 0 : level_adventure_title.classList.add("border-blue-300");
         } else {
-          tab_title.classList.add("border-blue-900");
+          level_adventure_title == null ? void 0 : level_adventure_title.classList.add("border-blue-900");
         }
         const previous = document.querySelector(`[data-level="${tab.data("level")}"][tabindex="${Number(tab.attr("tabindex")) - 1}"]`);
         if (previous) {

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/static/js/index-tabs.ts b/static/js/index-tabs.ts
@@ -104,17 +104,18 @@ export class IndexTabs {
       tab.removeClass('not-selected-adv')
       tab.addClass('adv-selected');
       let tab_title = document.getElementById('adventure_name')!
+      let level_adventure_title = document.getElementById('level_adventure_title')
       tab_title.textContent = tab.text().trim()
       const type = tab.data('type');
-      tab_title.classList.remove('border-green-300', 'border-[#fdb2c5]', 'border-blue-300', 'border-blue-900')
+      level_adventure_title?.classList.remove('border-green-300', 'border-[#fdb2c5]', 'border-blue-300', 'border-blue-900')
       if (type == 'teacher') {
-        tab_title.classList.add('border-green-300');
+        level_adventure_title?.classList.add('border-green-300');
       } else if(type == 'command') {
-        tab_title.classList.add('border-[#fdb2c5]')
+        level_adventure_title?.classList.add('border-[#fdb2c5]')
       } else if (type == 'special') {
-        tab_title.classList.add('border-blue-300')
+        level_adventure_title?.classList.add('border-blue-300')
       } else {
-        tab_title.classList.add('border-blue-900')
+        level_adventure_title?.classList.add('border-blue-900')
       }
 
       // Hide or show the next or previous level button in case we are in the first or last adventure

diff --git a/templates/hedy-page/level-page.html b/templates/hedy-page/level-page.html
@@ -27,7 +27,7 @@
     {% endif %}
   </div>
   <div class="flex flex-row gap-4">
-    <div class="flex flex-col md:flex-row border-b-2 border-blue-900 md:gap-2">
+    <div class="flex flex-col md:flex-row border-b-4 border-blue-900 md:gap-2" id="level_adventure_title">
       <div class="text-4xl font-light text-blue-800">
         {{ _('level_title') }} {{ level_nr }}
         {% if assignment_nr %} · {{ _('step_title') }} {{ assignment_nr }} {% endif %}