From 0d0a2f4c2610c20b7f444d3de4ba55c1c022c0f6 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Fri, 6 Aug 2021 03:22:43 +0800
Subject: [PATCH] Improve playlist long description display (#1358)

* $ Add class names to some elements & use in CSS

* * Update playlist page style to ensure description box has max height to enusre visibility of share button
---
 .../playlist-info/playlist-info.css           | 32 -----------------
 .../playlist-info/playlist-info.sass          | 34 +++++++++++++++++++
 .../playlist-info/playlist-info.vue           | 15 +++++---
 3 files changed, 45 insertions(+), 36 deletions(-)
 delete mode 100644 src/renderer/components/playlist-info/playlist-info.css
 create mode 100644 src/renderer/components/playlist-info/playlist-info.sass

diff --git a/src/renderer/components/playlist-info/playlist-info.css b/src/renderer/components/playlist-info/playlist-info.css
deleted file mode 100644
index 7139aa93..00000000
--- a/src/renderer/components/playlist-info/playlist-info.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.playListThumbnail {
-  width: 100%;
-}
-
-.playlistThumbnail img {
-  width: 100%;
-
-  cursor: pointer;
-}
-
-.playlistChannel {
-  height: 70px;
-
-  /* Indicates the box can be clicked to navigate */
-  cursor: pointer;
-}
-
-.playlistChannel img {
-  width: 70px;
-  float: left;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.playlistChannel h3 {
-  float: left;
-  position: relative;
-  width: 200px;
-  margin-left: 10px;
-  top: 5px;
-  font-size: 15px;
-}
diff --git a/src/renderer/components/playlist-info/playlist-info.sass b/src/renderer/components/playlist-info/playlist-info.sass
new file mode 100644
index 00000000..28265395
--- /dev/null
+++ b/src/renderer/components/playlist-info/playlist-info.sass
@@ -0,0 +1,34 @@
+.playListThumbnail
+  width: 100%
+
+.playlistThumbnail img
+  width: 100%
+
+  cursor: pointer
+
+.playlistDescription
+  max-height: 20vh
+  overflow-y: auto
+
+  @media only screen and (max-width: 500px)
+    max-height: 10vh
+
+.playlistChannel
+  height: 70px
+
+  /* Indicates the box can be clicked to navigate */
+  cursor: pointer
+
+.channelThumbnail
+  width: 70px
+  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
+  font-size: 15px
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index dc4aa851..98f6e199 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -18,7 +18,9 @@
       </span>
       {{ lastUpdated }}
     </p>
-    <p>
+    <p
+      class="playlistDescription"
+    >
       {{ description }}
     </p>
     <hr>
@@ -26,8 +28,13 @@
       class="playlistChannel"
       @click="goToChannel"
     >
-      <img :src="channelThumbnail">
-      <h3>
+      <img
+        class="channelThumbnail"
+        :src="channelThumbnail"
+      >
+      <h3
+        class="channelName"
+      >
         {{ channelName }}
       </h3>
     </div>
@@ -42,4 +49,4 @@
 </template>
 
 <script src="./playlist-info.js" />
-<style scoped src="./playlist-info.css" />
+<style scoped lang="sass" src="./playlist-info.sass" />