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

webapp: do not use div with v-if but template elements

Browse Source 
when using v-if on a div element, the div will be part of the DOM in
case the condition is true. if we group elements to use v-if on the
group, we shall use a template element, so the group elements appear
as siblings of the other elements.

in particular, these spurious div do not mess up our CSS patch that sets
the bottom margin for the last child in a card to "auto".
This commit is contained in:
Bernhard Kirchen 2024-10-26 22:16:20 +02:00 committed by Bernhard Kirchen
parent b6c0a850c9
commit 8c46521d6e
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/src/views/NetworkAdminView.vue
View File

@ -89,7 +89,7 @@
type="checkbox" type="checkbox"
/> />
<div v-if="networkConfigList.syslogenabled"> <template v-if="networkConfigList.syslogenabled">
<InputElement <InputElement
:label="$t('networkadmin.SyslogHostname')" :label="$t('networkadmin.SyslogHostname')"
v-model="networkConfigList.sysloghostname" v-model="networkConfigList.sysloghostname"
@ -104,7 +104,7 @@
min="1" min="1"
max="65535" max="65535"
/> />
</div> </template>
</CardElement> </CardElement>
<CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space> <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>

12
webapp/src/views/PowerLimiterAdminView.vue
View File

@ -228,7 +228,7 @@
wide wide
/> />
<div v-if="powerLimiterConfigList.solar_passthrough_enabled"> <template v-if="powerLimiterConfigList.solar_passthrough_enabled">
<InputElement <InputElement
:label="$t('powerlimiteradmin.SolarPassthroughLosses')" :label="$t('powerlimiteradmin.SolarPassthroughLosses')"
v-model="powerLimiterConfigList.solar_passthrough_losses" v-model="powerLimiterConfigList.solar_passthrough_losses"
@ -245,7 +245,7 @@
role="alert" role="alert"
v-html="$t('powerlimiteradmin.SolarPassthroughLossesInfo')" v-html="$t('powerlimiteradmin.SolarPassthroughLossesInfo')"
></div> ></div>
</div> </template>
</CardElement> </CardElement>
<CardElement <CardElement
@ -261,7 +261,7 @@
wide wide
/> />
<div v-if="!powerLimiterConfigList.ignore_soc"> <template v-if="!powerLimiterConfigList.ignore_soc">
<div <div
class="alert alert-secondary" class="alert alert-secondary"
role="alert" role="alert"
@ -302,7 +302,7 @@
type="number" type="number"
wide wide
/> />
</div> </template>
</CardElement> </CardElement>
<CardElement <CardElement
@ -335,7 +335,7 @@
wide wide
/> />
<div v-if="isSolarPassthroughEnabled()"> <template v-if="isSolarPassthroughEnabled()">
<InputElement <InputElement
:label="$t('powerlimiteradmin.FullSolarPassthroughStartThreshold')" :label="$t('powerlimiteradmin.FullSolarPassthroughStartThreshold')"
:tooltip="$t('powerlimiteradmin.FullSolarPassthroughStartThresholdHint')" :tooltip="$t('powerlimiteradmin.FullSolarPassthroughStartThresholdHint')"
@ -360,7 +360,7 @@
step="0.01" step="0.01"
wide wide
/> />
</div> </template>
<InputElement <InputElement
:label="$t('powerlimiteradmin.VoltageLoadCorrectionFactor')" :label="$t('powerlimiteradmin.VoltageLoadCorrectionFactor')"