dennis.heinrich/DurstRechner
1
0
Fork 0
mirror of https://github.com/cloudmaker97/DurstRechner.git synced 2025-12-05 23:48:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Layout für Line-Items und Produkte hinzugefügt

Browse source
This commit is contained in:
Dennis Heinrich 2025-04-05 12:09:08 +02:00
parent cd1d3f250b
commit 62f7ae843d
4 changed files with 128 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
index.html
View file

@ -19,12 +19,37 @@
<div class="slot">
<aside class="calculator">
<div>
<div class="line-items">
<div class="item">
<span class="amount">1</span>
<span class="value">5,50</span>
<span class="name">Longdrink</span>
</div>
</div>
<div class="calculator-summary">
<span class="value">5,50</span>
</div>
<div class="calculator-action">
<button>Abschluss</button>
</div>
</div>
</aside>
<main class="controls">
<div>
<div class="tab tab-controls active">
<div class="product-grid">
<button class="product">
<img src="https://placehold.co/150x150" alt="Produkt 1" height="150" width="150">
<span class="product-meta">
<span class="name">Produkt 1</span>
<span class="value">5,50</span>
</span>
</button>
</div>
</div>
<div class="tab tab-settings">
<h2>Einstellungen</h2>
</div>
</div>
</main>
</div>

0
script/calculator.js Normal file
View file

3
service-worker.js
View file

@ -1,4 +1,5 @@
const CACHE_NAME = 'produkt-rechner-v1';
const CACHE_NAME = 'durst-rechner-v1';
const FILES_TO_CACHE = [
'/',
'/index.html',

101
stylesheet.css
View file

@ -6,6 +6,9 @@
--aside-background-color: #dfdfdf;
--aside-text-color: #000;
--box-padding: 1em;
--currency-symbol: " €";
--amount-times-symbol: "x ";
--product-meta-separator: " — ";
}
html, body {
height: 100%;
@ -54,12 +57,106 @@ aside.calculator {
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
main.controls {
aside.calculator .line-items {
display: flex;
flex: 4 0 0;
flex-direction: column;
flex: 1 0 0;
box-sizing: border-box;
}
aside.calculator .line-summary {
display: flex;
flex-direction: column;
flex: 1 0 0;
box-sizing: border-box;
}
aside.calculator .calculator-action {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
aside.calculator .calculator-action button {
display: flex;
width: 100%;
justify-content: center;
border: 1px solid black;
padding: .5em;
font-size: 1.2em;
}
aside.calculator > div,
main.controls > div {
padding: var(--box-padding);
box-sizing: border-box;
width: 100%;
}
aside.calculator > div {
display: flex;
flex-direction: column;
}
aside.calculator .line-items {
gap: .3em;
overflow-y: auto;
}
aside.calculator .line-items .item {
font-size: 1.3em;
}
aside.calculator .line-items .item > .value::after {
content: var(--currency-symbol);
}
aside.calculator .line-items .item > .amount::after {
content: var(--amount-times-symbol);
}
aside.calculator .calculator-summary > .value {
display: flex;
font-size: 1.8em;
justify-content: center;
margin-bottom: .2em;
}
aside.calculator .calculator-summary > .value::after {
content: var(--currency-symbol);
padding-left: .2em;
}
main.controls {
display: flex;
flex: 4 0 0;
}
main.controls > div {
display: flex;
flex-direction: column;
gap: .5em;
}
main.controls > div > .tab {
display: none;
}
main.controls > div > .tab.active {
display: block;
}
main.controls > div > .tab.tab-controls .product-grid {
display: grid;
/* 3 per row*/
grid-template-columns: repeat(4, 1fr);
gap: .5em;
overflow-y: auto;
padding: var(--box-padding);
}
main.controls > div > .tab.tab-controls .product-grid .product {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
border: 1px solid black;
border-radius: 5px;
}
main.controls > div > .tab.tab-controls .product-grid .product > .product-meta {
display: flex;
margin-top: .5em;
}
main.controls > div > .tab.tab-controls .product-grid .product .product-meta > *:not(:last-child)::after {
content: var(--product-meta-separator);
padding-right: .5em;
}
main.controls > div > .tab.tab-controls .product-grid .product .product-meta > .value::after {
content: var(--currency-symbol);
}