From 07a0a748b3935823d94923a23509aa1d66ff409a Mon Sep 17 00:00:00 2001
From: Kevin Payravi <kevinpayravi@gmail.com>
Date: Tue, 27 Feb 2024 03:41:28 -0600
Subject: [PATCH] Responsive wiki list filters

---
 pages/settings/index.html | 81 +++++++++++++++++++++++++--------------
 1 file changed, 52 insertions(+), 29 deletions(-)

diff --git a/pages/settings/index.html b/pages/settings/index.html
index b8d8782..e607085 100644
--- a/pages/settings/index.html
+++ b/pages/settings/index.html
@@ -204,11 +204,13 @@
     .radioGroup {
       display: flex;
     }
+
     .radioGroup.horizontal {
       flex-direction: row;
       line-height: 1.5rem;
       gap: .5em;
     }
+
     .radioGroup.vertical {
       flex-direction: column;
       gap: .5em;
@@ -279,18 +281,33 @@
     }
 
     #wikiFiltersContainer {
+      width: fit-content;
+      margin: 0 auto;
+    }
+
+    #wikiFiltersContainer>div {
       display: grid;
       gap: 0.5em;
       grid-template-columns: 1fr 1fr;
       margin: 1em auto;
-      width: 30em;
+      max-width: 30em;
     }
 
-    #wikiFiltersContainer div {
+    #wikiFiltersContainer>div>div {
       text-align: right;
       align-self: end;
     }
 
+    @media (max-width: 35em) {
+      #wikiFiltersContainer>div {
+        grid-template-columns: 1fr;
+      }
+
+      #wikiFiltersContainer>div>div {
+        text-align: center;
+      }
+    }
+
     .toggles {
       font-size: 0.8rem;
       white-space: nowrap;
@@ -605,8 +622,8 @@
         </fieldset>
         <fieldset id="breezewikiSettings">
           <legend>
-            <span aria-hidden="true">༄</span> BreezeWiki alternative frontend for Fandom (<a id="breeezwikiLearnMore" href="https://breezewiki.com/"
-              target="_blank">learn more</a>)
+            <span aria-hidden="true">༄</span> BreezeWiki alternative frontend for Fandom (<a id="breeezwikiLearnMore"
+              href="https://breezewiki.com/" target="_blank">learn more</a>)
           </legend>
           <div role="radiogroup">
             <div class="radioGroup vertical">
@@ -634,7 +651,8 @@
             </label>
             <label id="breezewikiCustomHost">
               Custom BreezeWiki domain:
-              <input type="text" id="customBreezewikiHost" name="customBreezewikiHost" placeholder="bw.example.com" size="30" />
+              <input type="text" id="customBreezewikiHost" name="customBreezewikiHost" placeholder="bw.example.com"
+                size="30" />
               <button id="setCustomBreezewikiDomain" type="button">
                 Set domain
               </button>
@@ -647,7 +665,8 @@
           <legend>
             <span aria-hidden="true">ℹ️</span> Icon legend
           </legend>
-          <span class="text-sm">When visiting Fandom, Fextralife, or Neoseeker wikis with an independent alternative, IWB
+          <span class="text-sm">When visiting Fandom, Fextralife, or Neoseeker wikis with an independent alternative,
+            IWB
             can:</span>
           <div>
             <div>
@@ -678,29 +697,33 @@
           </div>
         </fieldset>
         <div id="wikiFiltersContainer">
-          <div id="langSelectCaption">Filter wikis by language:</div>
-          <select name="lang" id="langSelect">
-            <option value="ALL" selected>All languages</option>
-            <option value="DE">[DE] German / Deutsch</option>
-            <option value="EN">[EN] English</option>
-            <option value="ES">[ES] Spanish / Español</option>
-            <option value="FI">[FI] Finnish / suomi</option>
-            <option value="FR">[FR] French / Français</option>
-            <option value="HU">[HU] Hungarian / Magyar</option>
-            <option value="IT">[IT] Italian / Italiano</option>
-            <option value="JA">[JA] Japanese / 日本語</option>
-            <option value="KO">[KO] Korean / 한국어</option>
-            <option value="LZH">[LZH] Classical Chinese / 文言文</option>
-            <option value="PL">[PL] Polish / Polski</option>
-            <option value="PT">[PT] Portuguese / Português</option>
-            <option value="RU">[RU] Russian / Русский язык</option>
-            <option value="TH">[TH] Thai / ภาษาไทย</option>
-            <option value="TOK">[TOK] Toki Pona</option>
-            <option value="UK">[UK] Ukrainian / Українська</option>
-            <option value="ZH">[ZH] Chinese / 中文</option>
+          <div>
+            <div id="langSelectCaption">Filter wikis by language:</div>
+            <select name="lang" id="langSelect">
+              <option value="ALL" selected>All languages</option>
+              <option value="DE">[DE] German / Deutsch</option>
+              <option value="EN">[EN] English</option>
+              <option value="ES">[ES] Spanish / Español</option>
+              <option value="FI">[FI] Finnish / suomi</option>
+              <option value="FR">[FR] French / Français</option>
+              <option value="HU">[HU] Hungarian / Magyar</option>
+              <option value="IT">[IT] Italian / Italiano</option>
+              <option value="JA">[JA] Japanese / 日本語</option>
+              <option value="KO">[KO] Korean / 한국어</option>
+              <option value="LZH">[LZH] Classical Chinese / 文言文</option>
+              <option value="PL">[PL] Polish / Polski</option>
+              <option value="PT">[PT] Portuguese / Português</option>
+              <option value="RU">[RU] Russian / Русский язык</option>
+              <option value="TH">[TH] Thai / ภาษาไทย</option>
+              <option value="TOK">[TOK] Toki Pona</option>
+              <option value="UK">[UK] Ukrainian / Українська</option>
+              <option value="ZH">[ZH] Chinese / 中文</option>
             </select>
-          <div id="filterInputCaption">Filter wikis by name:</div>
-          <input id="filterInput" type="text" name="filterInput" placeholder="Enter wiki name..." />
+          </div>
+          <div>
+            <div id="filterInputCaption">Filter wikis by name:</div>
+            <input id="filterInput" type="text" name="filterInput" placeholder="Enter wiki name..." />
+          </div>
         </div>
         <div class="sticky">
           <div id="togglesColumnLabels" class="toggles">
@@ -808,4 +831,4 @@
 <script type="text/javascript" src="../common-page-functions.js"></script>
 <script type="text/javascript" src="settings.js"></script>
 
-</html>
+</html>
\ No newline at end of file