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.
hoylabs · Jun 17, 2024 · 95e560b · 95e560b
1 parent 1f6fdb7
commit 95e560b
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"