Also rewrite ft-list-channel

src/renderer/components/ft-element-list/ft-element-list.vue

@@ -7,6 +7,7 @@
     >
       <ft-list-channel
         v-if="result.type === 'channel'"
+        appearance="result"
         :data="result"
         :key="index"
       />

src/renderer/components/ft-list-channel/ft-list-channel.css

@@ -1,93 +0,0 @@
-.channelThumbnail {
-  position: relative;
-  cursor: pointer;
-}
-
-.channelThumbnail img {
-  width: 140px;
-  height: 140px;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.channelName {
-  font-weight: bold;
-  color: var(--title-color);
-  cursor: pointer;
-  margin-bottom: 0px;
-}
-
-.subscriberCount {
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-}
-
-.videoCount {
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-}
-
-.grid {
-  width: 240px;
-  height: 250px;
-  padding: 2px;
-  overflow: hidden;
-}
-
-.grid .channelThumbnail {
-  width: 100%;
-  height: 140px;
-  margin-bottom: 5px;
-}
-
-.grid .channelThumbnail img {
-  position: relative;
-  left: 50px;
-}
-
-.grid .channelName {
-  width: 240px;
-}
-
-.list {
-  height: 140px;
-  width: 100%;
-  margin-left: 5px;
-  margin-top: 15px;
-  border-bottom: 1px solid var(--secondary-text-color);
-}
-
-.list .channelThumbnail {
-  float: left;
-  width: 240px;
-}
-
-.list .channelThumbnail img {
-  position: relative;
-  width: 120px;
-  height: 120px;
-  left: 60px;
-}
-
-.list .channelName {
-  margin-left: 250px;
-  width: 275px;
-}
-
-.list .subscriberCount {
-  margin-left: 10px;
-}
-
-.list .videoCount {
-  margin-left: 1px;
-}
-
-.list .description {
-  margin-left: 250px;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-  height: 35px;
-  overflow: hidden;
-}

src/renderer/components/ft-list-channel/ft-list-channel.js

@@ -6,6 +6,10 @@ export default Vue.extend({
     data: {
       type: Object,
       required: true
+    },
+    appearance: {
+      type: String,
+      required: true
     }
   },
   data: function () {
@@ -32,10 +36,6 @@ export default Vue.extend({
     }
   },
   methods: {
-    goToChannel: function () {
-      this.$router.push({ path: `/channel/${this.id}` })
-    },
-
     parseLocalData: function () {
       this.thumbnail = this.data.avatar
       this.channelName = this.data.name

src/renderer/components/ft-list-channel/ft-list-channel.sass

@@ -0,0 +1 @@
+@use "../../sass-partials/_ft-list-item"

src/renderer/components/ft-list-channel/ft-list-channel.vue

@@ -1,40 +1,50 @@
 <template>
   <div
-    class="ft-list-channel"
+    class="ft-list-channel ft-list-item"
-    :class="{ list: listType === 'list', grid: listType === 'grid' }"
+    :class="{
+      list: listType === 'list',
+      grid: listType === 'grid',
+      [appearance]: true
+    }"
   >
     <div class="channelThumbnail">
-      <img
+      <router-link
-        :src="thumbnail"
+        :to="`/channel/${id}`"
-        @click="goToChannel(id)"
       >
+        <img
+          :src="thumbnail"
+          class="channelImage"
+        >
+      </router-link>
+    </div>
+    <div class="info">
+      <router-link
+        class="title"
+        :to="`/channel/${id}`"
+      >
+        {{ channelName }}
+      </router-link>
+      <div class="infoLine">
+        <span
+          class="subscriberCount"
+        >
+          {{ subscriberCount }} subscribers
+        </span>
+        <span
+          class="videoCount"
+        >
+          - {{ videoCount }} videos
+        </span>
+      </div>
+      <p
+        v-if="listType !== 'grid'"
+        class="description"
+      >
+        {{ description }}
+      </p>
     </div>
-    <p
-      class="channelName"
-      @click="goToChannel(id)"
-    >
-      {{ channelName }}
-    </p>
-    <span
-      class="subscriberCount"
-      @click="goToChannel(id)"
-    >
-      {{ subscriberCount }} subscribers
-    </span>
-    <span
-      class="videoCount"
-      @click="goToChannel(id)"
-    >
-      - {{ videoCount }} videos
-    </span>
-    <p
-      v-if="listType !== 'grid'"
-      class="description"
-    >
-      {{ description }}
-    </p>
   </div>
 </template>
 
 <script src="./ft-list-channel.js" />
-<style scoped src="./ft-list-channel.css" />
+<style scoped lang="sass" src="./ft-list-channel.sass" />

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ft-list-video"
+    class="ft-list-video ft-list-item"
     :appearance="appearance"
     :class="{ list: listType === 'list', grid: listType === 'grid' }"
   >
@@ -22,7 +22,7 @@
         </div>
       </div>
     </router-link>
-    <div class="videoInfo">
+    <div class="info">
       <router-link
         class="title"
         :to="`/playlist/${playlistId}`"

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ft-list-video"
+    class="ft-list-video ft-list-item"
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
       grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list',
@@ -49,7 +49,7 @@
         :style="{width: progressPercentage + '%'}"
       />
     </div>
-    <div class="videoInfo">
+    <div class="info">
       <ft-icon-button
         class="optionsButton"
         title="More Options"

src/renderer/sass-partials/_ft-list-item.sass

@@ -20,7 +20,7 @@ $thumbnail-overlay-opacity: 0.85
     .watchPlaylistItem#{&}, .recommendation#{&}
       @content
 
-.ft-list-video
+.ft-list-item
   .videoThumbnail
     display: flex
     position: relative
@@ -88,7 +88,15 @@ $thumbnail-overlay-opacity: 0.85
         align-items: center
         color: var(--primary-text-color)
 
-  .videoInfo
+  .channelThumbnail
+    display: flex
+    justify-content: center
+
+    .channelImage
+      height: 130px
+      border-radius: 50%
+
+  .info
     flex: 1
     position: relative
 
@@ -121,10 +129,14 @@ $thumbnail-overlay-opacity: 0.85
     display: flex
     align-items: flex-start
 
-    .videoThumbnail
+    .videoThumbnail, .channelThumbnail
       margin-right: 20px
 
-      @include is-sidebar-item
+    .channelThumbnail
+      width: 231px
+
+    @include is-sidebar-item
+      .videoThumbnail
         margin-right: 10px
 
   &.grid
@@ -133,7 +145,7 @@ $thumbnail-overlay-opacity: 0.85
     min-height: 230px
     padding-bottom: 20px
 
-    .videoThumbnail
+    .videoThumbnail, .channelThumbnail
       margin-bottom: 12px
 
       .thumbnailImage
@@ -146,6 +158,5 @@ $thumbnail-overlay-opacity: 0.85
       margin-top: 8px
       font-size: 13px
 
-
 .videoWatched, .live
   text-transform: uppercase