Implement Seach // Comment out borders radius
This commit is contained in:
parent
326083b71a
commit
b402b4fb57
@ -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 {
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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>
|
||||||
Reference in New Issue
Block a user