webapp: Reduce wasted horizontal space for better mobile UX

helgeerbe · Jan 18, 2024 · a7479d3 · a7479d3
1 parent 41f3955
commit a7479d3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 40 deletions.
diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
@@ -2,7 +2,7 @@
     <div class="card" :class="{
         'border-info': channelType == 'AC',
         'border-secondary': channelType == 'INV'
-    }">
+    }" style="overflow: hidden">
         <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
             {{ $t('inverterchannelinfo.General') }}
         </div>
@@ -16,32 +16,24 @@
             {{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }}
         </div>
 
-        <div class="card-body">
-            <div class="table-responsive">
-                <table class="table table-striped table-hover">
-                    <thead>
-                        <tr>
-                            <th scope="col">{{ $t('inverterchannelinfo.Property') }}</th>
-                            <th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th>
-                            <th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
-                            <template v-if="key != 'name' && property">
-                                <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
-                                <td style="text-align: right">
-                                    {{ $n(property.v, 'decimal', {
-                                        minimumFractionDigits: property.d,
-                                        maximumFractionDigits: property.d})
-                                    }}
-                                </td>
-                                <td>{{ property.u }}</td>
-                            </template>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+        <div class="table-responsive">
+            <table class="table table-striped table-hover" style="margin: 0">
+                <tbody>
+                    <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
+                        <template v-if="key != 'name' && property">
+                            <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
+                            <td style="text-align: right; padding-right: 0;">
+                                {{ $n(property.v, 'decimal', {
+                                    minimumFractionDigits: property.d,
+                                    maximumFractionDigits: property.d
+                                })
+                                }}
+                            </td>
+                            <td>{{ property.u }}</td>
+                        </template>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>

diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
@@ -317,10 +317,7 @@
     "inverterchannelinfo": {
         "String": "String {num}",
         "Phase": "Phase {num}",
-        "General": "Allgemein",
-        "Property": "Eigenschaft",
-        "Value": "Wert",
-        "Unit": "Einheit"
+        "General": "Allgemein"
     },
     "invertertotalinfo": {
         "TotalYieldTotal": "Gesamtertrag Insgesamt",

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
@@ -317,10 +317,7 @@
     "inverterchannelinfo": {
         "String": "String {num}",
         "Phase": "Phase {num}",
-        "General": "General",
-        "Property": "Property",
-        "Value": "Value",
-        "Unit": "Unit"
+        "General": "General"
     },
     "invertertotalinfo": {
         "TotalYieldTotal": "Total Yield Total",

diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
@@ -317,10 +317,7 @@
     "inverterchannelinfo": {
         "String": "Ligne {num}",
         "Phase": "Phase {num}",
-        "General": "General",
-        "Property": "Propriété",
-        "Value": "Valeur",
-        "Unit": "Unité"
+        "General": "General"
     },
     "invertertotalinfo": {
         "TotalYieldTotal": "Rendement total",
@@ -617,4 +614,4 @@
         "ValueSelected": "Sélectionné",
         "ValueActive": "Activé"
     }
-}
+}