fix(ui): labels and mobile view (#413)

* fix: better values labels

* fix(ui): restore data table mobile breakpoint

* fix: hass devices table

* fix: pass isMobile prop down to expanded node

* fix(ui): set max v-select width

* fix: use v-col v-row

* fix: lint issues

* fix: hass row selection

* fix(ui): switch to new grid system

* fix(ui): some broken things after the switch

* fix: lint issues

src/components/Confirm.vue

@@ -14,8 +14,12 @@
       }}</v-card-text>
       <v-card-text v-else class="pa-4">
         <v-container grid-list-md>
-          <v-layout wrap>
-            <v-flex v-for="(input, index) in options.inputs" :key="index" xs12>
+          <v-row>
+            <v-col
+              v-for="(input, index) in options.inputs"
+              :key="index"
+              cols="12"
+            >
               <v-text-field
                 v-if="input.type === 'text' || input.type === 'number'"
                 v-model="values[input.key]"
@@ -44,8 +48,8 @@
                 :hint="input.hint"
                 :required="input.required"
               ></v-select>
-            </v-flex>
-          </v-layout>
+            </v-col>
+          </v-row>
         </v-container>
       </v-card-text>
 

src/components/ControlPanel.vue

@@ -26,7 +26,7 @@
             </v-col>
           </v-row>
 
-          <v-row justify="start">
+          <v-row>
             <v-col cols="12" sm="6" md="3">
               <v-text-field
                 label="Controller status"

src/components/Debug.vue

@@ -1,25 +1,25 @@
 <template>
   <v-container grid-list-md>
-    <v-layout wrap>
-      <v-flex xs12>
+    <v-row>
+      <v-col cols="12">
         <v-btn color="green darken-1" text @click="debugActive = true"
           >Start</v-btn
         >
         <v-btn color="red darken-1" text @click="debugActive = false"
           >Stop</v-btn
         >
         <v-btn color="blue darken-1" text @click="debug = []">Clear</v-btn>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs12>
+      <v-col cols="12">
         <div
           id="debug_window"
           style="height:800px;width:100%;overflow-y:scroll;border: 1px solid grey; padding: 10px;"
           class="body-1"
           v-html="debug.join('')"
         ></div>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 <script>

src/components/Mesh.vue

@@ -2,38 +2,38 @@
   <v-container fluid>
     <v-card>
       <v-container grid-list-md>
-        <v-layout row wrap>
-          <v-flex xs2 md2>
+        <v-row>
+          <v-col cols="3" md="2">
             <v-text-field
               label="Nodes size"
               v-model.number="nodeSize"
               min="10"
               type="number"
             ></v-text-field>
-          </v-flex>
-          <v-flex xs2 md2>
+          </v-col>
+          <v-col cols="3" md="2">
             <v-text-field
               label="Font size"
               v-model.number="fontSize"
               min="10"
               type="number"
             ></v-text-field>
-          </v-flex>
-          <v-flex xs3 md2>
+          </v-col>
+          <v-col cols="3" md="2">
             <v-text-field
               label="Distance"
               v-model.number="force"
               min="100"
               type="number"
             ></v-text-field>
-          </v-flex>
-          <v-flex xs3 md2>
+          </v-col>
+          <v-col cols="3" md="2">
             <v-switch label="Show location" v-model="showLocation"></v-switch>
-          </v-flex>
-          <v-flex xs5 md6>
+          </v-col>
+          <v-col cols="5" md="6">
             <v-btn color="success" @click="downloadSVG">Download SVG</v-btn>
-          </v-flex>
-        </v-layout>
+          </v-col>
+        </v-row>
       </v-container>
 
       <d3-network

src/components/Scenes.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container grid-list-md>
-    <v-layout wrap>
-      <v-flex xs12>
+    <v-row>
+      <v-col cols="12">
         <v-btn text @click="importScenes">
           Import
           <v-icon right dark color="primary">file_upload</v-icon>
@@ -10,37 +10,37 @@
           Export
           <v-icon right dark color="primary">file_download</v-icon>
         </v-btn>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs12 sm6>
+      <v-col cols="12" sm="6">
         <v-select
           label="Scene"
           v-model="selectedScene"
           :items="scenesWithId"
           item-text="label"
           item-value="sceneid"
         ></v-select>
-      </v-flex>
+      </v-col>
 
-      <v-flex xs12 sm6>
+      <v-col cols="12" sm="6">
         <v-text-field
           label="New Scene"
           append-outer-icon="send"
           @click:append-outer="createScene"
           v-model.trim="newScene"
         ></v-text-field>
-      </v-flex>
+      </v-col>
 
-      <v-flex v-if="selectedScene" xs12>
+      <v-col v-if="selectedScene" cols="12">
         <v-btn color="red darken-1" text @click="removeScene">Delete</v-btn>
         <v-btn color="green darken-1" text @click="activateScene"
           >Activate</v-btn
         >
         <v-btn color="blue darken-1" text @click="dialogValue = true"
           >New Value</v-btn
         >
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
 
     <DialogSceneValue
       @save="saveValue"