Update web/templates/search.html

This commit is contained in:
Joshua Laymon 2025-08-16 22:15:07 +00:00
parent 48f84a1327
commit 04e4bde118

View File

@ -65,7 +65,8 @@
<!-- ===== History (single card) — now inside .container so width matches ===== --> <!-- ===== History (single card) — now inside .container so width matches ===== -->
<div class="card" style="padding:12px; margin:16px 0 12px;"> <div class="card" style="padding:12px; margin:16px 0 12px;">
<h1 class="page-title">Search History</h1> <h1 class="page-title">Search History</h1>
<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 0;">
<!-- Recent Searches --> <!-- Recent Searches -->
<div style="margin-top:6px;"> <div style="margin-top:6px;">
<div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div> <div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
@ -93,7 +94,23 @@
} }
const csrftoken = getCookie('csrftoken'); const csrftoken = getCookie('csrftoken');
// --- Font prefs: fetch + apply + persist --- // 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 + '/');
}
// Helper: first N words with ellipsis
function firstWords(text, n){
const clean = (text || '').replace(/\s+/g, ' ').trim();
if (!clean) return '';
const words = clean.split(' ');
if (words.length <= n) return clean;
return words.slice(0, n).join(' ') + '…';
}
// --- Font prefs: fetch + apply + persist (unchanged) ---
function applyFont(size){ function applyFont(size){
const root = document.documentElement; const root = document.documentElement;
root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge'); root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
@ -117,7 +134,7 @@
}); });
}); });
// --- Search history: fetch + render --- // --- Search history: fetch + render (unchanged) ---
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){
@ -139,7 +156,7 @@
if (j.ok) renderHistory(j.items); if (j.ok) renderHistory(j.items);
}).catch(()=>{}); }).catch(()=>{});
// --- Recently viewed: fetch + render --- // --- Recently viewed: fetch + render (FIXED link + 20-word snippet) ---
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){
@ -147,9 +164,11 @@
if (!items || !items.length){ rvEmpty.style.display='block'; return; } if (!items || !items.length){ rvEmpty.style.display='block'; return; }
rvEmpty.style.display = 'none'; rvEmpty.style.display = 'none';
items.forEach(it=>{ items.forEach(it=>{
const li = document.createElement('li'); const url = entryUrlFor(it.entry_id);
const snippet = firstWords(it.illustration || '', 20) || `Entry #${it.entry_id}`;
const when = new Date(it.viewed_at); const when = new Date(it.viewed_at);
li.innerHTML = `<a href="{% url 'entry_view' 0 %}".replace('0', it.entry_id)>#${it.entry_id}</a> const li = document.createElement('li');
li.innerHTML = `<a href="${url}">${snippet}</a>
<span class="muted"> — ${when.toLocaleString()}</span>`; <span class="muted"> — ${when.toLocaleString()}</span>`;
rvList.appendChild(li); rvList.appendChild(li);
}); });
@ -158,7 +177,7 @@
if (j.ok) renderRecent(j.items); if (j.ok) renderRecent(j.items);
}).catch(()=>{}); }).catch(()=>{});
// --- Log searches reliably using Beacon on submit --- // --- Log searches reliably using Beacon on submit (unchanged) ---
const searchForm = document.querySelector('form.search-form'); const searchForm = document.querySelector('form.search-form');
if (searchForm){ if (searchForm){
searchForm.addEventListener('submit', ()=>{ searchForm.addEventListener('submit', ()=>{