Merge "Add responsive design to the UI."

tools/ota_analysis/src/components/PartialCheckbox.vue

@@ -11,7 +11,8 @@
     <v-col
       v-for="label in labels"
       :key="label"
-      cols="3"
+      cols="12"
+      md="4"
     >
       <input
         type="checkbox"

tools/ota_analysis/src/components/PayloadComposition.vue

@@ -8,7 +8,10 @@
   </div>
   <v-divider />
   <v-row>
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    >
       <v-btn
         block
         @click="updateChart('blocks')"
@@ -16,7 +19,10 @@
         Analyse Installed Blocks (in target build)
       </v-btn>
     </v-col>
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    >
       <v-btn
         block
         @click="updateChart('payload')"
@@ -26,7 +32,10 @@
     </v-col>
   </v-row>
   <v-row>
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    >
       <v-btn
         block
         @click="updateChart('COWmerge')"
@@ -34,7 +43,10 @@
         Analyse COW Merge Operations
       </v-btn>
     </v-col>
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    >
       <v-btn
         block
         :disabled="!targetFile"
@@ -45,8 +57,14 @@
     </v-col>
   </v-row>
   <v-row>
-    <v-col cols="6" />
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    />
+    <v-col
+      cols="12"
+      md="6"
+    >
       <BaseFile
         label="Drag and drop or Select The target Android build"
         @file-select="selectBuild"

tools/ota_analysis/src/components/PayloadDetail.vue

@@ -20,7 +20,8 @@
       <v-col
         v-for="partition in payload.manifest.partitions"
         :key="partition.partitionName"
-        cols="4"
+        cols="12"
+        md="4"
       >
         <v-card
           elevation="5"

tools/ota_analysis/src/views/PackageAnalysis.vue

@@ -1,7 +1,8 @@
 <template>
   <v-row>
     <v-col
-      cols="6"
+      cols="12"
+      md="6"
     >
       <BaseFile
         label="Please drag and drop an OTA package or Select one"
@@ -17,7 +18,8 @@
       vertical
     />
     <v-col
-      cols="6"
+      cols="12"
+      md="6"
     >
       <PayloadComposition
         v-if="zipFile && payload.manifest"

tools/otagui/src/components/PartialCheckbox.vue

@@ -11,7 +11,8 @@
     <v-col
       v-for="label in labels"
       :key="label"
-      cols="4"
+      cols="12"
+      md="4"
     >
       <label
         v-if="label"

tools/otagui/src/views/SimpleForm.vue

@@ -1,6 +1,9 @@
 <template>
   <v-row>
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    >
       <form @submit.prevent="sendForm">
         <FileSelect
           v-if="input.isIncremental"
@@ -15,7 +18,8 @@
         />
         <v-row>
           <v-col
-            cols="4"
+            cols="12"
+            md="4"
             align="center"
           >
             <BaseCheckbox
@@ -24,7 +28,8 @@
             />
           </v-col>
           <v-col
-            cols="4"
+            cols="12"
+            md="4"
             align="center"
           >
             <BaseCheckbox
@@ -33,7 +38,8 @@
             />
           </v-col>
           <v-col
-            cols="4"
+            cols="12"
+            md="4"
             align="center"
           >
             <BaseCheckbox
@@ -64,7 +70,10 @@
       </form>
     </v-col>
     <v-divider vertical />
-    <v-col cols="6">
+    <v-col
+      cols="12"
+      md="6"
+    >
       <ul>
         <h3>Build Library</h3>
         <UploadFile @file-uploaded="fetchTargetList" />