From 95e560bdc7f099a08978c50863c841f9ec0c5087 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Mon, 17 Jun 2024 17:32:26 +0200
Subject: [PATCH] fix: optimize margins in live view

all total cards at the top of the live view go into the same row.
bootstrap will line-break after every third column/card, as the row
is row-cols-3.

the battery icon to the right of the project name in the header shall
have marging to said project name.

the rows in the live view now use class mt-0 to counteract bootstraps
negative margin for individual rows.
---
 webapp/src/components/BatteryView.vue       |  2 +-
 webapp/src/components/HuaweiView.vue        |  2 +-
 webapp/src/components/InverterTotalInfo.vue | 26 +++++++--------------
 webapp/src/components/NavBar.vue            |  2 +-
 webapp/src/components/VedirectView.vue      |  4 ++--
 webapp/src/views/HomeView.vue               |  4 ++--
 6 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/webapp/src/components/BatteryView.vue b/webapp/src/components/BatteryView.vue
index 929669197..171e5bd8a 100644
--- a/webapp/src/components/BatteryView.vue
+++ b/webapp/src/components/BatteryView.vue
@@ -6,7 +6,7 @@
   </div>
 
   <div v-else-if="'values' in batteryData"> <!-- suppress the card for MQTT battery provider -->
-    <div class="row gy-3">
+    <div class="row gy-3 mt-0">
       <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
         <div class="card">
           <div class="card-header d-flex justify-content-between align-items-center" :class="{
diff --git a/webapp/src/components/HuaweiView.vue b/webapp/src/components/HuaweiView.vue
index a0917ebb8..c9e1d3964 100644
--- a/webapp/src/components/HuaweiView.vue
+++ b/webapp/src/components/HuaweiView.vue
@@ -6,7 +6,7 @@
   </div>
 
   <template v-else>
-    <div class="row gy-3">
+    <div class="row gy-3 mt-0">
       <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
         <div class="card">
           <div class="card-header d-flex justify-content-between align-items-center" :class="{
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
index 426550b78..adc9d91f0 100644
--- a/webapp/src/components/InverterTotalInfo.vue
+++ b/webapp/src/components/InverterTotalInfo.vue
@@ -1,7 +1,6 @@
 <template>
-  <div v-show="totalVeData.enabled">
     <div class="row row-cols-1 row-cols-md-3 g-3">
-        <div class="col">
+        <div class="col" v-if="totalVeData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalYieldTotal')">
                 <h2>
                     {{ $n(totalVeData.total.YieldTotal.v, 'decimal', {
@@ -12,7 +11,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="totalVeData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalYieldDay')">
                 <h2>
                     {{ $n(totalVeData.total.YieldDay.v, 'decimal', {
@@ -23,7 +22,7 @@
                 </h2>
             </CardElement>
         </div>
-        <div class="col">
+        <div class="col" v-if="totalVeData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalPower')">
                 <h2>
                     {{ $n(totalVeData.total.Power.v, 'decimal', {
@@ -34,9 +33,6 @@
                 </h2>
             </CardElement>
         </div>
-    </div>
-  </div>
-  <div class="row row-cols-1 row-cols-md-3 g-3">
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.InverterTotalYieldTotal')">
                 <h2>
@@ -70,10 +66,7 @@
                 </h2>
             </CardElement>
         </div>
-  </div>
-  <div v-show="totalBattData.enabled || powerMeterData.enabled || huaweiData.enabled">
-    <div class="row row-cols-1 row-cols-md-3 g-3">
-      <div class="col" v-if="totalBattData.enabled">
+        <div class="col" v-if="totalBattData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.BatterySoc')">
                 <h2>
                     {{ $n(totalBattData.soc.v, 'decimal', {
@@ -83,8 +76,8 @@
                     <small class="text-muted">{{ totalBattData.soc.u }}</small>
                 </h2>
             </CardElement>
-      </div>
-      <div class="col" v-if="powerMeterData.enabled">
+        </div>
+        <div class="col" v-if="powerMeterData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.HomePower')">
                 <h2>
                     {{ $n(powerMeterData.Power.v, 'decimal', {
@@ -94,8 +87,8 @@
                     <small class="text-muted">{{powerMeterData.Power.u }}</small>
                 </h2>
             </CardElement>
-      </div>
-      <div class="col" v-if="huaweiData.enabled">
+        </div>
+        <div class="col" v-if="huaweiData.enabled">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.HuaweiPower')">
                 <h2>
                     {{ $n(huaweiData.Power.v, 'decimal', {
@@ -105,9 +98,8 @@
                     <small class="text-muted">{{huaweiData.Power.u }}</small>
                 </h2>
             </CardElement>
-      </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 82d6081e6..a8d0c355a 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -11,7 +11,7 @@
                 <span style="margin-left: .5rem">
                     OpenDTU-OnBattery
                 </span>
-                <span class="text-info">
+                <span class="text-info mx-2">
                     <BIconBatteryCharging width="20" height="20" class="d-inline-block align-text-center" />
                 </span>
             </router-link>
diff --git a/webapp/src/components/VedirectView.vue b/webapp/src/components/VedirectView.vue
index 052a2be36..d7f372e49 100644
--- a/webapp/src/components/VedirectView.vue
+++ b/webapp/src/components/VedirectView.vue
@@ -7,9 +7,9 @@
     </div>
 
     <template v-else>
-        <div class="row gy-3">
+        <div class="row gy-3 mt-0" v-for="(item, serial) in vedirect.instances" :key="serial">
             <div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
-                <div class="card" v-for="(item, serial) in vedirect.instances" :key="serial">
+                <div class="card">
                     <div class="card-header d-flex justify-content-between align-items-center"
                         :class="{
                             'text-bg-danger': item.data_age_ms >= 10000,
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 46b362917..2dd9ef448 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -1,8 +1,8 @@
 <template>
     <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true" :showWebSocket="true" :isWebsocketConnected="isWebsocketConnected" @reload="reloadData">
         <HintView :hints="liveData.hints" />
-        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/><br />
-        <div class="row gy-3">
+        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/>
+        <div class="row gy-3 mt-0">
             <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                     <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"