localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Implement a prototype for notifications

Browse Source
This commit is contained in:
Lukas Fürderer 2020-01-19 18:46:32 +01:00
parent d4e670218f
commit ececdac3a9
Signed by: Lukas
GPG Key ID: B0AFA46F94103349
6 changed files with 104 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
View File

@ -31,8 +31,10 @@ public class RequestController {
} }
@GetMapping("/home") @GetMapping("/home")
public String home(Model model) { public String home(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
if (!loginToken.equals("")) {
model.addAttribute(new Customer()); model.addAttribute(new Customer());
}
return "home"; return "home";
} }
@ -104,6 +106,11 @@ public class RequestController {
return "intern/listedArticlesEdit"; return "intern/listedArticlesEdit";
} }
@GetMapping("/notification")
public String notification() {
return "notification";
}
@GetMapping("/customer/accountsettings") @GetMapping("/customer/accountsettings")
public String customerAccountSettings(Model model) { public String customerAccountSettings(Model model) {
Customer customer = new Customer(); Customer customer = new Customer();

45
prototype/src/main/resources/static/css/notifications.css Normal file
View File

@ -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;
}

1
prototype/src/main/resources/static/img/bell.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 436 B

20
prototype/src/main/resources/templates/fragments/header.html
View File

@ -13,7 +13,25 @@
<input type="text" placeholder="Nach Produkten suchen..."/> <input type="text" placeholder="Nach Produkten suchen..."/>
<button>Finden</button> <button>Finden</button>
</form> </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> </div>
</nav> </nav>
</body> </body>

1
prototype/src/main/resources/templates/home.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>e-commerce</title> <title>e-commerce</title>
<link rel="stylesheet" type="text/css" href="css/ecom.css"> <link rel="stylesheet" type="text/css" href="css/ecom.css">
<link href="../static/css/notifications.css" rel="stylesheet" th:href="@{/css/notifications.css}"/>
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>

29
prototype/src/main/resources/templates/notification.html Normal file
View File

@ -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>