From 0035bc7fd8642556181d46a0097a7eb4acee58a1 Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Sat, 9 Oct 2021 00:36:34 +0530
Subject: [PATCH] Significantly improve the design for phones

---
 src/App.vue                  | 97 ++++++++++++++++++++++++------------
 src/components/VideoItem.vue |  5 +-
 src/routes/SearchMenu.vue    |  1 -
 src/routes/TrendingPage.vue  |  6 +--
 4 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2d4e7ff..f336b19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,43 +1,73 @@
 <template>
-  <v-app id="inspire">
+  <v-app>
     <v-app-bar
       app
       color="primary"
       dark
+      class="pt-3"
+      v-if="$vuetify.breakpoint.mdAndUp"
     >
-      <!-- Someone help me fix this horrid design -->
-      <v-container class="py-2 fill-height">
-        <v-row>
-          <v-col md="6">
-            <v-btn
-              text
-              link
-              v-for="link in links"
-              :key="link.id"
-              :to="link.to"
-              class="mr-1"
-            >
-              {{ $t(link.name) }}
-            </v-btn>
-          </v-col>
-          <v-col md="1">
-            <v-select
-              dense
-              :items="languageOptions"
-              label="Language"
-              :value="$i18n.locale"
-              @input="changeLocale"
-              outlined
-            />
-          </v-col>
-          <v-col md="5">
-            <SearchMenu />
-          </v-col>
-        </v-row>
-      </v-container>
+      <v-row dense>
+        <v-col md="1" v-for="link in links" :key="link.id">
+          <v-btn
+            text
+            link
+            min-width="100%"
+            :to="link.to"
+          >
+            {{ $t(link.name) }}
+          </v-btn>
+        </v-col>
+        <v-col md="2">
+          <v-select
+            dense
+            :items="languageOptions"
+            label="Language"
+            :value="$i18n.locale"
+            @input="changeLocale"
+            outlined
+          />
+        </v-col>
+        <v-col>
+          <SearchMenu />
+        </v-col>
+      </v-row>
     </v-app-bar>
+    <div v-else>
+      <v-navigation-drawer
+        v-model="drawer"
+        app
+      >
+        <v-list nav>
+          <v-list-item
+            v-for="link in links"
+            :key="link.id"
+            link
+            :to="link.to"
+          >
+            {{ $t(link.name) }}
+          </v-list-item>
+        </v-list>
+        <v-select
+          dense
+          :items="languageOptions"
+          label="Language"
+          :value="$i18n.locale"
+          @input="changeLocale"
+          outlined
+          class="mx-2"
+        />
+        <SearchMenu class="mx-2" />
+      </v-navigation-drawer>
 
-    <v-main class="grey lighten-3">
+      <v-app-bar app color="primary" dark>
+        <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+        <v-toolbar-title>Piped Material</v-toolbar-title>
+      </v-app-bar>
+    </div>
+
+    <v-main>
       <router-view />
     </v-main>
   </v-app>
@@ -93,7 +123,8 @@ export default {
       /* { value: 'bn_latn', text: 'Bengali (Latin)' }, */
     ].sort((a, b) => {
       return a.text.localeCompare(b.text)
-    })
+    }),
+    drawer: false
   }),
 
   methods: {
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 21910b2..474c9a3 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-card link :to="video.url">
+    <v-card link :to="video.url" outlined :height="maxHeight ? '100%' : undefined">
       <v-img
         :height="height"
         :width="width"
@@ -28,7 +28,8 @@ export default {
     video: Object,
     height: Number,
     width: Number,
-    hideChannel: Boolean
+    hideChannel: Boolean,
+    maxHeight: Boolean
   },
   methods: {
     numberFormat (...args) {
diff --git a/src/routes/SearchMenu.vue b/src/routes/SearchMenu.vue
index c879b2b..1649943 100644
--- a/src/routes/SearchMenu.vue
+++ b/src/routes/SearchMenu.vue
@@ -5,7 +5,6 @@
     :items="searchSuggestions"
     :search-input.sync="searchText"
     cache-items
-    class="mx-4"
     flat
     dense
     hide-no-data
diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue
index 8b97cac..63abc14 100644
--- a/src/routes/TrendingPage.vue
+++ b/src/routes/TrendingPage.vue
@@ -5,8 +5,8 @@
     <v-divider class="my-4" />
 
     <v-row v-for="(row, rowId) in chunkedByFour" :key="rowId">
-      <v-col md="2" v-for="(video, videoId) in row" :key="videoId">
-        <VideoItem :video="video" />
+      <v-col md="3" v-for="(video, videoId) in row" :key="videoId">
+        <VideoItem :video="video" max-height />
       </v-col>
     </v-row>
   </v-container>
@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     chunkedByFour () {
-      return _chunk(this.videos, 6)
+      return _chunk(this.videos, 4)
     }
   },
   components: {