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

11
context/foreign_wishlist.go
View File

@ -8,10 +8,11 @@ import (
) )
type ForeignWishlistProps struct { type ForeignWishlistProps struct {
CurrentUserId string CurrentUserId string
Username string CurrentUserName string
UserReference string Username string
Gifts []db.Gift UserReference string
Gifts []db.Gift
} }
func (ctx *Context) ViewForeignWishlist(w http.ResponseWriter, r *http.Request) { func (ctx *Context) ViewForeignWishlist(w http.ResponseWriter, r *http.Request) {
@ -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)
} }

30
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>
{{template "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" .}}
</div>
</body> </body>
</html> </html>

125
templates/foreign_wishlist.gotmpl
View File

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

159
templates/home.gotmpl
View File

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

35
templates/login.gotmpl
View File

@ -1,14 +1,23 @@
{{define "body"}} {{define "navbar"}}
<form method="post">
<label>
Username
<input name="username" required>
</label>
<label>
Password
<input name="password" type="password" required>
</label>
<input type="submit" value="Login">
</form>
<a href="/register">Register</a>
{{end}} {{end}}
{{define "body"}}
<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>
Username
<input class="form-control" name="username" required>
</label>
<label>
Password
<input class="form-control" name="password" type="password" required>
</label>
<div>
<a href="/register">Register</a>
</div>
<input class="btn btn-primary" type="submit" value="Login">
</div>
</form>
</div>
{{end}}

37
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">
<label> <form method="post">
Username <div class="d-flex flex-column gap-3">
<input name="username" required> <label>
</label> Username
<label> <input class="form-control" name="username" required>
Password </label>
<input name="newPassword" type="password" required> <label>
</label> Password
<label> <input class="form-control" name="newPassword" type="password" required>
Confirm password </label>
<input name="confirmPassword" type="password" required> <label>
</label> Confirm password
<input type="submit" value="Register"> <input class="form-control" name="confirmPassword" type="password" required>
</form> </label>
<input class="btn btn-primary" type="submit" value="Register">
</div>
</form>
</div>
{{end}} {{end}}