From 3e212e3cb0de48d5c92b66925548eb1e8f6522c6 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Wed, 1 May 2024 15:54:04 +0100
Subject: [PATCH 1/4] fix wizard by changing list structure

---
 digiplan/static/js/menu.js                   |  4 +++
 digiplan/static/scss/components/_wizard.scss | 28 +++++++++++------
 digiplan/templates/map.html                  | 33 ++++++++++++++++++--
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/digiplan/static/js/menu.js b/digiplan/static/js/menu.js
index 4a4a7490..24f99e39 100644
--- a/digiplan/static/js/menu.js
+++ b/digiplan/static/js/menu.js
@@ -73,10 +73,12 @@ function nextMenuTab() {
   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');
   PubSub.publish(menuTabs[tabIndex].event);
   toggleMenuButtons(tabIndex);
 }
@@ -87,10 +89,12 @@ 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');
   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
index 1033da21..c7984de0 100644
--- a/digiplan/static/scss/components/_wizard.scss
+++ b/digiplan/static/scss/components/_wizard.scss
@@ -41,12 +41,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;
@@ -91,22 +93,28 @@
     }
   }
 
+  &__line {
+    @extend .w-100;
+    height: 4px;
+    background-color: $gray-200;
+  }
+
   @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
index 8ed39d56..2112d50d 100644
--- 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>

From 9dd2f60cd8019a4af8bd4932f9983647d1d9d144 Mon Sep 17 00:00:00 2001
From: Bryan Lancien <bryanlancien.ui@gmail.com>
Date: Wed, 1 May 2024 16:27:28 +0100
Subject: [PATCH 2/4] add visual cue to wizard current step to improve user
 experience

---
 digiplan/static/js/menu.js                   | 15 ++++++++++++
 digiplan/static/scss/components/_wizard.scss | 24 ++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/digiplan/static/js/menu.js b/digiplan/static/js/menu.js
index 24f99e39..f213c706 100644
--- a/digiplan/static/js/menu.js
+++ b/digiplan/static/js/menu.js
@@ -67,6 +67,19 @@ 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");
@@ -79,6 +92,7 @@ function nextMenuTab() {
   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);
 }
@@ -95,6 +109,7 @@ function previousMenuTab() {
   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
index c7984de0..412b9901 100644
--- 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;
@@ -68,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 {
@@ -88,6 +104,10 @@
           @extend .text-white;
           @extend .border-primary;
           @extend .fw-bold;
+
+          &+ .wizard__list-text {
+            @extend .text-primary;
+          }
         }
       }
     }
@@ -97,6 +117,10 @@
     @extend .w-100;
     height: 4px;
     background-color: $gray-200;
+
+    &.active-line {
+      @extend .bg-primary;
+    }
   }
 
   @include media-breakpoint-up(md) {

From 695be00451956d13256c324c6b4e3001d5088913 Mon Sep 17 00:00:00 2001
From: nesnoj <jonathan.amme@rl-institut.de>
Date: Wed, 1 May 2024 21:44:17 +0200
Subject: [PATCH 3/4] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2b47c7d..aa53c1dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,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

From eba86ed82f5ba8a787e57456c752b77c6fdaf159 Mon Sep 17 00:00:00 2001
From: nesnoj <jonathan.amme@rl-institut.de>
Date: Wed, 1 May 2024 21:47:58 +0200
Subject: [PATCH 4/4] Make lint happy

---
 digiplan/static/scss/components/_wizard.scss | 2 +-
 digiplan/templates/map.html                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/digiplan/static/scss/components/_wizard.scss b/digiplan/static/scss/components/_wizard.scss
index 412b9901..4fe76abf 100644
--- a/digiplan/static/scss/components/_wizard.scss
+++ b/digiplan/static/scss/components/_wizard.scss
@@ -129,7 +129,7 @@
       padding-right: 5rem !important;
       max-width: 80rem;
     }
-    
+
     .wizard__list {
       .wizard__list-item {
         .wizard__list-text {
diff --git a/digiplan/templates/map.html b/digiplan/templates/map.html
index 2112d50d..d2686dcf 100644
--- a/digiplan/templates/map.html
+++ b/digiplan/templates/map.html
@@ -95,7 +95,7 @@
             </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">