hide query options (-s -S). fml that took some work, esp. on iOS

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