patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: equalize style of cards with tables in live view

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/components/BatteryView.vue
View File

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

4
webapp/src/components/HuaweiView.vue
View File

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

2
webapp/src/components/VedirectView.vue
View File

@ -64,7 +64,7 @@
<div class="card-body"> <div class="card-body">
<div class="row flex-row flex-wrap align-items-start g-3"> <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 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'"> <div :class="section === 'device' ? 'card-header text-bg-info' : 'card-header'">
{{ $t('vedirecthome.section_' + section) }} {{ $t('vedirecthome.section_' + section) }}
</div> </div>

4
webapp/src/scss/styles.scss
View File

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