Use wide layout for the playlist page

If the page is wide enough, the playlist header will be visible on the left area, instead of on the top.
makigas · Sep 15, 2024 · 3bf7194 · 3bf7194
1 parent 2664c29
commit 3bf7194
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/app/javascript/six/components/plhead.scss b/app/javascript/six/components/plhead.scss
@@ -1,20 +1,74 @@
+@import "../layout/responsive.scss";
+
 $plhead-text-size: 1.15rem;
 
 :root {
   --playlist-header-background: var(--playlist-background);
 }
 
+.playlistview {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  @include wide-layout {
+    flex-direction: row;
+    max-width: 1280px;
+    margin: 0 auto;
+
+    .plhead:before {
+      content: "";
+      position: absolute;
+      width: 200%;
+      background: oklch(from var(--playlist-header-background, var(--makigas-brand)) calc(1.1 * l) c h);
+      right: 100%;
+      height: 100%;
+    }
+  }
+
+  @include hdpi-layout {
+    max-width: 1600px;
+  }
+}
+
 .plhead {
-  background: var(--playlist-header-background, var(--makigas-brand));
+  background: oklch(from var(--playlist-header-background, var(--makigas-brand)) calc(1.1 * l) c h);
   color: var(--playlist-header-foreground, #fff);
   font-size: $plhead-text-size;
+  position: relative;
 
   &__wrap {
     display: flex;
     padding-bottom: 40px;
     justify-content: space-between;
     align-items: center;
     gap: 80px;
+    position: sticky;
+    top: 20px;
+
+    @include wide-layout {
+      width: 320px;
+      flex-direction: column-reverse;
+      gap: 0;
+      margin-top: 50px;
+      padding-right: 50px;
+    }
+
+    @include hdpi-layout {
+      width: 500px;
+    }
+  }
+
+  &__metas {
+    @include wide-layout {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      .meta + .meta {
+        margin-left: 0;
+      }
+    }
   }
 
   &__data {

diff --git a/app/views/playlists/show.html.erb b/app/views/playlists/show.html.erb
@@ -31,12 +31,13 @@
     </style>
   <% end %>
 <% end %>
-<% content_for :jumbo do %>
-  <%= render Six::Layout::PlaylistHeaderComponent.new(playlist: @playlist) %>
-<% end %>
+
+<div class="playlistview">
+<%= render Six::Layout::PlaylistHeaderComponent.new(playlist: @playlist) %>
 <%= render Six::Base::WrapperComponent.new(breath: true, classes: 'playlistsdata', slim: true) do %>
   <%= render Six::Explorer::DeprecatedPlaylistComponent.new(playlist: @playlist) if @playlist.deprecated %>
   <% @playlist.videos.visible.each do |v| %>
     <%= render Six::Explorer::PlaylistVideoCardComponent.new(video: v) %>
   <% end %>
 <% end %>
+</div>