From 1496eb8155431d10db050934bb0f474e8b4dc400 Mon Sep 17 00:00:00 2001
From: Emma <hello@prpl.wtf>
Date: Sun, 29 Dec 2024 17:06:06 +0100
Subject: [PATCH] feat `/browse`: make mobile friendly

---
 .gitignore        |   1 +
 browse/index.css  |   7 +++
 browse/index.html | 106 ++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 97 insertions(+), 17 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2f80aca
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+wak.toml
\ No newline at end of file
diff --git a/browse/index.css b/browse/index.css
index fc76ef2..5d80a66 100644
--- a/browse/index.css
+++ b/browse/index.css
@@ -38,6 +38,13 @@
   height: 40px !important;
 }
 
+@media screen and (max-width: 767px) {
+  #productSearch {
+    border-top-right-radius: var(--bs-border-radius);
+    border-bottom-right-radius: var(--bs-border-radius);
+  }
+}
+
 [data-bs-theme=light] .bp-fade { background-image: linear-gradient(to bottom, #ffffff00, #ffffff); }
 [data-bs-theme=light] .bp-grid { 
   background-image:
diff --git a/browse/index.html b/browse/index.html
index 16467ec..af4c78e 100644
--- a/browse/index.html
+++ b/browse/index.html
@@ -129,8 +129,16 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
               <span id="filterTypeLabel">Products</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
-              <li><a class="dropdown-item rounded-2" id="toggleFilterProducts" data-filter="products">Products</a></li>
-              <li><a class="dropdown-item rounded-2" id="toggleFilterAuthors" data-filter="authors">Authors</a></li>
+              <li>
+                <a class="dropdown-item rounded-2" id="toggleFilterProducts" data-filter="products">
+                  Products
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item rounded-2" id="toggleFilterAuthors" data-filter="authors">
+                  Authors
+                </a>
+              </li>
             </ul>
             <input
               type="text"
@@ -138,9 +146,10 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
               id="productSearch"
               placeholder="Search products..">
 
+            <span class="d-none d-md-block input-group-text border-0 pe-0"><i class="bi bi-sort-down"></i></span>
             <button 
-              id="filterDropdown"
-              class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle"
+              id="sortDropdown"
+              class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle d-none d-md-block"
               type="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
@@ -148,15 +157,31 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
               <span id="sortLabel">Name</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
-              <li><a class="dropdown-item rounded-2" id="toggleSortName" data-sort="name">Name</a></li>
-              <li><a class="dropdown-item rounded-2" id="toggleSortCreated" data-sort="created">Created</a></li>
-              <li><a class="dropdown-item rounded-2" id="toggleSortAuthor" data-sort="author">Author</a></li>
-              <li><a class="dropdown-item rounded-2" id="toggleSortpopularity" data-sort="popularity">Popularity</a></li>
+              <li>
+                <a class="dropdown-item rounded-2" id="toggleSortName" data-sort="name">
+                  Name
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item rounded-2" id="toggleSortCreated" data-sort="created">
+                  Created
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item rounded-2" id="toggleSortAuthor" data-sort="author">
+                  Author
+                </a>
+              </li>
+              <li>
+                <a class="dropdown-item rounded-2" id="toggleSortpopularity" data-sort="popularity">
+                  Popularity
+                </a>
+              </li>
             </ul>
           </div>
 
           <!-- Filters -->
-          <div class="d-sm-flex flex-row d-none" style="width: auto;">
+          <div class="d-md-flex flex-row d-none" style="width: auto;">
             <div class="input-group flex-row me-2" style="flex-wrap: nowrap;">
               <span class="input-group-text border-0">
                 <input class="form-check-input mt-0" type="checkbox" value="" id="filterExtensions">
@@ -170,7 +195,7 @@ <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center byte-txt"
               <span class="input-group-text ps-0 border-0"><label for="filterThemes">Themes</label></span>
             </div>
           </div>
-          <div class="d-flex flex-row d-sm-none" style="width: auto;">
+          <div class="d-flex flex-row d-md-none" style="width: auto;">
             <div class="input-group flex-row" style="flex-wrap: nowrap;">
               <button 
                 class="btn btn-secondary bg-body-tertiary border-0"
@@ -195,21 +220,63 @@ <h1 class="modal-title fs-5" id="filterModalToggleLabel"><i class="bi bi-filter"
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
-            <div>
+            <div class="mb-4">
               <p>
                 <b>Extension type</b>
               </p>
               <div class="input-group mb-2">
-                <span class="input-group-text border-0">
+
+                <span class="input-group-text border-0 rounded-start-2">
                   <input class="form-check-input mt-0" type="checkbox" value="" onclick='document.getElementById("filterExtensions").click()' id="filterModalExtensions">
                 </span>
-                <span class="input-group-text ps-0 border-0"><label for="filterModalExtensions">Extensions</label></span>
-              </div>
-              <div class="input-group">
-                <span class="input-group-text border-0">
+                <span class="input-group-text ps-0 border-0 rounded-end-2 me-2"><label for="filterModalExtensions">Extensions</label></span>
+
+                <span class="input-group-text border-0 rounded-start-2">
                   <input class="form-check-input mt-0" type="checkbox" value="" onclick='document.getElementById("filterThemes").click()' id="filterModalThemes">
                 </span>
-                <span class="input-group-text ps-0 border-0"><label for="filterModalThemes">Themes</label></span>
+                <span class="input-group-text ps-0 border-0 rounded-end-2"><label for="filterModalThemes">Themes</label></span>
+
+              </div>
+            </div>
+            <div>
+              <p>
+                <b>Sorting</b>
+              </p>
+              <div class="input-group mb-2">
+
+                <span class="input-group-text border-0 pe-0"><i class="bi bi-sort-down"></i></span>
+                <button 
+                  id="mobileSortDropdown"
+                  class="btn btn-secondary bg-body-tertiary border-0 dropdown-toggle"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  <span id="mobileSortLabel">Name</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end gap-1 p-2 rounded-3 mx-0 border-0 shadow" aria-labelledby="filterDropdown">
+                  <li>
+                    <a class="dropdown-item rounded-2" id="mobileToggleSortName" data-sort="name">
+                      Name
+                    </a>
+                  </li>
+                  <li>
+                    <a class="dropdown-item rounded-2" id="mobileToggleSortCreated" data-sort="created">
+                      Created
+                    </a>
+                  </li>
+                  <li>
+                    <a class="dropdown-item rounded-2" id="mobileToggleSortAuthor" data-sort="author">
+                      Author
+                    </a>
+                  </li>
+                  <li>
+                    <a class="dropdown-item rounded-2" id="mobileToggleSortpopularity" data-sort="popularity">
+                      Popularity
+                    </a>
+                  </li>
+                </ul>
+
               </div>
             </div>
           </div>
@@ -271,6 +338,7 @@ <h1 class="modal-title fs-5" id="filterModalToggleLabel"><i class="bi bi-filter"
     <script>
       const filterTypeLabel = document.getElementById("filterTypeLabel"),
         sortLabel = document.getElementById("sortLabel"),
+        mobileSortLabel = document.getElementById("mobileSortLabel"),
         searchInput = document.getElementById("productSearch");
 
       /**
@@ -460,21 +528,25 @@ <h5 class="card-title text-truncate">${
           switch (selectedSort) {
             case "name":
               sortLabel.textContent = "Name";
+              mobileSortLabel.textContent = "Name";
               sortType = "name";
               break;
 
             case "created":
               sortLabel.textContent = "Created";
+              mobileSortLabel.textContent = "Created";
               sortType = "created";
               break;
 
             case "author":
               sortLabel.textContent = "Author";
+              mobileSortLabel.textContent = "Author";
               sortType = "author";
               break;
 
             case "popularity":
               sortLabel.textContent = "Popularity";
+              mobileSortLabel.textContent = "Popularity";
               sortType = "popularity";
               break;
           }