feat: bootstrap styling
This commit is contained in:
Teajey
parent
d6e2008823
commit
67c46febca
GPG Key ID:
970E790FE834A713
|
|
@ -9,6 +9,7 @@ import (
|
|||
|
||||
type ForeignWishlistProps struct {
|
||||
CurrentUserId string
|
||||
CurrentUserName string
|
||||
Username string
|
||||
UserReference string
|
||||
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)
|
||||
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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,20 @@
|
|||
<head>
|
||||
<title>Lishwist</title>
|
||||
<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>
|
||||
function getSubmissionNames(form) {
|
||||
return Array.from(new FormData(form).keys());
|
||||
|
|
@ -18,7 +32,21 @@
|
|||
</head>
|
||||
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,34 +1,59 @@
|
|||
{{define "body"}}
|
||||
<h1>Lishwist</h1>
|
||||
{{define "navbar"}}
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
{{with .Gifts}}
|
||||
<form method="post" action="/{{$.UserReference}}/update" autocomplete="off"
|
||||
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="completeSubmit" type="submit" name="mode" value="complete" disabled>Complete</button>
|
||||
<ul>
|
||||
<button id="claimSubmit" class="btn btn-primary" type="submit" name="mode" value="claim"
|
||||
disabled>Claim/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>
|
||||
<label>
|
||||
<li class="list-group-item{{if .Sent}} list-group-item-light{{end}}">
|
||||
{{if .ClaimantId}}
|
||||
{{if eq .ClaimantId $.CurrentUserId}}
|
||||
<input type="checkbox" aria-describedby="wish_detail_{{.Id}}" name="claimed" value="{{.Id}}" {{if
|
||||
.Sent}}disabled{{end}}>
|
||||
<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 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}}
|
||||
{{else}}
|
||||
<input type="checkbox" aria-describedby="wish_detail_{{.Id}}" name="unclaimed" value="{{.Id}}" {{if
|
||||
.Sent}}disabled{{end}}>
|
||||
<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}}
|
||||
|
|
@ -37,7 +62,8 @@
|
|||
</label>
|
||||
{{if .ClaimantId}}
|
||||
{{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}}
|
||||
<span id="wish_detail_{{.Id}}" style="color: red;">{{if .Sent}}Completed{{else}}Claimed{{end}} by
|
||||
{{.ClaimantName}}</span>
|
||||
|
|
@ -50,5 +76,8 @@
|
|||
{{else}}
|
||||
<p>They haven't wished for anything. Ask them to think of some stuff!</p>
|
||||
{{end}}
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -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"}}
|
||||
<p>Logged in as '{{.Username}}'</p>
|
||||
<form method="post" action="/logout">
|
||||
<input type="submit" value="Logout">
|
||||
</form>
|
||||
<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>
|
||||
<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" type="submit" name="mode" value="delete" disabled>Delete</button>
|
||||
<ul>
|
||||
<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>
|
||||
<label>
|
||||
<input type="checkbox" name="gift" value="{{.Id}}">
|
||||
<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>
|
||||
|
|
@ -27,27 +47,31 @@
|
|||
<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>
|
||||
<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>
|
||||
</section>
|
||||
{{with .Todo}}
|
||||
<section>
|
||||
</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" type="submit" name="mode" value="unclaim" disabled>Unclaim</button>
|
||||
<button id="completeSubmit" type="submit" name="mode" value="complete" disabled>Complete</button>
|
||||
<ul>
|
||||
<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>
|
||||
<label>
|
||||
{{if .Sent}}
|
||||
<input aria-describedby="todo_detail_{{.Id}}" type="checkbox" disabled>
|
||||
{{else}}
|
||||
<input type="checkbox" name="gift" value="{{.Id}}">
|
||||
{{end}}
|
||||
<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>
|
||||
|
|
@ -63,6 +87,9 @@
|
|||
{{end}}
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -1,14 +1,23 @@
|
|||
{{define "navbar"}}
|
||||
{{end}}
|
||||
|
||||
{{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>
|
||||
Username
|
||||
<input name="username" required>
|
||||
<input class="form-control" name="username" required>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input name="password" type="password" required>
|
||||
<input class="form-control" name="password" type="password" required>
|
||||
</label>
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
<a href="/register">Register</a>
|
||||
<div>
|
||||
<a href="/register">Register</a>
|
||||
</div>
|
||||
<input class="btn btn-primary" type="submit" value="Login">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
@ -1,17 +1,24 @@
|
|||
{{define "navbar"}}
|
||||
{{end}}
|
||||
|
||||
{{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>
|
||||
Username
|
||||
<input name="username" required>
|
||||
<input class="form-control" name="username" required>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input name="newPassword" type="password" required>
|
||||
<input class="form-control" name="newPassword" type="password" required>
|
||||
</label>
|
||||
<label>
|
||||
Confirm password
|
||||
<input name="confirmPassword" type="password" required>
|
||||
<input class="form-control" name="confirmPassword" type="password" required>
|
||||
</label>
|
||||
<input type="submit" value="Register">
|
||||
</form>
|
||||
<input class="btn btn-primary" type="submit" value="Register">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
Loading…
Reference in New Issue