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

Design für mehrere Artikel angepasst

Browse source
This commit is contained in:
Dennis Heinrich 2025-04-07 15:30:09 +02:00
parent e798686ef9
commit e05c36b647
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
assets/style/stylesheet.css
View file

@ -21,19 +21,26 @@
margin-left: 1em;
font-weight: bold;
}
[data-template] {
display: none !important;
}
.cart-items, .product-list, .alert, .navbar-brand, .settings-product-list {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
.product-box, .cart-items, .settings-product-list {
cursor: pointer;
}
.product-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 4fr));
gap: .4em;
}
.product-box .card-body span {
word-wrap: break-word;
}

9
index.html
View file

@ -26,7 +26,7 @@
<main class="container-fluid flex-grow-1">
<div data-tab="products" class="row">
<div class="col-12 col-md-4 products">
<div class="col-12 col-md-4">
<li class="list-group-item d-flex justify-content-between" data-template="product-line-item">
<span class="line-item-details">
<span class="amount quantity-value" data-attr="quantity">5</span>
@ -43,18 +43,19 @@
</button>
</div>
<div class="col-12 col-md-8">
<div class="row row-cols-2 row-cols-md-5 row-gap-3 product-list h-100 overflow-auto">
<div class="product-list">
<div class="col product-box" data-template="product" data-id="0">
<div class="card">
<img data-attr="image" src="https://placehold.co/250x250" alt="Produktbild" class="card-img-top" loading="eager">
<img data-attr="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+BCQAHBQICJmhD1AAAAABJRU5ErkJggg==" alt="Produktbild" class="card-img-top" loading="eager">
<div class="card-body">
<span data-attr="name">Wasser mit Kohlensäure</span>
<small data-attr="name">Wasser mit Kohlensäure</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-tab="settings" class="row d-none">
<div class="col-12 col-md-6">
<form class="card mb-2" method="dialog" id="new-product">