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 committed by Bernhard Kirchen
parent 2d49093c68
commit 8174fb1176
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
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.VerboseLogging')"
v-model="mqttConfigList.mqtt_verbose_logging"
type="checkbox"
@ -22,7 +22,7 @@
/>
<InputElement
v-show="mqttConfigList.mqtt_enabled"
v-if="mqttConfigList.mqtt_enabled"
:label="$t('mqttadmin.EnableHass')"
v-model="mqttConfigList.mqtt_hass_enabled"
type="checkbox"
@ -34,7 +34,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')"
@ -107,7 +107,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"
@ -116,14 +116,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"
@ -132,7 +132,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"
@ -145,7 +145,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')"
@ -190,7 +190,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

@ -89,7 +89,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>
@ -103,7 +103,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>