From e473d81d26eabea543f35e97dbfb4c34cf000385 Mon Sep 17 00:00:00 2001
From: Cong <congusbongus@gmail.com>
Date: Tue, 25 Jul 2023 21:24:43 +1000
Subject: [PATCH] Use icon for sort, hide count on smaller screens #1166

---
 static/main.css       |  8 ++------
 static/main.js        | 10 +++++-----
 templates/common.html | 10 +++++++---
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/static/main.css b/static/main.css
index 87a0b4574..eba5777c5 100644
--- a/static/main.css
+++ b/static/main.css
@@ -317,11 +317,7 @@ dd + dt { margin-top: 1em; }
    color: #000
 }
 
-#dark-theme-button {
-  float: right;
-}
-
-#sortButton {
+.nav-btn-right {
   float: right;
 }
 
@@ -372,7 +368,7 @@ dd + dt { margin-top: 1em; }
 .sm-view{
    display:none;
 }
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 1000px) {
     .lg-view{
        display:none;
     }
diff --git a/static/main.js b/static/main.js
index 0e1172a41..badbcbe30 100644
--- a/static/main.js
+++ b/static/main.js
@@ -144,11 +144,11 @@ function sortByUpdated(e) {
   if (list.style.display == "none") {
     list.style.display = "block";
     sorted.style.display = "none";
-    btn.innerHTML = "Sort by Updated";
+    btn.innerHTML = "Updated";
   } else {
     list.style.display = "none";
     sorted.style.display = "block";
-    btn.innerHTML = "Sort by Originals";
+    btn.innerHTML = "Originals";
 
     if (!sorted.hasChildNodes()) {
       const games = [...document.getElementsByTagName('dd')];
@@ -411,7 +411,7 @@ function setCount() {
     document.getElementById('filter').value = params['filter'];
   }
 
-  const sortBtn = document.getElementById('sortButton');
-  sortBtn.innerHTML = "Sort by Updated";
-  sortBtn.addEventListener('click', sortByUpdated);
+  const sortBtnLbl = document.getElementById('sort-button-label');
+  sortBtnLbl.innerHTML = "Updated";
+  sortBtnLbl.addEventListener('click', sortByUpdated);
 })(); 
diff --git a/templates/common.html b/templates/common.html
index 05198c991..9e1a5c8c9 100644
--- a/templates/common.html
+++ b/templates/common.html
@@ -99,14 +99,18 @@
       </li>
 
       <li>
-        <span class="nav-count">xxxx/yyyy games</span>
+        <span class="nav-count lg-view">xxxx/yyyy games</span>
       </li>
     </ul>
-    <span id="dark-theme-button" class="nav-btn">
+
+    <span id="dark-theme-button" class="nav-btn nav-btn-right">
       <span id="dark-theme-label"><i class="fa-solid fa-moon"></i></span>
       <span id="light-theme-label"><i class="fa-solid fa-sun"></i></span>
     </span>
-    <span id='sortButton' class="nav-btn">Sort by ........</span>
+    <span class="nav-btn nav-btn-right">
+      <i class="fa-solid fa-sort"></i>
+      <span id="sort-button-label">........</span>
+    </span>
   </div>
 </header>
 {%- endmacro -%}