Use icon for sort, hide count on smaller screens #1166

opengaming · Jul 30, 2023 · e473d81 · e473d81
1 parent 33ce184
commit e473d81
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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 -%}