camzalewski/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Added search example.

Browse source
This commit is contained in:
mikestefanello 2021-12-27 12:54:27 -05:00
parent 0239f46247
commit 6d62a19493
8 changed files with 95 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

39
templates/layouts/main.gohtml
View file

@ -7,12 +7,13 @@
</head>
<body class="has-background-light" style="min-height:100%;">
<nav class="navbar is-dark">
<div class="container" hx-boost="true">
<div class="navbar-brand">
<div class="container">
<div class="navbar-brand" hx-boost="true">
<a href="{{call .ToURL "home"}}" class="navbar-item">{{.AppName}}</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
{{template "search"}}
</div>
</div>
</div>
@ -43,13 +44,12 @@
</div>
<div class="column is-10">
{{template "messages" .}}
<div class="box">
{{- if .Title}}
<h1 class="title">{{.Title}}</h1>
{{- end}}
{{template "messages" .}}
{{template "content" .}}
</div>
</div>
@ -58,4 +58,33 @@
{{template "footer" .}}
</body>
</html>
</html>
{{define "search"}}
<div class="search mr-2 mt-1" x-data="{modal:false}">
<input class="input" type="search" placeholder="Search..." @click="modal = true; $nextTick(() => $refs.input.focus());"/>
<div class="modal" :class="modal ? 'is-active' : ''" x-show="modal == true">
<div class="modal-background"></div>
<div class="modal-content" @click.away="modal = false;">
<div class="box">
<h2 class="subtitle">Search</h2>
<p class="control">
<input
hx-get="/search"
hx-trigger="keyup changed delay:500ms"
hx-target="#results"
name="query"
class="input"
type="search"
placeholder="Search..."
x-ref="input"
/>
</p>
<div class="block"></div>
<div id="results"></div>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
{{end}}