Add bookmark item search (#15)

- Implement form styling throughout - Modify header links for narrower views - Clean up CSS
2024-05-26 16:56:30 -04:00 · 2024-05-26 16:56:30 -04:00 · 58dd7a4ffb
commit 58dd7a4ffb
parent 9d59bfb1c6
6 changed files with 116 additions and 58 deletions
--- a/src/lib/ItemList.php
+++ b/src/lib/ItemList.php
@ -138,13 +138,16 @@ class ItemList {
     * Create an item list with items matching given search terms
     *
     * @param string $search The item search terms / query
+     * @param bool $isBookmarked Whether to restrict the search to bookmarked items
     * @param SQLite3 $db The database connection to use to obtain items
     * @return static An item list match the given search terms
     */
-    public static function matchingSearch(string $search, SQLite3 $db): static {
-        $list = new static($db,
-            self::makeQuery($db, ['item.id IN (SELECT ROWID FROM item_search WHERE content MATCH :search)'],
-                [[':search', $search]]), 'Matching', "/search?search=$search");
+    public static function matchingSearch(string $search, bool $isBookmarked, SQLite3 $db): static {
+        $where   = $isBookmarked ? ['item.is_bookmarked = 1'] : [];
+        $where[] = 'item.id IN (SELECT ROWID FROM item_search WHERE content MATCH :search)';
+        $list = new static($db, self::makeQuery($db, $where, [[':search', $search]]),
+            'Matching' . ($isBookmarked ? ' Bookmarked' : ''),
+            "/search?search=$search&items=" . ($isBookmarked ? 'bookmarked' : 'all'));
        $list->showIndicators = true;
        $list->displayFeed    = true;
        return $list;
--- a/src/public/assets/style.css
+++ b/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;
--- a/src/public/feed/index.php
+++ b/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
--- a/src/public/search.php
+++ b/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();
--- a/src/public/user/log-on.php
+++ b/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
--- a/src/start.php
+++ b/src/start.php
@ -41,6 +41,11 @@ function add_info(string $message): void {
 /** @var bool $is_htmx True if this request was initiated by htmx, false if not */
 $is_htmx = key_exists('HTTP_HX_REQUEST', $_SERVER) && !key_exists('HTTP_HX_HISTORY_RESTORE_REQUEST', $_SERVER);

+function nav_link(string $link, bool $isFirst = false) {
+    $sep = $isFirst ? '' : ' | ';
+    echo "<span>$sep$link</span>";
+}
+
 /**
 * Render the title bar for the page
 */
@ -52,7 +57,7 @@ function title_bar(): void {
    }; ?>
    <header hx-target=#main hx-push-url=true>
        <div><a href=/ class=title>Feed Reader Central</a><span class=version>v<?=$version?></span></div>
-        <div><?php
+        <nav><?php
            if (key_exists(Key::USER_ID, $_SESSION)) {
                $db = Data::getConnection();
                try {
@ -65,20 +70,22 @@ function title_bar(): void {
                    $bookQuery->bindValue(':id', $_SESSION[Key::USER_ID]);
                    $bookResult   = $bookQuery->execute();
                    $hasBookmarks = $bookResult && $bookResult->fetchArray(SQLITE3_NUM)[0];
-                    echo hx_get('/feeds', 'Feeds') . ' | ';
-                    if ($hasBookmarks) echo hx_get('/?bookmarked', 'Bookmarked') . ' | ';
-                    echo hx_get('/search', 'Search') . ' | ' . hx_get('/docs/', 'Docs')
-                        . ' | <a href=/user/log-off>Log Off</a>';
+                    nav_link(hx_get('/feeds', 'Feeds'), true);
+                    if ($hasBookmarks) nav_link(hx_get('/?bookmarked', 'Bookmarked'));
+                    nav_link(hx_get('/search', 'Search'));
+                    nav_link(hx_get('/docs/', 'Docs'));
+                    nav_link('<a href=/user/log-off>Log Off</a>');
                    if ($_SESSION[Key::USER_EMAIL] != Security::SINGLE_USER_EMAIL) {
-                        echo " | {$_SESSION[Key::USER_EMAIL]}";
+                        nav_link($_SESSION[Key::USER_EMAIL]);
                    }
                } finally {
                    $db->close();
                }
            } else {
-                echo hx_get('/user/log-on', 'Log On') . ' | ' . hx_get('/docs/', 'Docs');
+                nav_link(hx_get('/user/log-on', 'Log On'), true);
+                nav_link(hx_get('/docs/', 'Docs'));
            } ?>
-        </div>
+        </nav>
    </header>
    <main id=main hx-target=this hx-push-url=true hx-swap="innerHTML show:window:top"><?php
 }