🚧 search api progress

client/assets/styles/global/variables.scss

@@ -52,5 +52,5 @@ $title-color-fake-gradient: linear-gradient(to right, var(--title-color), var(--
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   // grid-auto-rows: minmax(300px, auto);
-  grid-gap: 1em 2em;
+  gap: 1em 2em;
 }

client/components/SectionTitle.vue

@@ -4,6 +4,7 @@
       {{ title }}
       <ChevronRightIcon v-if="link !== undefined" />
     </h2>
+    <span class="line" />
     <slot />
   </div>
 </template>
@@ -33,19 +34,18 @@ export default {
   z-index: 9;
   display: block;
   width: 100%;
+  display: flex;
+  flex-direction: row;
 
   .title {
-    position: absolute;
+    position: relative;
     top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
     max-width: $main-width;
-    margin: 0 auto;
+    margin: 0;
     line-height: 80px;
     font-size: 1.7rem;
     text-align: start;
-    padding: 0 0 0 20px;
+    padding: 0;
     color: var(--title-color);
     box-sizing: border-box;
     z-index: 9;
@@ -73,5 +73,13 @@ export default {
       }
     }
   }
+  .line {
+    height: 2px;
+    flex-grow: 1;
+    background: linear-gradient(to right, transparent 5%, var(--theme-color-translucent) 15%);
+    position: relative;
+    top: 50%;
+    display: block;
+  }
 }
 </style>

client/components/channel/Overview.vue

@@ -2,11 +2,8 @@
   <div class="overwiew">
     <div ref="channelTitle" class="channel-title-container">
       <div class="channel-title">
-        <div class="channel-thumbnail">
-          <img
-            :src="channel.authorThumbnails[3].url"
-            alt="Author Image"
-          />
+        <div v-if="channel.authorThumbnails" class="channel-thumbnail">
+          <img :src="channel.authorThumbnails[3].url" alt="Author Image" />
         </div>
         <div class="channel-info">
           <div class="channel-name">
@@ -15,34 +12,23 @@
           <div class="channel-basics">
             <div class="channel-subcount">
               <h2>
-                {{
-                  channel.subCount.toLocaleString('en-US')
-                }}
+                {{ channel.subCount.toLocaleString('en-US') }}
                 subscribers
               </h2>
             </div>
             <div class="channel-totalviews">
               <h2>
-                {{
-                  channel.totalViews.toLocaleString('en-US')
-                }}
+                {{ channel.totalViews.toLocaleString('en-US') }}
                 total views
               </h2>
             </div>
             <div class="channel-joined-on">
               <h2>
                 joined
-                {{
-                  getFormattedDate(
-                    new Date(channel.joined * 1000)
-                  )
-                }}
+                {{ getFormattedDate(new Date(channel.joined * 1000)) }}
               </h2>
             </div>
-            <div
-              v-if="channel.isFamilyFriendly"
-              class="channel-family-friendly"
-            >
+            <div v-if="channel.isFamilyFriendly" class="channel-family-friendly">
               <FamilyFriendly />
               <h2>family friendly</h2>
             </div>
@@ -76,9 +62,7 @@ export default {
   methods: {
     getFormattedDate(rawDate) {
       const date = new Date(rawDate);
-      return `${date.getDate()}.${
-        date.getMonth() + 1
-      }.${date.getFullYear()}`;
+      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
     }
   }
 };

client/components/list/ChannelEntry.vue

@@ -67,7 +67,6 @@ export default {
 
   .channel-entry-background {
     position: absolute;
-    height: 175px;
     top: 10px;
     width: 175px;
     left: 50%;
@@ -85,7 +84,7 @@ export default {
     height: 175px;
     overflow: hidden;
     position: relative;
-    box-shadow: $max-shadow;
+    box-shadow: $medium-shadow;
     margin: 0 auto;
     z-index: 11;
 
@@ -112,6 +111,7 @@ export default {
 
       .channel-entry-thmb-image {
         width: 100%;
+        display: block;
       }
     }
   }

client/components/list/CollapsibleSection.vue

@@ -1,18 +1,11 @@
 <template>
   <div class="collapsible-section">
-    <div
-      class="title"
-      v-ripple
-      @click.prevent="toggleSection()"
-    >
+    <div v-ripple class="title" @click.prevent="toggleSection()">
       <h3 class="title-text">{{ label }}</h3>
-      <ArrowDownIcon
-        class="icon"
-        :class="{ inverted: open }"
-      />
+      <ArrowDownIcon class="icon" :class="{ inverted: open }" />
     </div>
     <transition name="section-collapse">
-      <div class="section-container" v-show="open">
+      <div v-show="open" class="section-container">
         <slot />
       </div>
     </transition>
@@ -22,29 +15,29 @@
 <script>
 import ArrowDownIcon from 'vue-material-design-icons/ChevronDown';
 export default {
-  name: 'collapsible-section',
+  name: 'CollapsibleSection',
   components: {
     ArrowDownIcon
   },
-  data: () => ({
-    open: false
-  }),
   props: {
     label: String,
     opened: Boolean
   },
-  mounted() {
-    if (this.opened) {
-      this.open = this.opened;
-    }
-  },
+  data: () => ({
+    open: false
+  }),
   watch: {
     opened(newValue, oldValue) {
       if (newValue !== oldValue) {
         this.open = Boolean(newValue);
       }
     }
   },
+  mounted() {
+    if (this.opened) {
+      this.open = this.opened;
+    }
+  },
   methods: {
     toggleSection() {
       this.open = !this.open;
@@ -78,7 +71,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 10px 10px 0 10px;
+    padding: 20px 10px 15px 10px;
     position: sticky;
     top: 0;
 

client/components/list/PlaylistEntry.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="playlist-entry">
-    <div class="playlist-entry-background" />
     <nuxt-link
       class="playlist-entry-thmb"
       :to="{
@@ -53,33 +52,17 @@ export default {
 
 <style lang="scss">
 .playlist-entry {
-  width: 320px;
   display: flex;
   flex-direction: column;
-  padding: 10px;
   justify-content: flex-start;
   z-index: 11;
   position: relative;
 
-  .playlist-entry-background {
-    position: absolute;
-    height: 175px;
-    top: 10px;
-    left: 10px;
-    width: calc(100% - 20px);
-    background-color: #34363b;
-    z-index: 10;
-    transition-duration: 300ms;
-    transition-timing-function: $intro-easing;
-    transition-property: box-shadow;
-  }
-
   .playlist-entry-thmb {
     width: 100%;
-    height: 175px;
     overflow: hidden;
     position: relative;
-    box-shadow: $max-shadow;
+    box-shadow: $medium-shadow;
     z-index: 11;
 
     .thmb-image-container {
@@ -90,6 +73,7 @@ export default {
 
       .playlist-entry-thmb-image {
         width: 100%;
+        display: block;
       }
     }
     .playlist-entry-count {

client/components/list/VideoEntry.vue

@@ -120,7 +120,7 @@ export default {
       left: 0;
       transition: transform 800ms 100ms $intro-easing;
       transform-style: preserve-3d;
-      box-shadow: $max-shadow;
+      box-shadow: $medium-shadow;
 
       .thmb-clip {
         overflow: hidden;

client/components/search/CompactShelf.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="compact-shelf">
-    <p class="shelf-title">{{ data.title }}</p>
+    <SectionTitle :title="data.title" />
     <div class="compact-shelf-elements">
       <div v-for="(element, index) in data.items" :key="index" class="shelf-element">
         <nuxt-link
@@ -26,9 +26,13 @@
 
 <script>
 import Commons from '@/plugins/commons.js';
+import SectionTitle from '@/components/SectionTitle';
 
 export default {
   name: 'CompactShelf',
+  components: {
+    SectionTitle
+  },
   props: {
     data: Object
   },

client/components/search/VerticalShelf.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vertical-shelf">
-    <p class="title">{{ data.title }}</p>
+    <SectionTitle :title="data.title" />
     <div class="vertical-shelf-container">
       <VideoEntry v-for="video in data.items" :key="video.videoId" :video="video" />
     </div>
@@ -9,11 +9,13 @@
 
 <script>
 import VideoEntry from '@/components/list/VideoEntry';
+import SectionTitle from '@/components/SectionTitle';
 
 export default {
   name: 'VerticalShelf',
   components: {
-    VideoEntry
+    VideoEntry,
+    SectionTitle
   },
   props: {
     data: Object

client/components/watch/RecommendedVideos.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="recommended-videos">
     <div class="recommended-videos-container">
-      <VideoEntry
-        v-for="video in recommendedVideosShort"
-        :key="video.videoId"
-        :video="video"
-      />
+      <VideoEntry v-for="video in recommendedVideosShort" :key="video.videoId" :video="video" />
       <div class="show-more-container">
-        <BadgeButton :click="expand" v-if="!videosExpanded">
+        <BadgeButton v-if="!videosExpanded" :click="expand">
           <LoadMoreIcon />
           <p>show more</p>
         </BadgeButton>
@@ -22,7 +18,7 @@ import BadgeButton from '@/components/buttons/BadgeButton';
 import LoadMoreIcon from 'vue-material-design-icons/Reload';
 
 export default {
-  name: 'recommended-videos',
+  name: 'RecommendedVideos',
   components: {
     VideoEntry,
     BadgeButton,
@@ -38,22 +34,16 @@ export default {
     recommendedVideosShort: null,
     videosExpanded: false
   }),
-  mounted() {
-    this.recommendedVideosShort = this.recommendedVideos.slice(
-      0,
-      4
-    );
-  },
   watch: {
     recommendedVideos(newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.recommendedVideosShort = this.recommendedVideos.slice(
-          0,
-          4
-        );
+        this.recommendedVideosShort = this.recommendedVideos.slice(0, 4);
       }
     }
   },
+  mounted() {
+    this.recommendedVideosShort = this.recommendedVideos.slice(0, 4);
+  },
   methods: {
     expand() {
       this.recommendedVideosShort = this.recommendedVideos;
@@ -66,10 +56,11 @@ export default {
 <style lang="scss">
 .recommended-videos {
   .recommended-videos-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr);
+    // grid-auto-rows: minmax(300px, auto);
+    gap: 1em 2em;
+    padding: 0 15px;
 
     .show-more-container {
       display: flex;