ui: cleanup switch inputs markup

homeland-live · Oct 15, 2023 · c748a20 · c748a20
1 parent ed86859
commit c748a20
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 85 deletions.
diff --git a/ui/src/components/awtrix/DisplayCard.vue b/ui/src/components/awtrix/DisplayCard.vue
@@ -13,21 +13,23 @@
       </div>
     </div>
     <div class="card-body">
-      <div class="form-check form-switch d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-cast fs-4 pe-2" />
           LiveView
           <a v-if="nodeStore.activeNode" :href="'http://' + nodeStore.activeNode.ipv4 + '/fullscreen'" target="_blank">
             <i class="bi bi-box-arrow-up-right ms-2" />
           </a>
         </span>
-        <input
-          v-if="nodeStore.activeNode"
-          class="form-check-input"
-          type="checkbox"
-          role="switch"
-          :checked="awtrixStore.liveViewEnabled"
-          @change="awtrixStore.toggleLiveView">
+        <div class="form-check form-switch">
+          <input
+            v-if="nodeStore.activeNode"
+            class="form-check-input ms-0"
+            type="checkbox"
+            role="switch"
+            :checked="awtrixStore.liveViewEnabled"
+            @change="awtrixStore.toggleLiveView">
+        </div>
       </div>
       <iframe
         v-if="nodeStore.activeNode && awtrixStore.liveViewEnabled"
@@ -63,20 +65,22 @@
         :max="brightnessMax"
         :value="brightness"
         @change="setBrightness">
-      <div class="form-check form-switch d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-brightness-low fs-4 pe-2" />
           AutoBrightness
         </span>
-        <input
-          v-if="awtrixStore.hasSettings"
-          class="form-check-input"
-          type="checkbox"
-          role="switch"
-          :checked="awtrixStore.settings?.ABRI"
-          @change="awtrixStore.toggleAutoBrightness">
+        <div class="form-check form-switch">
+          <input
+            v-if="awtrixStore.hasSettings"
+            class="form-check-input ms-0"
+            type="checkbox"
+            role="switch"
+            :checked="awtrixStore.settings?.ABRI"
+            @change="awtrixStore.toggleAutoBrightness">
+        </div>
       </div>
-      <div class="d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-fonts fs-4 pe-2" />
           Global text color

diff --git a/ui/src/components/awtrix/NativeAppsCard.vue b/ui/src/components/awtrix/NativeAppsCard.vue
@@ -4,125 +4,115 @@
       <span class="text-muted">Native Apps</span>
     </div>
     <div class="card-body">
-      <div class="d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-clock fs-4 pe-2" />
           Time
         </span>
-        <div class="form-check form-switch d-flex align-items-center">
-          <label class="form-check-label">
-            <ColorPicker
-              v-if="awtrixStore.hasSettings"
-              format="hex"
-              shape="circle"
-              disable-alpha
-              disable-history
-              v-model:pureColor="timeTextColorHex"
-              @pureColorChange="setTimeTextColor" />
-          </label>
+        <div class="form-check form-switch d-flex align-items-center ps-0">
+          <ColorPicker
+            v-if="awtrixStore.hasSettings"
+            format="hex"
+            shape="circle"
+            disable-alpha
+            disable-history
+            v-model:pureColor="timeTextColorHex"
+            @pureColorChange="setTimeTextColor" />
           <input
             v-if="awtrixStore.hasSettings"
-            class="form-check-input"
+            class="form-check-input float-none ms-0 mt-0"
             type="checkbox"
             role="switch"
             :checked="awtrixStore.appTimeEnabled"
             @change="toggle(awtrixStore.toggleAppTime)">
         </div>
       </div>
-      <div class="d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-calendar-date fs-4 pe-2" />
           Date
         </span>
-        <div class="form-check form-switch d-flex align-items-center">
-          <label class="form-check-label">
-            <ColorPicker
-              v-if="awtrixStore.hasSettings"
-              format="hex"
-              shape="circle"
-              disable-alpha
-              disable-history
-              v-model:pureColor="dateTextColorHex"
-              @pureColorChange="setDateTextColor" />
-          </label>
+        <div class="form-check form-switch d-flex align-items-center ps-0">
+          <ColorPicker
+            v-if="awtrixStore.hasSettings"
+            format="hex"
+            shape="circle"
+            disable-alpha
+            disable-history
+            v-model:pureColor="dateTextColorHex"
+            @pureColorChange="setDateTextColor" />
           <input
             v-if="awtrixStore.hasSettings"
-            class="form-check-input"
+            class="form-check-input float-none ms-0 mt-0"
             type="checkbox"
             role="switch"
             :checked="awtrixStore.appDateEnabled"
             @change="toggle(awtrixStore.toggleAppDate)">
         </div>
       </div>
-      <div class="d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-moisture fs-4 pe-2" />
           Humidity
         </span>
-        <div class="form-check form-switch d-flex align-items-center">
-          <label class="form-check-label">
-            <ColorPicker
-              v-if="awtrixStore.hasSettings"
-              format="hex"
-              shape="circle"
-              disable-alpha
-              disable-history
-              v-model:pureColor="humTextColorHex"
-              @pureColorChange="setHumTextColor" />
-          </label>
+        <div class="form-check form-switch d-flex align-items-center ps-0">
+          <ColorPicker
+            v-if="awtrixStore.hasSettings"
+            format="hex"
+            shape="circle"
+            disable-alpha
+            disable-history
+            v-model:pureColor="humTextColorHex"
+            @pureColorChange="setHumTextColor" />
           <input
             v-if="awtrixStore.hasSettings"
-            class="form-check-input"
+            class="form-check-input float-none ms-0 mt-0"
             type="checkbox"
             role="switch"
             :checked="awtrixStore.appHumidityEnabled"
             @change="toggle(awtrixStore.toggleAppHumidity)">
         </div>
       </div>
-      <div class="d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-thermometer fs-4 pe-2" />
           Temperature
         </span>
-        <div class="form-check form-switch d-flex align-items-center">
-          <label class="form-check-label">
-            <ColorPicker
-              v-if="awtrixStore.hasSettings"
-              format="hex"
-              shape="circle"
-              disable-alpha
-              disable-history
-              v-model:pureColor="tempTextColorHex"
-              @pureColorChange="setTempTextColor" />
-          </label>
+        <div class="form-check form-switch d-flex align-items-center ps-0">
+          <ColorPicker
+            v-if="awtrixStore.hasSettings"
+            format="hex"
+            shape="circle"
+            disable-alpha
+            disable-history
+            v-model:pureColor="tempTextColorHex"
+            @pureColorChange="setTempTextColor" />
           <input
             v-if="awtrixStore.hasSettings"
-            class="form-check-input"
+            class="form-check-input float-none ms-0 mt-0"
             type="checkbox"
             role="switch"
             :checked="awtrixStore.appTemperatureEnabled"
             @change="toggle(awtrixStore.toggleAppTemperature)">
         </div>
       </div>
-      <div class="d-flex justify-content-between align-items-center ps-0">
+      <div class="d-flex justify-content-between align-items-center">
         <span class="d-flex align-items-center text-muted">
           <i class="bi bi-battery-half fs-4 pe-2" />
           Battery
         </span>
-        <div class="form-check form-switch d-flex align-items-center">
-          <label class="form-check-label">
-            <ColorPicker
-              v-if="awtrixStore.hasSettings"
-              format="hex"
-              shape="circle"
-              disable-alpha
-              disable-history
-              v-model:pureColor="batTextColorHex"
-              @pureColorChange="setBatTextColor" />
-          </label>
+        <div class="form-check form-switch d-flex align-items-center ps-0">
+          <ColorPicker
+            v-if="awtrixStore.hasSettings"
+            format="hex"
+            shape="circle"
+            disable-alpha
+            disable-history
+            v-model:pureColor="batTextColorHex"
+            @pureColorChange="setBatTextColor" />
           <input
             v-if="awtrixStore.hasSettings"
-            class="form-check-input"
+            class="form-check-input float-none ms-0 mt-0"
             type="checkbox"
             role="switch"
             :checked="awtrixStore.appBatteryEnabled"
@@ -208,9 +198,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-:deep(.vc-color-wrap) {
-  margin-right: 3em;
-}
 :deep(.vc-color-wrap.round) {
   width: 1.3em;
   height: 1.3em;