Feature/use cases

digiplan/static/scss/app.scss

@@ -7,7 +7,9 @@
 @import 'base/variables';
 @import 'base/fonts';
 @import 'base/mixins';
+@import 'base/animations';
 
+@import 'components/accordions';
 @import 'components/buttons';
 @import 'components/carousel';
 @import 'components/charts';

digiplan/static/scss/base/_animations.scss

@@ -0,0 +1,14 @@
+.animate-icon-right svg {
+  @extend .me-1;
+  transform: translateX(0);
+  transition: transform 0.3s ease;
+}
+
+.animate-icon-right:hover svg {
+  transform: translateX(8px);
+}
+
+.rotate-90 {
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease-in-out;
+}

digiplan/static/scss/base/_variable_overrides.scss

@@ -424,6 +424,7 @@ $navbar-light-toggler-border-color: none;
 // Accordion
 
 // scss-docs-start accordion-variables
+$accordion-border-radius: 0;
 // scss-docs-end accordion-variables
 
 // Tooltips

digiplan/static/scss/components/_accordions.scss

@@ -0,0 +1,46 @@
+.panel-accordion {
+  @extend .accordion;
+  @extend .accordion-flush;
+
+  &__item {
+    @extend .accordion-item;
+  }
+
+  &__header {
+    @extend .accordion-header;
+
+    button {
+      @extend .fw-semibold;
+      @extend .fs-7;
+      padding-top: 0.75rem !important;
+      padding-bottom: 0.75rem !important;
+      color: $epp-color-blue;
+      background-color: #EDF1FD;
+      border-bottom: 1px solid $epp-color-blue;
+
+      &:not(.collapsed) {
+        color: $epp-color-blue;
+        background-color: #EDF1FD;
+      }
+
+      &::after {
+        display: none;
+      }
+
+      svg {
+        @extend .me-1;
+        transition: transform 0.3s ease-in-out;
+      }
+    }
+  }
+
+  &__body {
+    @extend .accordion-body;
+    @extend .border-bottom;
+
+    button {
+      @extend .fs-7;
+      @extend .fw-semibold;
+    }
+  }
+}

digiplan/templates/components/panel_4_settings.html

@@ -1,5 +1,37 @@
 {% load static i18n %}
 
+<div class="panel-accordion" id="useCasesAccordion">
+  <div class="panel-accordion__item">
+    <h2 class="panel-accordion__header" id="useCasesHeading">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#useCasesCollapse" aria-expanded="false" aria-controls="useCasesCollapse">
+        <svg width="14" height="14" fill="currentColor" version="1.1" viewBox="0 0 16.933 16.936" xmlns="http://www.w3.org/2000/svg">
+          <path d="m6.1387 0.1875-1.4961 1.4961 6.7832 6.7832-6.7832 6.7832 1.4961 1.4961 8.2793-8.2793z">
+         </svg>
+        {% translate "Schnelleinstieg nach Anwendungsfall" %}
+      </button>
+    </h2>
+    <div id="useCasesCollapse" class="accordion-collapse collapse" aria-labelledby="useCasesHeading" data-bs-parent="#useCasesAccordion">
+      <div class="panel-accordion__body">
+        <div>
+          <button type="button" class="btn btn-link animate-icon-right" id="pv_intro_button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
+              <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
+            </svg>
+            {% translate "PV-Freiflächen finden" %}
+          </button>
+        </div>
+        <div>
+          <button type="button" class="btn btn-link animate-icon-right" id="wind_intro_button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
+              <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/>
+            </svg>
+            {% translate "Windflächen finden" %}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="panel__settings">
   <div class="panel-item">
     <h2 class="panel-item__heading">
@@ -51,3 +83,18 @@ <h2 class="panel-item__heading">
     </div>
   </div>
 </div>
+
+<script>
+  const useCasesHeading = document.querySelector('#useCasesHeading svg');
+  const useCasesCollapse = document.getElementById('useCasesCollapse');
+
+  useCasesCollapse.addEventListener('show.bs.collapse', function () {
+    useCasesHeading.classList.add('rotate-90');
+  });
+
+  useCasesCollapse.addEventListener('hide.bs.collapse', function () {
+    useCasesHeading.classList.remove('rotate-90');
+  });
+</script>
+<script src="{% static 'vendors/shepherd/shepherd.min.js' %}" type="text/javascript"></script>
+<script src="{% static 'js/tours.js' %}" type="text/javascript"></script>

digiplan/templates/map.html

@@ -159,7 +159,7 @@
     <script src="{% static 'django_mapengine/js/basemaps.js' %}" type="text/javascript"></script>
     {% if not debug %}
       <script src="{% static 'vendors/shepherd/shepherd.min.js' %}" type="text/javascript"></script>
-      <script src="{% static 'js/intro_tour.js' %}" type="text/javascript"></script>
+      <script src="{% static 'js/tours.js' %}" type="text/javascript"></script>
     {% endif %}
     <script src="{% static 'js/state.js' %}" type="text/javascript"></script>
     <script src="{% static 'js/charts.js' %}" type="text/javascript"></script>