From 0f5cc3a3321b9996dab4b16e9caf852186a6b74e Mon Sep 17 00:00:00 2001
From: Maurice Oegerli <maurice@oeger.li>
Date: Sun, 13 Sep 2020 23:06:00 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20search=20progress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/list/ChannelEntry.vue      | 71 ++++++++------------
 client/components/search/RelatedSearches.vue | 44 +++++++++---
 client/pages/results.vue                     | 47 +++++++------
 3 files changed, 85 insertions(+), 77 deletions(-)

diff --git a/client/components/list/ChannelEntry.vue b/client/components/list/ChannelEntry.vue
index 99cfb7ba2..fa345b670 100644
--- a/client/components/list/ChannelEntry.vue
+++ b/client/components/list/ChannelEntry.vue
@@ -1,26 +1,14 @@
 <template>
   <div class="channel-entry">
     <div class="channel-entry-background" />
-    <nuxt-link
-      class="channel-entry-thmb"
-      :to="{ path: '/channel/' + channel.authorId }"
-    >
-      <div
-        v-if="!channel.authorThumbnails"
-        class="fake-thmb"
-      >
+    <nuxt-link class="channel-entry-thmb" :to="{ path: '/channel/' + channel.authorId }">
+      <div v-if="!channel.authorThumbnails" class="fake-thmb">
         <h3>{{ channelNameToImgString() }}</h3>
       </div>
-      <div
-        v-if="channel.authorThumbnails"
-        class="thmb-image-container"
-      >
+      <div v-if="channel.authorThumbnails" class="thmb-image-container">
         <img
           class="channel-entry-thmb-image"
-          :src="
-            commons.proxyUrl +
-            channel.authorThumbnails[2].url
-          "
+          :src="commons.proxyUrl + channel.authorThumbnails[2].url"
           :alt="channel.author"
         />
       </div>
@@ -33,13 +21,8 @@
         >{{ channel.author }}</nuxt-link
       >
       <div class="channel-entry-stats">
-        <p class="channel-entry-videocount">
-          {{ channel.videoCount }} videos
-        </p>
-        <p
-          v-if="channel.subCount"
-          class="channel-entry-subcount"
-        >
+        <p class="channel-entry-videocount">{{ channel.videoCount }} videos</p>
+        <p v-if="channel.subCount" class="channel-entry-subcount">
           {{ channel.subCount.toLocaleString('en-US') }}
           subscribers
         </p>
@@ -169,26 +152,26 @@ export default {
     }
   }
 
-  @media screen and (max-width: $mobile-width) {
-    width: calc(100% - 20px);
-    margin: 10px;
-
-    .channel-entry-thmb {
-      width: 100%;
-      height: 53vw;
-
-      .thmb-image-container {
-        position: relative;
-        top: 0;
-        left: 0;
-        transform: translateY(0);
-
-        .channel-entry-thmb-image {
-          top: 0;
-          transform: translateY(0px);
-        }
-      }
-    }
-  }
+  // @media screen and (max-width: $mobile-width) {
+  //   width: calc(100% - 20px);
+  //   margin: 10px;
+
+  //   .channel-entry-thmb {
+  //     width: 100%;
+  //     height: 53vw;
+
+  //     .thmb-image-container {
+  //       position: relative;
+  //       top: 0;
+  //       left: 0;
+  //       transform: translateY(0);
+
+  //       .channel-entry-thmb-image {
+  //         top: 0;
+  //         transform: translateY(0px);
+  //       }
+  //     }
+  //   }
+  // }
 }
 </style>
diff --git a/client/components/search/RelatedSearches.vue b/client/components/search/RelatedSearches.vue
index c904c59fc..f42520833 100644
--- a/client/components/search/RelatedSearches.vue
+++ b/client/components/search/RelatedSearches.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="related-searches">
-    <BadgeButton
-      v-for="(keyword, index) in data.entries"
-      :key="index"
-      class="related-search-tag"
-      :href="`results?search_query=${keyword.q}`"
-    >
-      <p>{{ keyword.q }}</p>
-    </BadgeButton>
+    <p>Related searches</p>
+    <div class="related-keywords">
+      <BadgeButton
+        v-for="(keyword, index) in data.entries"
+        :key="index"
+        class="related-search-tag"
+        :href="`results?search_query=${keyword.q}`"
+      >
+        <p>{{ keyword.q }}</p>
+      </BadgeButton>
+    </div>
   </div>
 </template>
 
@@ -25,4 +28,27 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss">
+.related-searches {
+  overflow: auto hidden;
+  scrollbar-width: thin;
+  box-sizing: border-box;
+  width: 100%;
+  height: 70px;
+  position: relative;
+
+  .related-keywords {
+    display: flex;
+    flex-direction: row;
+    width: auto;
+    position: absolute;
+    height: 35px;
+
+    .related-search-tag {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/client/pages/results.vue b/client/pages/results.vue
index 9e59ac435..318eb0efa 100644
--- a/client/pages/results.vue
+++ b/client/pages/results.vue
@@ -111,7 +111,7 @@ export default {
   watchQuery: true,
   asyncData({ query }) {
     query.type = 'all';
-    query.limit = 20;
+    query.limit = 10;
     const searchParams = SearchParams.parseQueryJson(query, query.search_query);
     return ViewtubeApi.api
       .search({ params: searchParams })
@@ -250,32 +250,31 @@ export default {
     z-index: 10;
     display: grid;
     box-sizing: border-box;
-    @include viewtube-grid;
+    display: grid;
+    grid-template-columns: 200px repeat(auto-fill, minmax(300px, 1fr));
+    // grid-auto-rows: minmax(300px, auto);
+    grid-gap: 1em 2em;
+
+    @media screen and (max-width: $mobile-width) {
+      grid-template-columns: 1fr;
+
+      > div {
+        grid-column: unset !important;
+      }
+    }
 
     .related-searches-container {
       grid-row: 1;
       grid-column: 1 / -1;
-      overflow: auto hidden;
-      scrollbar-width: thin;
-      box-sizing: border-box;
-      height: 45px;
-      width: 100%;
-      position: relative;
-
-      .related-searches {
-        display: flex;
-        flex-direction: row;
-        width: auto;
-        position: absolute;
-
-        .related-search-tag {
-          display: inline-block;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
     }
     .channels {
+      height: 100%;
+      position: sticky;
+      top: 0;
+      .channel-entry {
+        // position: sticky;
+        // top: 0;
+      }
     }
     .vertical-shelf {
       grid-column-start: 2;
@@ -289,9 +288,9 @@ export default {
     .movies {
     }
     .videos {
-    }
-
-    @media screen and (max-width: $mobile-width) {
+      grid-column-start: 2;
+      grid-column-end: -1;
+      @include viewtube-grid;
     }
   }