Merge pull request #113 from empowerplan/fix/wizard

Fix wizard
empowerplan · May 1, 2024 · b9ee1a0 · b9ee1a0
2 parents 9a29769 + eba86ed
commit b9ee1a0
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project tries to adhere to [Semantic Versioning](https://semver.org/spe
 - duplicate loading of JS modules due to missing module support in django staticfile storage
 - settlement 200m layer is coupled to settlement layer (de)-activation
 - basemap controls
+- top wizard layout
 
 ## [0.1.0] - 2024-03-19
 ### Added

diff --git a/digiplan/static/js/menu.js b/digiplan/static/js/menu.js
@@ -67,16 +67,32 @@ PubSub.subscribe(eventTopics.MENU_SCENARIOS_SELECTED, showEmpowerplanContent);
 PubSub.subscribe(eventTopics.MAP_VIEW_SELECTED, setResultsView);
 PubSub.subscribe(eventTopics.CHART_VIEW_SELECTED, setResultsView);
 
+function updateWizardStyles(activeTabIndex) {
+  const lines = document.querySelectorAll('.wizard__line');
+  const steps = document.querySelectorAll('.wizard__list-item');
+  lines.forEach(line => line.classList.remove('active-line'));
+  steps.forEach(step => step.querySelector('.wizard__list-number').classList.remove('completed'));
+  for (let i = 0; i < activeTabIndex - 1; i++) {
+    if (lines[i]) {
+      lines[i].classList.add('active-line');
+    }
+    steps[i].querySelector('.wizard__list-number').classList.add('completed');
+  }
+}
+
 function nextMenuTab() {
   const currentTab = getCurrentMenuTab();
   currentTab.classList.toggle("active");
   const tabIndex = parseInt(currentTab.id.slice(6, 7));
   const currentStep = `step_${tabIndex}_${menuTabs[tabIndex - 1].name}`;
   document.getElementById(currentStep).classList.toggle("active");
+  document.getElementById(currentStep).removeAttribute('aria-current', 'step');
   const nextPanel = `panel_${tabIndex + 1}_${menuTabs[tabIndex].name}`;
   const nextStep = `step_${tabIndex + 1}_${menuTabs[tabIndex].name}`;
   document.getElementById(nextPanel).classList.toggle("active");
   document.getElementById(nextStep).classList.toggle("active");
+  document.getElementById(nextStep).setAttribute('aria-current', 'step');
+  updateWizardStyles(tabIndex + 1);
   PubSub.publish(menuTabs[tabIndex].event);
   toggleMenuButtons(tabIndex);
 }
@@ -87,10 +103,13 @@ function previousMenuTab() {
   const tabIndex = parseInt(currentTab.id.slice(6, 7));
   const currentStep = `step_${tabIndex}_${menuTabs[tabIndex - 1].name}`;
   document.getElementById(currentStep).classList.toggle("active");
+  document.getElementById(currentStep).removeAttribute('aria-current', 'step');
   const nextPanel = `panel_${tabIndex - 1}_${menuTabs[tabIndex - 2].name}`;
   const nextStep = `step_${tabIndex - 1}_${menuTabs[tabIndex - 2].name}`;
   document.getElementById(nextPanel).classList.toggle("active");
   document.getElementById(nextStep).classList.toggle("active");
+  document.getElementById(nextStep).setAttribute('aria-current', 'step');
+  updateWizardStyles(tabIndex - 1);
   PubSub.publish(menuTabs[tabIndex - 2].event);
   toggleMenuButtons(tabIndex - 2);
 }

diff --git a/digiplan/static/scss/components/_wizard.scss b/digiplan/static/scss/components/_wizard.scss
@@ -4,6 +4,7 @@
   height: $wizard-height;
   box-shadow: $box-shadow-sm;
   z-index: 1000;
+  @include user-select-none;
 
   &__wrap {
     @extend .container-fluid;
@@ -41,12 +42,14 @@
   }
 
   &__main {
+    @extend .px-3;
     flex: 1;
   }
 
   &__list {
     @extend .d-flex;
     @extend .justify-content-between;
+    @extend .align-items-center;
     @extend .p-0;
     @extend .m-0;
     @extend .border-0;
@@ -66,11 +69,26 @@
         @extend .rounded-circle;
         @extend .text-center;
         @extend .bg-white;
+        @extend .text-secondary;
         width: 1.5rem;
         height: 1.5rem;
         border: 1px solid $gray-600;
         font-size: $font-size-small;
         z-index: 2000;
+
+        &+ .wizard__list-text {
+          @extend .text-secondary;
+        }
+
+        &.completed {
+          @extend .border-primary;
+          @extend .text-primary;
+          @extend .fw-bold;
+        }
+
+        &.completed + .wizard__list-text {
+          @extend .text-primary;
+        }
       }
 
       .wizard__list-text {
@@ -86,27 +104,41 @@
           @extend .text-white;
           @extend .border-primary;
           @extend .fw-bold;
+
+          &+ .wizard__list-text {
+            @extend .text-primary;
+          }
         }
       }
     }
   }
 
+  &__line {
+    @extend .w-100;
+    height: 4px;
+    background-color: $gray-200;
+
+    &.active-line {
+      @extend .bg-primary;
+    }
+  }
+
   @include media-breakpoint-up(md) {
+    &__main {
+      padding-left: 5rem !important;
+      padding-right: 5rem !important;
+      max-width: 80rem;
+    }
+
     .wizard__list {
       .wizard__list-item {
         .wizard__list-text {
           display: block;
-          font-size: $font-size-small;
-        }
-
-        &:not(:last-child)::after {
-          content: '';
           position: absolute;
-          top: 34%;
-          right: 0;
-          transform: translate(51%, -50%);
-          width: 100%;
-          border-top: 4px solid $gray-200;
+          top: 2rem;
+          font-size: $font-size-small;
+          text-align: center;
+          white-space: nowrap;
         }
       }
     }

diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html
@@ -67,7 +67,36 @@
             <span>Zurück</span>
           </button>
         </div>
-        <div class="wizard__main">
+        <div class="wizard__main" role="navigation" aria-label="Schritte">
+          <div class="wizard__list" role="list" >
+            <div id="step_1_challenges" class="wizard__list-item active" role="listitem" aria-current="step" aria-label="Schritt 1: Start">
+              <span class="wizard__list-number">1</span>
+              <span class="wizard__list-text">Start</span>
+            </div>
+            <div aria-hidden="true" class="wizard__line"></div>
+            <div id="step_2_today" class="wizard__list-item" role="listitem" aria-label="Schritt 2: Region heute">
+              <span class="wizard__list-number">2</span>
+              <span class="wizard__list-text">Region heute</span>
+            </div>
+            <div aria-hidden="true" class="wizard__line"></div>
+            <div id="step_3_scenarios" class="wizard__list-item" role="listitem" aria-label="Schritt 3: Szenarien">
+              <span class="wizard__list-number">3</span>
+              <span class="wizard__list-text">Szenarien</span>
+            </div>
+            <div aria-hidden="true" class="wizard__line"></div>
+            <div id="step_4_settings" class="wizard__list-item" role="listitem" aria-label="Schritt 4: Einstellungen">
+              <span class="wizard__list-number">4</span>
+              <span class="wizard__list-text">Einstellungen</span>
+            </div>
+            <div aria-hidden="true" class="wizard__line"></div>
+            <div id="step_5_results" class="wizard__list-item" role="listitem" aria-label="Schritt 5: Ergebnisse">
+              <span class="wizard__list-number">5</span>
+              <span class="wizard__list-text">Ergebnisse</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="wizard__main">
           <ul class="wizard__list nav nav-tabs" role="tablist">
             <li id="step_1_challenges" class="wizard__list-item active" role="presentation">
               <span class="wizard__list-number">1</span>
@@ -90,7 +119,7 @@
               <span class="wizard__list-text">Ergebnisse</span>
             </li>
           </ul>
-        </div>
+        </div> -->
         <div class="wizard__next">
           <button type="button" id="menu_next_btn" class="button button--secondary">
             <span>Weiter</span>