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

webapp: fix inverter selection button breaking

Browse Source 
on small viewports, the icon and the inverter label would be displayed
in two lines. this change keeps the icon and the label tied together in
any case, and the icon is centered vertically around the label.
This commit is contained in:
Bernhard Kirchen 2024-11-03 20:10:18 +01:00
parent f9b84a02ef
commit 8a2192ece4
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/src/views/HomeView.vue
View File

@ -35,8 +35,8 @@
aria-controls="'v-pills-' + inverter.serial" aria-controls="'v-pills-' + inverter.serial"
aria-selected="true" aria-selected="true"
> >
<div class="row"> <div class="d-flex align-items-center">
<div class="col-auto col-sm-2"> <div class="me-2">
<BIconXCircleFill class="fs-4" v-if="!inverter.reachable" /> <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
<BIconExclamationCircleFill <BIconExclamationCircleFill
class="fs-4" class="fs-4"
@ -44,7 +44,7 @@
/> />
<BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" /> <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
</div> </div>
<div class="col-sm-9"> <div class="ms-auto me-auto">
{{ inverter.name }} {{ inverter.name }}
</div> </div>
</div> </div>