From 2c5e1ef462b6638c33ad3fa09103e8234e7395c8 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 28 Apr 2022 15:10:46 -0300
Subject: [PATCH] frontend: version-chooser: Make it mobile friendly

---
 .../version-chooser/VersionCard.vue           | 106 ++++++++++--------
 .../version-chooser/VersionChooser.vue        | 103 ++++++++---------
 2 files changed, 101 insertions(+), 108 deletions(-)

diff --git a/core/frontend/src/components/version-chooser/VersionCard.vue b/core/frontend/src/components/version-chooser/VersionCard.vue
index 7ce4c92dd3..6b22986951 100644
--- a/core/frontend/src/components/version-chooser/VersionCard.vue
+++ b/core/frontend/src/components/version-chooser/VersionCard.vue
@@ -1,29 +1,42 @@
 <template>
-  <v-list-item>
-    <v-list-item-avatar>
-      <v-icon
-        :class="current ? 'green' : 'grey'"
-      >
-        {{ remote? 'mdi-earth' : '' }}
-        {{ current? 'mdi-checkbox-blank-circle' : 'mdi-checkbox-blank-circle-outline' }}
-      </v-icon>
-    </v-list-item-avatar>
+  <v-sheet
+    class="d-flex flex-column align-center my-4 pa-4 flex-sm-row py-sm-0"
+    :elevation="$vuetify.breakpoint.xs ? 1 : 0"
+  >
+    <div class="d-flex">
+      <v-list-item-avatar>
+        <v-icon :class="current ? 'green' : 'grey'">
+          {{ remote? 'mdi-earth' : '' }}
+          {{ current? 'mdi-checkbox-blank-circle' : 'mdi-checkbox-blank-circle-outline' }}
+        </v-icon>
+      </v-list-item-avatar>
 
-    <v-list-item-content>
-      <v-list-item-title v-text="image.tag" />
-      <v-list-item-subtitle
-        v-if="settings.is_pirate_mode"
-        v-text="`${image.sha? shortSha(image.sha) : 'N/A'} - ${asTimeAgo(image.last_modified)}`"
-      />
-      <v-list-item-subtitle
-        v-else
-        v-text="`${asTimeAgo(image.last_modified)}`"
-      />
-      <v-list-item-subtitle v-text="image.repository" />
-    </v-list-item-content>
-    <v-list-item-action>
+      <div>
+        <p
+          class="text-body-1 ma-0"
+          v-text="image.tag"
+        />
+        <p
+          v-if="settings.is_pirate_mode"
+          class="text-caption text--secondary ma-0"
+          v-text="`${image.sha? shortSha(image.sha) : 'N/A'} - ${asTimeAgo(image.last_modified)}`"
+        />
+        <p
+          v-else
+          class="text-caption text--secondary ma-0"
+          v-text="`${asTimeAgo(image.last_modified)}`"
+        />
+        <p
+          class="text-caption text--secondary ma-0"
+          v-text="image.repository"
+        />
+      </div>
+    </div>
+    <v-spacer />
+    <div class="d-flex flex-wrap justify-center align-center my-2">
       <v-alert
         v-if="upToDate && !settings.is_pirate_mode"
+        class="mx-2 my-1"
         dense
         text
         type="success"
@@ -32,69 +45,64 @@
       </v-alert>
       <v-alert
         v-if="settings.is_pirate_mode && current"
+        class="mx-2 my-1"
         dense
         text
         type="success"
       >
         Running
       </v-alert>
-    </v-list-item-action>
-    <v-list-item-action v-if="loading || deleting">
-      <spinning-logo
-        style="max-width:10%"
-        size="10%"
-        :subtitle="loading ? 'Loading image...' : 'Deleting image...'"
-      />
-    </v-list-item-action>
-    <v-list-item-action v-if="newStableAvailable">
+      <div v-if="loading || deleting">
+        <spinning-logo
+          style="max-width:10%"
+          size="10%"
+          :subtitle="loading ? 'Loading image...' : 'Deleting image...'"
+        />
+      </div>
       <v-btn
+        v-if="newStableAvailable"
         color="primary"
-        class="mr-2 mb-4"
+        class="mx-2 my-1"
         @click="$emit('pull-and-apply',`${image.repository}:${newStableAvailable}`)"
         v-text="`Upgrade to ${newStableAvailable}`"
       />
-    </v-list-item-action>
-    <v-list-item-action v-if="current && updateAvailable">
       <v-btn
+        v-if="current && updateAvailable"
         color="primary"
-        class="mr-2 mb-4"
+        class="mx-2 my-1"
         @click="$emit('pull-and-apply',`${image.repository}:${image.tag}`)"
         v-text="`Update to latest ${image.tag}`"
       />
-    </v-list-item-action>
-    <v-list-item-action v-if="newBetaAvailable">
       <v-btn
+        v-if="newBetaAvailable"
         color="primary"
-        class="mr-2 mb-4"
+        class="mx-2 my-1"
         @click="$emit('pull-and-apply',`${image.repository}:${newBetaAvailable}`)"
         v-text="`Upgrade to ${newBetaAvailable}`"
       />
-    </v-list-item-action>
-    <v-list-item-action v-if="!current && !remote && imageCanBeDeleted()">
       <v-btn
+        v-if="!current && !remote && imageCanBeDeleted()"
         color="error"
-        class="mr-2 mb-4"
+        class="mx-2 my-1"
         @click="$emit('delete', `${image.repository}:${image.tag}`)"
         v-text="'Delete'"
       />
-    </v-list-item-action>
-    <v-list-item-action v-if="!current && !remote">
       <v-btn
+        v-if="!current && !remote"
         color="primary"
-        class="mr-2 mb-4"
+        class="mx-2 my-1"
         @click="$emit('apply',`${image.repository}:${image.tag}`)"
         v-text="'Apply'"
       />
-    </v-list-item-action>
-    <v-list-item-action v-if="showPullButton">
       <v-btn
+        v-if="showPullButton"
         color="primary"
-        class="mr-2 mb-4"
+        class="mx-2 my-1"
         @click="$emit('pull-and-apply', `${image.repository}:${image.tag}`)"
         v-text="'Download and Apply'"
       />
-    </v-list-item-action>
-  </v-list-item>
+    </div>
+  </v-sheet>
 </template>
 
 <script lang="ts">
diff --git a/core/frontend/src/components/version-chooser/VersionChooser.vue b/core/frontend/src/components/version-chooser/VersionChooser.vue
index 7ad6014472..a782096f52 100644
--- a/core/frontend/src/components/version-chooser/VersionChooser.vue
+++ b/core/frontend/src/components/version-chooser/VersionChooser.vue
@@ -10,25 +10,20 @@
         class="mx-auto my-12 pa-4"
       >
         <h2>Current Version</h2>
-        <v-list
-          subheader
-          two-line
-        >
-          <version-card
-            v-if="current_version"
-            :image="current_version"
-            :current="true"
-            :last-modified="current_version.last_modified"
-            :loading="loading_images"
-            :up-to-date="!loading_images &&
-              !newStableAvailable() && !newBetaAvailable() && !updateIsAvailable(current_version)"
-            :new-stable-available="newStableAvailable()"
-            :new-beta-available="runningBeta() ? newBetaAvailable() : ''"
-            :update-available="updateIsAvailable(current_version)"
-            @apply="setVersion"
-            @pull-and-apply="pullAndSetVersion"
-          />
-        </v-list>
+        <version-card
+          v-if="current_version"
+          :image="current_version"
+          :current="true"
+          :last-modified="current_version.last_modified"
+          :loading="loading_images"
+          :up-to-date="!loading_images &&
+            !newStableAvailable() && !newBetaAvailable() && !updateIsAvailable(current_version)"
+          :new-stable-available="newStableAvailable()"
+          :new-beta-available="runningBeta() ? newBetaAvailable() : ''"
+          :update-available="updateIsAvailable(current_version)"
+          @apply="setVersion"
+          @pull-and-apply="pullAndSetVersion"
+        />
         <v-alert
           v-if="available_versions.error"
 
@@ -45,27 +40,22 @@
         class="mx-auto my-12 pa-4"
       >
         <h2>Local Versions</h2>
-        <v-list
-          subheader
-          two-line
-        >
-          <version-card
-            v-for="image in available_versions['local']"
-            :key="image.sha"
-            :image="image"
-            :current="image.tag === current_version.tag"
-            :update-available="updateIsAvailable(image)"
-            :deleting="deleting.endsWith(image.tag)"
-            @delete="deleteVersion"
-            @apply="setVersion"
-            @pull-and-apply="pullAndSetVersion"
-          />
-          <spinning-logo
-            v-if="loading_images"
-            size="15%"
-            subtitle="Loading local images..."
-          />
-        </v-list>
+        <version-card
+          v-for="image in available_versions['local']"
+          :key="image.sha"
+          :image="image"
+          :current="image.tag === current_version.tag"
+          :update-available="updateIsAvailable(image)"
+          :deleting="deleting.endsWith(image.tag)"
+          @delete="deleteVersion"
+          @apply="setVersion"
+          @pull-and-apply="pullAndSetVersion"
+        />
+        <spinning-logo
+          v-if="loading_images"
+          size="15%"
+          subtitle="Loading local images..."
+        />
       </v-card>
       <v-card
         v-if="settings.is_pirate_mode"
@@ -89,25 +79,20 @@
         >
           {{ available_versions.error }}
         </v-alert>
-        <v-list
-          subheader
-          two-line
-        >
-          <spinning-logo
-            v-if="loading_images"
-            size="15%"
-            subtitle="Loading remote images..."
-          />
-          <version-card
-            v-for="image in available_versions['remote']"
-            :key="image.sha"
-            :image="image"
-            :remote="true"
-            :update-available="updateIsAvailable(image)"
-            :show-pull-button="!imageIsAvailableLocally(image.sha)"
-            @pull-and-apply="pullAndSetVersion"
-          />
-        </v-list>
+        <spinning-logo
+          v-if="loading_images"
+          size="15%"
+          subtitle="Loading remote images..."
+        />
+        <version-card
+          v-for="image in available_versions['remote']"
+          :key="image.sha"
+          :image="image"
+          :remote="true"
+          :update-available="updateIsAvailable(image)"
+          :show-pull-button="!imageIsAvailableLocally(image.sha)"
+          @pull-and-apply="pullAndSetVersion"
+        />
       </v-card>
     </v-col>
     <v-dialog