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

webapp: Reduce wasted horizontal space for better mobile UX

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

46
webapp/src/components/InverterChannelInfo.vue
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,32 +16,24 @@
{{ $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" style="margin: 0">
<table class="table table-striped table-hover"> <tbody>
<thead> <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<tr> <template v-if="key != 'name' && property">
<th scope="col">{{ $t('inverterchannelinfo.Property') }}</th> <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
<th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th> <td style="text-align: right; padding-right: 0;">
<th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th> {{ $n(property.v, 'decimal', {
</tr> minimumFractionDigits: property.d,
</thead> maximumFractionDigits: property.d
<tbody> })
<tr v-for="(property, key) in channelData" :key="`prop-${key}`"> }}
<template v-if="key != 'name' && property"> </td>
<th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th> <td>{{ property.u }}</td>
<td style="text-align: right"> </template>
{{ $n(property.v, 'decimal', { </tr>
minimumFractionDigits: property.d, </tbody>
maximumFractionDigits: property.d}) </table>
}}
</td>
<td>{{ property.u }}</td>
</template>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</template> </template>

5
webapp/src/locales/de.json
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",

5
webapp/src/locales/en.json
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",

5
webapp/src/locales/fr.json
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",