From 483cc260f36b020db5579ce1d840b9c95f5be18e Mon Sep 17 00:00:00 2001
From: Hannes <hannes_huber@t-online.de>
Date: Fri, 17 Jan 2020 17:25:38 +0100
Subject: [PATCH] remade searchResults without own css
---
.../resources/static/css/searchResults.css | 56 --------
.../resources/templates/searchResults.html | 130 ++++++++----------
2 files changed, 57 insertions(+), 129 deletions(-)
delete mode 100644 prototype/src/main/resources/static/css/searchResults.css
diff --git a/prototype/src/main/resources/static/css/searchResults.css b/prototype/src/main/resources/static/css/searchResults.css
deleted file mode 100644
index ae78c28..0000000
--- a/prototype/src/main/resources/static/css/searchResults.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.container {
-
-}
-
-.searchresults {
- max-width: 100%;
- padding: 2em;
- background-color: var(--c-white);
- border: 0px;
-}
-
-.sidebar {
- border: 0px;
- border-right: 2px;
- border-style: solid;
- border-color: white;
-}
-
-.articlelist {
- background-color: var(--c-white);
-}
-
-.article {
- padding: 1em;
-}
-
-img {
- width: 75%
-}
-
-h2 {
- padding-bottom: 0px;
-}
-
-.articlelink {
- color: var(--c-white);
- background-color: var(--c-white);
- border: 0px;
-}
-
-.articlelink:hover {
- color: var(--root-c-secondary)
-}
-
-h1 {
- padding: 0px;
- padding-bottom: 0.5em;
-}
-
-hr {
- border-top: 2px solid white;
- width: 75%;
- margin: auto;
- margin-top: 5px;
- margin-bottom: 5px;
-}
\ No newline at end of file
diff --git a/prototype/src/main/resources/templates/searchResults.html b/prototype/src/main/resources/templates/searchResults.html
index a24d3bc..230f81a 100644
--- a/prototype/src/main/resources/templates/searchResults.html
+++ b/prototype/src/main/resources/templates/searchResults.html
@@ -3,87 +3,71 @@
<head>
<meta charset="utf-8">
<title>e-commerce</title>
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/css/ecom.css" rel="stylesheet"/>
- <link href="/css/searchResults.css" rel="stylesheet"/>
</head>
<body>
<nav th:replace="fragments/header :: header">Header</nav>
-<main>
- <div class="hero">
- <div class="searchresults">
- <div class="row">
- <div class="sidebar col-2">
- <h1>Kategorie</h1>
- <ul>
- <li><span>Aufnahmegeräte</span></li>
- <li><span>Computer</span></li>
- <li><span>Fernseher</span></li>
- <li><span>Handys</span></li>
- <li><span>Unterhaltungselektronik</span></li>
- <li><span>Sonstiges</span></li>
- </ul>
- </div>
- <div class="articlelist col-10">
- <div class="row article">
- <div class="col-3 articleimg">
- <img src="/img/product-1.jpg" />
- </div>
- <div class="col-9 articledesc">
- <h2>
- <form action="/articleDetail" method="GET">
- <input type="submit" value="Tolle Kamera" class="articlelink">
- </form>
- </h2>
- <h1> 25.14 €</h1>
- <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>
- <hr>
- <div class="row article">
- <div class="col-3 articleimg">
- <img src="/img/product-2.jpg" />
- </div>
- <div class="col-9 articledesc">
- <h2>
- <form action="/articleDetail" method="GET">
- <input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
- </form>
- </h2>
- <h1> 10.14 €</h1>
- <p>
- Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
- </p>
- </div>
- </div>
- <hr>
- <div class="row article">
- <div class="col-3 articleimg">
- <img src="/img/product-3.jpg" />
- </div>
- <div class="col-9 articledesc">
- <h2>
- <form action="/articleDetail" method="GET">
- <input type="submit" value="???" class="articlelink">
- </form>
- </h2>
- <h1> 44.14 €</h1>
- <p>
- Ich weiß selbst nich was das genau sein soll.<br>
- Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
- </p>
- </div>
- </div>
- </div>
+<div class="hero">
+<main class="sidebar-layout content-width">
+ <nav class="sidebar-layout">
+ <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='content-width'>
+ <h1>Suchergebnisse</h1>
+ <div class='grid m base shadow'>
+
+ <section>
+ <img 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>
+ </section>
+
+ <section>
+ <img 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>
+ </section>
+
+ <section>
+ <img 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>
+ </section>
+
+ <section class="spacer"></section>
+ <section class="spacer"></section>
+ <section class="spacer"></section>
+ <section class="spacer"></section>
</div>
</div>
+ <div class="vertical-spacer s"></div>
</div>
+
+
</main>
+</div>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>
\ No newline at end of file