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

remade articleDetail without own css

Browse Source
This commit is contained in:
Hannes Huber 2020-01-18 14:01:35 +01:00
parent 483cc260f3
commit 0f71e2b595
3 changed files with 48 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
prototype/src/main/resources/static/css/articleDetail.css
View File

@ -1,30 +0,0 @@
.articledetail {
max-width: 100%;
padding: 2em;
background-color: var(--c-primary);
}
.availability {
color: var(--root-c-secondary);
}
.checkout {
border: 0px;
border-left: 2px;
border-color: var(--c-white);
border-style: solid;
}
.quantity {
display: flex;
}
.quantity label {
min-width: 5em;
margin-bottom: 0px;
padding-left: 15px;
}
.checkout button {
background-color: var(--root-c-secondary);
}

18
prototype/src/main/resources/static/css/ecom.css
View File

@ -35,7 +35,7 @@
--c-primary: var(--root-c-primary);
--c-primary-highlight: var(--root-c-primary-highlight);
--c-secondary: var(--c-secondary);
--c-secondary: var(--root-c-secondary);
--c-secondary-highlight: var(--root-c-secondary-highlight);
--c-black: var(--root-c-black);
@ -313,6 +313,10 @@ label {
font-weight: bold;
}
label.nolinebreak {
display:inline;
}
input.linestyle {
background-color: transparent;
border-bottom: var(--u-4) solid var(--c-primary);
@ -339,6 +343,14 @@ fieldset {
color: var(--c-base);
}
.primarytext{
color: var(--c-primary)
}
.secondarytext{
color: var(--c-secondary)
}
/*
* LAYOUT
*/
@ -564,3 +576,7 @@ fieldset {
font-size: var(--u1);
text-align: right;
}

68
prototype/src/main/resources/templates/articleDetail.html
View File

@ -3,49 +3,43 @@
<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/articleDetail.css" rel="stylesheet"/>
</head>
<body>
<nav th:replace="fragments/header :: header">Header</nav>
<div class="hero">
<main>
<div class="articledetail">
<div class="row">
<div class="picture col-4">
<img src="/img/product-1.jpg" />
</div>
<div class="articleinfo col-6">
<h2>Tolle Kamera</h2>
<p>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>
</div>
<div class="checkout col-2">
<h2>50.28 €</h2>
<p class="availability">Auf Lager</p>
<br>
<form>
<div class="quantity row">
<label>Menge:</label>
<select size="1">
<option>2</option>
</select>
</div>
</form>
<br>
<br>
<button>In den Einkaufswagen</button>
</div>
<main>
<div class="detailgrid">
<div class="m">
<img src="/img/product-1.jpg"/>
</div>
<div class="m">
<h1>Tolle Kamera</h1>
<h2>25.14 €</h2>
<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 class="s">
<h1>50.28 €</h1>
<h2 class="secondarytext">Auf Lager</h2>
<br>
<form>
<div>
<label class="nolinebreak">Menge:</label>
<select size="1">
<option>2</option>
</select>
</div>
</div>
</main>
</form>
<br>
<br>
<button>In den Einkaufswagen</button>
</div>
</div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>