patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 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 committed by Thomas Basler
parent eecd7f7c28
commit 9132a88963
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
v-show="mqttConfigList.mqtt_enabled"
v-if="mqttConfigList.mqtt_enabled"
:label="$t('mqttadmin.EnableHass')"
v-model="mqttConfigList.mqtt_hass_enabled"
type="checkbox"
@ -26,7 +26,7 @@
:text="$t('mqttadmin.MqttBrokerParameter')"
textVariant="text-bg-primary"
add-space
v-show="mqttConfigList.mqtt_enabled"
v-if="mqttConfigList.mqtt_enabled"
>
<InputElement
:label="$t('mqttadmin.Hostname')"
@ -99,7 +99,7 @@
<InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
<InputElement
v-show="mqttConfigList.mqtt_tls"
v-if="mqttConfigList.mqtt_tls"
:label="$t('mqttadmin.RootCa')"
v-model="mqttConfigList.mqtt_root_ca_cert"
type="textarea"
@ -108,14 +108,14 @@
/>
<InputElement
v-show="mqttConfigList.mqtt_tls"
v-if="mqttConfigList.mqtt_tls"
:label="$t('mqttadmin.TlsCertLoginEnable')"
v-model="mqttConfigList.mqtt_tls_cert_login"
type="checkbox"
/>
<InputElement
v-show="mqttConfigList.mqtt_tls_cert_login"
v-if="mqttConfigList.mqtt_tls_cert_login"
:label="$t('mqttadmin.ClientCert')"
v-model="mqttConfigList.mqtt_client_cert"
type="textarea"
@ -124,7 +124,7 @@
/>
<InputElement
v-show="mqttConfigList.mqtt_tls_cert_login"
v-if="mqttConfigList.mqtt_tls_cert_login"
:label="$t('mqttadmin.ClientKey')"
v-model="mqttConfigList.mqtt_client_key"
type="textarea"
@ -137,7 +137,7 @@
:text="$t('mqttadmin.LwtParameters')"
textVariant="text-bg-primary"
add-space
v-show="mqttConfigList.mqtt_enabled"
v-if="mqttConfigList.mqtt_enabled"
>
<InputElement
:label="$t('mqttadmin.LwtTopic')"
@ -182,7 +182,7 @@
:text="$t('mqttadmin.HassParameters')"
textVariant="text-bg-primary"
add-space
v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
v-if="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
>
<InputElement
:label="$t('mqttadmin.HassPrefixTopic')"

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

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