Franz Kafka
4b0cde91ed
- results-layout: 3-column grid (1fr | min(768px,100%) | 300px) max-width 1400px, centered - Widen center results column to 768px max - Right column (formerly sidebar): sticky, contains knowledge panel + related searches - Knowledge panel: Wikipedia/infobox summary with optional thumbnail - Related searches: clickable links to refine the query - Empty left buffer creates balanced whitespace on large screens - Responsive: 2-col at 1000px, 1-col at 700px
58 lines
2.1 KiB
HTML
58 lines
2.1 KiB
HTML
{{define "title"}}{{if .Query}}{{.Query}} — {{end}}{{end}}
|
|
{{define "content"}}
|
|
<div class="results-layout">
|
|
<!-- Compact search bar spans all columns -->
|
|
<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>
|
|
|
|
<!-- Center: Results -->
|
|
<div class="results-column" id="results">
|
|
{{template "results_inner" .}}
|
|
</div>
|
|
|
|
<!-- Right: Knowledge Panel + Related Searches -->
|
|
<aside class="right-column" id="right-column">
|
|
{{if and .Infoboxes (gt (len .Infoboxes) 0)}}
|
|
{{with index .Infoboxes 0}}
|
|
<div class="knowledge-panel">
|
|
{{if .img_src}}<img class="knowledge-panel-thumb" src="{{.img_src}}" alt="{{.title}}" loading="lazy">{{end}}
|
|
{{if .title}}<div class="knowledge-panel-title">{{.title}}</div>{{end}}
|
|
{{if .content}}<div class="knowledge-panel-content">{{.content}}</div>{{end}}
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{if .Suggestions}}
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-card-title">Related Searches</div>
|
|
<div class="related-searches">
|
|
{{range .Suggestions}}
|
|
<a class="related-search-link" href="/search?q={{. | urlquery}}">{{.}}</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .UnresponsiveEngines}}
|
|
<div class="sidebar-card">
|
|
<div class="sidebar-card-title">Engine Status</div>
|
|
<ul class="unresponsive-engines">
|
|
{{range .UnresponsiveEngines}}<li>{{index . 0}}: {{index . 1}}</li>{{end}}
|
|
</ul>
|
|
</div>
|
|
{{end}}
|
|
</aside>
|
|
</div>
|
|
{{end}}
|