webapp: equalize style of cards with tables in live view

this change adjusts the style of cards showing tables such that they
look the same as inverter channel info tables.
This commit is contained in:
Bernhard Kirchen 2024-10-26 22:34:35 +02:00 committed by Bernhard Kirchen
parent 3edfdb7ab6
commit e15fdab3e1
4 changed files with 9 additions and 5 deletions

View File

@ -45,7 +45,7 @@
v-bind:key="section"
class="col order-0"
>
<div class="card" :class="{ 'border-info': true }">
<div class="card card-table" :class="{ 'border-info': true }">
<div class="card-header text-bg-info">{{ $t('battery.' + section) }}</div>
<div class="card-body">
<div class="table-responsive">
@ -91,7 +91,7 @@
</div>
</div>
<div class="col order-1" v-show="batteryData.showIssues">
<div class="card">
<div class="card card-table">
<div :class="{ 'card-header': true, 'border-bottom-0': maxIssueValue === 0 }">
<div class="d-flex flex-row justify-content-between align-items-baseline">
{{ $t('battery.issues') }}

View File

@ -43,7 +43,7 @@
<div class="card-body">
<div class="row flex-row flex-wrap align-items-start g-3">
<div class="col order-0">
<div class="card" :class="{ 'border-info': true }">
<div class="card card-table" :class="{ 'border-info': true }">
<div class="card-header bg-info">{{ $t('huawei.Input') }}</div>
<div class="card-body">
<table class="table table-striped table-hover">
@ -98,7 +98,7 @@
</div>
</div>
<div class="col order-1">
<div class="card" :class="{ 'border-info': false }">
<div class="card card-table" :class="{ 'border-info': false }">
<div class="card-header bg-info">{{ $t('huawei.Output') }}</div>
<div class="card-body">
<table class="table table-striped table-hover">

View File

@ -64,7 +64,7 @@
<div class="card-body">
<div class="row flex-row flex-wrap align-items-start g-3">
<div v-for="(values, section) in item.values" v-bind:key="section" class="col order-0">
<div class="card" :class="{ 'border-info': section === 'device' }">
<div class="card card-table" :class="{ 'border-info': section === 'device' }">
<div :class="section === 'device' ? 'card-header text-bg-info' : 'card-header'">
{{ $t('vedirecthome.section_' + section) }}
</div>

View File

@ -26,3 +26,7 @@ div.card.card-table {
// messing up the bottom corner radii
overflow: hidden;
}
div.card.card-table div.card-body {
padding: 0;
}