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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>e-commerce</title> <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/ecom.css" rel="stylesheet"/>
<link href="/css/searchResults.css" rel="stylesheet"/>
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<main> <div class="hero">
<div class="hero"> <main class="sidebar-layout content-width">
<div class="searchresults"> <nav class="sidebar-layout">
<div class="row"> <ul class="secondary">
<div class="sidebar col-2"> <li><a>Aufnahmegeräte</a></li>
<h1>Kategorie</h1> <li><a>Computer</a></li>
<ul> <li><a>Fernseher</a></li>
<li><span>Aufnahmegeräte</span></li> <li><a>Handys</a></li>
<li><span>Computer</span></li> <li><a>Unterhaltungselektronik</a></li>
<li><span>Fernseher</span></li> <li><a>Sonstiges</a></li>
<li><span>Handys</span></li> </ul>
<li><span>Unterhaltungselektronik</span></li> </nav>
<li><span>Sonstiges</span></li>
</ul> <div class="content-width">
</div> <div class='content-width'>
<div class="articlelist col-10"> <h1>Suchergebnisse</h1>
<div class="row article"> <div class='grid m base shadow'>
<div class="col-3 articleimg">
<img src="/img/product-1.jpg" /> <section>
</div> <img src="img/product-1.jpg">
<div class="col-9 articledesc"> <h2>Tolle Kamera</h2>
<h2> <p class='price'> 25.14 €</p>
<form action="/articleDetail" method="GET"> <p>
<input type="submit" value="Tolle Kamera" class="articlelink"> Eine TOLLE Kamera <br>
</form> Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
</h2> Aber glaub mir, sie is echt echt TOLL! <br>
<h1> 25.14 €</h1> Indianerehrenwort!
<p> </p>
Eine TOLLE Kamera <br> </section>
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> <section>
Indianerehrenwort! <img src="img/product-2.jpg">
</p> <h2>Bluetooth Kopfhörer</h2>
</div> <p class='price'> 10.14 €</p>
</div> <p>
<hr> Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
<div class="row article"> </p>
<div class="col-3 articleimg"> </section>
<img src="/img/product-2.jpg" />
</div> <section>
<div class="col-9 articledesc"> <img src="img/product-3.jpg">
<h2> <h2>???</h2>
<form action="/articleDetail" method="GET"> <p class='price'> 25.14 €</p>
<input type="submit" value="Bluetooth Kopfhörer" class="articlelink"> <p>
</form> Ich weiß selbst nich was das genau sein soll.<br>
</h2> Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
<h1> 10.14 €</h1> </p>
<p> </section>
Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
</p> <section class="spacer"></section>
</div> <section class="spacer"></section>
</div> <section class="spacer"></section>
<hr> <section class="spacer"></section>
<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> </div>
</div> </div>
<div class="vertical-spacer s"></div>
</div> </div>
</main> </main>
</div>
<footer th:replace="fragments/footer :: footer"></footer> <footer th:replace="fragments/footer :: footer"></footer>
</body> </body>
</html> </html>