feat(ebook): improve search UX with grid actions and Enter-to-submit

Add a two-column grid layout for the admin protected-phrases actions
and submit the search form on Enter (Shift+Enter for newline).
This commit is contained in:
2026-07-24 11:38:50 -04:00
parent 2706c4417d
commit 5c826088c5
3 changed files with 8 additions and 2 deletions
+5
View File
@@ -218,6 +218,11 @@ button:hover {
margin-bottom: 24px; margin-bottom: 24px;
} }
.actions-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
}
/* Answer + results */ /* Answer + results */
#results { #results {
display: block; display: block;
+1 -1
View File
@@ -52,7 +52,7 @@ head %}
</section> </section>
<section> <section>
<h2>Protected phrases</h2> <h2>Protected phrases</h2>
<section class="actions"> <section class="actions actions-grid">
<form <form
hx-post="/admin/phrases/generate-all" hx-post="/admin/phrases/generate-all"
hx-target="#admin-status" hx-target="#admin-status"
@@ -7,7 +7,8 @@
<h1>Search</h1> <h1>Search</h1>
<form class="card" hx-post="/search" hx-target="#results" hx-swap="innerHTML"> <form class="card" hx-post="/search" hx-target="#results" hx-swap="innerHTML">
<label for="query">What are you looking for?</label> <label for="query">What are you looking for?</label>
<textarea id="query" name="query" rows="4" placeholder="Ask a question or paste a passage…" required></textarea> <textarea id="query" name="query" rows="4" placeholder="Ask a question or paste a passage…" required
onkeydown="if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); this.form.requestSubmit(); }"></textarea>
<div class="form-row"> <div class="form-row">
<div class="search-toggles"> <div class="search-toggles">
<label class="check"> <label class="check">