ashisgreat22
e18a54a41a
Wrap sidebar time/type filters in a form with HTMX attributes so filter changes trigger partial page updates instead of full reload. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
99 lines
No EOL
3.7 KiB
HTML
99 lines
No EOL
3.7 KiB
HTML
{{define "title"}}{{if .Query}}{{.Query}} — {{end}}{{end}}
|
|
{{define "content"}}
|
|
<div class="results-layout">
|
|
<!-- Left Sidebar -->
|
|
<aside class="left-sidebar" id="left-sidebar">
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-nav-title">Categories</div>
|
|
{{range .Categories}}
|
|
<a href="/search?q={{$.Query | urlquery}}&category={{.}}" class="sidebar-nav-item {{if eq $.ActiveCategory .}}active{{end}}">
|
|
<span class="sidebar-nav-item-icon">{{index $.CategoryIcons .}}</span>
|
|
<span>{{.}}</span>
|
|
</a>
|
|
{{end}}
|
|
<!-- Disabled categories with no links -->
|
|
{{range .DisabledCategories}}
|
|
<span class="sidebar-nav-item disabled">
|
|
<span class="sidebar-nav-item-icon">{{index $.CategoryIcons .}}</span>
|
|
<span>{{.}}</span>
|
|
</span>
|
|
{{end}}
|
|
</nav>
|
|
|
|
<form method="GET" action="/search" class="sidebar-filters"
|
|
hx-get="/search" hx-target="#results" hx-trigger="change" hx-swap="innerHTML">
|
|
<input type="hidden" name="q" value="{{.Query | urlquery}}">
|
|
<input type="hidden" name="category" value="{{.ActiveCategory}}">
|
|
<div class="sidebar-filter-group">
|
|
<div class="sidebar-filter-label">Time</div>
|
|
{{range .TimeFilters}}
|
|
<label class="sidebar-filter-option">
|
|
<input type="radio" name="time" value="{{.Value}}" {{if eq $.ActiveTime .Value}}checked{{end}}>
|
|
<span>{{.Label}}</span>
|
|
</label>
|
|
{{end}}
|
|
</div>
|
|
<div class="sidebar-filter-group">
|
|
<div class="sidebar-filter-label">Type</div>
|
|
{{range .TypeFilters}}
|
|
<label class="sidebar-filter-option">
|
|
<input type="radio" name="type" value="{{.Value}}" {{if eq $.ActiveType .Value}}checked{{end}}>
|
|
<span>{{.Label}}</span>
|
|
</label>
|
|
{{end}}
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
|
|
<!-- Center Column -->
|
|
<div class="results-column">
|
|
<!-- Compact search bar -->
|
|
<div class="search-compact">
|
|
<div class="search-box">
|
|
<form method="GET" action="/search" role="search" id="search-form">
|
|
<input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off" autofocus
|
|
hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
|
|
<button type="submit" class="search-box-submit" aria-label="Search">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"/>
|
|
<path d="m21 21-4.35-4.35"/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile filter chips -->
|
|
<div class="mobile-filter-chips">
|
|
<a href="/search?q={{.Query | urlquery}}" class="mobile-filter-chip {{if not .ActiveCategory}}active{{end}}">All</a>
|
|
{{range .Categories}}
|
|
<a href="/search?q={{$.Query | urlquery}}&category={{.}}" class="mobile-filter-chip {{if eq $.ActiveCategory .}}active{{end}}">{{.}}</a>
|
|
{{end}}
|
|
</div>
|
|
|
|
<!-- Results inner -->
|
|
{{template "results_inner" .}}
|
|
</div>
|
|
|
|
<!-- Right Sidebar -->
|
|
<aside class="right-sidebar" id="sidebar">
|
|
{{if .Suggestions}}
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">Related Searches</div>
|
|
<div class="suggestion-list">
|
|
{{range .Suggestions}}<span class="suggestion"><a href="/search?q={{. | urlquery}}">{{.}}</a></span>{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .UnresponsiveEngines}}
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-title">Engines with issues</div>
|
|
<ul class="unresponsive-engines">
|
|
{{range .UnresponsiveEngines}}<li>{{index . 0}}: {{index . 1}}</li>{{end}}
|
|
</ul>
|
|
</div>
|
|
{{end}}
|
|
</aside>
|
|
</div>
|
|
{{end}} |