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