fix(ui): node details in mobile devices

zwave-js · Feb 23, 2021 · 9fcc8e0 · 9fcc8e0
1 parent 246c078
commit 9fcc8e0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/ValueId.vue b/src/components/ValueId.vue
@@ -104,9 +104,10 @@
       ></v-select>
 
       <div v-if="value.type == 'boolean' && value.writeable && value.readable">
-        <v-btn-toggle v-model="value.newValue" rounded class="mt-5">
+        <v-btn-toggle v-model="value.newValue" rounded>
           <v-btn
             outlined
+            height="40px"
             :value="true"
             :style="{
               background: value.newValue ? '#4CAF50' : ''
@@ -119,6 +120,7 @@
           </v-btn>
           <v-btn
             outlined
+            height="40px"
             :value="false"
             :style="{
               background: !value.newValue ? '#f44336' : ''
@@ -155,7 +157,7 @@
   font-weight: bold;
   color: black;
   padding-left: 0;
-  height: 0;
+  margin-bottom: -10px;
 }
 </style>
 

diff --git a/src/components/nodes-table/ExpandedNode.vue b/src/components/nodes-table/ExpandedNode.vue
@@ -1,6 +1,12 @@
 <template>
   <td :colspan="isMobile ? 1 : headers.length">
-    <v-tabs style="margin-top:10px" v-model="currentTab" fixed-tabs>
+    <v-tabs
+      style="margin-top:10px"
+      v-model="currentTab"
+      center-active
+      fixed-tabs
+      show-arrows
+    >
       <v-tab key="node">Node</v-tab>
       <v-tab v-if="showHass" key="homeassistant">Home Assistant</v-tab>
       <v-tab key="groups">Groups</v-tab>