mid/ikibooru
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve index search form

Browse Source
This commit is contained in:
mid 2024-08-05 21:56:13 +03:00
parent 61fd417013
commit 6f5302043d
1 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html.l
View File

@ -2,32 +2,38 @@
{% function content() %}
<div style="text-align:center;height:50%;margin-top:25vh;">
<div style="max-width:15cm;display:inline-block;">
<div style="width:12cm;display:inline-block;">
<h1>{{ Escapes.htmlescape(BigGlobe.cfg.sitename) }}</h1>
<form action="/search" method="GET" id="searchform">
<input type="text" name="n" placeholder="Filter by name..." style="position:relative;width:100%;" />
<input type="hidden" id="tparam" name="t" value="" />
<div style="position: relative;">
<div data-formid="searchform" data-formparaminputid="tparam" style="position:relative;width:58%;margin-top:1em;display:inline-block;vertical-align:top;white-space:nowrap;overflow-x:scroll;" class="tagbox">
<p>Filter by tags...</p>
<!-- Firefox has a 10-year old bug where a contenteditable with 0 padding loses focus when you press the right arrow key to the end -->
<span style="position:relative;min-width:4px;left:0;padding-right:1px;" contenteditable autofocus></span>
</div>
{% if BigGlobe.cfg.enable18plus then %}
<ul class="over18">
<ul class="over18" style="width:40%;display:inline-block;vertical-align:middle;">
<li>
<input type="radio" name="a" value="-1" id="o18h" onchange="upd(-1)" checked />
<label for="o18h">Hide 18+</label>
<label for="o18h">&#x1F6C7;</label>
</li><li>
<input type="radio" name="a" value="0" id="o18s" onchange="upd(0)" />
<label for="o18s">Show 18+</label>
<label for="o18s">18+?</label>
</li><li>
<input type="radio" name="a" value="1" id="o18o" onchange="upd(1)" />
<label for="o18o">Only 18+</label>
<label for="o18o">&check;</label>
</li>
</ul>
{% end %}
<input type="hidden" id="tparam" name="t" value="" />
<div data-formid="searchform" data-formparaminputid="tparam" style="position:relative;width:100%;margin-top:1em;" class="tagbox">
<p>Filter by tags...</p>
<span style="position:relative;min-width:4px;left:0;" contenteditable></span>
<div class="autocomplete" style="visibility:hidden;width:100%;position:absolute;top:70%;box-sizing:border-box;"></div>
</div>
<div class="autocomplete" style="visibility:hidden;width:100%;"></div>
<input type="submit" value="Search" style="margin-top:1em;" />
@ -77,6 +83,8 @@
showalltags = function() {}
}
document.querySelector("[autofocus]").focus()
</script>
{% end %}