From fe13cfdb081327e01e974a8f446f119d2e054005 Mon Sep 17 00:00:00 2001
From: Gregoo <versatile.mailbox@gmail.com>
Date: Tue, 28 Jan 2025 23:31:20 +0100
Subject: [PATCH] Collapsible grid controls

---
 templates/sets.html | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/templates/sets.html b/templates/sets.html
index ea08c2d..c62d3f3 100644
--- a/templates/sets.html
+++ b/templates/sets.html
@@ -9,14 +9,14 @@
     <div class="col-12 flex-grow-1">
       <label class="visually-hidden" for="grid-search">Search</label>
       <div class="input-group">
-        <span class="input-group-text">Search</span>
+        <span class="input-group-text"><i class="ri-search-line"></i><span class="ms-1 d-none d-xl-inline"> Search</span></span>
         <input id="grid-search" class="form-control form-control-sm" type="text" placeholder="Set name, set number, set theme or number of parts..." value="">
       </div>
     </div>
     <div class="col-12 flex-grow-1">
       <label class="visually-hidden" for="grid-filter">Filter</label>
       <div class="input-group">
-        <span class="input-group-text">Filter</span>
+        <span class="input-group-text"><i class="ri-dropdown-list"></i><span class="ms-1 d-none d-xl-inline"> Filter</span></span>
         <select id="grid-filter" class="form-select form-select-sm" autocomplete="off">
           <option value="" selected>All sets</option>
           <option value="-has-missing">Set is complete</option>
@@ -37,23 +37,23 @@
     </div>
     <div class="col-12">
       <div id="grid-sort" class="input-group">
-        <span class="input-group-text">Sort</span>
+        <span class="input-group-text"><i class="ri-sort-asc"></i><span class="ms-1 d-none d-xxl-inline"> Sort</span></span>
         <button id="sort-number" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="number" data-sort-natural="true">Num.</button>
+          data-sort-target="div#grid>div" data-sort-attribute="number" data-sort-natural="true"><i class="ri-hashtag"></i><span class="d-none d-xxl-inline"> Number</span></button>
         <button id="sort-name" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="name">Name</button>
+          data-sort-target="div#grid>div" data-sort-attribute="name"><i class="ri-pencil-line"></i><span class="d-none d-xxl-inline"> Name</span></button>
         <button id="sort-theme" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="theme">Theme</button>
+          data-sort-target="div#grid>div" data-sort-attribute="theme"><i class="ri-price-tag-3-line"></i><span class="d-none d-xxl-inline"> Theme</span></button>
         <button id="sort-year" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="year">Year</button>
+          data-sort-target="div#grid>div" data-sort-attribute="year"><i class="ri-calendar-line"></i><span class="d-none d-xxl-inline"> Year</span></button>
         <button id="sort-minifigure" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="minifigures" data-sort-desc="true">Fig.</button>
+          data-sort-target="div#grid>div" data-sort-attribute="minifigures" data-sort-desc="true"><i class="ri-group-line"></i><span class="d-none d-xxl-inline"> Figures</span></button>
         <button id="sort-parts" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="parts" data-sort-desc="true">Parts</button>
+          data-sort-target="div#grid>div" data-sort-attribute="parts" data-sort-desc="true"><i class="ri-shapes-line"></i><span class="d-none d-xxl-inline"> Parts</span></button>
         <button id="sort-missing" type="button" class="btn btn-sm btn-outline-primary"
-          data-sort-target="div#grid>div" data-sort-attribute="missing" data-sort-desc="true">Miss.</button>
+          data-sort-target="div#grid>div" data-sort-attribute="missing" data-sort-desc="true"><i class="ri-error-warning-line"></i><span class="d-none d-xxl-inline"> Missing</span></button>
         <button id="sort-clear" type="button" class="btn btn-sm btn-outline-dark"
-          data-sort-target="div#grid>div" data-sort-clear="true"><i class="ri-filter-off-line"></i></button>
+          data-sort-target="div#grid>div" data-sort-clear="true"><i class="ri-filter-off-line"></i><span class="d-none d-xxl-inline"> Clear</span></button>
       </div>
     </div>
   </div>