feat: improved design

src/App.vue

@@ -137,6 +137,7 @@ header.rea-header {
   flex-direction: row;
   align-items: center;
   margin-bottom: 0;
+  z-index: 1;
 }
 
 nav {

src/components/AddressList.vue

@@ -250,7 +250,6 @@ const filteredAndSortedAddresses = computed(() => {
   })
 )*/
 
-  console.log(filteredAndSortedResult)
   return filteredAndSortedResult
 })
 

src/components/DayNightSwitch.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const model = defineModel()
+</script>
+
+<template>
+  <div class="day-night">
+    <label data-icon-before="day" data-icon-variant-before="20-outline" id="day-label"
+      >Tagzeitraum</label
+    >
+    <input type="checkbox" role="switch" class="elm-toggle" id="day-night-toggle" v-model="model" />
+    <label
+      class="elm-label"
+      for="day-night-toggle"
+      id="night-label"
+      data-icon-before="night"
+      data-icon-variant-before="20-outline"
+      >Nachtzeitraum</label
+    >
+  </div>
+</template>
+
+<style scoped>
+.day-night {
+  margin: 0.5rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  background-color: white;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 10px;
+}
+
+#day-label {
+  position: relative;
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+#night-label {
+  margin-left: 0.5rem;
+}
+</style>

src/components/TheMap.vue

@@ -155,11 +155,9 @@ function hoverFeature(event: MapBrowserEvent<PointerEvent>) {
     layerFilter
   })
   const filteredFeatures = features.filter((feature) => {
-    console.log('layer', feature.getProperties().layer)
     return feature.getProperties().layer === 'Building'
   })
   highlightedFeatures.value = filteredFeatures[0] ? [filteredFeatures[0]] : []
-  console.log(highlightedFeatures.value)
 }
 
 const styleFunction = (feature: RenderFeature, style: Style) => {

src/stores/addressStore.ts

@@ -68,7 +68,6 @@ export const useAddressStore = defineStore('addressStore', {
           lat,
           'isophoneLevelNight'
         )
-        console.log({ dayMap: dayMapArray, nightMap: nightMapArray })
 
         this.addresses = [...dayMapArray, ...nightMapArray].filter(
           (addr) => addr.city && addr.postcode && addr.street

src/stores/constructionSiteStore.ts

@@ -42,7 +42,7 @@ export const useConstructionSiteStore = defineStore('constructionSiteStore', {
       this.currentStep = 3
       this.isophonesCalculated = true
 
-      console.log('DBG', { isophonesDay: this.isophonesDay, isophonesNight: this.isophonesNight })
+      console.log({ isophonesDay: this.isophonesDay, isophonesNight: this.isophonesNight })
     },
 
     setStep(step: number) {

src/styles.scss

@@ -19,10 +19,6 @@ h1 {
   display: inline-block;
 }
 
-main, aside {
-  padding-top: 1rem;
-}
-
 .sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */

src/views/HomeView.vue

@@ -6,6 +6,7 @@ import TheLegend from '../components/TheLegend.vue'
 import { useConstructionSiteStore } from '../stores/constructionSiteStore'
 import { storeToRefs } from 'pinia'
 import type { TimeOfDay } from '../services/Isophones'
+import DayNightSwitch from '../components/DayNightSwitch.vue'
 
 const constructionSiteStore = useConstructionSiteStore()
 const { currentStep } = storeToRefs(constructionSiteStore)
@@ -17,28 +18,9 @@ const timeOfDay = computed<TimeOfDay>(() => (time.value ? 'night' : 'day'))
 </script>
 
 <template>
-  <div class="base-layout">
+  <div class="base-layout" :class="'step-' + currentStep">
     <main>
-      <div class="day-night" v-if="currentStep === 3">
-        <label data-icon-before="day" data-icon-variant-before="20-outline" id="day-label"
-          >Tagzeitraum</label
-        >
-        <input
-          type="checkbox"
-          role="switch"
-          class="elm-toggle"
-          id="day-night-toggle"
-          v-model="time"
-        />
-        <label
-          class="elm-label"
-          for="day-night-toggle"
-          id="night-label"
-          data-icon-before="night"
-          data-icon-variant-before="20-outline"
-          >Nachtzeitraum</label
-        >
-      </div>
+      <DayNightSwitch v-if="currentStep === 3" v-model="time" />
       <TheMap :center="home" :time="timeOfDay"></TheMap>
       <TheLegend v-if="currentStep === 3" :time="timeOfDay" />
     </main>
@@ -61,34 +43,25 @@ const timeOfDay = computed<TimeOfDay>(() => (time.value ? 'night' : 'day'))
   height: calc(100% - 70px);
 }
 
+.base-layout.step-1 {
+  grid-template-rows: auto 1fr;
+}
+
 aside {
   grid-area: aside;
   overflow: auto;
   height: 100%;
   display: flex;
   flex-direction: column;
+  padding-top: 1rem;
 }
 
 main {
   grid-area: main;
   height: 100%;
   display: flex;
   flex-direction: column;
-}
-
-.day-night {
-  margin: 0.5rem 1rem;
-}
-
-#day-label {
   position: relative;
-  top: -0.3rem;
-  display: inline-block;
-  margin-right: 0.5rem;
-}
-
-#night-label {
-  margin-left: 0.5rem;
 }
 
 /* Layout für Desktop */
@@ -98,5 +71,9 @@ main {
     grid-template-areas: 'aside main';
     grid-template-rows: 1fr;
   }
+
+  .base-layout.step-1 {
+    grid-template-rows: 1fr;
+  }
 }
 </style>