Implement Seach // Comment out borders radius

This commit is contained in:
CodeSteak 2020-01-25 15:04:55 +01:00
parent 326083b71a
commit b402b4fb57
3 changed files with 125 additions and 9 deletions

View File

@ -308,7 +308,7 @@ input[type="password"] {
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);
@ -347,7 +347,7 @@ button, .button {
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);
@ -363,6 +363,11 @@ button, .button {
/* 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);
} }
@ -561,6 +566,10 @@ fieldset label {
flex-wrap: wrap; flex-wrap: wrap;
} }
.sidebar-layout > * {
min-width: 15rem;
}
.sidebar-layout > *:nth-child(2) { .sidebar-layout > *:nth-child(2) {
flex: 1; flex: 1;
} }
@ -584,7 +593,12 @@ fieldset label {
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 > * {
flex: 1;
padding: 0px;
} }
.grid.base > * { .grid.base > * {
@ -690,7 +704,7 @@ fieldset label {
} }
.modal > * { .modal > * {
border-radius: var(--u0); /*border-radius: var(--u0);*/
padding: var(--u0); padding: var(--u0);
flex: 1; flex: 1;
} }
@ -704,7 +718,7 @@ fieldset label {
display: flex; display: flex;
padding: 0px; padding: 0px;
border-radius: var(--u0); /*border-radius: var(--u0);*/
} }
.input-icon > input { .input-icon > input {

View File

@ -7,13 +7,13 @@
<body> <body>
<nav class='hero' th:fragment="header"> <nav class='hero' th:fragment="header">
<div class='content-width bar-flex'> <div class='content-width bar-flex'>
<a class="button" href="/">Project eCommerce</a> <a class="button bg-none" href="/">Project eCommerce</a>
<a class="button" href="/">Angebote</a> <a class="button bg-none" href="/">Angebote</a>
<form class='spacer input-icon secondary' th:action="@{/searchresults}" 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" th:href="@{/login}">Login</a> <a th:unless="${customer}" class="button bg-none" th:href="@{/login}">Login</a>
<div class="notifications" th:if="${customer}" style="display: none;"> <div class="notifications" th:if="${customer}" style="display: none;">
<input id="messages" type="checkbox"></input> <input id="messages" type="checkbox"></input>
<label for="messages" class="button"> <label for="messages" class="button">

View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Sucherergebnisse</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}" />
</head>
<body>
<!-- Dirty hack to align the heading.-->
<nav th:replace="/fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width">
<nav></nav>
<div>
<h1>Suchergebnisse</h1>
</div>
</div>
<main class="sidebar-layout content-width">
<nav>
<h1>Kategorien</h1>
<ul class="secondary">
<li><a>Aufnahmegeräte</a></li>
<li><a>Computer</a></li>
<li><a>Fernseher</a></li>
<li><a>Handys</a></li>
<li><a>Unterhaltungselektronik</a></li>
<li><a>Sonstiges</a></li>
</ul>
</nav>
<div class="content-width">
<div class='grid m condensed'>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-1.jpg}">
<h2>Tolle Kamera</h2>
<p class='price'> 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>
</a>
</section>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-2.jpg}">
<h2>Bluetooth Kopfhörer</h2>
<p class='price'> 10.14 €</p>
<p>
Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
</p>
</a>
</section>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-3.jpg}">
<h2>???</h2>
<p class='price'> 25.14 €</p>
<p>
Ich weiß selbst nich was das genau sein soll.<br>
Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
</p>
</a>
</section>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-4.jpg}">
<h2>Kamera Stativ.</h2>
<p class='price'> 25.14 €</p>
<p>
Das Stativ der Zukunft! Jetzt kaufen und verwenden für
wackelfreie Bilder aus der Zukunft!.
</p>
</a>
</section>
<section> <a th:href="@{/shop/articles/1234}" class="section">
<img th:src="@{/img/product-5.jpg}">
<h2>Bluetooth Ersatzfernbedinung</h2>
<p class='price'> 10.14 €</p>
<p>
Kann alles und jeden ausknippsen.
</p>
</a>
</section>
<section class="spacer"></section>
<section class="spacer"></section>
<section class="spacer"></section>
<section class="spacer"></section>
</div>
</div>
</main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>