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

better alignment inverter, issue 360

Browse Source
This commit is contained in:
Rene 2024-03-25 20:30:02 +01:00 committed by Thomas Basler
parent 3b05f447d5
commit eff8d52014
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,20 @@
<div class="row gy-3"> <div class="row gy-3">
<div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]"> <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
<div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link" <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"
:id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill" :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
:data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab" :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
aria-controls="'v-pills-' + inverter.serial" aria-selected="true"> aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
<BIconXCircleFill class="fs-4" v-if="!inverter.reachable" /> <div class="row">
<BIconExclamationCircleFill class="fs-4" v-if="inverter.reachable && !inverter.producing" /> <div class="col-auto col-sm-2">
<BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" /> <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
{{ inverter.name }} <BIconExclamationCircleFill class="fs-4" v-if="inverter.reachable && !inverter.producing" />
<BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
</div>
<div class="col-sm-9">
{{ inverter.name }}
</div>
</div>
</button> </button>
</div> </div>
</div> </div>