Added search example.
This commit is contained in:
mikestefanello
parent
0239f46247
commit
6d62a19493
8 changed files with 95 additions and 14 deletions
|
|
@ -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}}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<h1 class="title">
|
||||
Hello{{if .IsAuth}}, {{.AuthUser.Name}}{{end}}
|
||||
</h1>
|
||||
<h2 class="subtitle">Welcome back!</h2>
|
||||
<h2 class="subtitle">{{if .IsAuth}}Welcome back!{{else}}Please login in to your account.{{end}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
<div class="field">
|
||||
<label for="email" class="label">Email address</label>
|
||||
<div class="control">
|
||||
<input id="email" type="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}" required>
|
||||
<input id="email" type="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password" class="label">Password</label>
|
||||
<div class="control">
|
||||
<input id="password" type="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}" required>
|
||||
<input id="password" type="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,28 +3,28 @@
|
|||
<div class="field">
|
||||
<label for="name" class="label">Name</label>
|
||||
<div class="control">
|
||||
<input type="text" id="name" name="name" class="input {{.Form.Submission.GetFieldStatusClass "Name"}}" value="{{.Form.Name}}" required>
|
||||
<input type="text" id="name" name="name" class="input {{.Form.Submission.GetFieldStatusClass "Name"}}" value="{{.Form.Name}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "Name")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email" class="label">Email address</label>
|
||||
<div class="control">
|
||||
<input type="email" id="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}" required>
|
||||
<input type="email" id="email" name="email" class="input {{.Form.Submission.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "Email")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password" class="label">Password</label>
|
||||
<div class="control">
|
||||
<input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}" required>
|
||||
<input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password-confirm" class="label">Confirm password</label>
|
||||
<div class="control">
|
||||
<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}" required>
|
||||
<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "ConfirmPassword")}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<div class="field">
|
||||
<label for="password" class="label">Password</label>
|
||||
<div class="control">
|
||||
<input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}" required>
|
||||
<input type="password" id="password" name="password" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "Password"}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "Password")}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password-confirm" class="label">Confirm password</label>
|
||||
<div class="control">
|
||||
<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}" required>
|
||||
<input type="password" id="password-confirm" name="password-confirm" placeholder="*******" class="input {{.Form.Submission.GetFieldStatusClass "ConfirmPassword"}}">
|
||||
{{template "field-errors" (.Form.Submission.GetFieldErrors "ConfirmPassword")}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
5
templates/pages/search.gohtml
Normal file
5
templates/pages/search.gohtml
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{{define "content"}}
|
||||
{{- range .Data}}
|
||||
<a class="panel-block" href="{{.URL}}">{{.Title}}</a>
|
||||
{{- end}}
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue