Add bookmark item search (#15)

- Implement form styling throughout
- Modify header links for narrower views
- Clean up CSS

src/public/assets/style.css

@@ -25,28 +25,28 @@ header {
     flex-flow: row wrap;
     justify-content: space-between;
     align-items: baseline;
-
-    div {
+    div, nav {
         margin-bottom: .25rem;
     }
-
     .title {
         font-size: 1.5rem;
     }
-
     .version {
         font-size: .85rem;
         padding-left: .5rem;
         color: rgba(255, 255, 255, .75);
     }
-
     a:link, a:visited {
         color: white;
     }
+    nav {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 0 .4rem;
+    }
 }
 main {
     padding: 0 .5rem;
-
     .refresh, .loading {
         font-style: italic;
         font-size: .9rem;
@@ -54,14 +54,12 @@ main {
     .htmx-request .refresh {
         display: none;
     }
-
     .loading {
         display: none;
     }
     .htmx-request .loading {
         display: inline;
     }
-
     .user_messages {
         display: flex;
         flex-flow: column;
@@ -74,11 +72,9 @@ main {
         background-color: rgba(255, 255, 255, .75);
         padding: .25rem;
     }
-
     .user_messages + h1 {
         margin-top: .25rem;
     }
-
     .item_published {
         margin-bottom: 1rem;
         line-height: 1.2;
@@ -87,35 +83,73 @@ main {
 article {
     max-width: 60rem;
     margin: auto;
-
     .item_content {
         border: solid 1px navy;
         border-radius: .5rem;
         background-color: white;
         padding: .5rem;
-
         img {
             max-width: 100%;
             object-fit: contain;
         }
     }
-
     .meta {
         font-size: .9rem;
     }
+    &.docs {
+        line-height: 1.4rem;
+    }
 }
-article.docs {
-    line-height: 1.4rem;
+form {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    gap: 0 2rem;
+    label {
+        font-size: .9rem;
+        font-weight: bold;
+        input, select {
+            display: block;
+        }
+    }
+    .break {
+        flex-basis: 100%;
+        height: 1rem;
+        width: 0;
+    }
+    input[type=url],
+    input[type=text],
+    input[type=email],
+    input[type=password],
+    select {
+        min-width: 12rem;
+        max-width: 100%;
+        font-size: 1rem;
+        padding: .25rem;
+        border-radius: .25rem;
+        background-color: white;
+        border: solid 2px navy;
+    }
+    select {
+        min-width: unset;
+        max-width: unset;
+    }
 }
-
-input[type=url],
-input[type=text],
-input[type=email],
-input[type=password] {
-    width: 40%;
-    font-size: 1rem;
-    padding: .25rem;
-    border-radius: .25rem;
+@media all and (min-width: 60rem) {
+    form {
+        input[type=url],
+        input[type=text],
+        input[type=email],
+        input[type=password] {
+            min-width: 25rem;
+        }
+    }
+}
+.action_buttons {
+    margin: 1rem 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
 }
 button,
 .action_buttons a:link,
@@ -128,18 +162,11 @@ button,
     border-radius: .25rem;
     cursor: pointer;
     border: none;
-}
-button:hover,
-.action_buttons a:hover {
-    text-decoration: none;
-    cursor: pointer;
-    background: linear-gradient(navy, #000032);
-}
-.action_buttons {
-    margin: 1rem 0;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-evenly;
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+        background: linear-gradient(navy, #000032);
+    }
 }
 code {
     font-size: .9rem;
@@ -149,12 +176,10 @@ p.back-link {
 }
 .item_heading {
     margin-bottom: 0;
-
     .bookmark {
         padding: 0;
         border: solid 1px black;
         border-radius: .5rem;
-
         &.add {
             background-color: lightgray;
             &:hover {
@@ -167,7 +192,6 @@ p.back-link {
                 background: linear-gradient(gray, lightgreen);
             }
         }
-
         img {
             max-width: 1.5rem;
             max-height: 1.5rem;

src/public/feed/index.php

@@ -61,7 +61,8 @@ page_head($title); ?>
         <label>
             Feed URL
             <input type=url name=url required autofocus value="<?=$feed['url']?>">
-        </label><br>
+        </label>
+        <span class=break></span>
         <button type=submit>Save</button>
     </form>
 </article><?php

src/public/search.php

@@ -11,13 +11,35 @@ include '../start.php';
 $db = Data::getConnection();
 Security::verifyUser($db);
 
-if (key_exists('search', $_GET)) {
-    $list = ItemList::matchingSearch($_GET['search'], $db);
+$search = $_GET['search'] ?? '';
+$items  = $_GET['items']  ?? 'all';
+
+if ($search != '') {
+    $list = ItemList::matchingSearch($search, $items == 'bookmarked', $db);
 }
 
 page_head('Item Search'); ?>
 <h1>Item Search</h1>
-// TODO: search form <?php
-if (isset($list)) $list->render();
+<article>
+    <form method=GET action=/search>
+        <label>
+            Search Criteria
+            <input type=text name=search required autofocus value="<?=htmlspecialchars($search)?>">
+        </label>
+        <label>
+            Items to Search
+            <select name=items>
+                <option value=all <?=$items == 'all' ? ' selected' : ''?>>All</option>
+                <option value=bookmarked <?=$items == 'bookmarked' ? ' selected' : ''?>>Bookmarked</option>
+            </select>
+        </label>
+        <span class=break></span>
+        <button type=submit>Search</button>
+    </form><?php
+    if (isset($list)) { ?>
+        <hr><?php
+        $list->render();
+    } ?>
+</article><?php
 page_foot();
 $db->close();

src/public/user/log-on.php

@@ -26,12 +26,13 @@ page_head('Log On'); ?>
             <label>
                 E-mail Address
                 <input type=email name=email required autofocus>
-            </label><br><?php
+            </label><?php
         } ?>
         <label>
             Password
             <input type=password name=password required<?=$isSingle ? ' autofocus' : ''?>>
-        </label><br>
+        </label>
+        <span class=break></span>
         <button type=submit>Log On</button>
     </form>
 </article><?php