joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/search.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-08-14 16:38:46 +00:00
parent d0001155d0
commit 3553cd8d64
1 changed files with 52 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
web/templates/search.html
View File

@ -3,82 +3,44 @@
{% load static %}
{% block content %}
<script src="{% static 'web/core/static/core/search-help.js' %}"></script>
<div class="container">
<h1 class="page-title">Search</h1>
<!-- <p class="page-subtitle">
Use wildcards: <code>*</code> matches many characters (e.g., <code>*love*</code>), <code>?</code> matches one.
By default we search Subject, Illustration, and Application.
</p> -->
<!-- Search Help Dropdown -->
<div class="search-help">
<button class="help-toggle" type="button" onclick="this.nextElementSibling.classList.toggle('open')">
❓ Search Tips
</button>
<div class="help-content">
<form method="get" class="search-form">
<div class="search-row">
<input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
<button class="btn btn-primary">Search</button>
<!-- Help button stays inline with Search -->
<button
class="btn btn-secondary help-toggle"
type="button"
data-target="#search-help-panel"
>
Help
</button>
</div>
<!-- Help panel sits below the row -->
<div id="search-help-panel" class="help-panel">
<h3>How to Use Search Operators</h3>
<ul>
<li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
<em>Example:</em> <code>faith</code></li>
<li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
<em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
<li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
<em>Example:</em> <code>love OR kindness</code></li>
<li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
<em>Example:</em> <code>hope -future</code></li>
<li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
<em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
<li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
<em>Example:</em> <code>John 3:16</code></li>
</ul>
<p><strong>Tip:</strong> You can combine these for powerful searches.<br>
<p><strong>Tip:</strong> Combine operators:<br>
<em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
</div>
</div>
<form method="get" class="search-form">
<div class="search-row">
<input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
<button class="btn btn-primary">Search</button>
<!-- Help button stays inline -->
<button
class="btn btn-secondary help-toggle"
type="button"
data-target="#search-help-panel"
>
Help
</button>
</div>
<!-- Help panel lives OUTSIDE the row so it doesn't shrink the input -->
<div id="search-help-panel" class="help-panel">
<h3>How to Use Search Operators</h3>
<ul>
<li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
<em>Example:</em> <code>faith</code></li>
<li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
<em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
<li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
<em>Example:</em> <code>love OR kindness</code></li>
<li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
<em>Example:</em> <code>hope -future</code></li>
<li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
<em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
<li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
<em>Example:</em> <code>John 3:16</code></li>
</ul>
<p><strong>Tip:</strong> Combine operators:<br>
<em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
</div>
</form>
<div class="filter-row">
{% for f in field_options %}
@ -88,8 +50,7 @@
</label>
{% endfor %}
</div>
</div>
<div class="muted small">Total entries: {{ total }}</div>
</form>
@ -101,40 +62,40 @@
{% endif %}
</div>
<!-- Inline, scoped styles for the help dropdown -->
<!-- Styles for the help panel -->
<style>
.search-help { margin-bottom: 12px; }
.help-toggle {
background: var(--brand);
color: #fff;
border: none;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
.help-panel{
display:none;
margin-top:10px;
background:#fff;
border:1px solid var(--border);
border-radius:12px;
padding:14px;
box-shadow:0 4px 16px rgba(0,0,0,.06);
font-size:14px;
line-height:1.6;
}
.help-toggle:hover { background: var(--brand-800); }
.help-content {
display: none;
margin-top: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px;
font-size: 14px;
line-height: 1.5;
}
.help-content.open { display: block; }
.help-content code {
background: #f3f4f6;
padding: 2px 4px;
border-radius: 4px;
font-size: 90%;
}
.help-content h3 {
margin: 0 0 8px;
font-size: 16px;
}
.help-content ul { margin: 0 0 8px 18px; }
.help-panel.open{ display:block; }
.help-panel code{ background:#f3f4f6; padding:2px 4px; border-radius:4px; font-size:90%; }
.help-panel h3{ margin:0 0 8px; font-size:16px; }
.help-panel ul{ margin:0 0 8px 18px; }
</style>
<!-- Inline JS to toggle the panel (click button to toggle, click away to close) -->
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.help-toggle');
if (btn) {
const panel = document.querySelector(btn.dataset.target || '#search-help-panel');
if (panel) panel.classList.toggle('open');
return;
}
const panel = document.querySelector('#search-help-panel');
if (!panel) return;
if (panel.classList.contains('open')) {
const clickedInside = panel.contains(e.target) || e.target.closest('.help-toggle');
if (!clickedInside) panel.classList.remove('open');
}
});
</script>
{% endblock %}