webapp: Reduce wasted horizontal space for better mobile UX

This commit is contained in:
Nikolaj Kappler 2024-01-16 21:09:14 +01:00 committed by Thomas Basler
parent 41f3955429
commit a7479d33e3
4 changed files with 23 additions and 40 deletions

View File

@ -2,7 +2,7 @@
<div class="card" :class="{ <div class="card" :class="{
'border-info': channelType == 'AC', 'border-info': channelType == 'AC',
'border-secondary': channelType == 'INV' 'border-secondary': channelType == 'INV'
}"> }" style="overflow: hidden">
<div v-if="channelType == 'INV'" class="card-header text-bg-secondary"> <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
{{ $t('inverterchannelinfo.General') }} {{ $t('inverterchannelinfo.General') }}
</div> </div>
@ -16,24 +16,17 @@
{{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }} {{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }}
</div> </div>
<div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover" style="margin: 0">
<thead>
<tr>
<th scope="col">{{ $t('inverterchannelinfo.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th>
<th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th>
</tr>
</thead>
<tbody> <tbody>
<tr v-for="(property, key) in channelData" :key="`prop-${key}`"> <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<template v-if="key != 'name' && property"> <template v-if="key != 'name' && property">
<th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th> <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
<td style="text-align: right"> <td style="text-align: right; padding-right: 0;">
{{ $n(property.v, 'decimal', { {{ $n(property.v, 'decimal', {
minimumFractionDigits: property.d, minimumFractionDigits: property.d,
maximumFractionDigits: property.d}) maximumFractionDigits: property.d
})
}} }}
</td> </td>
<td>{{ property.u }}</td> <td>{{ property.u }}</td>
@ -43,7 +36,6 @@
</table> </table>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -317,10 +317,7 @@
"inverterchannelinfo": { "inverterchannelinfo": {
"String": "String {num}", "String": "String {num}",
"Phase": "Phase {num}", "Phase": "Phase {num}",
"General": "Allgemein", "General": "Allgemein"
"Property": "Eigenschaft",
"Value": "Wert",
"Unit": "Einheit"
}, },
"invertertotalinfo": { "invertertotalinfo": {
"TotalYieldTotal": "Gesamtertrag Insgesamt", "TotalYieldTotal": "Gesamtertrag Insgesamt",

View File

@ -317,10 +317,7 @@
"inverterchannelinfo": { "inverterchannelinfo": {
"String": "String {num}", "String": "String {num}",
"Phase": "Phase {num}", "Phase": "Phase {num}",
"General": "General", "General": "General"
"Property": "Property",
"Value": "Value",
"Unit": "Unit"
}, },
"invertertotalinfo": { "invertertotalinfo": {
"TotalYieldTotal": "Total Yield Total", "TotalYieldTotal": "Total Yield Total",

View File

@ -317,10 +317,7 @@
"inverterchannelinfo": { "inverterchannelinfo": {
"String": "Ligne {num}", "String": "Ligne {num}",
"Phase": "Phase {num}", "Phase": "Phase {num}",
"General": "General", "General": "General"
"Property": "Propriété",
"Value": "Valeur",
"Unit": "Unité"
}, },
"invertertotalinfo": { "invertertotalinfo": {
"TotalYieldTotal": "Rendement total", "TotalYieldTotal": "Rendement total",