Nicer filtering/sorting look & feel on the explore page

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 {

lib/asciinema_web/controllers/recording_html/index.html.heex

@@ -1,57 +1,61 @@
 <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"
               />
             </div>
           </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>