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

webapp: MQTT: use v-if in favor of v-show

Browse Source 
if we hide elements (which is done using style="display:none;"), they
are still part of the DOM and mess with CSS rules that shall apply to
the last element of a card or the last row of a table.
This commit is contained in:
Bernhard Kirchen 2024-10-26 23:08:58 +02:00
parent fe35992d48
commit 935af85f38
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@
/> />
<InputElement <InputElement
v-show="mqttConfigList.mqtt_enabled" v-if="mqttConfigList.mqtt_enabled"
:label="$t('mqttadmin.EnableHass')" :label="$t('mqttadmin.EnableHass')"
v-model="mqttConfigList.mqtt_hass_enabled" v-model="mqttConfigList.mqtt_hass_enabled"
type="checkbox" type="checkbox"
@ -26,7 +26,7 @@
:text="$t('mqttadmin.MqttBrokerParameter')" :text="$t('mqttadmin.MqttBrokerParameter')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
add-space add-space
v-show="mqttConfigList.mqtt_enabled" v-if="mqttConfigList.mqtt_enabled"
> >
<InputElement <InputElement
:label="$t('mqttadmin.Hostname')" :label="$t('mqttadmin.Hostname')"
@ -99,7 +99,7 @@
<InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" /> <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
<InputElement <InputElement
v-show="mqttConfigList.mqtt_tls" v-if="mqttConfigList.mqtt_tls"
:label="$t('mqttadmin.RootCa')" :label="$t('mqttadmin.RootCa')"
v-model="mqttConfigList.mqtt_root_ca_cert" v-model="mqttConfigList.mqtt_root_ca_cert"
type="textarea" type="textarea"
@ -108,14 +108,14 @@
/> />
<InputElement <InputElement
v-show="mqttConfigList.mqtt_tls" v-if="mqttConfigList.mqtt_tls"
:label="$t('mqttadmin.TlsCertLoginEnable')" :label="$t('mqttadmin.TlsCertLoginEnable')"
v-model="mqttConfigList.mqtt_tls_cert_login" v-model="mqttConfigList.mqtt_tls_cert_login"
type="checkbox" type="checkbox"
/> />
<InputElement <InputElement
v-show="mqttConfigList.mqtt_tls_cert_login" v-if="mqttConfigList.mqtt_tls_cert_login"
:label="$t('mqttadmin.ClientCert')" :label="$t('mqttadmin.ClientCert')"
v-model="mqttConfigList.mqtt_client_cert" v-model="mqttConfigList.mqtt_client_cert"
type="textarea" type="textarea"
@ -124,7 +124,7 @@
/> />
<InputElement <InputElement
v-show="mqttConfigList.mqtt_tls_cert_login" v-if="mqttConfigList.mqtt_tls_cert_login"
:label="$t('mqttadmin.ClientKey')" :label="$t('mqttadmin.ClientKey')"
v-model="mqttConfigList.mqtt_client_key" v-model="mqttConfigList.mqtt_client_key"
type="textarea" type="textarea"
@ -137,7 +137,7 @@
:text="$t('mqttadmin.LwtParameters')" :text="$t('mqttadmin.LwtParameters')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
add-space add-space
v-show="mqttConfigList.mqtt_enabled" v-if="mqttConfigList.mqtt_enabled"
> >
<InputElement <InputElement
:label="$t('mqttadmin.LwtTopic')" :label="$t('mqttadmin.LwtTopic')"
@ -182,7 +182,7 @@
:text="$t('mqttadmin.HassParameters')" :text="$t('mqttadmin.HassParameters')"
textVariant="text-bg-primary" textVariant="text-bg-primary"
add-space add-space
v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled" v-if="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
> >
<InputElement <InputElement
:label="$t('mqttadmin.HassPrefixTopic')" :label="$t('mqttadmin.HassPrefixTopic')"

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

@ -79,7 +79,7 @@
/> />
</td> </td>
</tr> </tr>
<tr v-show="mqttDataList.mqtt_tls"> <tr v-if="mqttDataList.mqtt_tls">
<th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th> <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
<td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td> <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
</tr> </tr>
@ -93,7 +93,7 @@
/> />
</td> </td>
</tr> </tr>
<tr v-show="mqttDataList.mqtt_tls_cert_login"> <tr v-if="mqttDataList.mqtt_tls_cert_login">
<th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th> <th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th>
<td>{{ mqttDataList.mqtt_client_cert_info }}</td> <td>{{ mqttDataList.mqtt_client_cert_info }}</td>
</tr> </tr>