113 lines
4.1 KiB
HTML
113 lines
4.1 KiB
HTML
{% extends "base.html" %}
|
|
{% block body_class %}themed-bg{% endblock %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<h1 class="page-title">Illustration Search</h1>
|
|
|
|
<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> Combine operators:<br>
|
|
<em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
|
|
</div>
|
|
|
|
<div class="filter-row">
|
|
{% for f in field_options %}
|
|
<label class="check-pill">
|
|
<input type="checkbox" name="{{ f.name }}" {% if f.checked %}checked{% endif %}>
|
|
<span>{{ f.label }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="muted small">Total entries: {{ total }}</div>
|
|
</form>
|
|
|
|
{% if ran_search and result_count == 0 %}
|
|
<div class="empty-state">
|
|
<div class="empty-title">No results</div>
|
|
<div class="empty-subtitle">Try broadening your terms or enabling more fields above.</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if illustration_of_the_day %}
|
|
<div class="iod-card">
|
|
<div class="iod-header">Illustration of the Day</div>
|
|
<div class="iod-body">
|
|
{{ illustration_of_the_day.illustration|linebreaks }}
|
|
{% if illustration_of_the_day.application %}
|
|
<br><br>{{ illustration_of_the_day.application|linebreaks }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Styles for the help panel -->
|
|
<style>
|
|
.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-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 %} |