Skip to content

Commit cb9b8f4

Browse files
wiversonwiverson
committed
Updated to 2022
1 parent f2c554c commit cb9b8f4

File tree

1 file changed

+57
-97
lines changed

1 file changed

+57
-97
lines changed

‎src/main/resources/public/layout.html

Lines changed: 57 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,63 @@
11
<!DOCTYPE html>
2-
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
3-
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
4-
<head>
5-
<title>Company</title>
6-
<meta charset="utf-8">
7-
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
8-
<!--HTMX-->
9-
<script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" type="text/javascript"></script>
10-
<!-- Hyperscript for fancier stuff -->
11-
<script th:src="@{/webjars/hyperscript.org/dist/_hyperscript.js}" type="text/javascript"></script>
12-
<link th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}" th:rel="stylesheet">
13-
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
14-
<style>.htmx-indicator {
15-
position: fixed;
16-
top: 20px;
17-
right: 50%;
18-
height: 60px;
19-
width: 60px;
20-
border-radius: 100px;
21-
opacity: 0;
22-
transition: opacity 500ms ease-in;
23-
}
24-
25-
.htmx-request .htmx-indicator {
26-
opacity: 1;
27-
}</style>
28-
<link href="/blocks.css" rel="stylesheet">
29-
</head>
30-
<body>
31-
32-
<!-- User Messages -->
33-
<div class="fixed-top position-fixed sticky-top d-flex justify-content-center align-items-center w-100 py-3">
34-
<div aria-atomic="true" aria-live="assertive" class="toast align-items-center" id="toast" role="alert">
35-
<div class="d-flex">
36-
<div class="toast-body" id="toast-body">
37-
Toast Body
38-
</div>
39-
<button aria-label="Close" class="btn-close me-2 m-auto" data-bs-dismiss="toast" type="button"></button>
40-
</div>
41-
</div>
42-
</div>
43-
<!-- HTMX Loading Indicator -->
44-
<div class="fixed-top htmx-indicator position-fixed sticky-top">
45-
<img alt="Loading Indicator" height="44" src="/assets/svg/loader.svg" width="44"/>
2+
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
3+
<head>
4+
<title>Company</title>
5+
<meta charset="utf-8"/>
6+
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
7+
<!--HTMX-->
8+
<script th:src="@{/webjars/htmx.org/dist/htmx.min.js}" type="text/javascript"></script>
9+
<!-- Hyperscript for fancier stuff -->
10+
<script th:src="@{/webjars/hyperscript.org/dist/_hyperscript.js}" type="text/javascript"></script>
11+
<link th:href="@{/webjars/bootstrap-icons/font/bootstrap-icons.css}" th:rel="stylesheet"/>
12+
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
13+
<style>.htmx-indicator { position: fixed; top: 20px; right: 50%; height: 60px; width: 60px; border-radius: 100px; opacity: 0; transition: opacity 500ms ease-in; } .htmx-request .htmx-indicator { opacity: 1; }</style>
14+
<link href="/blocks.css" rel="stylesheet"/>
15+
</head>
16+
<body>
17+
<!-- User Messages -->
18+
<div class="fixed-top position-fixed sticky-top d-flex justify-content-center align-items-center w-100 py-3">
19+
<div aria-atomic="true" aria-live="assertive" class="toast align-items-center" id="toast" role="alert">
20+
<div class="d-flex">
21+
<div class="toast-body" id="toast-body">
22+
Toast Body
4623
</div>
47-
<nav class="navbar navbar-dark navbar-expand py-4 text-uppercase">
48-
<div class="container">
49-
<a class="align-top navbar-brand" href="/">Company</a>
50-
<ul class="ms-auto navbar-nav">
51-
<li class="ms-auto nav-item dropdown" sec:authorize="isAuthenticated()"
52-
th:if="${not #strings.contains( #request.requestURI,'sign-out')}">
53-
<a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#"
54-
id="navbarDropdownMenuLink" role="button">
55-
<img alt="Your Avatar" class="d-none d-sm-inline" height="64"
56-
src="/assets/svg/person-outline.svg"
57-
style="border-radius:50%"
58-
th:src="${@supabaseUser.avatarUrl}"
59-
width="64"/>
60-
<img alt="Identity Provider"
61-
class="d-none d-sm-inline" height="24"
62-
src="assets/svg/logo-github.svg"
63-
style="border-radius:50%; background-color: black; position: absolute; bottom: 8px; right: 20px"
64-
th:if="${@supabaseUser.provider != 'email'}"
65-
th:src="${'/assets/svg/logo-'[email protected]+'.svg'}"
66-
width="24"/>
67-
<span class="d-inline d-sm-none text-truncate dropdown-item-text"> <span
68-
th:text="${@supabaseUser.username}">Username</span> </span>
69-
</a>
70-
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu dropdown-menu-end">
71-
<div><span class="d-none d-sm-inline text-truncate dropdown-item-text"
72-
th:text="${@supabaseUser.username}">Username</span>
73-
</div>
74-
<a class="dropdown-item" href="/identity/sign-out.html" th:href="@{/public/sign-out}">Sign Out</a>
75-
<a class="dropdown-item" href="/secure.html" th:href="@{/secure}">Profile</a>
24+
<button aria-label="Close" class="btn-close me-2 m-auto" data-bs-dismiss="toast" type="button"></button>
7625
</div>
77-
</li>
78-
</ul>
79-
<div sec:authorize="!isAuthenticated()">
80-
<a th:href="@{/public/sign-in}">Sign In</a> |
81-
<a th:href="@{/public/create-account}">Create Account</a>
26+
</div>
27+
</div>
28+
<!-- HTMX Loading Indicator -->
29+
<div class="fixed-top htmx-indicator position-fixed sticky-top">
30+
<img alt="Loading Indicator" height="44" src="/assets/svg/loader.svg" width="44"/>
8231
</div>
83-
</div>
84-
</nav>
85-
<section layout:fragment="content">
86-
<p>Page content goes here</p>
87-
</section>
88-
<footer class="pb-3 pt-3 small">
89-
<div class="container">
90-
<div class="align-items-center row">
91-
<div class="col-md pb-2 pt-2">
92-
<p class="mb-0">&copy; 2021 - Company Name</p>
32+
<nav class="navbar navbar-dark navbar-expand py-4 text-uppercase">
33+
<div class="container"><a class="align-top navbar-brand" href="/">Company</a>
34+
<ul class="ms-auto navbar-nav">
35+
<li class="ms-auto nav-item dropdown" sec:authorize="isAuthenticated()" th:if="${not #strings.contains( #request.requestURI,'sign-out')}"><a aria-expanded="false" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="navbarDropdownMenuLink" role="button"> <img alt="Your Avatar" class="d-none d-sm-inline" height="64" src="/assets/svg/person-outline.svg" style="border-radius:50%" th:src="${@supabaseUser.avatarUrl}" width="64"/> <img alt="Identity Provider" class="d-none d-sm-inline" height="24" src="assets/svg/logo-github.svg" style="border-radius:50%; background-color: black; position: absolute; bottom: 8px; right: 20px" th:if="${@supabaseUser.provider != 'email'}" th:src="${'/assets/svg/logo-'[email protected]+'.svg'}" width="24"/> <span class="d-inline d-sm-none text-truncate dropdown-item-text"> <span th:text="${@supabaseUser.username}">Username</span> </span> </a>
36+
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu dropdown-menu-end">
37+
<div>
38+
<span class="d-none d-sm-inline text-truncate dropdown-item-text" th:text="${@supabaseUser.username}">Username</span>
39+
</div><a class="dropdown-item" href="/identity/sign-out.html" th:href="@{/public/sign-out}">Sign Out</a><a class="dropdown-item" href="/secure.html" th:href="@{/secure}">Profile</a>
40+
</div>
41+
</li>
42+
</ul>
43+
<div sec:authorize="!isAuthenticated()"><a th:href="@{/public/sign-in}">Sign In</a> |<a th:href="@{/public/create-account}">Create Account</a>
44+
</div>
9345
</div>
94-
<div class="col-md-auto pb-2 pt-2">
95-
<a href="#">Privacy Policy</a> |
96-
<a href="#">Terms of Use</a>
46+
</nav>
47+
<section layout:fragment="content">
48+
<p>Page content goes here</p>
49+
</section>
50+
<footer class="pb-3 pt-3 small">
51+
<div class="container">
52+
<div class="align-items-center row">
53+
<div class="col-md pb-2 pt-2">
54+
<p class="mb-0">&copy; 2021 - Company Name</p>
55+
</div>
56+
<div class="col-md-auto pb-2 pt-2"><a href="#">Privacy Policy</a> |<a href="#">Terms of Use</a>
57+
</div>
58+
</div>
9759
</div>
98-
</div>
99-
</div>
100-
</footer>
101-
<script src="/assets/js/popper.min.js"></script>
102-
<script src="/bootstrap/js/bootstrap.min.js"></script>
103-
</body>
60+
</footer>
61+
<script src="/assets/js/popper.min.js"></script>
62+
<script src="/bootstrap/js/bootstrap.min.js"></script>
63+
</body>

0 commit comments

Comments
 (0)