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

remade searchResults without own css

Browse Source
This commit is contained in:
Hannes Huber 2020-01-17 17:25:38 +01:00
parent 66f4e319fa
commit 483cc260f3
2 changed files with 57 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

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

@ -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>