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-radius: var(--u-2);
|
||||
/*border-radius: var(--u-2);*/
|
||||
margin-top: var(--u0);
|
||||
margin-bottom: var(--u0);
|
||||
|
||||
@ -347,7 +347,7 @@ button, .button {
|
||||
color: var(--c-base);
|
||||
|
||||
border: none;
|
||||
border-radius: var(--u-2);
|
||||
/*border-radius: var(--u-2);*/
|
||||
|
||||
margin-bottom: var(--u0);
|
||||
margin-top: var(--u0);
|
||||
@ -363,6 +363,11 @@ button, .button {
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
nav button.bg-none,
|
||||
nav .button.bg-none {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button:active, .button:active {
|
||||
background-color: var(--c-primary-highlight);
|
||||
}
|
||||
@ -561,6 +566,10 @@ fieldset label {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sidebar-layout > * {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
.sidebar-layout > *:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
@ -584,7 +593,12 @@ fieldset label {
|
||||
flex: 1;
|
||||
margin: var(--u0);
|
||||
padding: var(--u0);
|
||||
border-radius: var(--u0);
|
||||
/*border-radius: var(--u0);*/
|
||||
}
|
||||
|
||||
.grid.condensed > * {
|
||||
flex: 1;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.grid.base > * {
|
||||
@ -690,7 +704,7 @@ fieldset label {
|
||||
}
|
||||
|
||||
.modal > * {
|
||||
border-radius: var(--u0);
|
||||
/*border-radius: var(--u0);*/
|
||||
padding: var(--u0);
|
||||
flex: 1;
|
||||
}
|
||||
@ -704,7 +718,7 @@ fieldset label {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
|
||||
border-radius: var(--u0);
|
||||
/*border-radius: var(--u0);*/
|
||||
}
|
||||
|
||||
.input-icon > input {
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
<body>
|
||||
<nav class='hero' th:fragment="header">
|
||||
<div class='content-width bar-flex'>
|
||||
<a class="button" href="/">Project eCommerce</a>
|
||||
<a class="button" href="/">Angebote</a>
|
||||
<form class='spacer input-icon secondary' th:action="@{/searchresults}" method="GET">
|
||||
<a class="button bg-none" href="/">Project eCommerce</a>
|
||||
<a class="button bg-none" href="/">Angebote</a>
|
||||
<form class='spacer input-icon secondary' th:action="@{/shop/search}" method="GET">
|
||||
<input type="text" placeholder="Nach Produkten suchen..."/>
|
||||
<button>Finden</button>
|
||||
</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;">
|
||||
<input id="messages" type="checkbox"></input>
|
||||
<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