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

webapp: Enable horizontal scrolling for battery view on small screens (#1324)

Browse Source 
Enables horizontal scrolling for the batter views in order to not break the UI on small screens.
This commit is contained in:
PhilJaro 2024-10-22 18:19:13 +02:00 committed by GitHub
parent 28d4f87301
commit 83437b2759
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,43 +48,45 @@
<div class="card" :class="{ 'border-info': true }"> <div class="card" :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">
<table class="table table-striped table-hover"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover">
<tr> <thead>
<th scope="col">{{ $t('battery.Property') }}</th> <tr>
<th style="text-align: right" scope="col"> <th scope="col">{{ $t('battery.Property') }}</th>
{{ $t('battery.Value') }} <th style="text-align: right" scope="col">
</th> {{ $t('battery.Value') }}
<th scope="col">{{ $t('battery.Unit') }}</th> </th>
</tr> <th scope="col">{{ $t('battery.Unit') }}</th>
</thead> </tr>
<tbody> </thead>
<tr v-for="(prop, key) in values" v-bind:key="key"> <tbody>
<th scope="row">{{ $t('battery.' + key) }}</th> <tr v-for="(prop, key) in values" v-bind:key="key">
<td style="text-align: right"> <th scope="row">{{ $t('battery.' + key) }}</th>
<template v-if="isStringValue(prop) && prop.translate"> <td style="text-align: right">
{{ $t('battery.' + prop.value) }} <template v-if="isStringValue(prop) && prop.translate">
</template> {{ $t('battery.' + prop.value) }}
<template v-else-if="isStringValue(prop)"> </template>
{{ prop.value }} <template v-else-if="isStringValue(prop)">
</template> {{ prop.value }}
<template v-else> </template>
{{ <template v-else>
$n(prop.v, 'decimal', { {{
minimumFractionDigits: prop.d, $n(prop.v, 'decimal', {
maximumFractionDigits: prop.d, minimumFractionDigits: prop.d,
}) maximumFractionDigits: prop.d,
}} })
</template> }}
</td> </template>
<td> </td>
<template v-if="!isStringValue(prop)"> <td>
{{ prop.u }} <template v-if="!isStringValue(prop)">
</template> {{ prop.u }}
</td> </template>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>