From 63c9e951aea8a89c63d4ff711361d3f86c6fa9a6 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 21 Jan 2022 05:30:17 -0800
Subject: [PATCH] style changes to podcast page

---
 src/renderer/style.less               | 47 +++++++++++++++++++++++----
 src/renderer/views/pages/podcasts.ejs | 12 ++++---
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index f8162a67..aa57d762 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1309,6 +1309,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
+
+
   .display--large {
     display: none !important;
   }
@@ -2580,6 +2582,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: calc(100% - var(--navigationBarHeight));
   padding: 0px;
 
+  .list-flat {
+    border-radius: 0px;
+  }
+
   .podcast-artwork {
     width: 200px;
     margin: 16px auto;
@@ -2649,19 +2655,28 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .podcasts-details {
-    height: 96%;
-    width: 400px;
+    width: 300px;
     flex: none;
-    background: rgb(20 20 20 / 97%);
+    background: rgb(255 255 255 / 5%);
     overflow-y: overlay;
     overflow-x: hidden;
-    position: absolute;
-    right: 2%;
     top: 2%;
-    border-radius: 10px;
-    box-shadow: var(--ciderShadow-Generic);
     z-index: 2;
+    border-left: 1px solid var(--color2);
+    padding-bottom: 1em;
 
+    .meta-btn {
+      font-size: 0.75em;
+    }
+
+    .podcasts-details-header {
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
     .close-btn {
       width: 50px;
       height: 42px;
@@ -2718,6 +2733,24 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 }
 
+@media only screen and (max-width: 1230px) {
+  .content-inner.podcasts-page {
+    .podcasts-details {
+      height: 96%;
+      width: 300px;
+      flex: none;
+      background: rgb(20 20 20 / 97%);
+      overflow-y: overlay;
+      overflow-x: hidden;
+      position: absolute;
+      right: 2%;
+      top: 2%;
+      border-radius: 10px;
+      box-shadow: var(--ciderShadow-Generic);
+      z-index: 2;
+    }
+  }
+}
 
 
 
diff --git a/src/renderer/views/pages/podcasts.ejs b/src/renderer/views/pages/podcasts.ejs
index 75473d6b..ddcc5443 100644
--- a/src/renderer/views/pages/podcasts.ejs
+++ b/src/renderer/views/pages/podcasts.ejs
@@ -63,7 +63,9 @@
         </div>
         <transition name="wpfade">
             <div class="podcasts-details" v-if="selected.id != -1">
-                <button class="close-btn" @click="selected.id = -1"></button>
+                <div class="podcasts-details-header">
+                    <button class="close-btn" @click="selected.id = -1"></button>
+                </div>
                 <div class="podcast-artwork">
                     <mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>
                 </div>
@@ -78,10 +80,10 @@
                 <div class="well podcast-description" v-if="selected.attributes.description.standard">{{ selected.attributes.description.standard }}</div>
                 <div class="row">
                     <div class="col">
-                        <button class="md-btn md-btn-block" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button>
+                        <button class="md-btn md-btn-block meta-btn" @click="openUrl(selected.attributes.websiteUrl)">Podcast Website</button>
                     </div>
                     <div class="col">
-                        <button class="md-btn md-btn-block">Share</button>
+                        <button class="md-btn md-btn-block meta-btn">Share</button>
                     </div>
                 </div>
             </div>
@@ -90,7 +92,7 @@
     </div>
 </script>
 <script type="text/x-template" id="podcast-tab">
-    <div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}">
+    <div class="cd-mediaitem-list-item list-flat" :class="{'mediaitem-selected': isselected}">
         <div class="artwork">
             <mediaitem-artwork
                     :url="item.attributes.artwork.url"
@@ -105,7 +107,7 @@
     </div>
 </script>
 <script type="text/x-template" id="podcast-episode">
-    <div class="cd-mediaitem-list-item" :class="{'mediaitem-selected': isselected}">
+    <div class="cd-mediaitem-list-item list-flat" :class="{'mediaitem-selected': isselected}">
         <div class="info-rect" :style="{'padding-left':'16px'}">
             <div class="title text-overflow-elipsis">
                 {{ item.attributes.name }}