Implement styling fixes & adjustments

FreeTubeApp · Apr 17, 2024 · 8843c46 · 8843c46
1 parent e46d897
commit 8843c46
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 43 deletions.
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
@@ -15,8 +15,6 @@ $watched-transition-duration: 0.5s;
   inset-inline-end: 0;
   inline-size: calc(100% - 80px);
   margin-inline: 0;
-  padding-inline: 10px;
-
 
   @include is-side-nav-open {
     inline-size: calc(100% - 200px);

diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
@@ -5,20 +5,16 @@
   flex-direction: column;
   grid-gap: 10px;
   margin: 0;
-  padding: 10px;
 }
 
 .playlistInfoContainer {
   box-sizing: border-box;
-  background-color: var(--card-bg-color);
   /* This is needed to make prompt always above video entries */
   /* Value being too high would block search suggestions */
   z-index: 1;
-  .playlistInfo {
-    &.promptOpen {
-      // Otherwise sidebar would be above the prompt
-      z-index: 200;
-    }
+  &.promptOpen {
+    // Otherwise sidebar would be above the prompt
+    z-index: 200;
   }
 }
 
@@ -31,36 +27,38 @@
     flex-direction: column;
     margin-block-start: 200px;
 
-    .playlistItemsCard {
-      inline-size: 85%;
-      margin-block: 0px 60px;
-      margin-inline: auto;
+    &.playlistInEditMode {
+      margin-block-start: 250px;
     }
 
     .playlistInfoContainer {
       @include ft-list-item.fixed-top-bar;
       padding-block: 0;
+
+      .playlistInfo {
+        background-color: var(--card-bg-color);
+        inline-size: 85%;
+        margin-inline: auto;
+        padding-block: 10px;
+        padding-inline: 16px;
+        box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
     }
 
-    .playlistInfo {
+    .playlistItemsCard {
       inline-size: 85%;
+      margin-block: 0px 60px;
       margin-inline: auto;
-      padding-block: 10px;
-      padding-inline: 16px;
-      box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
     }
   }
 
   &.list {
-    .playlistItemsCard {
-      inline-size: 60%;
-    }
-
     .playlistInfoContainer {
+      background-color: var(--card-bg-color);
       block-size: calc(100vh - 132px);
       inline-size: 30%;
       inset-block-start: 96px;
@@ -71,6 +69,11 @@
         padding: 10px;
       }
     }
+
+    .playlistItemsCard {
+      inline-size: 60%;
+      padding: 10px;
+    }
   }
 }
 
@@ -132,19 +135,10 @@
         box-sizing: border-box;
         position: relative;
         inset-block-start: 0;
-        z-index: 1;
         block-size: auto;
         inline-size: 100%;
       }
-    }
-
-    &.grid {
-      .playlistInfoContainer {
-        padding-inline: 20px;
-      }
-    }
 
-    &.grid, &.list {
       .playlistItemsCard {
         box-sizing: border-box;
         inline-size: 100%;
@@ -158,10 +152,17 @@
 }
 
 @media only screen and (max-width: 680px) {
-  .routerView.grid {
-    margin-block-start: 230px;
-    .playlistInfoContainer {
-      position: absolute;
+  .routerView{
+    &.grid {
+      margin-block-start: 230px;
+
+      &.playlistInEditMode {
+        margin-block-start: 280px;
+      }
+
+      .playlistInfoContainer {
+        position: absolute;
+      }
     }
   }
 }
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
@@ -1,13 +1,18 @@
 <template>
   <div
-    :class="{ [listType]: true }"
+    :class="{ [listType]: true, playlistInEditMode }"
     class="playlistPage"
   >
     <ft-loader
       v-if="isLoading"
       :fullscreen="true"
     />
-    <div class="playlistInfoContainer">
+    <div
+      class="playlistInfoContainer"
+      :class="{
+        promptOpen,
+      }"
+    >
       <playlist-info
         v-if="!isLoading"
         :id="playlistId"
@@ -30,9 +35,6 @@
         :search-query-text="searchQueryTextRequested"
         :theme="listType === 'list' ? 'base' : 'top-bar'"
         class="playlistInfo"
-        :class="{
-          promptOpen,
-        }"
         @enter-edit-mode="playlistInEditMode = true"
         @exit-edit-mode="playlistInEditMode = false"
         @search-video-query-change="(v) => videoSearchQuery = v"