welton/RRBEC
1
0
Fork 0
mirror of https://github.com/welton89/RRBEC.git synced 2026-04-05 13:35:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

image background card product

Browse Source
This commit is contained in:
Welton Moura
2025-07-05 19:52:15 -03:00
parent b969ea6663
commit eb76e91066
7 changed files with 74 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
gestaoRaul/templates/htmx_components/comandas/htmx_list_products.html
View File

@@ -2,13 +2,13 @@
{% for product in products %}
<div
onclick="addProductComanda({{product.id}}, {{comanda_id}}, '{{product.cuisine}}')"
class="card-product"
>
{{product.name}} <br>
R$ {{product.price}}
</div>
<div
style="background-image: url('{{product.image}}');"
class="card-product"
onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
<p class="card-product-p"> {{product.name}}</p>
<p class="card-product-p"> R$ {{product.price}}</p>
</div >
{% endfor %}

19
gestaoRaul/templates/htmx_components/htmx_list_products_balcao.html
View File

@@ -5,6 +5,7 @@
{% if forloop.counter0 == 0 %}
<article
style="background-image: url('{{product.image}}');"
name="productBox"
id="productId-{{ product.id }}"
class="card-product"
@@ -12,20 +13,22 @@
>
<p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
<p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
{{product.name}} <br> <p id="{{product.id}}"></p>
R$ {{product.price}}
<p class="card-product-p"> {{product.name}}</p>
<p id="{{product.id}}"></p>
<p class="card-product-p"> R$ {{product.price}}</p>
</article >
{% else %}
<article
style="background-image: url('{{product.image}}');"
name="productBox"
id="productId-{{ product.id }}"
class="card-product"
onclick="addProductClick({{product.id}})"
>
{{product.name}} <br>
R$ {{product.price}}
<p class="card-product-p"> {{product.name}}</p>
<p class="card-product-p"> R$ {{product.price}}</p>
</article >
{% endif %}
@@ -37,6 +40,12 @@
<div
style="background-image: url('{{product.image}}');"
class="card-product"
onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" >
<p class="card-product-p"> {{product.name}}</p>
<p class="card-product-p"> R$ {{product.price}}</p>
</div >

2
gestaoRaul/templates/htmx_components/products/htmx_search_products.html
View File

@@ -16,6 +16,8 @@
<td id="price-{{product.id}}" >R$ {{product.price}}</td>
<td class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
<td class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
<td hidden class="hide-on-mobile" id="image-{{product.id}}" >{{product.image}}</td>
<td>
<div class="grid-buttons">
<img

21
gestaoRaul/templates/static/base.css
View File

@@ -146,6 +146,7 @@ input, textarea, select {
.card-product {
position: relative;
height: 130px;
width: 150px;
padding: 10px;
@@ -157,8 +158,28 @@ input, textarea, select {
box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
border-radius: 5px;
transition: transform 0.4s, box-shadow 0.4s;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card-product::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 130px;
background-color: rgba(0, 0, 0, 0.737);
}
.card-product-p {
position: relative;
z-index: 0;
color: #ffffff;
font-size: 14px;
}
.card-product:hover {
transform: scale(1.05);
transition: transform 0.4s, box-shadow 0.4s;