From fd46b22f9191bbfa6527a630226f691725c70f08 Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Sat, 4 Jun 2022 23:51:18 +0200
Subject: [PATCH] Playlist page improvements (#2281)

* Add hover visual on thumbnails

* Fix white-space issues on playlist description

* Fix playlist issues with scrolling

* Fix end of file new lines

* Fix dropdown not visible issue

* Fix mobile styling

* Clean up using flex

* Fix lint issue
---
 .../ft-list-video/ft-list-video.sass          |  3 ++
 .../playlist-info/playlist-info.sass          | 28 +++++++++----
 .../playlist-info/playlist-info.vue           | 33 +++++++++------
 src/renderer/views/Playlist/Playlist.css      | 42 +++++++++++++++----
 src/renderer/views/Playlist/Playlist.vue      |  2 +
 5 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.sass b/src/renderer/components/ft-list-video/ft-list-video.sass
index cdebfe2e..9fb776c4 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.sass
+++ b/src/renderer/components/ft-list-video/ft-list-video.sass
@@ -1 +1,4 @@
 @use "../../sass-partials/_ft-list-item"
+
+.thumbnailLink:hover
+  outline: 3px solid var(--side-nav-hover-color)
diff --git a/src/renderer/components/playlist-info/playlist-info.sass b/src/renderer/components/playlist-info/playlist-info.sass
index 28265395..5e359934 100644
--- a/src/renderer/components/playlist-info/playlist-info.sass
+++ b/src/renderer/components/playlist-info/playlist-info.sass
@@ -3,32 +3,44 @@
 
 .playlistThumbnail img
   width: 100%
-
   cursor: pointer
 
+  @media only screen and (max-width: 800px)
+    display: none
+
+.playlistStats
+  font-size: 15px
+
+.playlistStats p
+  color: var(--secondary-text-color)
+  margin: 0
+
+.playlistTitle
+  margin-bottom: 0.1em
+
 .playlistDescription
   max-height: 20vh
   overflow-y: auto
+  white-space: break-spaces
 
   @media only screen and (max-width: 500px)
     max-height: 10vh
 
 .playlistChannel
-  height: 70px
+  display: flex
+  align-items: center
+  gap: 8px
+  height: 40px
 
   /* Indicates the box can be clicked to navigate */
   cursor: pointer
 
 .channelThumbnail
-  width: 70px
+  width: 40px
   float: left
   border-radius: 200px 200px 200px 200px
   -webkit-border-radius: 200px 200px 200px 200px
 
 .channelName
-  float: left
-  position: relative
-  width: 200px
-  margin-left: 10px
-  top: 5px
+  margin: 0
   font-size: 15px
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index 6a85ea61..1fc1bfbf 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -8,22 +8,27 @@
         @click="playFirstVideo"
       >
     </div>
-    <h2>
-      {{ title }}
-    </h2>
-    <p>
-      {{ videoCount }} {{ $t("Playlist.Videos") }} - <span v-if="!hideViews">{{ viewCount }} {{ $t("Playlist.Views") }} -</span>
-      <span v-if="infoSource !== 'local'">
-        {{ $t("Playlist.Last Updated On") }}
-      </span>
-      {{ lastUpdated }}
-    </p>
+
+    <div class="playlistStats">
+      <h2 class="playlistTitle">
+        {{ title }}
+      </h2>
+      <p>
+        {{ videoCount }} {{ $t("Playlist.Videos") }} - <span v-if="!hideViews">{{ viewCount }} {{ $t("Playlist.Views") }} -</span>
+        <span v-if="infoSource !== 'local'">
+          {{ $t("Playlist.Last Updated On") }}
+        </span>
+        {{ lastUpdated }}
+      </p>
+    </div>
+
     <p
       class="playlistDescription"
-    >
-      {{ description }}
-    </p>
+      v-text="description"
+    />
+
     <hr>
+
     <div
       class="playlistChannel"
       @click="goToChannel"
@@ -38,7 +43,9 @@
         {{ channelName }}
       </h3>
     </div>
+
     <br>
+
     <ft-list-dropdown
       :title="$t('Playlist.Share Playlist.Share Playlist')"
       :label-names="shareHeaders"
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index 66087cb7..691f2979 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -1,18 +1,42 @@
+.routerView {
+  display: flex;
+}
+
 .playlistInfo {
   background-color: var(--card-bg-color);
-  padding: 10px;
-  float: left;
-  position: fixed;
-  top: 60px;
-  width: 30%;
-  height: 100%;
+  box-sizing: border-box;
+  height: calc(100vh - 96px);
+  margin-right: 1em;
   overflow-y: auto;
+  padding: 10px;
+  position: sticky;
+  top: 78px;
+  width: 30%;
 }
 
 .playlistItems {
-  float: right;
-  width: 60%;
-  padding: 10px;
   display: grid;
   grid-gap: 10px;
+  margin: 0;
+  padding: 10px;
+  width: 60%;
+}
+
+@media only screen and (max-width: 800px) {
+  .routerView {
+    flex-direction: column;
+  }
+
+  .playlistInfo {
+    box-sizing: border-box;
+    position: relative;
+    top: 0;
+    height: auto;
+    width: 100%;
+  }
+
+  .playlistItems {
+    box-sizing: border-box;
+    width: 100%;
+  }
 }
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 22a04704..73b658c5 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -4,11 +4,13 @@
       v-if="isLoading"
       :fullscreen="true"
     />
+
     <playlist-info
       v-if="!isLoading"
       :data="infoData"
       class="playlistInfo"
     />
+
     <ft-card
       v-if="!isLoading"
       class="playlistItems"