summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--TODO1
-rw-r--r--imgs/chevron-wt.svg46
-rw-r--r--imgs/chevron.svg46
-rw-r--r--index.php58
-rw-r--r--js/query_opts.js9
-rw-r--r--search.php59
-rw-r--r--style/main.css76
-rw-r--r--style/man.css12
-rw-r--r--style/search.css19
9 files changed, 233 insertions, 93 deletions
diff --git a/TODO b/TODO
index d88b14a..92512aa 100644
--- a/TODO
+++ b/TODO
@@ -1,4 +1,3 @@
-TODO: make query options (-s -S) have togglable visibility, since they take a lot of room on mob.
FIXME: repalce <select> with custom controls so I can style it, leave <select> in <noscript>
TODO: decouple PHP from HTML, merge index.pgp and search.php. Just have templates and snippets
and include those.
diff --git a/imgs/chevron-wt.svg b/imgs/chevron-wt.svg
new file mode 100644
index 0000000..d7da16c
--- /dev/null
+++ b/imgs/chevron-wt.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="94.471886mm"
+ height="93.295662mm"
+ viewBox="0 0 94.471886 93.295662"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="chevron-wt.svg"
+ inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="mm"
+ inkscape:zoom="1.1868518"
+ inkscape:cx="241.39492"
+ inkscape:cy="229.59901"
+ inkscape:window-width="1920"
+ inkscape:window-height="1031"
+ inkscape:window-x="1080"
+ inkscape:window-y="49"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs1" />
+ <g
+ id="layer1"
+ transform="translate(-4.2775913,-3.5666803)">
+ <path
+ id="path2"
+ style="fill:none;stroke:#ffffff;stroke-width:10.5833;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+ d="m 64.882573,8.8476803 c 0,0 -25.4,37.6693077 -25.4,41.3614937 0,3.238943 25.4,41.361493 25.4,41.361493"
+ sodipodi:nodetypes="csc" />
+ </g>
+</svg>
diff --git a/imgs/chevron.svg b/imgs/chevron.svg
new file mode 100644
index 0000000..256c28c
--- /dev/null
+++ b/imgs/chevron.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="94.471886mm"
+ height="93.295662mm"
+ viewBox="0 0 94.471886 93.295662"
+ version="1.1"
+ id="svg1"
+ sodipodi:docname="chevron.svg"
+ inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:document-units="mm"
+ inkscape:zoom="1.1868518"
+ inkscape:cx="241.39492"
+ inkscape:cy="229.59901"
+ inkscape:window-width="1920"
+ inkscape:window-height="1031"
+ inkscape:window-x="1080"
+ inkscape:window-y="49"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer1" />
+ <defs
+ id="defs1" />
+ <g
+ id="layer1"
+ transform="translate(-4.2775913,-3.5666803)">
+ <path
+ id="path2"
+ style="fill:none;stroke:#9aa0a6;stroke-width:10.5833;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+ d="m 64.882573,8.8476803 c 0,0 -25.4,37.6693077 -25.4,41.3614937 0,3.238943 25.4,41.361493 25.4,41.361493"
+ sodipodi:nodetypes="csc" />
+ </g>
+</svg>
diff --git a/index.php b/index.php
index 4f39576..028e103 100644
--- a/index.php
+++ b/index.php
@@ -14,7 +14,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <title>Manup &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; Lonely MAN near You</title>
+ <title>Manup &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; Lonely MAN near You</title>
<link rel="icon" type="image/png" sizes="128x128" href="imgs/logo-goog.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="imgs/logo-goog32.png"/>
@@ -56,32 +56,36 @@
<div id="query_icon"></div>
<input id="query" type='search' value='<?php if($action === 'lmmtfy') echo $query;?>' name='query' autocorrect="off" autocapitalize="none" required autofocus/>
<button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button>
- <span class="query_opt" title="section">-s</span>
- <select id="sect" name='section' title="section" autocomplete="off">
- <option value=""></option>
- <?php
- for($i = 1; $i <= 9; $i++)
- {
- $sel = "";
- if((strlen($section) > 0) && ($section[0] == $i))
- $sel = 'selected="selected"';
- echo "<option value='$i' $sel>$i</option>";
- }
- ?>
- </select>
- <span class="query_opt" title="architecture">-S</span>
- <select id="arch" name='arch' title="architecture" autocomplete="off">
- <option value=""></option>
- <?php
- foreach($archs as $a)
- {
- $sel = "";
- if((strlen($arch) > 0) && ($arch == $a))
- $sel = 'selected="selected"';
- echo "<option value='$a' $sel>$a</option>";
- }
- ?>
- </select>
+ <input type="checkbox" id="query_opts_toggle"/>
+ <div id="query_opts">
+ <span class="query_opt" title="section">-s</span>
+ <select id="sect" name='section' title="section" autocomplete="off">
+ <option value=""></option>
+ <?php
+ for($i = 1; $i <= 9; $i++)
+ {
+ $sel = "";
+ if((strlen($section) > 0) && ($section[0] == $i))
+ $sel = 'selected="selected"';
+ echo "<option value='$i' $sel>$i</option>";
+ }
+ ?>
+ </select>
+ <span class="query_opt" title="architecture">-S</span>
+ <select id="arch" name='arch' title="architecture" autocomplete="off">
+ <option value=""></option>
+ <?php
+ foreach($archs as $a)
+ {
+ $sel = "";
+ if((strlen($arch) > 0) && ($arch == $a))
+ $sel = 'selected="selected"';
+ echo "<option value='$a' $sel>$a</option>";
+ }
+ ?>
+ </select>
+ </div>
+ <span id="qfill"></span>
</div>
<div>
<button id="mank" type='submit' value='apropos' name='action' title="apropos(1)">man -k</button>
diff --git a/js/query_opts.js b/js/query_opts.js
index ba88787..64f917f 100644
--- a/js/query_opts.js
+++ b/js/query_opts.js
@@ -6,8 +6,7 @@
*/
-const min_width = 20;
-const rpad = 15;
+let min_width = 20;
const tmp = document.getElementById('js_tmp');
const opts = new Array(document.getElementById('sect'),
@@ -18,11 +17,13 @@ function fix_width(e)
let style = window.getComputedStyle(e, null);
let font_sz = parseFloat(style.getPropertyValue('font-size'));
+ let txt = e.options[e.selectedIndex].text;
+
tmp.style.fontSize = font_sz + "px";
- tmp.innerHTML = e.options[e.selectedIndex].text;
+ tmp.innerHTML = txt + '#';
let tmp_width = parseFloat(window.getComputedStyle(tmp, null).width);
- let width = (min_width + tmp_width + (tmp_width > 0 ? rpad : 0)) + "px";
+ let width = (min_width + tmp_width) + "px";
e.style.width = width;
}
diff --git a/search.php b/search.php
index d24a3b2..c8d41e8 100644
--- a/search.php
+++ b/search.php
@@ -14,7 +14,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <title>Manup &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; Lonely MAN near You</title>
+ <title>Manup &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; Lonely MAN near You</title>
<link rel="icon" type="image/png" sizes="128x128" href="imgs/logo-goog.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="imgs/logo-goog32.png"/>
@@ -49,33 +49,36 @@
<form>
<div id="query_wrap">
<input id="query" type='searcg' value='<?=$query;?>' name='query' autocorrect="off" autocapitalize="none" required/>
- <span class="query_opt" title="section">-s</span>
- <select id="sect" name='section' title="section" autocomplete="off">
- <option value=""></option>
- <?php
- for($i = 1; $i <= 9; $i++)
- {
- $sel = "";
- if((strlen($section) > 0) && ($section[0] == $i))
- $sel = 'selected="selected"';
- echo "<option value='$i' $sel>$i</option>";
- }
- ?>
- </select>
- <span class="query_opt" title="architecture">-S</span>
- <select id="arch" name='arch' title="architecture" autocomplete="off">
- <option value=""></option>
- <?php
- foreach($archs as $a)
- {
- $sel = "";
- if((strlen($arch) > 0) && ($arch == $a))
- $sel = 'selected="selected"';
- echo "<option value='$a' $sel>$a</option>";
- }
- ?>
- </select>
- <button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button>
+ <button id="def" type='submit' value='man' name='action' class="btn-def" aria-hidden="true" tabindex="-1"></button>
+ <input type="checkbox" id="query_opts_toggle"/>
+ <div id="query_opts">
+ <span class="query_opt" title="section">-s</span>
+ <select id="sect" name='section' title="section" autocomplete="off">
+ <option value=""></option>
+ <?php
+ for($i = 1; $i <= 9; $i++)
+ {
+ $sel = "";
+ if((strlen($section) > 0) && ($section[0] == $i))
+ $sel = 'selected="selected"';
+ echo "<option value='$i' $sel>$i</option>";
+ }
+ ?>
+ </select>
+ <span class="query_opt" title="architecture">-S</span>
+ <select id="arch" name='arch' title="architecture" autocomplete="off">
+ <option value=""></option>
+ <?php
+ foreach($archs as $a)
+ {
+ $sel = "";
+ if((strlen($arch) > 0) && ($arch == $a))
+ $sel = 'selected="selected"';
+ echo "<option value='$a' $sel>$a</option>";
+ }
+ ?>
+ </select>
+ </div>
<button id="mank" type='submit' value='apropos' name='action' title="apropos(1)">-k</button>
<button id="man" type='submit' value='man' name='action' title="Feeling lucky, punk?" class="btn-acc">
<div id="query_icon"></div>
diff --git a/style/main.css b/style/main.css
index 886dedd..ce8c5df 100644
--- a/style/main.css
+++ b/style/main.css
@@ -17,11 +17,11 @@
--border: #DADCE0;
/* query input */
- --qbg: transparent;
+ --qbg: white;
--qborder: var(--border);
--qshadow: transparent;
- --qbgh: transparent;
+ --qbgh: white;
--qborderh: var(--border);
--qshadowh: var(--qborder);
@@ -96,7 +96,10 @@ body { height: 100dvh; }
#js_tmp
{
- position: absolute;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: -1;
height: auto;
width: auto;
visibility: hidden;
@@ -251,17 +254,19 @@ form
button, input { all: unset; }
+/* NOTE: if you wanna change the height of the wrap, it's actually the #qfill height */
#query_wrap
{
+ z-index: 2;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
font-size: large;
- width: min(42rem, 80vw);
+ width: min(42rem, 90vw);
- padding: 1rem 1.5rem;
+ padding: 0;
margin: 1rem;
background-color: var(--qbg);
@@ -269,8 +274,24 @@ button, input { all: unset; }
border-radius: 10rem;
box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow);
+
+ overflow: hidden;
+}
+
+#qfill
+{
+ z-index: 1;
+ flex-grow: 0;
+ flex-shrink: 0;
+ align-self: flex-end;
+
+ height: 4rem;
+ width: 2rem;
+ background-color: var(--qbg);
}
+#query_wrap:hover > #qfill { background-color: var(--qbgh); }
+
#query_wrap:hover
{
background-color: var(--qbgh);
@@ -286,11 +307,22 @@ button, input { all: unset; }
background-size: contain;
background-position: center;
margin-right: 1rem;
+ margin-left: 1.5rem;
flex-shrink: 0;
width: 14pt;
height: 14pt;
}
+#query_opts_toggle { display: none; }
+
+#query_opts
+{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+}
+
.query_opt
{
flex-shrink: 0;
@@ -302,6 +334,9 @@ button, input { all: unset; }
#sect { margin-right: 6pt; }
#sect, #arch
{
+ flex-grow: 0;
+ height: 3em;
+
background-color: transparent;
color: var(--fg-mid);
border: none;
@@ -317,6 +352,7 @@ button, input { all: unset; }
button, input[type=submit]
{
+ z-index: 1;
color: var(--btn-fg);
background-color: var(--btn-bg);
@@ -424,6 +460,34 @@ footer, #about_pane
}
+@media (max-width: 800px)
+{
+ #query_opts_toggle
+ {
+ display: inline;
+ flex-shrink: 0;
+
+ width: 2em;
+ height: 3em;
+
+ background: no-repeat url("/imgs/chevron.svg");
+ background-size: 1em;
+ background-position: center;
+ }
+
+ #query_opts_toggle:checked { transform: rotate(180deg); }
+
+ #query_opts_toggle ~ div
+ {
+ max-width: 0;
+ z-index: 0;
+
+ transition: max-width 500ms linear;
+ }
+
+ #query_opts_toggle:checked ~ div { max-width: 75%; }
+}
+
@media (prefers-color-scheme: dark)
{
:root
@@ -438,7 +502,7 @@ footer, #about_pane
--border: #3C4043;
/* query input */
- --qbg: transparent;
+ --qbg: var(--bg);
--qborder: #5F6368;
--qbgh: #303134;
diff --git a/style/man.css b/style/man.css
index 4999be2..e61ad91 100644
--- a/style/man.css
+++ b/style/man.css
@@ -150,18 +150,6 @@ table.Nm, table.Nm tbody, table.Nm tbody tr, table.Nm tbody tr td
table.head, table.foot { display: table; }
-/* This looks good, but messes with some semantics
-dl.Bl-tag
-{
- display: grid;
- row-gap: 1em;
- grid-template-columns: max-contet auto;
-}
-
-dl.Bl-tag dt { grid-column-start: 1; }
-dl.Bl-tag dd { grid-column-start: 2; }
-*/
-
pre
{
overflow-x: auto;
diff --git a/style/search.css b/style/search.css
index 168bb56..2e85c2a 100644
--- a/style/search.css
+++ b/style/search.css
@@ -45,18 +45,13 @@
flex-grow: 0;
}
-#logo { margin-right: 1.5rem; }
-
-#mank
-{
- background-color: var(--qbg);
- color: var(--fg-light);
-}
+#query_wrap { max-height: 2.5em; }
-#man { padding-left: 5pt; }
+#logo { margin-right: 1.5rem; }
#man, #mank
{
+ height: 4em;
font-size: 13pt;
min-width: 25pt;
margin: 0;
@@ -65,7 +60,7 @@
#mank
{
- background-color: transparent;
+ background-color: var(--qbgh);
color: var(--fg-light);
border-color: transparent;
}
@@ -76,12 +71,6 @@
box-shadow: none;
}
-#query_wrap
-{
- overflow: hidden;
- padding: 0;
-}
-
#query { margin-left: 15pt; }
#query_icon
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-26 17:01:26 +0000