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:
@@ -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;
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user