diff options
| author | dweller <dweller@cabin.digital> | 2024-02-24 17:35:21 +0200 |
|---|---|---|
| committer | dweller <dweller@cabin.digital> | 2024-02-24 17:35:21 +0200 |
| commit | a87359aaacac66655af6baa80ced112ac842f651 (patch) | |
| tree | c8f4081bdd492bcfc4ac9982819f1734bbac5fb3 | |
| parent | c680cbf1d759c13a0a2a54fced7e963f0094bd1f (diff) | |
change search to be actually html5 search, add URL field in the page page. man (hehe) what a mess...
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | page.html | 59 | ||||
| -rw-r--r-- | search.html | 2 | ||||
| -rw-r--r-- | style/man.css | 102 |
4 files changed, 150 insertions, 15 deletions
@@ -41,7 +41,7 @@ <form> <div id="query_wrap"> <div id="query_icon"></div> - <input id="query" type='text' value='' name='query' required autofocus/> + <input id="query" type='search' value='' name='query' required autofocus/> </div> <div> <button id="mank" type='submit' value='apropos' name='action' title="apropos(1)">man -k</button> @@ -15,6 +15,10 @@ <link rel="stylesheet" href="style/main.css"/> <link rel="stylesheet" href="style/search.css"/> <link rel="stylesheet" href="style/man.css"/> + + <noscript><style> + .jsonly { display: none; } + </style></noscript> </head> <body> <div id="main"> @@ -35,7 +39,7 @@ <nav id="search_pane"> <form> <div id="query_wrap"> - <input id="query" type='text' value='man' name='query' required/> + <input id="query" type='search' value='man' name='query' required/> <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> @@ -49,17 +53,16 @@ <button class="btn-acc">Man up</button> </nav> </header> - <!-- TODO: LmmtFy URL form --> - <section id="lmmtfy_sect"> - <label for="query">Lmmty URL:</label> - <div id="query_wrap"> - <input id="query" type="text" name="lmmtfy" value="http://localhost:8000/?lmmtft=man§ion=1"> - <button id="man" type='submit' value='man' name='action' class="btn-acc"> - Copy - </button> - </div> - </section> <section id="results"> + <nav id="lmmtfy"> + <div> + <div> + <label for="lmmtfy_url">LmmtFy URL</label> + </div> + <textarea id="lmmtfy_url" wrap="off" rows="1" readonly>https://manup.sh?lmmtfy=man&s=1</textarea> + <button id="lmmtfy_copy" class="jsonly">Copy</button> + </div> + </nav> <article class="manpage"><p> </p><div class="head" role="doc-pageheader" aria-label="Manual header line"><span class="head-ltitle">MAN(1)</span> <span class="head-vol">General @@ -359,5 +362,39 @@ The <code class="Nm">man</code> utility displays the manual page entitled </p> </footer> </div> + + <script> + const lmmtfy = document.getElementById("lmmtfy_url"); + const btn = document.getElementById("lmmtfy_copy"); + btn.onclick = lmmtfy_copy; + + function lmmtfy_copy() + { + lmmtfy.focus(); + lmmtfy.select(); + + try + { + // TODO: deprecated -- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand + if(document.execCommand('copy')) + btn.innerHTML = "Copied!" + + setTimeout(() => + { + btn.innerHTML = "Copy" + }, 3000); + + } + catch(err) + { + btn.innerHTML = "Error :("; + console.log('Oops, unable to copy'); + } + + // This unfocuses the element, but W3C decided to be funny with + // the naming. + document.activeElement.blur(); + } + </script> </body> </html> diff --git a/search.html b/search.html index 5d3fe53..37031f3 100644 --- a/search.html +++ b/search.html @@ -34,7 +34,7 @@ <nav id="search_pane"> <form> <div id="query_wrap"> - <input id="query" type='text' value='man' name='query' required/> + <input id="query" type='searcg' value='man' name='query' required/> <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/man.css b/style/man.css index 12a00b2..b804d45 100644 --- a/style/man.css +++ b/style/man.css @@ -5,13 +5,91 @@ * See LICENSE for details */ +#results +{ + margin-top: 3em; + margin-bottom: 1em; + + width: min(100% - 3rem, 10in); +} + +#lmmtfy +{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#lmmtfy > div +{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + margin: 0.1in 0.25in; + padding: 0.1in 0.25in; + + border: 1px solid var(--border); + border-radius: 1em; +} + +#lmmtfy > div > div +{ + position: relative; + top: -50px; + left: 0; + +} + +#lmmtfy > div > div> label +{ + position: absolute; + width: 65pt; + padding: 0 8pt; + + background-color: var(--bg); +} + +#lmmtfy textarea +{ + height: 3rem; + width: 250px; + + margin: 1rem 0.5rem; + padding: 0 0.5rem; + + text-align: center; + line-height: 2.75em; + + overflow: auto; + outline: none; + resize: none; + + background-color: var(--qbg); + color: var(--qfg); + + border: 1px solid var(--qborder); + border-radius: 0.5em; + + box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadow); +} + + +#lmmtfy textarea:hover +{ + background-color: var(--qbgh); + border: 1px solid var(--qborderh); + box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); +} + .manpage { font-size: small; - width: min(100% - 3rem, 9in); + margin: 0.25in; padding: 0.25in; - margin: 1em 0 1em 0; border: 1px solid var(--border); border-radius: 1em; @@ -27,6 +105,17 @@ } +@media (prefers-color-scheme: dark) +{ + #lmmtfy textarea + { + background-color: var(--qbgh); + border: 1px solid var(--qborderh); + } + + #lmmtfy textarea:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); } +} + @media (width <= 800px) { .manpage @@ -35,6 +124,15 @@ border: none; margin: 0; padding: 0; + padding-right: 1%; + } + + #lmmtfy { margin-bottom: 3em; } + + #lmmtfy > div + { + padding: 0; + border: none; } } |