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

update color and use fragments

This commit is contained in:
Hannes Huber 2020-01-12 16:14:01 +01:00
parent 96a1cc826d
commit 6985b22e82
5 changed files with 56 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,11 +37,11 @@ public class RequestController {
return "greeting";
}
@GetMapping("/articledetail")
public String articledetail() { return "articledetail";}
@GetMapping("/articleDetail")
public String articleDetail() { return "articleDetail";}
@GetMapping("/searchresults")
public String searchresults() { return "searchresults";}
@GetMapping("/searchResults")
public String searchResults() { return "searchResults";}
@GetMapping("/login")
public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {

8
prototype/src/main/resources/static/css/articleDetail.css
View File

@ -1,11 +1,11 @@
.articledetail {
max-width: 100%;
padding: 2em;
background-color: var(--root-c-secondary);
background-color: var(--c-primary);
}
.availability {
color: var(--c-primary);
color: var(--root-c-secondary);
}
.checkout {
@ -23,4 +23,8 @@
min-width: 5em;
margin-bottom: 0px;
padding-left: 15px;
}
.checkout button {
background-color: var(--root-c-secondary);
}

8
prototype/src/main/resources/static/css/searchResults.css
View File

@ -5,7 +5,7 @@
.searchresults {
max-width: 100%;
padding: 2em;
background-color: var(--root-c-secondary);
background-color: var(--c-white);
border: 0px;
}
@ -17,7 +17,7 @@
}
.articlelist {
background-color: var(--root-c-secondary);
background-color: var(--c-white);
}
.article {
@ -34,12 +34,12 @@ h2 {
.articlelink {
color: var(--c-white);
background-color: var(--root-c-secondary);
background-color: var(--c-white);
border: 0px;
}
.articlelink:hover {
color: var(--c-primary)
color: var(--root-c-secondary)
}
h1 {

109
prototype/src/main/resources/templates/articleDetail.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de" dir="ltr">
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>e-commerce</title>
@ -8,81 +8,44 @@
<link href="/css/articleDetail.css" rel="stylesheet"/>
</head>
<body>
<nav class='hero'>
<div class='content-width flex'>
<h1>Project eCommerce</h1>
<button>Angebote</button>
<div class='spacer input-icon secondary'>
<input type="text" placeholder="Nach Produkten suchen..."/>
<form action="/searchresults" method="GET">
<button class='searchbutton' type="submit">Finden</button>
</form>
</div>
<form class="button" action="/login" method="GET">
<button type="submit">Login</button>
</form>
</div>
</nav>
<main>
<nav th:replace="fragments/header :: header">Header</nav>
<div class="hero">
<div class="articledetail">
<div class="row">
<div class="picture col-4">
<img src="/img/product-1.jpg" />
</div>
<div class="articleinfo col-6">
<h2>Tolle Kamera</h2>
<p>25.14 €</p>
<p>
Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Aber glaub mir, sie is echt echt TOLL! <br>
Indianerehrenwort!
</p>
</div>
<div class="checkout col-2">
<h2>50.28 €</h2>
<p class="availability">Auf Lager</p>
<br>
<form>
<div class="quantity row">
<label>Menge:</label>
<select size="1">
<option>2</option>
</select>
</div>
</form>
<br>
<br>
<button>In den Einkaufswagen</button>
<main>
<div class="articledetail">
<div class="row">
<div class="picture col-4">
<img src="/img/product-1.jpg" />
</div>
<div class="articleinfo col-6">
<h2>Tolle Kamera</h2>
<p>25.14 €</p>
<p>
Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Aber glaub mir, sie is echt echt TOLL! <br>
Indianerehrenwort!
</p>
</div>
<div class="checkout col-2">
<h2>50.28 €</h2>
<p class="availability">Auf Lager</p>
<br>
<form>
<div class="quantity row">
<label>Menge:</label>
<select size="1">
<option>2</option>
</select>
</div>
</form>
<br>
<br>
<button>In den Einkaufswagen</button>
</div>
</div>
</div>
</div>
</main>
</div>
</main>
<footer class="hero-black">
<div class='content-width flex'>
<h3>Project eCommerce</h3>
<div class="spacer"></div>
<div>
<h4>Seite</h4>
<ul>
<li><a>Login</a></li>
<li><a>Angebote</a></li>
<li><a>Suche</a></li>
<li><a>Mitarbeiter Login</a></li>
</ul>
</div>
<div>
<h4>Mehr</h4>
<ul>
<li><a>Nutzungsbedingungen</a></li>
<li><a>Datenschutz</a></li>
<li><a>Über</a></li>
</ul>
</div>
</div>
</footer>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>

49
prototype/src/main/resources/templates/searchResults.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de" dir="ltr">
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>e-commerce</title>
@ -8,22 +8,7 @@
<link href="/css/searchResults.css" rel="stylesheet"/>
</head>
<body>
<nav class='hero'>
<div class='content-width flex'>
<h1>Project eCommerce</h1>
<button>Angebote</button>
<div class='spacer input-icon secondary'>
<input type="text" placeholder="Nach Produkten suchen..."/>
<form action="/searchresults" method="GET">
<button class='searchbutton' type="submit">Finden</button>
</form>
</div>
<form class="button" action="/login" method="GET">
<button type="submit">Login</button>
</form>
</div>
</nav>
<nav th:replace="fragments/header :: header">Header</nav>
<main>
<div class="hero">
<div class="searchresults">
@ -46,7 +31,7 @@
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articledetail" method="GET">
<form action="/articleDetail" method="GET">
<input type="submit" value="Tolle Kamera" class="articlelink">
</form>
</h2>
@ -66,7 +51,7 @@
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articledetail" method="GET">
<form action="/articleDetail" method="GET">
<input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
</form>
</h2>
@ -83,7 +68,7 @@
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articledetail" method="GET">
<form action="/articleDetail" method="GET">
<input type="submit" value="???" class="articlelink">
</form>
</h2>
@ -99,28 +84,6 @@
</div>
</div>
</main>
<footer class="hero-black">
<div class='content-width flex'>
<h3>Project eCommerce</h3>
<div class="spacer"></div>
<div>
<h4>Seite</h4>
<ul>
<li><a>Login</a></li>
<li><a>Angebote</a></li>
<li><a>Suche</a></li>
<li><a>Mitarbeiter Login</a></li>
</ul>
</div>
<div>
<h4>Mehr</h4>
<ul>
<li><a>Nutzungsbedingungen</a></li>
<li><a>Datenschutz</a></li>
<li><a>Über</a></li>
</ul>
</div>
</div>
</footer>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>