From 3bf71940a85114b678da29885afbbcd333ec3d81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=20Rodr=C3=ADguez?= <dani@danirod.es>
Date: Sun, 15 Sep 2024 14:36:00 +0200
Subject: [PATCH] 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.
---
 app/javascript/six/components/plhead.scss | 56 ++++++++++++++++++++++-
 app/views/playlists/show.html.erb         |  7 +--
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/app/javascript/six/components/plhead.scss b/app/javascript/six/components/plhead.scss
index 2ea3a653..db4340f5 100644
--- a/app/javascript/six/components/plhead.scss
+++ b/app/javascript/six/components/plhead.scss
@@ -1,13 +1,41 @@
+@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;
@@ -15,6 +43,32 @@ $plhead-text-size: 1.15rem;
     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
index ad9a7921..3f913ccc 100644
--- 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>