Implement a prototype for notifications
This commit is contained in:
parent
d4e670218f
commit
ececdac3a9
GPG Key ID:
B0AFA46F94103349
|
|
@ -31,8 +31,10 @@ public class RequestController {
|
|||
}
|
||||
|
||||
@GetMapping("/home")
|
||||
public String home(Model model) {
|
||||
model.addAttribute(new Customer());
|
||||
public String home(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
|
||||
if (!loginToken.equals("")) {
|
||||
model.addAttribute(new Customer());
|
||||
}
|
||||
return "home";
|
||||
}
|
||||
|
||||
|
|
@ -104,6 +106,11 @@ public class RequestController {
|
|||
return "intern/listedArticlesEdit";
|
||||
}
|
||||
|
||||
@GetMapping("/notification")
|
||||
public String notification() {
|
||||
return "notification";
|
||||
}
|
||||
|
||||
@GetMapping("/customer/accountsettings")
|
||||
public String customerAccountSettings(Model model) {
|
||||
Customer customer = new Customer();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
.notifications {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notifications input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notifications input:checked ~ label {
|
||||
background-color: var(--c-primary-highlight);
|
||||
}
|
||||
|
||||
.notifications label img {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.notifications .listbox {
|
||||
background-color: var(--c-primary-highlight);
|
||||
border-radius: var(--u-2);
|
||||
color: var(--c-black);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translate(0, -50%) scaleY(0);
|
||||
transition: transform 0.1s ease-in;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.notifications input:checked ~ .listbox {
|
||||
transform: none;
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
.notifications .listbox li {
|
||||
background-color: var(--c-base);
|
||||
border-radius: var(--u-2);
|
||||
display: block;
|
||||
margin: var(--u0);
|
||||
overflow: auto;
|
||||
padding: var(--u0);
|
||||
}
|
||||
|
||||
.notifications .listbox li.unread {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg width="25" height="28" xmlns="http://www.w3.org/2000/svg"><path d="M12.30 0Q13.80 0 13.80 1.50Q13.80 3.00 15.30 3.00C21.90 3.00 19.05 21.00 22.80 21.00C25.20 21.00 25.20 24.00 22.80 24.00L1.80 24.00C-.60 24.00 -.60 21.00 1.80 21.00C5.55 21.00 2.70 3.00 9.30 3.00Q10.80 3.00 10.80 1.50Q10.80 0 12.30 0ZM10.20 24.60L14.40 24.60Q15.30 24.60 15.30 25.50C15.30 28.50 9.30 28.50 9.30 25.50Q9.30 24.60 10.20 24.60Z" fill="#ecf0f1"/></svg>
|
||||
|
After Width: | Height: | Size: 436 B |
|
|
@ -13,7 +13,25 @@
|
|||
<input type="text" placeholder="Nach Produkten suchen..."/>
|
||||
<button>Finden</button>
|
||||
</form>
|
||||
<a class="button" th:href="@{/login}"> Login </a>
|
||||
<a th:unless="${customer}" class="button" th:href="@{/login}">Login</a>
|
||||
<div class="notifications" th:if="${customer}">
|
||||
<input id="messages" type="checkbox"></input>
|
||||
<label for="messages" class="button">
|
||||
<img th:src="@{/img/bell.svg}" width="25" height="28" alt="Nachrichten"/>
|
||||
</label>
|
||||
<ul class="listbox">
|
||||
<li class="unread">
|
||||
Ihre Bestellung kommt voraussichtlich am Donnerstag, den 20.08.2020
|
||||
</li>
|
||||
<li class="unread">
|
||||
Ihre Rücksendung ist bei uns eingegangen.
|
||||
</li>
|
||||
<li>
|
||||
Ihre Bestellung wurde versandt.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a th:if="${customer}" class="button" th:href="@{/logout}">Abmelden</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>e-commerce</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/ecom.css">
|
||||
<link href="../static/css/notifications.css" rel="stylesheet" th:href="@{/css/notifications.css}"/>
|
||||
</head>
|
||||
<body>
|
||||
<nav th:replace="fragments/header :: header">Header</nav>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>e-commerce</title>
|
||||
<link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
|
||||
</head>
|
||||
<body>
|
||||
<nav th:replace="fragments/header :: header">Header</nav>
|
||||
<main class='hero'>
|
||||
<div class='content-width'>
|
||||
<h1>Benachrichtigungen</h1>
|
||||
<p>Nachricht vom 17.08.2020, 14:38 Uhr</p>
|
||||
<h2>Ihre Bestellung kommt voraussichtlich am Donnerstag, den 20.08.2020</h2>
|
||||
<p>
|
||||
Vielen Dank für Ihre Bestellung der folgenden Artikel:<br>
|
||||
<br>
|
||||
2x tolle Kamera<br>
|
||||
1x Bluetooth Kopfhörer<br>
|
||||
3x USB-Magic Light<br>
|
||||
<br>
|
||||
Die Sendung wird Ihnen voraussichtlich am Donnerstag, den 20.08.2020 zugestellt. Den aktuellen Status des Pakets können Sie jederzeit unter der Paketverfolgungsnummer P-586776517 nachvollziehen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-spacer s"></div>
|
||||
</main>
|
||||
<footer th:replace="fragments/footer :: footer"></footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue