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

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

@ -3,49 +3,43 @@
<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/articleDetail.css" rel="stylesheet"/>
</head> </head>
<body> <body>
<nav th:replace="fragments/header :: header">Header</nav> <nav th:replace="fragments/header :: header">Header</nav>
<div class="hero"> <main>
<main> <div class="detailgrid">
<div class="articledetail"> <div class="m">
<div class="row"> <img src="/img/product-1.jpg"/>
<div class="picture col-4"> </div>
<img src="/img/product-1.jpg" /> <div class="m">
</div> <h1>Tolle Kamera</h1>
<div class="articleinfo col-6"> <h2>25.14 €</h2>
<h2>Tolle Kamera</h2> <p>
<p>25.14 €</p> Eine TOLLE Kamera <br>
<p> Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Eine TOLLE Kamera <br> Aber glaub mir, sie is echt echt TOLL! <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br> Indianerehrenwort!
Aber glaub mir, sie is echt echt TOLL! <br> </p>
Indianerehrenwort! </div>
</p> <div class="s">
</div> <h1>50.28 €</h1>
<div class="checkout col-2"> <h2 class="secondarytext">Auf Lager</h2>
<h2>50.28 €</h2> <br>
<p class="availability">Auf Lager</p> <form>
<br> <div>
<form> <label class="nolinebreak">Menge:</label>
<div class="quantity row"> <select size="1">
<label>Menge:</label> <option>2</option>
<select size="1"> </select>
<option>2</option>
</select>
</div>
</form>
<br>
<br>
<button>In den Einkaufswagen</button>
</div>
</div> </div>
</div> </form>
</main> <br>
<br>
<button>In den Einkaufswagen</button>
</div>
</div> </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer> <footer th:replace="fragments/footer :: footer"></footer>
</body> </body>
</html> </html>