Report view uses vertical stepper

webapp/src/components/DFCode.vue

@@ -43,6 +43,7 @@ code {
   border-radius: 0.25rem;
   display: block;
   margin-top: 0.5rem;
+  overflow-x: scroll;
 }
 
 .copy-button {

webapp/src/components/OSMTagSelector.vue

@@ -1,54 +1,56 @@
 <template>
-  <v-row style="align-items: center; margin-top: 1.25rem;">
-    <v-col cols="12" sm="6">
-      <h2 class="text-center mb-4">Choose Brand</h2>
-      <v-row>
-        <v-col v-for="brand in alprBrands" :key="brand.wikidata" cols="6">
-          <v-card
-            @click="selectedBrand = brand"
-            class="text-center"
-            :class="{ selected: selectedBrand.wikidata === brand.wikidata }"
-            :image="brand.exampleImage"
-            min-height="180"
-          >
-            <v-card-title class="overlay">{{ brand.nickname }}</v-card-title>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-col>
+  <v-row class="align-center justify-center my-4">
+      <v-col cols="12" sm="6">
+        <v-select
+          color="rgb(18, 151, 195)"
+          prepend-inner-icon="mdi-factory"
+          v-model="selectedBrand"
+          :items="alprBrands"
+          item-title="nickname"
+          return-object
+          label="Manufacturer"
+          variant="solo-filled"
+          flat
+          hide-details
+        ></v-select>
+        <v-img
+          v-if="selectedBrand"
+          :src="selectedBrand.exampleImage"
+          :alt="selectedBrand.nickname"
+          max-width="100%"
+          class="my-4"
+        ></v-img>
+      </v-col>
+    
+      <v-col cols="12" sm="6">
+        <h3 class="text-center serif">Tags to Copy</h3>
+        <DFCode>
+          man_made=surveillance<br>
+          surveillance:type=ALPR<br>
+          camera:mount=pole<br>
+          camera:type=fixed<br>
+          surveillance=public<br>
+          surveillance:zone=traffic<br>
+          manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
+          manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
+        </DFCode>
 
-    <v-col cols="12" sm="6">
-      <h3 class="text-center">{{ selectedBrand.nickname }}</h3>
-      <DFCode>
-        man_made=surveillance<br>
-        surveillance:type=ALPR<br>
-        camera:mount=pole<br>
-        camera:type=fixed<br>
-        surveillance=public<br>
-        surveillance:zone=traffic<br>
-        manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
-        manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
-      </DFCode>
+        <h5 class="text-center mt-4 serif">and if operator is known</h5>
+        <DFCode>
+          operator=<span class="highlight">(Police Dept/Owner)</span><br>
+          operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
+        </DFCode>
 
-      <h5 class="text-center mt-4">and if operator is known</h5>
-      <DFCode>
-        operator=<span class="highlight">(Police Dept/Owner)</span><br>
-        operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
-      </DFCode>
-
-      <v-alert
-        v-if="selectedBrand.nickname === 'Other'"
-        class="mt-4"
-        variant="tonal"
-        type="warning"
-        icon="mdi-information"
-        title="Missing a brand?"
-      >
-        Please let us know by <a href="/contact">contacting us</a> or by <a href="https://github.com/frillweeman/deflock" target="_blank">contributing</a> to the project.
-      </v-alert>
-    </v-col>
-
-  </v-row>
+        <v-alert
+          v-if="selectedBrand.nickname === 'Other'"
+          class="mt-4"
+          variant="tonal"
+          type="info"
+        >
+          Please provide additional details about the ALPR.
+        </v-alert>
+      </v-col>
+    </v-row>
 </template>
 
 <script setup lang="ts">
@@ -65,27 +67,26 @@ const alprBrands: WikidataItem[] = [
   },
   {
     name: 'Motorola Solutions',
-    nickname: 'Motorola',
+    nickname: 'Motorola/Vigilant',
     wikidata: 'Q634815',
     exampleImage: '/vigilant-1.jpg',
   },
+  {
+    name: 'Leonardo',
+    nickname: 'Leonardo/ELSAG',
+    wikidata: 'Q910379',
+    exampleImage: '/elsag.webp',
+  },
   {
     name: 'Neology, Inc.',
     nickname: 'Neology',
     wikidata: 'Q130958232',
     exampleImage: '/neology-1.jpg',
   },
-  {
-    name: 'Leonardo',
-    nickname: 'Leonardo',
-    wikidata: 'Q910379',
-    exampleImage: '/elsag.webp',
-  },
   {
     name: '(brand goes here)',
     nickname: 'Other',
     wikidata: '(wikidata goes here)',
-    exampleImage: '/other-1.jpeg',
   }
 ];
 const selectedBrand: Ref<WikidataItem> = ref(alprBrands[0]);