From 71f312d8309f6b27780ebc85360cadd055b21f88 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 20:15:03 +0100
Subject: [PATCH] webapp: show pin mapping categories as cards

on a desktop browser, this approach allows to display all categories at
once. we also increase readability as the values are much closer to
their label. previously, the values were far to the right of the screen
and it was unpleasent to read which value belonged to which setting. the
grouping of values per category was also not very well conceived.

by using cards, we also avoid some styling issues, namely the use of
rowspan, which caused a spurious table cell border at the end of the old
table layout.
---
 lang/es.lang.json                 |  1 -
 lang/it.lang.json                 |  1 -
 webapp/src/components/PinInfo.vue | 66 +++++++++++++++----------------
 webapp/src/locales/de.json        |  1 -
 webapp/src/locales/en.json        |  1 -
 webapp/src/locales/fr.json        |  1 -
 6 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/lang/es.lang.json b/lang/es.lang.json
index 1f63a54..629b979 100644
--- a/lang/es.lang.json
+++ b/lang/es.lang.json
@@ -673,7 +673,6 @@
             "LedBrightness": "Brillo del LED {led} ({brightness})"
         },
         "pininfo": {
-            "PinOverview": "Resumen de Conexiones",
             "Category": "Categoría",
             "Name": "Nombre",
             "Number": "Número",
diff --git a/lang/it.lang.json b/lang/it.lang.json
index 3a0ba1d..eaafda6 100644
--- a/lang/it.lang.json
+++ b/lang/it.lang.json
@@ -673,7 +673,6 @@
             "LedBrightness": "LED {led}, Luminosità ({brightness})"
         },
         "pininfo": {
-            "PinOverview": "Panoramica della Connessione",
             "Category": "Categoria",
             "Name": "Nome",
             "Number": "Numero",
diff --git a/webapp/src/components/PinInfo.vue b/webapp/src/components/PinInfo.vue
index ee9359e..03dcfbb 100644
--- a/webapp/src/components/PinInfo.vue
+++ b/webapp/src/components/PinInfo.vue
@@ -1,40 +1,36 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
-        <div class="table-responsive">
-            <table class="table table-hover table-condensed">
-                <thead>
-                    <tr>
-                        <th>{{ $t('pininfo.Category') }}</th>
-                        <th>{{ $t('pininfo.Name') }}</th>
-                        <th>{{ $t('pininfo.ValueSelected') }}</th>
-                        <th>{{ $t('pininfo.ValueActive') }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <template v-for="category in categories" :key="category">
-                        <tr v-for="(prop, prop_idx) in properties(category)" :key="prop">
-                            <td v-if="prop_idx == 0" :rowspan="properties(category).length">
-                                {{ capitalizeFirstLetter(category) }}
-                            </td>
-                            <td :class="{ 'table-danger': !isEqual(category, prop) }">
-                                {{ prop }}
-                            </td>
-                            <td>
-                                <template v-if="selectedPinAssignment && category in selectedPinAssignment">
-                                    {{ (selectedPinAssignment as any)[category][prop] }}</template
-                                >
-                            </td>
-                            <td>
-                                <template v-if="currentPinAssignment && category in currentPinAssignment">
-                                    {{ (currentPinAssignment as any)[category][prop] }}</template
-                                >
-                            </td>
-                        </tr>
-                    </template>
-                </tbody>
-            </table>
+    <div class="row flex-row flex-wrap g-3">
+        <div class="col" v-for="category in categories" :key="category">
+            <CardElement :text="capitalizeFirstLetter(category)" textVariant="text-bg-primary" table>
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>{{ $t('pininfo.Name') }}</th>
+                                <th class="text-center">{{ $t('pininfo.ValueSelected') }}</th>
+                                <th class="text-center">{{ $t('pininfo.ValueActive') }}</th>
+                            </tr>
+                            <tr v-for="(prop, prop_idx) in properties(category)" :key="prop_idx">
+                                <td :class="{ 'table-danger': !isEqual(category, prop) }">
+                                    {{ prop }}
+                                </td>
+                                <td class="text-center">
+                                    <template v-if="selectedPinAssignment && category in selectedPinAssignment">
+                                        {{ (selectedPinAssignment as any)[category][prop] }}</template
+                                    >
+                                </td>
+                                <td class="text-center">
+                                    <template v-if="currentPinAssignment && category in currentPinAssignment">
+                                        {{ (currentPinAssignment as any)[category][prop] }}</template
+                                    >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </CardElement>
         </div>
-    </CardElement>
+    </div>
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index a17b46d..e7890a9 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -663,7 +663,6 @@
         "LedBrightness": "LED {led} Helligkeit ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Anschlussübersicht",
         "Category": "Kategorie",
         "Name": "Name",
         "ValueSelected": "Ausgewählt",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 6fdf1d0..71c72ef 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -663,7 +663,6 @@
         "LedBrightness": "LED {led} brightness ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Connection overview",
         "Category": "Category",
         "Name": "Name",
         "Number": "Number",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 6b1a202..40b2f2c 100644
--- a/webapp/src/locales/fr.json
+++ b/webapp/src/locales/fr.json
@@ -645,7 +645,6 @@
         "LedBrightness": "LED {led} luminosité ({brightness})"
     },
     "pininfo": {
-        "PinOverview": "Vue d'ensemble des connexions",
         "Category": "Catégorie",
         "Name": "Nom",
         "ValueSelected": "Sélectionné",