From be609f5b3129591f2b36715abd877e47513d8167 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Fri, 16 Jul 2021 19:38:16 +0000
Subject: [PATCH] Add responsive design to the UI.

Now the columns width can be adjusted according to the window size.

Test: Mannual tested.
Change-Id: I1e2911b757948ee95f487631bcdceb5ede1fa63e
---
 .../src/components/PartialCheckbox.vue        |  3 +-
 .../src/components/PayloadComposition.vue     | 30 +++++++++++++++----
 .../src/components/PayloadDetail.vue          |  3 +-
 .../src/views/PackageAnalysis.vue             |  6 ++--
 .../otagui/src/components/PartialCheckbox.vue |  3 +-
 tools/otagui/src/views/SimpleForm.vue         | 19 ++++++++----
 6 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/tools/ota_analysis/src/components/PartialCheckbox.vue b/tools/ota_analysis/src/components/PartialCheckbox.vue
index b9f203497..24c9621d6 100644
--- a/tools/ota_analysis/src/components/PartialCheckbox.vue
+++ b/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"
diff --git a/tools/ota_analysis/src/components/PayloadComposition.vue b/tools/ota_analysis/src/components/PayloadComposition.vue
index ee4fdf94b..6f8797301 100644
--- a/tools/ota_analysis/src/components/PayloadComposition.vue
+++ b/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"
diff --git a/tools/ota_analysis/src/components/PayloadDetail.vue b/tools/ota_analysis/src/components/PayloadDetail.vue
index 199c6e5a8..ed71d5e8a 100644
--- a/tools/ota_analysis/src/components/PayloadDetail.vue
+++ b/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"
diff --git a/tools/ota_analysis/src/views/PackageAnalysis.vue b/tools/ota_analysis/src/views/PackageAnalysis.vue
index 42c733df6..92786356e 100644
--- a/tools/ota_analysis/src/views/PackageAnalysis.vue
+++ b/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"
diff --git a/tools/otagui/src/components/PartialCheckbox.vue b/tools/otagui/src/components/PartialCheckbox.vue
index b6b922341..ce4be4dc8 100644
--- a/tools/otagui/src/components/PartialCheckbox.vue
+++ b/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"
diff --git a/tools/otagui/src/views/SimpleForm.vue b/tools/otagui/src/views/SimpleForm.vue
index eb4ea05a5..7f326a170 100644
--- a/tools/otagui/src/views/SimpleForm.vue
+++ b/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" />