From 43f760aa240503c6ff1555e29ae61861abadbe58 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 21:29:38 +0200
Subject: [PATCH] webapp: apply card-table class to info view cards

the cards in all information views still used a div.card-body around the
table, which added a margin on all sides of the table. to achieve a
unified look, these cards and tables now look the same as the inverter
channel cards.
---
 webapp/src/components/CardElement.vue          | 3 ++-
 webapp/src/components/FirmwareInfo.vue         | 2 +-
 webapp/src/components/HardwareInfo.vue         | 2 +-
 webapp/src/components/HeapDetails.vue          | 2 +-
 webapp/src/components/InterfaceApInfo.vue      | 2 +-
 webapp/src/components/InterfaceNetworkInfo.vue | 1 +
 webapp/src/components/MemoryInfo.vue           | 2 +-
 webapp/src/components/PinInfo.vue              | 2 +-
 webapp/src/components/RadioInfo.vue            | 2 +-
 webapp/src/components/TaskDetails.vue          | 2 +-
 webapp/src/components/WifiApInfo.vue           | 2 +-
 webapp/src/components/WifiStationInfo.vue      | 2 +-
 webapp/src/views/MqttInfoView.vue              | 6 +++---
 webapp/src/views/NtpInfoView.vue               | 4 ++--
 14 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/webapp/src/components/CardElement.vue b/webapp/src/components/CardElement.vue
index 0b067953..b7d7322c 100644
--- a/webapp/src/components/CardElement.vue
+++ b/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,
     },
diff --git a/webapp/src/components/FirmwareInfo.vue b/webapp/src/components/FirmwareInfo.vue
index 891fe2e0..033fe73f 100644
--- a/webapp/src/components/FirmwareInfo.vue
+++ b/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>
diff --git a/webapp/src/components/HardwareInfo.vue b/webapp/src/components/HardwareInfo.vue
index 372eeff0..982549d6 100644
--- a/webapp/src/components/HardwareInfo.vue
+++ b/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>
diff --git a/webapp/src/components/HeapDetails.vue b/webapp/src/components/HeapDetails.vue
index bb2c8a27..32d2ffd6 100644
--- a/webapp/src/components/HeapDetails.vue
+++ b/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>
diff --git a/webapp/src/components/InterfaceApInfo.vue b/webapp/src/components/InterfaceApInfo.vue
index f5e22054..18b8c3f3 100644
--- a/webapp/src/components/InterfaceApInfo.vue
+++ b/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>
diff --git a/webapp/src/components/InterfaceNetworkInfo.vue b/webapp/src/components/InterfaceNetworkInfo.vue
index ea87dc5e..832030cd 100644
--- a/webapp/src/components/InterfaceNetworkInfo.vue
+++ b/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">
diff --git a/webapp/src/components/MemoryInfo.vue b/webapp/src/components/MemoryInfo.vue
index 7fffbd81..321b9030 100644
--- a/webapp/src/components/MemoryInfo.vue
+++ b/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>
diff --git a/webapp/src/components/PinInfo.vue b/webapp/src/components/PinInfo.vue
index a2410325..ee9359e3 100644
--- a/webapp/src/components/PinInfo.vue
+++ b/webapp/src/components/PinInfo.vue
@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary">
+    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>
diff --git a/webapp/src/components/RadioInfo.vue b/webapp/src/components/RadioInfo.vue
index ed84e0fb..758a710c 100644
--- a/webapp/src/components/RadioInfo.vue
+++ b/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>
diff --git a/webapp/src/components/TaskDetails.vue b/webapp/src/components/TaskDetails.vue
index a9ab86ac..badc5b81 100644
--- a/webapp/src/components/TaskDetails.vue
+++ b/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>
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index 024ac7a6..0a897891 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/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>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index db13594c..5143e4b4 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/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>
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index fb38e2db..bd4938d9 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -5,7 +5,7 @@
         :show-reload="true"
         @reload="getMqttInfo"
     >
-        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -102,7 +102,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -155,7 +155,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index 68100d1c..29aa00e4 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNtpInfo">
-        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -21,7 +21,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>