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-17 02:52:52 +00:00
parent ed419ad157
commit 1649902400
1 changed files with 66 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
web/templates/search.html
View File

@ -4,8 +4,6 @@
{% block content %}
<div class="container">
<form method="get" class="search-form">
<h1 class="page-title">Illustration Search</h1>
<div class="search-row">
@ -51,8 +49,6 @@
</label>
{% endfor %}
</div>
<!--<div class="muted small">Total entries: {{ total }}</div> -->
</form>
{% if ran_search and result_count == 0 %}
@ -62,25 +58,33 @@
</div>
{% endif %}
<!-- ===== History (single card) — now inside .container so width matches ===== -->
<div class="card" style="padding:12px; margin:16px 0 12px;">
<h1 class="page-title">Search History</h1>
<hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">
<!-- ===== Collapsible History card (kept same IDs) ===== -->
<div class="card" style="padding:0; margin:16px 0 12px;">
<button id="historyToggle"
class="collapse-bar"
type="button"
aria-expanded="false"
aria-controls="historyBody">
<span>History</span>
<span class="chev" aria-hidden="true">▸</span>
</button>
<!-- Recent Searches -->
<div style="margin-top:6px;">
<div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
<ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul>
<div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
</div>
<div id="historyBody" class="collapse-body" hidden>
<!-- Recent Searches -->
<div style="padding:12px 12px 0;">
<div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
<ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul>
<div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
</div>
<hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">
<hr style="border:none; border-top:1px solid var(--border); margin:12px;">
<!-- Recently Viewed -->
<div>
<div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</div>
<ul id="recentViewsList" class="small" style="margin:0; padding-left:18px;"></ul>
<div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
<!-- Recently Viewed -->
<div style="padding:0 12px 12px;">
<div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</div>
<ul id="recentViewsList" class="small" style="margin:0; padding-left:18px;"></ul>
<div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
</div>
</div>
</div>
</div>
@ -95,7 +99,6 @@
const csrftoken = getCookie('csrftoken');
// Helper: build entry view URL from a known-good template
// We grab a real URL like /entry/1/ and swap the trailing number with the actual id.
const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
function entryUrlFor(id){
return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/');
@ -134,7 +137,20 @@
});
});
// --- Search history: fetch + render (unchanged) ---
// --- Collapsible History toggle ---
const toggle = document.getElementById('historyToggle');
const body = document.getElementById('historyBody');
if (toggle && body){
toggle.addEventListener('click', ()=>{
const isOpen = !body.hidden;
body.hidden = isOpen;
toggle.setAttribute('aria-expanded', String(!isOpen));
const chev = toggle.querySelector('.chev');
if (chev) chev.textContent = isOpen ? '▸' : '▾';
});
}
// --- Search history: fetch + render ---
const histList = document.getElementById('searchHistoryList');
const histEmpty = document.getElementById('searchHistoryEmpty');
function renderHistory(items){
@ -156,7 +172,7 @@
if (j.ok) renderHistory(j.items);
}).catch(()=>{});
// --- Recently viewed: fetch + render (FIXED link + 20-word snippet) ---
// --- Recently viewed: fetch + render (keeps snippet + fixed link) ---
const rvList = document.getElementById('recentViewsList');
const rvEmpty = document.getElementById('recentViewsEmpty');
function renderRecent(items){
@ -166,8 +182,8 @@
items.forEach(it=>{
const url = entryUrlFor(it.entry_id);
const snippet = (it.snippet && it.snippet.trim())
|| firstWords(it.illustration || '', 20)
|| `Entry #${it.entry_id}`;
|| firstWords(it.illustration || '', 20)
|| `Entry #${it.entry_id}`;
const when = new Date(it.viewed_at);
const li = document.createElement('li');
li.innerHTML = `<a href="${url}">${snippet}</a>
@ -179,7 +195,7 @@
if (j.ok) renderRecent(j.items);
}).catch(()=>{});
// --- Log searches reliably using Beacon on submit (unchanged) ---
// --- Log searches reliably using Beacon on submit ---
const searchForm = document.querySelector('form.search-form');
if (searchForm){
searchForm.addEventListener('submit', ()=>{
@ -187,7 +203,6 @@
const fd = new FormData(searchForm);
const data = new URLSearchParams();
data.append('q', (fd.get('q') || '').trim());
// selected checkboxes (match your field names)
['subject','illustration','application','scripture_raw','source','talk_title','talk_number','entry_code']
.forEach(k=>{
if (fd.get(k)) data.append(`sel[${k}]`, 'on');
@ -200,7 +215,7 @@
})();
</script>
<!-- Styles for the help panel -->
<!-- Styles for the help panel + collapsible -->
<style>
.help-panel{
display:none;
@ -217,9 +232,31 @@
.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; }
/* Collapsible History bar */
.collapse-bar{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:12px 14px;
background:#fff;
border:0;
border-bottom:1px solid var(--border);
border-radius:12px 12px 0 0;
cursor:pointer;
font-weight:600;
text-align:left;
}
.collapse-bar:focus{ outline:2px solid #c7d2fe; outline-offset:2px; }
.collapse-body{
background:#fff;
border-radius:0 0 12px 12px;
}
</style>
<!-- Inline JS to toggle the panel (click button to toggle, click away to close) -->
<!-- Inline JS to toggle the Help panel (unchanged) -->
<script>
document.addEventListener('click', function(e){
const btn = e.target.closest('.help-toggle');