From 885b0b4a88ff9cda1c6bbbc717f2f26a91cde334 Mon Sep 17 00:00:00 2001
From: Monochromish <79590499+Monochromish@users.noreply.github.com>
Date: Tue, 30 Aug 2022 06:58:02 +1000
Subject: [PATCH] Change Album Search and Pagination Layout (#1397)

---
 src/renderer/less/pages.css                 | 17 +++++++++++++++++
 src/renderer/less/pages.less                | 17 +++++++++++++++++
 src/renderer/views/pages/library-albums.ejs | 18 +++++++++---------
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/renderer/less/pages.css b/src/renderer/less/pages.css
index 7c24781e..f26c2d3c 100644
--- a/src/renderer/less/pages.css
+++ b/src/renderer/less/pages.css
@@ -569,6 +569,23 @@
   }
 }
 /* Album / Playlist Page */
+.album-header {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  padding: 0px 2em;
+  backdrop-filter: blur(32px);
+  background: rgba(0, 0, 0, 0.25);
+  top: var(--navigationBarHeight);
+  --bs-gutter-x: 4rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+}
 .playlist-page {
   --bgColor: transparent;
   padding: 0px;
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 5036c8dc..b7aa6bc2 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -695,6 +695,23 @@
 }
 
 /* Album / Playlist Page */
+.album-header {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  padding: 0px 2em;
+  backdrop-filter: blur(32px);
+  background: rgba(0, 0, 0, 0.25);
+  top: var(--navigationBarHeight);
+  --bs-gutter-x: 4rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+}
 .playlist-page {
   --bgColor: transparent;
   padding: 0px;
diff --git a/src/renderer/views/pages/library-albums.ejs b/src/renderer/views/pages/library-albums.ejs
index 7df63963..f63cd631 100644
--- a/src/renderer/views/pages/library-albums.ejs
+++ b/src/renderer/views/pages/library-albums.ejs
@@ -10,7 +10,7 @@
                         :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
             </div>
         </div>
-        <div class="row">
+        <div class="album-header">
             <div class="col" style="padding:0;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0;">
                     <div class="search-input--icon"></div>
@@ -63,15 +63,15 @@
                     </div>
                 </div>
             </div>
+            <pagination
+              :length="app.library.albums.displayListing.length"
+              :pageSize="pageSize"
+              :scroll="prefs.scroll"
+              scrollSelector="#app-content"
+              @onRangeChange="onRangeChange"
+              style="margin-bottom: 0;"
+            />
         </div>
-        <pagination
-                :length="app.library.albums.displayListing.length
-            "
-                :pageSize="pageSize"
-                :scroll="prefs.scroll"
-                scrollSelector="#app-content"
-                @onRangeChange="onRangeChange"
-        />
         <div class="well">
             <div class="albums-square-container">
                 <div>