Webapp Polishing

webapp/src/App.vue

@@ -18,7 +18,7 @@ export default defineComponent({
 <style>
 /* Show it is fixed to the top */
 body {
-    min-height: 75rem;
+    padding-bottom: 1rem;
     padding-top: 4.5rem;
 }
 </style>

webapp/src/components/CardElement.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['card', addSpace ? 'mt-5' : '']">
+    <div :class="['card', table ? 'card-table' : '', addSpace ? 'mt-5' : '']">
         <div :class="['card-header', textVariant]">{{ text }}</div>
         <div :class="['card-body', 'card-text', centerContent ? 'text-center' : '']">
             <slot />
@@ -14,6 +14,7 @@ export default defineComponent({
     props: {
         text: String,
         textVariant: String,
+        table: Boolean,
         addSpace: Boolean,
         centerContent: Boolean,
     },

webapp/src/components/FirmwareInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/FormFooter.vue

@@ -7,3 +7,9 @@
         <button type="submit" class="btn btn-primary">{{ $t('base.Save') }}</button>
     </div>
 </template>
+
+<script lang="ts">
+export default {
+    emits: ['reload'],
+};
+</script>

webapp/src/components/GridProfile.vue

@@ -19,7 +19,11 @@
         </table>
 
         <div class="accordion" id="accordionProfile">
-            <div class="accordion-item" v-for="(section, index) in gridProfileList.sections" :key="index">
+            <div
+                class="accordion-item accordion-table"
+                v-for="(section, index) in gridProfileList.sections"
+                :key="index"
+            >
                 <h2 class="accordion-header">
                     <button
                         class="accordion-button collapsed"

webapp/src/components/HardwareInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/HeapDetails.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/InterfaceApInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary">
+    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/InterfaceNetworkInfo.vue

@@ -2,6 +2,7 @@
     <CardElement
         :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
         textVariant="text-bg-primary"
+        table
     >
         <div class="table-responsive">
             <table class="table table-hover table-condensed">

webapp/src/components/InverterChannelInfo.vue

@@ -1,11 +1,10 @@
 <template>
     <div
-        class="card"
+        class="card card-table"
         :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') }}
@@ -21,12 +20,12 @@
         </div>
 
         <div class="table-responsive">
-            <table class="table table-striped table-hover" style="margin: 0">
+            <table class="table table-striped table-hover">
                 <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">
+                            <td class="value">
                                 {{
                                     $n(property.v, 'decimal', {
                                         minimumFractionDigits: property.d,

webapp/src/components/MemoryInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>

webapp/src/components/PinInfo.vue

@@ -1,40 +1,36 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary">
-        <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">

webapp/src/components/RadioInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/TaskDetails.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/WifiApInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/WifiStationInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>