Teajey
/
lishwist
1
0
Fork 0
Code Issues 10 Pull Requests Projects Releases Wiki Activity

feat: bootstrap styling

This commit is contained in:
Teajey 2024-05-15 23:42:48 +12:00
parent d6e2008823
commit 67c46febca
Signed by: Teajey
GPG Key ID: 970E790FE834A713
6 changed files with 249 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
context/foreign_wishlist.go
View File

@ -9,6 +9,7 @@ import (
type ForeignWishlistProps struct { type ForeignWishlistProps struct {
CurrentUserId string CurrentUserId string
CurrentUserName string
Username string Username string
UserReference string UserReference string
Gifts []db.Gift Gifts []db.Gift
@ -37,6 +38,6 @@ func (ctx *Context) ViewForeignWishlist(w http.ResponseWriter, r *http.Request)
http.Error(w, "An error occurred while fetching this user's wishlist :(", http.StatusInternalServerError) http.Error(w, "An error occurred while fetching this user's wishlist :(", http.StatusInternalServerError)
return return
} }
p := ForeignWishlistProps{CurrentUserId: user.Id, Username: otherUser.Name, UserReference: userReference, Gifts: gifts} p := ForeignWishlistProps{CurrentUserId: user.Id, CurrentUserName: user.Name, Username: otherUser.Name, UserReference: userReference, Gifts: gifts}
templates.Execute(w, "foreign_wishlist.gotmpl", p) templates.Execute(w, "foreign_wishlist.gotmpl", p)
} }

28
templates/base.gotmpl
View File

@ -4,6 +4,20 @@
<head> <head>
<title>Lishwist</title> <title>Lishwist</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<style>
html,
body {
overflow-y: hidden;
}
</style>
<script> <script>
function getSubmissionNames(form) { function getSubmissionNames(form) {
return Array.from(new FormData(form).keys()); return Array.from(new FormData(form).keys());
@ -18,7 +32,21 @@
</head> </head>
<body> <body>
<div style="height: 100svh;" class="d-flex flex-column">
<div class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<div class="navbar-brand">Lishwist</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
{{template "navbar" .}}
</div>
</div>
</div>
{{template "body" .}} {{template "body" .}}
</div>
</body> </body>
</html> </html>

65
templates/foreign_wishlist.gotmpl
View File

@ -1,34 +1,59 @@
{{define "body"}} {{define "navbar"}}
<h1>Lishwist</h1>
<nav> <nav>
<ul> <ul class="navbar-nav">
<li> <li class="nav-item">
<a href="/">Home</a> <a class="nav-link" href="/">Home</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<section> <div class="flex-grow-1"></div>
<ul class="navbar-nav">
<li class="nav-item">
<div class="dropdown">
<button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Logged in as '{{.CurrentUserName}}'
</button>
<ul class="dropdown-menu">
<li>
<form class="d-contents" method="post" action="/logout">
<button class="dropdown-item" type="submit">Logout</button>
</form>
</li>
</ul>
</div>
</li>
</ul>
{{end}}
{{define "body"}}
<div class="overflow-y-scroll">
<div class="container pt-5">
<section class="card">
<div class="card-body">
<h2>{{.Username}}'s list</h2> <h2>{{.Username}}'s list</h2>
{{with .Gifts}} {{with .Gifts}}
<form method="post" action="/{{$.UserReference}}/update" autocomplete="off" <form method="post" action="/{{$.UserReference}}/update" autocomplete="off"
onchange="acceptNames(this, 'claimSubmit', 'claimed', 'unclaimed'); acceptNames(this, 'completeSubmit', 'claimed');"> onchange="acceptNames(this, 'claimSubmit', 'claimed', 'unclaimed'); acceptNames(this, 'completeSubmit', 'claimed');">
<button id="claimSubmit" type="submit" name="mode" value="claim" disabled>Claim/Unclaim</button> <button id="claimSubmit" class="btn btn-primary" type="submit" name="mode" value="claim"
<button id="completeSubmit" type="submit" name="mode" value="complete" disabled>Complete</button> disabled>Claim/Unclaim</button>
<ul> <button id="completeSubmit" class="btn btn-primary" type="submit" name="mode" value="complete"
disabled>Complete</button>
<ul class="list-group mt-3">
{{range .}} {{range .}}
<li> <li class="list-group-item{{if .Sent}} list-group-item-light{{end}}">
<label>
{{if .ClaimantId}} {{if .ClaimantId}}
{{if eq .ClaimantId $.CurrentUserId}} {{if eq .ClaimantId $.CurrentUserId}}
<input type="checkbox" aria-describedby="wish_detail_{{.Id}}" name="claimed" value="{{.Id}}" {{if <input id="foreignlist_select_{{.Id}}" class="form-check-input" type="checkbox"
.Sent}}disabled{{end}}> aria-describedby="wish_detail_{{.Id}}" name="claimed" value="{{.Id}}" {{if .Sent}}disabled{{end}}>
{{else}} {{else}}
<input type="checkbox" aria-describedby="wish_detail_{{.Id}}" disabled> <input id="foreignlist_select_{{.Id}}" class="form-check-input" type="checkbox"
aria-describedby="wish_detail_{{.Id}}" disabled>
{{end}} {{end}}
{{else}} {{else}}
<input type="checkbox" aria-describedby="wish_detail_{{.Id}}" name="unclaimed" value="{{.Id}}" {{if <input id="foreignlist_select_{{.Id}}" class="form-check-input" type="checkbox"
.Sent}}disabled{{end}}> aria-describedby="wish_detail_{{.Id}}" name="unclaimed" value="{{.Id}}" {{if .Sent}}disabled{{end}}>
{{end}} {{end}}
<label class="form-check-label" for="foreignlist_select_{{.Id}}">
{{if .Sent}} {{if .Sent}}
<s>{{.Name}}</s> <s>{{.Name}}</s>
{{else}} {{else}}
@ -37,7 +62,8 @@
</label> </label>
{{if .ClaimantId}} {{if .ClaimantId}}
{{if eq .ClaimantId $.CurrentUserId}} {{if eq .ClaimantId $.CurrentUserId}}
<span id="wish_detail_{{.Id}}" style="color: blue;">{{if .Sent}}Completed{{else}}Claimed{{end}} by you</span> <span id="wish_detail_{{.Id}}" style="color: blue;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
you</span>
{{else}} {{else}}
<span id="wish_detail_{{.Id}}" style="color: red;">{{if .Sent}}Completed{{else}}Claimed{{end}} by <span id="wish_detail_{{.Id}}" style="color: red;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
{{.ClaimantName}}</span> {{.ClaimantName}}</span>
@ -50,5 +76,8 @@
{{else}} {{else}}
<p>They haven't wished for anything. Ask them to think of some stuff!</p> <p>They haven't wished for anything. Ask them to think of some stuff!</p>
{{end}} {{end}}
</section> </div>
</section>
</div>
</div>
{{end}} {{end}}

91
templates/home.gotmpl
View File

@ -1,22 +1,42 @@
{{define "navbar"}}
<div class="flex-grow-1"></div>
<ul class="navbar-nav">
<li class="nav-item"><button class="btn btn-success"
onclick="navigator.clipboard.writeText('{{.HostUrl}}/{{.Reference}}'); alert('The share link to your wishlist has been copied to your clipboard. Share it with someone!');">Get
a link to your wishlist</button></li>
<li class="nav-item">
<div class="dropdown">
<button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Logged in as '{{.Username}}'
</button>
<ul class="dropdown-menu">
<li>
<form class="d-contents" method="post" action="/logout">
<button class="dropdown-item" type="submit">Logout</button>
</form>
</li>
</ul>
</div>
</li>
</ul>
{{end}}
{{define "body"}} {{define "body"}}
<p>Logged in as '{{.Username}}'</p> <div class="overflow-y-scroll">
<form method="post" action="/logout"> <div class="container pt-5">
<input type="submit" value="Logout"> <section class="card mb-4">
</form> <div class="card-body">
<h1>Lishwist</h1>
<button
onclick="navigator.clipboard.writeText('{{.HostUrl}}/{{.Reference}}'); alert('The share link to your wishlist has been copied to your clipboard.');">Get
a link to your wishlist</button>
<section>
<h2>Your wishlist</h2> <h2>Your wishlist</h2>
{{with .Gifts}} {{with .Gifts}}
<form method="post" action="/wishlist/delete" onchange="acceptNames(this, 'deleteSubmit', 'gift')" autocomplete="off"> <form method="post" action="/wishlist/delete" onchange="acceptNames(this, 'deleteSubmit', 'gift')"
<button id="deleteSubmit" type="submit" name="mode" value="delete" disabled>Delete</button> autocomplete="off">
<ul> <button id="deleteSubmit" class="btn btn-primary mb-3" type="submit" name="mode" value="delete"
disabled>Delete</button>
<ul class="list-group mb-3">
{{range .}} {{range .}}
<li> <li class="list-group-item">
<label> <input id="wishlist_select_{{.Id}}" class="form-check-input" type="checkbox" name="gift" value="{{.Id}}">
<input type="checkbox" name="gift" value="{{.Id}}"> <label class="form-check-label stretched-link" for="wishlist_select_{{.Id}}">
{{.Name}} {{.Name}}
</label> </label>
</li> </li>
@ -27,27 +47,31 @@
<p>Your list is empty. Think of some things to add!</p> <p>Your list is empty. Think of some things to add!</p>
{{end}} {{end}}
<form method="post" action="/wishlist/add"> <form method="post" action="/wishlist/add">
<input name="gift_name" required> <div class="input-group">
<button type="submit">Add gift idea</button> <input class="form-control" name="gift_name" required>
<button class="btn btn-primary" type="submit">Add gift idea</button>
</div>
</form> </form>
</section> </div>
{{with .Todo}} </section>
<section>
{{with .Todo}}
<section class="card">
<div class="card-body">
<h2>Your todo list</h2> <h2>Your todo list</h2>
<form method="post" action="/todo/update" <form method="post" action="/todo/update"
onchange="acceptNames(this, 'unclaimSubmit', 'gift'); acceptNames(this, 'completeSubmit', 'gift')" onchange="acceptNames(this, 'unclaimSubmit', 'gift'); acceptNames(this, 'completeSubmit', 'gift')"
autocomplete="off"> autocomplete="off">
<button id="unclaimSubmit" type="submit" name="mode" value="unclaim" disabled>Unclaim</button> <button id="unclaimSubmit" class="btn btn-primary" type="submit" name="mode" value="unclaim"
<button id="completeSubmit" type="submit" name="mode" value="complete" disabled>Complete</button> disabled>Unclaim</button>
<ul> <button id="completeSubmit" class="btn btn-primary" type="submit" name="mode" value="complete"
disabled>Complete</button>
<ul class="list-group mt-3">
{{range .}} {{range .}}
<li> <li class="list-group-item{{if .Sent}} list-group-item-light{{end}}">
<label> <input id="todo_select_{{.Id}}" class="form-check-input" type="checkbox" {{if .Sent}}
{{if .Sent}} aria-describedby="todo_detail_{{.Id}}" disabled{{else}} name="gift" value="{{.Id}}" {{end}}>
<input aria-describedby="todo_detail_{{.Id}}" type="checkbox" disabled> <label for="todo_select_{{.Id}}" class="form-check-label">
{{else}}
<input type="checkbox" name="gift" value="{{.Id}}">
{{end}}
<em> <em>
{{if .Sent}} {{if .Sent}}
<s>{{.Name}}</s> <s>{{.Name}}</s>
@ -63,6 +87,9 @@
{{end}} {{end}}
</ul> </ul>
</form> </form>
</section> </div>
{{end}} </section>
{{end}}
</div>
</div>
{{end}} {{end}}

21
templates/login.gotmpl
View File

@ -1,14 +1,23 @@
{{define "navbar"}}
{{end}}
{{define "body"}} {{define "body"}}
<form method="post"> <div class="flex-grow-1 d-flex justify-content-center align-items-center">
<form method="post">
<div class="d-flex flex-column gap-3">
<label> <label>
Username Username
<input name="username" required> <input class="form-control" name="username" required>
</label> </label>
<label> <label>
Password Password
<input name="password" type="password" required> <input class="form-control" name="password" type="password" required>
</label> </label>
<input type="submit" value="Login"> <div>
</form> <a href="/register">Register</a>
<a href="/register">Register</a> </div>
<input class="btn btn-primary" type="submit" value="Login">
</div>
</form>
</div>
{{end}} {{end}}

19
templates/register.gotmpl
View File

@ -1,17 +1,24 @@
{{define "navbar"}}
{{end}}
{{define "body"}} {{define "body"}}
<form method="post" autocomplete="off"> <div class="flex-grow-1 d-flex justify-content-center align-items-center">
<form method="post">
<div class="d-flex flex-column gap-3">
<label> <label>
Username Username
<input name="username" required> <input class="form-control" name="username" required>
</label> </label>
<label> <label>
Password Password
<input name="newPassword" type="password" required> <input class="form-control" name="newPassword" type="password" required>
</label> </label>
<label> <label>
Confirm password Confirm password
<input name="confirmPassword" type="password" required> <input class="form-control" name="confirmPassword" type="password" required>
</label> </label>
<input type="submit" value="Register"> <input class="btn btn-primary" type="submit" value="Register">
</form> </div>
</form>
</div>
{{end}} {{end}}