feat: tweak design

OpenRail-Playground · Oct 2, 2024 · 023d8e8 · 023d8e8
1 parent 47909d3
commit 023d8e8
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 19 deletions.
diff --git a/src/components/AddressList.vue b/src/components/AddressList.vue
@@ -2,8 +2,12 @@
   <div>
     <div class="wrapper">
       <h2>Ergebnis</h2>
-      <div v-if="addressStore.loading">Loading...</div>
-      <div v-if="addressStore.error">Error: {{ addressStore.error }}</div>
+      <p>
+        Du kannst die Ergebnisse über die Suche bzw. den Filter für die Immissionsrichtwerte nach
+        AVV Baulärm eingrenzen.
+      </p>
+      <div v-if="addressStore.loading">Lade Daten...</div>
+      <div v-if="addressStore.error">Fehler: {{ addressStore.error }}</div>
 
       <div v-if="!addressStore.loading && addressStore.addresses.length">
         <div class="filter">
@@ -80,7 +84,6 @@
           <th @click="sortBy('postcode')" :class="getSortClass('postcode')">PLZ</th>
           <th @click="sortBy('city')" :class="getSortClass('city')">Ort</th>
           <th @click="sortBy('street')" :class="getSortClass('street')">Straße</th>
-          <th class="unsortable small numeric">Etagen</th>
         </tr>
       </thead>
       <tbody>
@@ -116,8 +119,14 @@
           </td>
           <td>{{ address.postcode }}</td>
           <td>{{ address.city }}</td>
-          <td>{{ address.street }} {{ address.housenumber }}</td>
-          <td class="small numeric">{{ address.levels }}</td>
+          <td>
+            {{ address.street }} {{ address.housenumber }}
+            <div v-if="address.levels">
+              <small
+                ><i>Ebenen: {{ address.levels }}</i></small
+              >
+            </div>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -313,7 +322,6 @@ td.isophone {
   color: white;
 }
 
-th.small,
 td.small {
   max-width: 70px;
 }
@@ -343,4 +351,15 @@ td.small {
 .select-classification {
   position: relative;
 }
+
+select {
+  max-width: 200px;
+}
+
+/* Layout für Desktop */
+@media (min-width: 460px) {
+  select {
+    max-width: unset;
+  }
+}
 </style>
diff --git a/src/components/MachineConfigurationList.vue b/src/components/MachineConfigurationList.vue
@@ -13,12 +13,18 @@ const { addMachine, updateMachine } = constructionSiteStore
     <thead>
       <tr>
         <th scope="col" data-icon-before="build" data-icon-variant-before="24-outline">Maschine</th>
-        <th scope="col" data-icon-before="day" data-icon-variant-before="24-outline">
-          Durchschn. Betriebs&shy;dauer
-        </th>
-        <th scope="col" data-icon-before="night" data-icon-variant-before="24-outline">
-          Durchschn. Betriebs&shy;dauer
-        </th>
+        <th
+          scope="col"
+          data-icon-before="day"
+          data-icon-variant-before="24-outline"
+          aria-label="Durchschn. Betriebs&shy;dauer Tag"
+        ></th>
+        <th
+          scope="col"
+          data-icon-before="night"
+          data-icon-variant-before="24-outline"
+          aria-label="Durchschn. Betriebs&shy;dauer Nacht"
+        ></th>
         <th scope="col"></th>
       </tr>
     </thead>
@@ -27,7 +33,7 @@ const { addMachine, updateMachine } = constructionSiteStore
         v-for="(machine, index) in machines"
         :key="index"
         :machine="machine"
-        @update="machine => updateMachine(index, machine)"
+        @update="(machine) => updateMachine(index, machine)"
       />
       <MachineConfigurationRow
         :machine="{ dayHours: 0, nightHours: 0, name: '' }"
@@ -40,8 +46,12 @@ const { addMachine, updateMachine } = constructionSiteStore
 <style scoped>
 th {
   vertical-align: bottom;
-  text-align: left;
+  text-align: center;
   padding: 0.125rem 0.25rem;
   font-size: 0.875rem;
 }
+
+th:first-of-type {
+  text-align: left;
+}
 </style>
diff --git a/src/components/MachineConfigurationRow.vue b/src/components/MachineConfigurationRow.vue
@@ -134,5 +134,17 @@ function validateAndFix(model: 'dayHours' | 'nightHours', max = 24) {
 td {
   text-align: left;
   padding: 0.125rem 0.25rem;
+  position: relative;
+}
+
+select {
+  max-width: 120px;
+}
+
+/* Layout für Desktop */
+@media (min-width: 460px) {
+  select {
+    max-width: unset;
+  }
 }
 </style>
diff --git a/src/components/MachineWizard.vue b/src/components/MachineWizard.vue
@@ -14,8 +14,17 @@ const { calculateIsophones, setStep } = constructionSiteStore
   <div class="wrapper">
     <ProgressBar :num-steps="3" :current="currentStep" @select="(index) => setStep(index)" />
 
-    <h2 v-if="currentStep === 1">Bitte die Position der Baustelle auf der Karte auswählen!</h2>
-    <h3 v-if="currentStep === 2">Bitte die auf der Baustelle verwendeten Maschinen auswählen!</h3>
+    <div v-if="currentStep === 1">
+      <h2>Position wählen</h2>
+      <p>Bitte wähle die Position der Baustelle auf der Karte aus!</p>
+    </div>
+    <div v-if="currentStep === 2">
+      <h2>Maschinen wählen</h2>
+      <p v-if="currentStep === 2">
+        Bitte wähle die auf der Baustelle verwendeten Maschinen aus und gib jeweils die
+        durchschnittliche Betriebsdauer für Tag bzw. Nacht (22:00 Uhr - 06:00 Uhr) an.
+      </p>
+    </div>
 
     <MachineConfigurationList v-if="currentStep === 2" />
 

diff --git a/src/components/ProgressBar.vue b/src/components/ProgressBar.vue
@@ -27,13 +27,13 @@ button {
   display: inline-flex;
   background: #55b9e6;
   border-radius: 50%;
-  width: 64px;
-  height: 64px;
+  width: 36px;
+  height: 36px;
   margin: 0 0.5rem 0.5rem;
   color: white;
   text-align: center;
   line-height: 0;
-  font-size: 40px;
+  font-size: 20px;
   border: 2px solid black;
   cursor: pointer;
   justify-content: center;
@@ -59,5 +59,11 @@ button.active {
   #progress {
     text-align: left;
   }
+
+  button {
+    width: 64px;
+    height: 64px;
+    font-size: 40px;
+  }
 }
 </style>