Add bookmark item search (#15)
- Implement form styling throughout - Modify header links for narrower views - Clean up CSS
This commit is contained in:
parent
9d59bfb1c6
commit
58dd7a4ffb
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
article.docs {
|
||||
&.docs {
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=url],
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
width: 40%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user