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

implement login + header

Browse Source
This commit is contained in:
CodeSteak 2020-01-25 22:13:26 +01:00
parent 5cd4f87096
commit 26d05eace5
5 changed files with 230 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
prototype/src/main/java/org/hso/ecommerce/app/Config.java Normal file
View File

@ -0,0 +1,17 @@
package org.hso.ecommerce.app;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.hso.ecommerce.components.LoginIntercepter;
@Configuration
public class Config implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginIntercepter());
}
}

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

@ -18,13 +18,6 @@ import java.util.UUID;
@Controller @Controller
public class RequestController { public class RequestController {
private final CustomerRepository customerRepo;
@Autowired
public RequestController(CustomerRepository customerRepo) {
this.customerRepo = customerRepo;
}
@GetMapping("/") @GetMapping("/")
public String home() { public String home() {
return "redirect:/shop/"; return "redirect:/shop/";
@ -36,10 +29,17 @@ public class RequestController {
} }
@PostMapping("/login") @PostMapping("/login")
public String loginPost() { public String loginPost(HttpServletResponse response) {
response.addCookie(new Cookie("login", "true"));
return "redirect:/"; return "redirect:/";
} }
@PostMapping("/logout")
public String logoutPost(HttpServletResponse response) {
response.addCookie(new Cookie("login", "false"));
return "redirect:/";
}
@GetMapping("/register") @GetMapping("/register")
public String register() { public String register() {
return "/register"; return "/register";
@ -81,7 +81,7 @@ public class RequestController {
@GetMapping("/user/") @GetMapping("/user/")
public String user() { public String user() {
return "/user/index"; return "redirect:/user/settings";
} }
@GetMapping("/user/settings") @GetMapping("/user/settings")

39
prototype/src/main/java/org/hso/ecommerce/components/LoginIntercepter.java Normal file
View File

@ -0,0 +1,39 @@
package org.hso.ecommerce.components;
import org.springframework.boot.web.servlet.server.Session;
import org.springframework.stereotype.Component;
import org.springframework.ui.Model;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Component
public class LoginIntercepter implements HandlerInterceptor {
@Override
public boolean preHandle(
HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie c : cookies) {
if (c.getName().equals("login")) {
request.setAttribute("customer", c.getValue().equals("true"));
}
}
}
return true;
}
@Override
public void postHandle(
HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
Object handler, Exception exception) throws Exception {}
}

314
prototype/src/main/resources/static/css/ecom.css
View File

@ -1,59 +1,81 @@
@import "fonts.css"; @import "fonts.css";
.dropdown {
width: 15rem;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown .dropdown-button {
display: block;
width: 15rem;
margin-top: 0px;
margin-bottom: 0px;
}
.dropdown:hover .dropdown-content {
}
.dropdown:hover .dropdown-button {
display: inline-block;
background-color: var(--root-c-black);
width: 15rem;
margin: 0px;
}
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: column;
align-items: stretch;
}
.dropdown:hover .dropdown-content>* {
margin: 0px;
min-width: 15rem;
}
:root { :root {
font-family: "Fira Sans"; font-family: "Fira Sans";
line-height: 1.15; line-height: 1.15;
--u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
--u5: calc(1em * 1.5 * 1.5 * 1.5 * 1.5 * 1.5 ); --u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5);
--u4: calc(1em * 1.5 * 1.5 * 1.5 * 1.5); --u3: calc(1em * 1.5 * 1.5 * 1.5);
--u3: calc(1em * 1.5 * 1.5 * 1.5); --u2: calc(1em * 1.5 * 1.5);
--u2: calc(1em * 1.5 * 1.5); --u1: calc(1em * 1.5);
--u1: calc(1em * 1.5); --u0: calc(1em);
--u0: calc(1em);
--u-1: calc(1em * 0.666); --u-1: calc(1em * 0.666);
--u-2: calc(1em * 0.666 * 0.666); --u-2: calc(1em * 0.666 * 0.666);
--u-3: calc(1em * 0.666 * 0.666 * 0.666); --u-3: calc(1em * 0.666 * 0.666 * 0.666);
--u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666); --u-4: calc(1em * 0.666 * 0.666 * 0.666 * 0.666);
--root-c-base: #ecf0f1; --root-c-base: #ecf0f1;
--root-c-base-highlight: #FFF; --root-c-base-highlight: #FFF;
--root-c-primary: #1abc9c; --root-c-primary: #1abc9c;
--root-c-primary-highlight: #16a085; --root-c-primary-highlight: #16a085;
--root-c-secondary: #9b59b6; --root-c-secondary: #9b59b6;
--root-c-secondary-highlight: #8e44ad; --root-c-secondary-highlight: #8e44ad;
--root-c-black: #2c3e50; --root-c-black: #2c3e50;
--root-c-black-highlight: #34495e; --root-c-black-highlight: #34495e;
--c-base: var(--root-c-base); --c-base: var(--root-c-base);
--c-base-highlight: var(--root-c-base-highlight); --c-base-highlight: var(--root-c-base-highlight);
--c-primary: var(--root-c-primary); --c-primary: var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary-highlight);
--c-secondary: var(--root-c-secondary); --c-secondary: var(--root-c-secondary);
--c-secondary-highlight: var(--root-c-secondary-highlight); --c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-black); --c-black: var(--root-c-black);
--c-black-highlight: var(--root-c-black-highlight); --c-black-highlight: var(--root-c-black-highlight);
--c-error: #c0392b; --c-error: #c0392b;
} }
.primary { .primary {
--c-base: var(--root-c-base); --c-base: var(--root-c-base);
--c-base-highlight: var(--root-c-base-highlight); --c-base-highlight: var(--root-c-base-highlight);
--c-primary: var(--root-c-primary);
--c-primary:var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary-highlight);
--c-secondary: var(--c-secondary); --c-secondary: var(--c-secondary);
--c-secondary-highlight: var(--root-c-secondary-highlight); --c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-black); --c-black: var(--root-c-black);
--c-black-highlight: var(--root-c-black-highlight); --c-black-highlight: var(--root-c-black-highlight);
} }
@ -61,13 +83,32 @@
.secondary { .secondary {
--c-base: var(--root-c-base); --c-base: var(--root-c-base);
--c-base-highlight: var(--root-c-base-highlight); --c-base-highlight: var(--root-c-base-highlight);
--c-primary: var(--root-c-secondary);
--c-primary:var(--root-c-secondary);
--c-primary-highlight: var(--root-c-secondary-highlight); --c-primary-highlight: var(--root-c-secondary-highlight);
--c-secondary: var(--root-c-primary); --c-secondary: var(--root-c-primary);
--c-secondary-highlight: var(--root-c-primary-highlight); --c-secondary-highlight: var(--root-c-primary-highlight);
--c-black: var(--root-c-black);
--c-black-highlight: var(--root-c-black-highlight);
}
.black {
--c-base: var(--root-c-base);
--c-base-highlight: var(--root-c-base-highlight);
--c-primary: var(--root-c-black);
--c-primary-highlight: var(--root-c-black-highlight);
--c-secondary: var(--root-c-primary);
--c-secondary-highlight: var(--root-c-primary-highlight);
--c-black: var(--root-c-primary);
--c-black-highlight: var(--root-c-primary-highlight);
}
.black-as-highlight {
--c-base: var(--root-c-base);
--c-base-highlight: var(--root-c-black-highlight);
--c-primary: var(--root-c-primary);
--c-primary-highlight: var(--root-c-black-highlight);
--c-secondary: var(--root-c-secondary);
--c-secondary-highlight: var(--root-c-black-highlight);
--c-black: var(--root-c-black); --c-black: var(--root-c-black);
--c-black-highlight: var(--root-c-black-highlight); --c-black-highlight: var(--root-c-black-highlight);
} }
@ -75,13 +116,10 @@
.inverted { .inverted {
--c-base: var(--root-c-black); --c-base: var(--root-c-black);
--c-base-highlight: var(--root-c-black-highlight); --c-base-highlight: var(--root-c-black-highlight);
--c-primary: var(--root-c-primary);
--c-primary:var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary-highlight);
--c-secondary: var(--c-secondary); --c-secondary: var(--c-secondary);
--c-secondary-highlight: var(--root-c-secondary-highlight); --c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-base); --c-black: var(--root-c-base);
--c-black-highlight: var(--root-c-base-highlight); --c-black-highlight: var(--root-c-base-highlight);
} }
@ -122,24 +160,18 @@
background-color: var(--root-c-black-highlight); background-color: var(--root-c-black-highlight);
} }
.highlight > *, .highlight>*,
.highlight { .highlight {
--c-base: var(--root-c-black); --c-base: var(--root-c-black);
--c-base-highlight: var(--root-c-black-highlight); --c-base-highlight: var(--root-c-black-highlight);
--c-primary: var(--root-c-primary);
--c-primary:var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight); --c-primary-highlight: var(--root-c-primary-highlight);
--c-secondary: var(--c-secondary); --c-secondary: var(--c-secondary);
--c-secondary-highlight: var(--root-c-secondary-highlight); --c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-base); --c-black: var(--root-c-base);
--c-black-highlight: var(--root-c-base-highlight); --c-black-highlight: var(--root-c-base-highlight);
} }
.huge { .huge {
--u5: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5 * 1.5); --u5: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5 * 1.5);
--u4: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5); --u4: calc(3.375rem * 1.5 * 1.5 * 1.5 * 1.5);
@ -166,26 +198,23 @@
--u-4: calc(0.666em * 0.666 * 0.666 * 0.666 * 0.666); --u-4: calc(0.666em * 0.666 * 0.666 * 0.666 * 0.666);
} }
* { * {
margin: 0em; margin: 0em;
padding: 0em; padding: 0em;
box-sizing: border-box; box-sizing: border-box;
} }
html, body { html, body {
font-size: var(--u0); font-size: var(--u0);
height: 100%; height: 100%;
background-color: var(--c-base); background-color: var(--c-base);
color: var(--c-black) color: var(--c-black)
} }
main { main {
min-height: 100%; min-height: 100%;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: "Fira Mono"; font-family: "Fira Mono";
padding-top: var(--u0); padding-top: var(--u0);
@ -199,7 +228,7 @@ a {
} }
a:visited { a:visited {
color: inherit; color: none;
} }
a.section { a.section {
@ -228,8 +257,12 @@ img {
object-fit: cover; object-fit: cover;
} }
img.icon {
height: 2rem;
}
li { li {
list-style-type: none; list-style-type: none;
} }
table { table {
@ -273,8 +306,6 @@ table.key-value td {
text-align: left; text-align: left;
} }
img.xs { img.xs {
width: var(--u2); width: var(--u2);
} }
@ -283,7 +314,6 @@ img.s {
width: var(--u4); width: var(--u4);
} }
img.m { img.m {
width: var(--u8); width: var(--u8);
} }
@ -291,10 +321,7 @@ img.m {
/* /*
* NAV * NAV
*/ */
nav {}
nav {
}
nav h1 { nav h1 {
font-size: var(--u0); font-size: var(--u0);
@ -312,7 +339,7 @@ nav li li {
nav li a { nav li a {
padding: var(--u0); padding: var(--u0);
transition: all 0.1s ease-out; transition: background-color 0.1s ease-out;
} }
nav li a:hover, nav li a:hover,
@ -321,13 +348,13 @@ nav li a.selected {
background-color: var(--c-primary); background-color: var(--c-primary);
color: var(--c-base); color: var(--c-base);
} }
/* /*
* FOOTER * FOOTER
*/ */
footer { footer {
padding-top: var(--u3); padding-top: var(--u3);
padding-bottom: var(--u1); padding-bottom: var(--u1);
} }
/* /*
@ -337,27 +364,23 @@ textarea,
input[list], input[list],
input[type="text"], input[type="text"],
input[type="password"] { input[type="password"] {
background-color: var(--c-base); background-color: var(--c-base);
font-size: var(--u0); font-size: var(--u0);
border: none; border: none;
/*border-radius: var(--u-2);*/ /*border-radius: var(--u-2);*/
margin-top: var(--u0); margin-top: var(--u0);
margin-bottom: var(--u0); margin-bottom: var(--u0);
padding: var(--u0); padding: var(--u0);
font-size: var(--u0); font-size: var(--u0);
color: var(--c-black); color: var(--c-black);
background-color: var(--c-base-highlight); background-color: var(--c-base-highlight);
box-shadow: var(--s-0-secondary); box-shadow: var(--s-0-secondary);
} }
textarea { textarea {
font-family: "Fira Mono"; font-family: "Fira Mono";
} }
/* /*
input[type="text"]:invalid, input[type="text"]:invalid,
input[type="password"]:invalid { input[type="password"]:invalid {
@ -367,9 +390,9 @@ input[type="password"]:invalid {
textarea::placeholder, textarea::placeholder,
input[list]::placeholder, input[list]::placeholder,
input[type="text"]::placeholder, input[type="text"]::placeholder,
input[type="password"]::placeholder { input[type="password"]::placeholder {
color: var(--c-primary-highlight); color: var(--c-primary-highlight);
opacity: 50%; opacity: 50%;
} }
button, .button { button, .button {
@ -377,32 +400,20 @@ button, .button {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
background-color: var(--c-primary); background-color: var(--c-primary);
color: var(--c-base); color: var(--c-base);
border: none; border: none;
/*border-radius: var(--u-2);*/ /*border-radius: var(--u-2);*/
margin-bottom: var(--u0); margin-bottom: var(--u0);
margin-top: var(--u0); margin-top: var(--u0);
padding: var(--u0); padding: var(--u0);
min-width: 10em; min-width: 10em;
font-family: "Fira Mono"; font-family: "Fira Mono";
text-transform: uppercase; text-transform: uppercase;
font-size: var(--u0); font-size: var(--u0);
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
} }
nav button.bg-none,
nav .button.bg-none {
background-color: transparent;
}
button:active, .button:active { button:active, .button:active {
background-color: var(--c-primary-highlight); background-color: var(--c-primary-highlight);
} }
@ -412,7 +423,7 @@ input[type="password"],
input[list], input[list],
button, button,
.button { .button {
transition: all 0.1s ease-out; transition: background-color 0.1s ease-out;
} }
label { label {
@ -422,7 +433,7 @@ label {
} }
label.nolinebreak { label.nolinebreak {
display:inline; display: inline;
} }
input.linestyle { input.linestyle {
@ -433,7 +444,7 @@ input.linestyle {
} }
fieldset { fieldset {
border: none; border: none;
} }
fieldset label { fieldset label {
@ -443,41 +454,43 @@ fieldset label {
/* /*
* HERO * HERO
*/ */
.hero { .hero {
background-color: var(--c-primary); background-color: var(--c-primary);
color: var(--c-base); color: var(--c-base);
} }
.hero > * { .hero>* {
--c-primary: var(--root-c-primary-highlight); --c-primary: var(--root-c-primary-highlight);
--c-primary-highlight: var(--root-c-primary); --c-primary-highlight: var(--root-c-primary);
} }
.header.hero>* {
--c-primary: var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight);
}
.hero-black { .hero-black {
background-color: var(--c-black); background-color: var(--c-black);
color: var(--c-base); color: var(--c-base);
} }
.primarytext{ .primarytext {
color: var(--c-primary) color: var(--c-primary)
} }
.secondarytext{ .secondarytext {
color: var(--c-secondary) color: var(--c-secondary)
} }
/* /*
* LAYOUT * LAYOUT
*/ */
.content-width { .content-width {
max-width: 80rem; max-width: 80rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-left: var(--u0);
padding-left: var(--u0); padding-right: var(--u0);
padding-right: var(--u0);
} }
.full-width { .full-width {
@ -490,16 +503,17 @@ fieldset label {
justify-content: stretch; justify-content: stretch;
flex-wrap: wrap; flex-wrap: wrap;
} }
.flowflex > * {
.flowflex>* {
padding: var(--u0); padding: var(--u0);
flex: 1; flex: 1;
} }
.flowflex > *.spacer {
.flowflex>*.spacer {
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
} }
.detailflex { .detailflex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -526,14 +540,13 @@ fieldset label {
margin-right: auto; margin-right: auto;
} }
.detailflex > * { .detailflex>* {
min-width: 100%; min-width: 100%;
padding: var(--u0); padding: var(--u0);
flex: 1; flex: 1;
} }
.detailflex>.col-2 {
.detailflex > .col-2 {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
@ -541,13 +554,12 @@ fieldset label {
padding: 0px; padding: 0px;
} }
.detailflex > .col-2 > * { .detailflex>.col-2>* {
min-width: calc(15rem + var(--u0) * 3); min-width: calc(15rem + var(--u0) * 3);
flex: 1; flex: 1;
padding: var(--u0); padding: var(--u0);
} }
.detailgrid { .detailgrid {
display: grid; display: grid;
grid-auto-flow: dense; grid-auto-flow: dense;
@ -576,25 +588,23 @@ fieldset label {
margin-right: auto; margin-right: auto;
} }
.detailgrid>.s {
.detailgrid > .s {
grid-column: span 1; grid-column: span 1;
} }
.detailgrid > .m { .detailgrid>.m {
grid-column: span 2; grid-column: span 2;
} }
.detailgrid > .l { .detailgrid>.l {
grid-column: span 3; grid-column: span 3;
} }
.detailgrid > .spacer { .detailgrid>.spacer {
grid-column: span 3; grid-column: span 3;
height: 0px; height: 0px;
} }
.bar-flex { .bar-flex {
display: flex; display: flex;
align-items: center; align-items: center;
@ -602,11 +612,11 @@ fieldset label {
flex-wrap: wrap; flex-wrap: wrap;
} }
.bar-flex > * { .bar-flex>* {
margin: var(--u0); margin: var(--u0);
} }
.bar-flex > .spacer { .bar-flex>.spacer {
flex: 1; flex: 1;
} }
@ -617,11 +627,11 @@ fieldset label {
flex-wrap: wrap; flex-wrap: wrap;
} }
.sidebar-layout > * { .sidebar-layout>* {
min-width: 15rem; min-width: 15rem;
} }
.sidebar-layout > *:nth-child(2) { .sidebar-layout>*:nth-child(2) {
flex: 1; flex: 1;
} }
@ -640,70 +650,65 @@ fieldset label {
justify-content: space-around; justify-content: space-around;
} }
.grid > * { .grid>* {
flex: 1; flex: 1;
margin: var(--u0); margin: var(--u0);
padding: var(--u0); padding: var(--u0);
/*border-radius: var(--u0);*/ /*border-radius: var(--u0);*/
} }
.grid.condensed > * { .grid.condensed>* {
flex: 1; flex: 1;
padding: 0px; padding: 0px;
} }
.grid.base > * { .grid.base>* {
background-color: var(--c-base); background-color: var(--c-base);
color: var(--c-black); color: var(--c-black);
} }
.grid.black > * { .grid.black>* {
background-color: var(--c-black); background-color: var(--c-black);
color: var(--c-base); color: var(--c-base);
} }
.grid.primary > * { .grid.primary>* {
background-color: var(--c-primary); background-color: var(--c-primary);
color: var(--c-base); color: var(--c-base);
} }
.grid.secondary > * { .grid.secondary>* {
background-color: var(--c-primary-highlight); background-color: var(--c-primary-highlight);
color: var(--c-base); color: var(--c-base);
} }
.hero-primary .grid.shadow > * { .hero-primary .grid.shadow>* {
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
} }
.hero-black .grid.shadow > * { .hero-black .grid.shadow>* {
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
} }
.grid.s > .spacer { .grid.s>.spacer {
box-shadow: none; box-shadow: none;
margin: calc(var(--u0) * 2); margin: calc(var(--u0) * 2);
padding: 0px; padding: 0px;
width: 10rem; width: 10rem;
max-width: 10rem; max-width: 10rem;
min-width: 7.5rem; min-width: 7.5rem;
height: 0px; height: 0px;
} }
.grid.s > * { .grid.s>* {
max-width: 10rem; max-width: 10rem;
min-width: 7.5rem; min-width: 7.5rem;
} }
.grid.m>.spacer {
.grid.m > .spacer {
box-shadow: none; box-shadow: none;
margin: calc(var(--u0) * 2); margin: calc(var(--u0) * 2);
padding: 0px; padding: 0px;
width: 20rem; width: 20rem;
max-width: 20rem; max-width: 20rem;
min-width: 15rem; min-width: 15rem;
@ -711,18 +716,16 @@ fieldset label {
padding: 0px; padding: 0px;
} }
.grid.m > * { .grid.m>* {
width: 20rem; width: 20rem;
max-width: 20rem; max-width: 20rem;
min-width: 15rem; min-width: 15rem;
} }
.grid.l > .spacer { .grid.l>.spacer {
box-shadow: none; box-shadow: none;
margin: calc(var(--u0) * 2); margin: calc(var(--u0) * 2);
padding: 0px; padding: 0px;
width: 40rem; width: 40rem;
max-width: 40rem; max-width: 40rem;
min-width: 15rem; min-width: 15rem;
@ -730,18 +733,16 @@ fieldset label {
padding: 0px; padding: 0px;
} }
.grid.l > * { .grid.l>* {
width: 40rem; width: 40rem;
max-width: 40rem; max-width: 40rem;
min-width: 15rem; min-width: 15rem;
} }
.grid.xl > .spacer { .grid.xl>.spacer {
box-shadow: none; box-shadow: none;
margin: calc(var(--u0) * 2); margin: calc(var(--u0) * 2);
padding: 0px; padding: 0px;
width: 80rem; width: 80rem;
max-width: 80rem; max-width: 80rem;
min-width: 30rem; min-width: 30rem;
@ -749,14 +750,12 @@ fieldset label {
padding: 0px; padding: 0px;
} }
.grid.xl > * { .grid.xl>* {
width: 80rem; width: 80rem;
max-width: 40rem; max-width: 40rem;
min-width: 20rem; min-width: 20rem;
} }
.vertical-spacer.s { .vertical-spacer.s {
min-height: 10rem; min-height: 10rem;
} }
@ -775,7 +774,7 @@ fieldset label {
justify-content: center; justify-content: center;
} }
.modal > * { .modal>* {
/*border-radius: var(--u0);*/ /*border-radius: var(--u0);*/
padding: var(--u0); padding: var(--u0);
flex: 1; flex: 1;
@ -784,16 +783,14 @@ fieldset label {
/* /*
* Impov * Impov
*/ */
.input-icon { .input-icon {
/* box-shadow: var(--s-0-secondary); */ /* box-shadow: var(--s-0-secondary); */
display: flex; display: flex;
padding: 0px; padding: 0px;
/*border-radius: var(--u0);*/ /*border-radius: var(--u0);*/
} }
.input-icon > input { .input-icon>input {
flex: 1; flex: 1;
margin: 0px; margin: 0px;
border-top-right-radius: 0px; border-top-right-radius: 0px;
@ -801,22 +798,17 @@ fieldset label {
box-shadow: none; box-shadow: none;
} }
.input-icon > button { .input-icon>button {
margin: 0px; margin: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
box-shadow: none; box-shadow: none;
} }
/* /*
* CONTENT * CONTENT
*/ */
.notification {}
.notification {
}
.notification:hover { .notification:hover {
background-color: var(--c-base-highlight); background-color: var(--c-base-highlight);
@ -826,12 +818,11 @@ fieldset label {
background-color: var(--c-primary); background-color: var(--c-primary);
} }
.notification.unread > * { .notification.unread>* {
--c-primary: var(--root-c-primary-highlight); --c-primary: var(--root-c-primary-highlight);
--c-primary-highlight: var(--root-c-primary); --c-primary-highlight: var(--root-c-primary);
} }
.notification.unread:hover { .notification.unread:hover {
background-color: var(--c-primary); background-color: var(--c-primary);
} }
@ -861,12 +852,13 @@ fieldset label {
} }
.center-text { .center-text {
text-align: center; text-align: center;
} }
.no-padding { .no-padding {
padding: 0px; padding: 0px;
} }
.no-margin { .no-margin {
margin: 0px; margin: 0px;
} }

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

@ -5,33 +5,24 @@
<title>eCommerce</title> <title>eCommerce</title>
</head> </head>
<body> <body>
<nav class='hero' th:fragment="header"> <nav class='hero header' th:fragment="header">
<div class='content-width bar-flex'> <div class='content-width bar-flex'>
<a class="button bg-none" href="/">Project eCommerce</a> <a class="button" href="/">Project eCommerce</a>
<a class="button bg-none" href="/">Angebote</a>
<form class='spacer input-icon secondary' th:action="@{/shop/search}" method="GET"> <form class='spacer input-icon secondary' th:action="@{/shop/search}" method="GET">
<input type="text" placeholder="Nach Produkten suchen..."/> <input type="text" placeholder="Nach Produkten suchen..."/>
<button>Finden</button> <button>Finden</button>
</form> </form>
<a th:unless="${customer}" class="button bg-none" th:href="@{/login}">Login</a> <a th:unless="${customer}" class="button" th:href="@{/login}">Login</a>
<div class="notifications" th:if="${customer}" style="display: none;"> <div th:if="${customer}" class="dropdown">
<input id="messages" type="checkbox"></input> <a class="dropdown-button button">Mein Konto</a>
<label for="messages" class="button"> <div class="dropdown-content">
<img th:src="@{/img/bell.svg}" width="25" height="28" alt="Nachrichten"/> <a class="black button" th:href="@{/user/notifications/}">Benachrichtigungen</a>
</label> <a class="black button" th:href="@{/user/}">Einstellungen</a>
<ul class="listbox"> <a class="black button" th:href="@{/user/orders/}">Meine Bestellungen</a>
<li class="unread"> <form th:if="${customer}" method="post" th:action="@{/logout}" class="no-margin"><button class="bg-black no-margin full-width">Abmelden</button></form>
Ihre Bestellung kommt voraussichtlich am Donnerstag, den 20.08.2020 </div>
</li>
<li class="unread">
Ihre Rücksendung ist bei uns eingegangen.
</li>
<li>
Ihre Bestellung wurde versandt.
</li>
</ul>
</div> </div>
<a th:if="${customer}" class="button" th:href="@{/logout}">Abmelden</a> <a th:if="${customer}" class="button" th:href="@{/shop/checkout}">Warenkorb</a>
</div> </div>
</nav> </nav>
</body> </body>