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
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/search.html
+66 -29
View File
@@ -4,8 +4,6 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<form method="get" class="search-form"> <form method="get" class="search-form">
<h1 class="page-title">Illustration Search</h1> <h1 class="page-title">Illustration Search</h1>
<div class="search-row"> <div class="search-row">
@@ -51,8 +49,6 @@
</label> </label>
{% endfor %} {% endfor %}
</div> </div>
<!--<div class="muted small">Total entries: {{ total }}</div> -->
</form> </form>
{% if ran_search and result_count == 0 %} {% if ran_search and result_count == 0 %}
@@ -62,25 +58,33 @@
</div> </div>
{% endif %} {% endif %}
<!-- ===== History (single card) — now inside .container so width matches ===== --> <!-- ===== Collapsible History card (kept same IDs) ===== -->
<div class="card" style="padding:12px; margin:16px 0 12px;"> <div class="card" style="padding:0; margin:16px 0 12px;">
<h1 class="page-title">Search History</h1> <button id="historyToggle"
<hr style="border:none; border-top:1px solid var(--border); margin:12px 0;"> 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 id="historyBody" class="collapse-body" hidden>
<div style="margin-top:6px;"> <!-- Recent Searches -->
<div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div> <div style="padding:12px 12px 0;">
<ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul> <div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
<div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div> <ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul>
</div> <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 --> <!-- Recently Viewed -->
<div> <div style="padding:0 12px 12px;">
<div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</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> <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 id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -95,7 +99,6 @@
const csrftoken = getCookie('csrftoken'); const csrftoken = getCookie('csrftoken');
// Helper: build entry view URL from a known-good template // 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 %}"; const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
function entryUrlFor(id){ function entryUrlFor(id){
return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + 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 histList = document.getElementById('searchHistoryList');
const histEmpty = document.getElementById('searchHistoryEmpty'); const histEmpty = document.getElementById('searchHistoryEmpty');
function renderHistory(items){ function renderHistory(items){
@@ -156,7 +172,7 @@
if (j.ok) renderHistory(j.items); if (j.ok) renderHistory(j.items);
}).catch(()=>{}); }).catch(()=>{});
// --- Recently viewed: fetch + render (FIXED link + 20-word snippet) --- // --- Recently viewed: fetch + render (keeps snippet + fixed link) ---
const rvList = document.getElementById('recentViewsList'); const rvList = document.getElementById('recentViewsList');
const rvEmpty = document.getElementById('recentViewsEmpty'); const rvEmpty = document.getElementById('recentViewsEmpty');
function renderRecent(items){ function renderRecent(items){
@@ -166,8 +182,8 @@
items.forEach(it=>{ items.forEach(it=>{
const url = entryUrlFor(it.entry_id); const url = entryUrlFor(it.entry_id);
const snippet = (it.snippet && it.snippet.trim()) const snippet = (it.snippet && it.snippet.trim())
|| firstWords(it.illustration || '', 20) || firstWords(it.illustration || '', 20)
|| `Entry #${it.entry_id}`; || `Entry #${it.entry_id}`;
const when = new Date(it.viewed_at); const when = new Date(it.viewed_at);
const li = document.createElement('li'); const li = document.createElement('li');
li.innerHTML = `<a href="${url}">${snippet}</a> li.innerHTML = `<a href="${url}">${snippet}</a>
@@ -179,7 +195,7 @@
if (j.ok) renderRecent(j.items); if (j.ok) renderRecent(j.items);
}).catch(()=>{}); }).catch(()=>{});
// --- Log searches reliably using Beacon on submit (unchanged) --- // --- Log searches reliably using Beacon on submit ---
const searchForm = document.querySelector('form.search-form'); const searchForm = document.querySelector('form.search-form');
if (searchForm){ if (searchForm){
searchForm.addEventListener('submit', ()=>{ searchForm.addEventListener('submit', ()=>{
@@ -187,7 +203,6 @@
const fd = new FormData(searchForm); const fd = new FormData(searchForm);
const data = new URLSearchParams(); const data = new URLSearchParams();
data.append('q', (fd.get('q') || '').trim()); 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'] ['subject','illustration','application','scripture_raw','source','talk_title','talk_number','entry_code']
.forEach(k=>{ .forEach(k=>{
if (fd.get(k)) data.append(`sel[${k}]`, 'on'); if (fd.get(k)) data.append(`sel[${k}]`, 'on');
@@ -200,7 +215,7 @@
})(); })();
</script> </script>
<!-- Styles for the help panel --> <!-- Styles for the help panel + collapsible -->
<style> <style>
.help-panel{ .help-panel{
display:none; display:none;
@@ -217,9 +232,31 @@
.help-panel code{ background:#f3f4f6; padding:2px 4px; border-radius:4px; font-size:90%; } .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 h3{ margin:0 0 8px; font-size:16px; }
.help-panel ul{ margin:0 0 8px 18px; } .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> </style>
<!-- Inline JS to toggle the panel (click button to toggle, click away to close) --> <!-- Inline JS to toggle the Help panel (unchanged) -->
<script> <script>
document.addEventListener('click', function(e){ document.addEventListener('click', function(e){
const btn = e.target.closest('.help-toggle'); const btn = e.target.closest('.help-toggle');