Implement styling fixes & adjustments

FreeTubeApp · Apr 17, 2024 · 54d333b · 54d333b
1 parent e46d897
commit 54d333b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 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,12 +5,10 @@
   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;
@@ -31,36 +29,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 +71,11 @@
         padding: 10px;
       }
     }
+
+    .playlistItemsCard {
+      inline-size: 60%;
+      padding: 10px;
+    }
   }
 }
 
@@ -136,15 +141,7 @@
         block-size: auto;
         inline-size: 100%;
       }
-    }
-
-    &.grid {
-      .playlistInfoContainer {
-        padding-inline: 20px;
-      }
-    }
 
-    &.grid, &.list {
       .playlistItemsCard {
         box-sizing: border-box;
         inline-size: 100%;
@@ -158,10 +155,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,6 +1,6 @@
 <template>
   <div
-    :class="{ [listType]: true }"
+    :class="{ [listType]: true, playlistInEditMode }"
     class="playlistPage"
   >
     <ft-loader