dadobos/pokemongotemplates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed theme, added search, added pagination

Browse Source
This commit is contained in:
dadobos
2022-11-27 09:27:49 +01:00
parent 7ab57f2ea0
commit bea96468d5
19 changed files with 370 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/components/Footer.gohtml
+6 -1
View File
@@ -1,6 +1,11 @@
{{define "components/Footer.gohtml"}}
</body>
<div class="d-flex justify-content-center p-6 text-bg-dark text-info">Dan Dobos &copy; {{GetCurrentYear}}</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>
{{end}}
web/templates/components/Head.gohtml
+20 -13
View File
@@ -1,17 +1,24 @@
{{define "components/Head.gohtml"}}
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth;">
<html lang="en" style="scroll-behavior: smooth">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link
rel="icon"
href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico"
type="image/x-icon"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
<title>Pokemon Go Templates</title>
</head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="https://raw.githubusercontent.com/diaid83/details/master/favicon.ico" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Pokemon Go Templates</title>
</head>
<body>
{{ end }}
<body >
{{end}}
web/templates/components/Navbar.gohtml
+54 -22
View File
@@ -1,25 +1,57 @@
{{define "components/Navbar.gohtml"}}
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Pokemon Go Templates</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{{range .}}
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{.Link}}">{{.Title}}</a>
</li>
{{end}}
</ul>
<form class="d-flex" onsubmit="document.getElementById(document.getElementById('search').value).scrollIntoView();return false">
<input class="form-control me-2" type="search" id="search" name="search" placeholder="Pokemon Name" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top bg-dark">
<div class="container">
<a class="navbar-brand text-info" href="/">Pokemon Go Templates</a>
<button
class="navbar-toggler btn btn-sm text-bg-info"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{{range.NavigationLinks}}
<li class="nav-item">
<a
class="nav-link active text-info"
aria-current="page"
href="{{.Link}}"
>
{{.Title}}
</a>
</li>
{{end}}
</ul>
<form
autocomplete="off"
class="d-flex"
onsubmit="document.getElementById(document.getElementById('search').value).scrollIntoView();return false"
>
<div class="autocomplete" style="width: 300px">
<input
class="form-control me-2"
type="text"
id="search"
name="search"
placeholder="Pokemon Name"
aria-label="Search"
list="searchList"
/>
<datalist id="searchList">
{{ range.Data.SortedPokemons }}
<option value="{{.}}"></option>
{{ end }}
</datalist>
</div>
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{{ end }}
{{ end }}
web/templates/components/Pagination.gohtml
+40
View File
@@ -0,0 +1,40 @@
{{define "components/Pagination.gohtml"}}
<nav class="p-3">
<ul class="pagination justify-content-center">
{{if .Data.Previous}}
<li class="page-item">
<form enctype="application/x-www-form-urlencoded"
action="/form/send-pagination"
method="get">
<label>
<input name="url" type="hidden" value="{{.Data.Previous}}">
</label>
<button class="btn btn-outline-info"
type="submit">
Previous
</button>
</form>
</li>
{{end}}
{{if .Data.Next}}
<li class="page-item">
<form enctype="application/x-www-form-urlencoded"
action="/form/send-pagination"
method="get">
<label>
<input type="hidden"
name="url"
value="{{.Data.Next}}">
</label>
<button class="btn btn-outline-info"
type="submit">
Next
</button>
</form>
</li>
{{end}}
</ul>
</nav>
{{end}}
web/templates/components/PokemonCard.gohtml
+59
View File
@@ -0,0 +1,59 @@
{{define "components/PokemonCard.gohtml"}}
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12"
align="center"
id="{{.Name}}">
<div class="card m-1 text-bg-secondary"
style="width: 18rem;"
onMouseOver="this.style.transform = ('scale(1.05)');this.style.transition='0.3s';"
onMouseOut="this.style.transform = ('scale(1)');this.style.transition='0.3s';"
align="start">
{{if ne .Image ""}}
<img src="{{.Image}}"
class="card-img-top"
alt="{{.Name}}">
{{else}}
<picture>
<!-- <source
srcset="https://res.cloudinary.com/dadobos/image/upload/v1669533239/web/qhvaith9pdepdylkekzl.webp"
type="image/webp"/> -->
<img src="https://res.cloudinary.com/dadobos/image/upload/v1669533239/web/qhvaith9pdepdylkekzl.png"
class="card-img-top"
alt="{{.Name}}"
loading="lazy">
</picture>
{{end}}
<div class="card-body">
<h5 class="card-title">
<span>Name: </span>
<span class="text-capitalize">{{.Name}}</span>
</h5>
<p class="card-text">
<div class="row">
<div class="col-6">
<strong>Weight: </strong>
<span>{{.Weight}}</span>
</div>
<div class="col-6">
<strong>Height:</strong>
<span>{{.Height}}</span>
</div>
</div>
<div class="row">
<div class="col">
<strong>Types: </strong>
<span>{{.Types}}</span>
</div>
</div>
<div class="row">
<div class="col">
<strong>Moves: </strong>
<p>{{.Moves}}</p>
</div>
</div>
</p>
</div>
</div>
</div>
{{end}}
web/templates/views/CustomPokemons.gohtml
-12
View File
@@ -1,12 +0,0 @@
{{define "views/CustomPokemons.gohtml"}}
{{template "components/Head.gohtml"}}
{{template "components/Navbar.gohtml" .NavigationLinks}}
<div class="container-xxl pt-5">
<h1>views/CustomPokemons.gohtml</h1>
</div>
{{template "components/Footer.gohtml"}}
{{end}}
web/templates/views/PaginationPokemons.gohtml
+21
View File
@@ -0,0 +1,21 @@
{{define "views/PaginationPokemons.gohtml"}}
{{template "components/Head.gohtml"}}
{{template "components/Navbar.gohtml" .}}
<div class="container-fluid text-bg-dark">
<div class="container-xxl pt-5">
{{template "components/Pagination.gohtml" .}}
<div
class="row row-cols-auto g-2 align-items-center justify-content-center">
{{ range .Data.PokemonMap }}
{{template "components/PokemonCard.gohtml" .}}
{{ end }}
</div>
{{template "components/Pagination.gohtml" .}}
</div>
</div>
{{template "components/Footer.gohtml"}}
{{ end }}
web/templates/views/Pokemons.gohtml
+8 -48
View File
@@ -1,56 +1,16 @@
{{define "views/Pokemons.gohtml"}}
{{template "components/Head.gohtml"}}
{{template "components/Navbar.gohtml" .NavigationLinks}}
<div class="container-fluid bg-light bg-gradient">
<div class="container-xxl pt-5">
<div class="row row-cols-auto g-2 mt-5">
{{range .Data}}
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12" align="center" id="{{.Name}}">
<div class="card m-1" style="width: 18rem;" onMouseOver="this.style.transform = ('scale(1.1)');this.style.transition='0.3s';"
onMouseOut="this.style.transform = ('scale(1)');this.style.transition='0.3s';" align="start">
<img src="{{.Image}}" class="card-img-top" alt="{{.Name}}">
<div class="card-body">
<h5 class="card-title">
<span>Name: </span>
<span>{{.Name}}</span>
</h5>
<p class="card-text">
<div class="row">
<div class="col-6">
<strong>Weight: </strong>
<span>{{.Weight}}</span>
</div>
<div class="col-6">
<strong>Height:</strong>
<span>{{.Height}}</span>
</div>
</div>
<div class="row">
<div class="col">
<strong>Types: </strong>
<span>{{.Types}}</span>
</div>
</div>
<div class="row">
<div class="col">
<strong>Moves: </strong>
<p>{{.Moves}}</p>
</div>
</div>
</p>
</div>
{{template "components/Navbar.gohtml" .}}
<div class="container-fluid text-bg-dark">
<div class="container-xxl pt-5">
<div class="row row-cols-auto g-2 mt-5 align-items-center justify-content-center">
{{range .Data.PokemonMap}}
{{ template "components/PokemonCard.gohtml" . }}
{{end}}
</div>
</div>
{{end}}
</div>
</div>
</div>
{{template "components/Footer.gohtml"}}
{{template "components/Footer.gohtml" .Data.SortedPokemons}}
{{end}}