word/edit: search input form in hierarchy navigation

Styling to move it to top, and hide input until focused.

diff --git a/word/edit.plp b/word/edit.plp
index 1d766b9c410a40908f0adb1b6e90e01a4913f0f7..0f212b86702d05e211cbc2edea6fa52c414e8e31 100644 (file)
--- a/word/edit.plp
+++ b/word/edit.plp
@@ -328,6 +328,10 @@ while (my $ref = $children->hash) {
        <input type="submit" value="Add" />
 </form></li>
 </ul>
+
+<form id="search">
+       <input type="search" name="q" value="" placeholder="search" /><button type="submit">🔍</button>
+</form>
 </section>
 <:
 }

diff --git a/word/editor.css b/word/editor.css
index 1e0dc5b80a085b1347370f01b6ae2ad7dd527e6b..2e89bb5a3651b1be98eff0495818d246d543e9d8 100644 (file)
--- a/word/editor.css
+++ b/word/editor.css
@@ -96,3 +96,34 @@ h1 {
        margin: 1ex 0;
        display: inline-block;
 }
+
+#nav {
+       position: relative;
+}
+form#search {
+       display: block;
+       position: absolute;
+       width: 100%;
+       text-align: right;
+       top: -7ex;
+}
+#search input {
+       width: 100%;
+       transition: all .5s ease-in;
+}
+#search:not(:focus-within) input {
+       width: 0;
+       padding-left: 0;
+       padding-right: 0;
+       visibility: hidden;
+}
+#search button {
+       position: absolute;
+       right: 0;
+       height: 100%; /* like input */
+       border: 0;
+       background: none;
+       color: inherit;
+       font: inherit;
+       cursor: pointer;
+}