From f4c66f5a7cd6ba009ffb35ee212552625c9692ec Mon Sep 17 00:00:00 2001
From: Marcin Kulik <m@ku1ik.com>
Date: Sat, 8 Jun 2024 16:27:40 +0200
Subject: [PATCH] Nicer filtering/sorting look & feel on the explore page

---
 assets/css/_recording_list.scss               | 23 ++++++-
 .../recording_html/index.html.heex            | 64 ++++++++++---------
 2 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/assets/css/_recording_list.scss b/assets/css/_recording_list.scss
index c1cd4ebe5..cda597d25 100644
--- a/assets/css/_recording_list.scss
+++ b/assets/css/_recording_list.scss
@@ -11,9 +11,24 @@
         }
       }
 
-      .sorting {
-        margin-top: 2rem;
+      .heading {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        margin: 2rem 0 1rem 0;
 
+        h2 {
+          flex-grow: 1;
+          margin-top: 0;
+        }
+      }
+
+      .toggles {
+        display: flex;
+        gap: 1rem;
+      }
+
+      .filtering, .sorting {
         span {
           margin-right: 0.5rem;
           font-size: 0.875rem;
@@ -22,6 +37,10 @@
         a {
           border-color: #d3d9df;
         }
+
+        .btn-group .active {
+          font-weight: 600;
+        }
       }
 
       .pagination {
diff --git a/lib/asciinema_web/controllers/recording_html/index.html.heex b/lib/asciinema_web/controllers/recording_html/index.html.heex
index bcd28ee4d..e982ec91b 100644
--- a/lib/asciinema_web/controllers/recording_html/index.html.heex
+++ b/lib/asciinema_web/controllers/recording_html/index.html.heex
@@ -1,34 +1,38 @@
 <div class="container">
   <div class="row">
-    <div :if={!@sidebar_hidden} class="col-md-2">
-      <h2>Explore</h2>
+    <div class="col-md-12">
+      <div class="heading">
+        <h2>Published recordings</h2>
 
-      <ul class="nav flex-column">
-        <.nav_link title="Featured" href={~p"/explore/featured"} active?={@category == :featured} />
-        <.nav_link title="All Public" href={~p"/explore/public"} active?={@category == :public} />
-      </ul>
-    </div>
-
-    <div class={"col-md-#{if @sidebar_hidden, do: 12, else: 10}"}>
-      <div class="row">
-        <div class="col-md-6">
-          <h2><%= @page_title %></h2>
-        </div>
+        <div class="toggles">
+          <div class="filtering">
+            <div class="btn-group btn-group-sm">
+              <.active_link
+                href={~p"/explore/featured"}
+                title="featured"
+                active?={@category == :featured}
+                class="btn btn-light"
+              />
+              <.active_link
+                href={~p"/explore/public"}
+                title="all public"
+                active?={@category == :public}
+                class="btn btn-light sort-popularity"
+              />
+            </div>
+          </div>
 
-        <div class="col-md-6 text-right">
           <div class="sorting">
-            <span>Sort by </span>
-
             <div class="btn-group btn-group-sm">
               <.active_link
                 href="?order=date"
-                title="date"
+                title="by upload date"
                 active?={@order == :date}
                 class="btn btn-light"
               />
               <.active_link
                 href="?order=popularity"
-                title="popularity"
+                title="by popularity"
                 active?={@order == :popularity}
                 class="btn btn-light sort-popularity"
               />
@@ -36,22 +40,22 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 
-      <div class="row asciicast-list">
-        <div class="col">
-          <div :for={asciicasts <- Enum.chunk_every(@page, 2, 2)} class="row">
-            <div :for={asciicast <- asciicasts} class="col-md-6">
-              <.card asciicast={asciicast} />
-            </div>
-          </div>
+  <div class="row asciicast-list">
+    <div class="col">
+      <div :for={asciicasts <- Enum.chunk_every(@page, 2, 2)} class="row">
+        <div :for={asciicast <- asciicasts} class="col-md-6">
+          <.card asciicast={asciicast} />
         </div>
       </div>
+    </div>
+  </div>
 
-      <div :if={@page.total_pages > 1} class="row">
-        <div class="col">
-          <%= pagination_links(@page, order: @order) %>
-        </div>
-      </div>
+  <div :if={@page.total_pages > 1} class="row">
+    <div class="col">
+      <%= pagination_links(@page, order: @order) %>
     </div>
   </div>
 </div>