fix: mobile layout

Author: d-koppenhagen

src/components/AddressList.vue

@@ -83,7 +83,10 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="address in filteredAndSortedAddresses" :key="address.id">
+        <tr
+          v-for="address in filteredAndSortedAddresses"
+          :key="address.id + address.lat + address.lon"
+        >
           <td
             :style="{
               background:
@@ -203,41 +206,43 @@ function sortBy(key: SortKey) {
 
 // Filter and sort addresses based on the search query and selected sort column
 const filteredAndSortedAddresses = computed(() => {
-  return (
-    [...addressStore.addresses]
-      // filter by category
-      .filter((address) => {
-        if (selectedIsophoneFilterIndex.value === 'all') {
-          return true
-        }
-
-        return (
-          address.isophoneLevelDay === selectedIsophoneFilterIndex.value.day ||
-          address.isophoneLevelNight === selectedIsophoneFilterIndex.value.night
-        )
-      })
-      // filter by test input
-      .filter((address) => {
-        const searchLower = searchQuery.value.toLowerCase()
-        return (
-          [address.street, address.housenumber, address.postcode, address.city]
-            .join(' ')
-            .toLowerCase()
-            .includes(searchLower) ||
-          address.postcode?.toString().includes(searchLower) ||
-          address.street?.toLowerCase().includes(searchLower) ||
-          address.city?.toLowerCase().includes(searchLower)
-        )
-      })
-      .sort((a, b) => {
-        const aValue = a[sortKey.value] || ''
-        const bValue = b[sortKey.value] || ''
-
-        if (aValue < bValue) return sortDirection.value === 'asc' ? -1 : 1
-        if (aValue > bValue) return sortDirection.value === 'asc' ? 1 : -1
-        return 0
-      })
-  )
+  const filteredAndSortedResult = [...addressStore.addresses]
+    // filter by category
+    .filter((address) => {
+      if (selectedIsophoneFilterIndex.value === 'all') {
+        return true
+      }
+
+      return (
+        address.isophoneLevelDay === selectedIsophoneFilterIndex.value.day ||
+        address.isophoneLevelNight === selectedIsophoneFilterIndex.value.night
+      )
+    })
+  // filter by test input
+  /*.filter((address) => {
+    const searchLower = searchQuery.value.toLowerCase()
+    return (
+      [address.street, address.housenumber, address.postcode, address.city]
+        .join(' ')
+        .toLowerCase()
+        .includes(searchLower) ||
+      address.postcode?.toString().includes(searchLower) ||
+      address.street?.toLowerCase().includes(searchLower) ||
+      address.city?.toLowerCase().includes(searchLower)
+    )
+  })
+  .sort((a, b) => {
+    const aValue = a[sortKey.value] || ''
+    const bValue = b[sortKey.value] || ''
+
+    if (aValue < bValue) return sortDirection.value === 'asc' ? -1 : 1
+    if (aValue > bValue) return sortDirection.value === 'asc' ? 1 : -1
+    return 0
+  })
+)*/
+
+  console.log(filteredAndSortedResult)
+  return filteredAndSortedResult
 })
 
 function informPeople() {

src/components/MachineWizard.vue

@@ -44,4 +44,8 @@ const { calculateIsophones, setStep } = constructionSiteStore
 .wrapper {
   padding: 0 1rem;
 }
+
+h2 {
+  margin-bottom: 0;
+}
 </style>

src/components/ProgressBar.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 const { numSteps, current } = defineProps<{ numSteps: number; current: number }>()
-const emit = defineEmits(["select"])
+const emit = defineEmits(['select'])
 
 const steps = computed(() => Array.from({ length: numSteps }, (_, i) => i + 1))
 
@@ -11,7 +11,14 @@ const active = computed(() => (index: number) => (current === index ? 'active' :
 
 <template>
   <div id="progress">
-    <button v-for="index in steps" :key="index" :class="active(index)" @click="emit('select', index)">{{ index }}</button>
+    <button
+      v-for="index in steps"
+      :key="index"
+      :class="active(index)"
+      @click="emit('select', index)"
+    >
+      {{ index }}
+    </button>
   </div>
 </template>
 
@@ -40,4 +47,15 @@ button.active {
   border-color: #115270;
   cursor: not-allowed;
 }
+
+#progress {
+  text-align: center;
+}
+
+/* Layout für Desktop */
+@media (min-width: 768px) {
+  #progress {
+    text-align: left;
+  }
+}
 </style>

src/components/TheMap.vue

@@ -3,7 +3,7 @@
     ref="mapRef"
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height: 100%; max-width: calc(100vw - 3rem)"
+    style="height: 100%"
     @pointermove="hoverFeature"
   >
     <ol-view ref="view" :center="viewCenter" :zoom="zoom" projection="EPSG:3857" />
@@ -187,3 +187,16 @@ function setPosition(event: DrawEvent) {
   setConstructionSiteCenter(position)
 }
 </script>
+
+<style scoped>
+.ol-map {
+  max-width: 100vw;
+}
+
+/* Layout für Desktop */
+@media (min-width: 768px) {
+  .ol-map {
+    max-width: calc(100vw - 3rem);
+  }
+}
+</style>

src/views/HomeView.vue

@@ -19,7 +19,7 @@ const timeOfDay = computed<TimeOfDay>(() => (time.value ? 'night' : 'day'))
 <template>
   <div class="base-layout">
     <main>
-      <div>
+      <div class="day-night">
         <label data-icon-before="day" data-icon-variant-before="20-outline" id="day-label"
           >Tagzeitraum</label
         >
@@ -54,6 +54,7 @@ const timeOfDay = computed<TimeOfDay>(() => (time.value ? 'night' : 'day'))
   grid-column-gap: 0px;
   grid-row-gap: 0px;
   gap: 1rem;
+  grid-template-rows: auto 1fr;
   grid-template-areas:
     'aside'
     'main';
@@ -75,6 +76,10 @@ main {
   flex-direction: column;
 }
 
+.day-night {
+  margin: 0.5rem 1rem;
+}
+
 #day-label {
   position: relative;
   top: -0.3rem;
@@ -91,6 +96,7 @@ main {
   .base-layout {
     grid-template-columns: minmax(min-content, 50vw) 1fr;
     grid-template-areas: 'aside main';
+    grid-template-rows: 1fr;
   }
 }
 </style>