kouhais-mirrors
/
safer-indie-wiki-buddy
mirror of https://github.com/KevinPayravi/indie-wiki-buddy.git
1
0
Fork 0
Code

Responsive wiki list filters

pull/512/head^2
Kevin Payravi 2024-02-27 03:41:28 -06:00
parent 7c839fcee4
commit 07a0a748b3
1 changed files with 52 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
pages/settings/index.html
View File

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