welton/RRBEC
1
0
Fork 0
mirror of https://github.com/welton89/RRBEC.git synced 2026-04-05 05:25:40 +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

46
gestaoRaul/balcao/templates/viewBalcao.html
View File

@@ -72,30 +72,32 @@
{% for product in products %} {% for product in products %}
{% if forloop.counter0 == 0 %} {% if forloop.counter0 == 0 %}
<article <article
name="productBox" style="background-image: url('{{product.image}}');"
id="productId-{{ product.id }}" name="productBox"
class="card-product" id="productId-{{ product.id }}"
onclick="addProductClick({{product.id}} , {{comanda.id}})" class="card-product"
> onclick="addProductClick({{product.id}} )"
<p hidden id="{{forloop.counter0}}">{{product.id}}</p> >
<p hidden id="comanda{{forloop.counter0}}">{{comanda.id}}</p> <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
{{product.name}} <br> <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
<p id="{{product.id}}"></p> <p class="card-product-p"> {{product.name}}</p>
R$ {{product.price}} <p id="{{product.id}}"></p>
</article> <p class="card-product-p"> R$ {{product.price}}</p>
</article >
{% else %} {% else %}
<article <article
name="productBox" style="background-image: url('{{product.image}}');"
id="productId-{{ product.id }}" name="productBox"
class="card-product" id="productId-{{ product.id }}"
onclick="addProductClick({{product.id}} , {{comanda.id}})" class="card-product"
> onclick="addProductClick({{product.id}})"
{{product.name}} <br> >
R$ {{product.price}} <p class="card-product-p"> {{product.name}}</p>
</article> <p class="card-product-p"> R$ {{product.price}}</p>
</article >
{% endif %} {% endif %}

9
gestaoRaul/comandas/templates/viewcomanda.html
View File

@@ -203,9 +203,12 @@ Detalhes {{comanda.name}}
<input type="text" oninput="searchProduct()" id="search-product" name="search-product" placeholder="Buscar Produto" ><br> <input type="text" oninput="searchProduct()" id="search-product" name="search-product" placeholder="Buscar Produto" ><br>
<div id="product-list" class="grid-list-products"> <div id="product-list" class="grid-list-products">
{% for product in products %} {% for product in products %}
<div class="card-product" onclick="addProductComanda({{product.id}}, {{comanda.id}}, '{{product.cuisine}}')" > <div
{{product.name}} <br> style="background-image: url('{{product.image}}');"
R$ {{product.price}} 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 > </div >
{% endfor %} {% endfor %}
</div> </div>

BIN
gestaoRaul/db.sqlite3
View File

Binary file not shown.

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

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

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

@@ -5,6 +5,7 @@
{% if forloop.counter0 == 0 %} {% if forloop.counter0 == 0 %}
<article <article
style="background-image: url('{{product.image}}');"
name="productBox" name="productBox"
id="productId-{{ product.id }}" id="productId-{{ product.id }}"
class="card-product" class="card-product"
@@ -12,20 +13,22 @@
> >
<p hidden id="{{forloop.counter0}}" >{{product.id}}</p> <p hidden id="{{forloop.counter0}}" >{{product.id}}</p>
<p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p> <p hidden id="comanda{{forloop.counter0}}" >{{comanda.id}}</p>
{{product.name}} <br> <p id="{{product.id}}"></p> <p class="card-product-p"> {{product.name}}</p>
R$ {{product.price}} <p id="{{product.id}}"></p>
<p class="card-product-p"> R$ {{product.price}}</p>
</article > </article >
{% else %} {% else %}
<article <article
style="background-image: url('{{product.image}}');"
name="productBox" name="productBox"
id="productId-{{ product.id }}" id="productId-{{ product.id }}"
class="card-product" class="card-product"
onclick="addProductClick({{product.id}})" onclick="addProductClick({{product.id}})"
> >
{{product.name}} <br> <p class="card-product-p"> {{product.name}}</p>
R$ {{product.price}} <p class="card-product-p"> R$ {{product.price}}</p>
</article > </article >
{% endif %} {% 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 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="quantity-{{product.id}}" >{{product.quantity}}</td>
<td class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</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> <td>
<div class="grid-buttons"> <div class="grid-buttons">
<img <img

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

@@ -146,6 +146,7 @@ input, textarea, select {
.card-product { .card-product {
position: relative;
height: 130px; height: 130px;
width: 150px; width: 150px;
padding: 10px; padding: 10px;
@@ -157,8 +158,28 @@ input, textarea, select {
box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678); box-shadow: 3px 3px 10px rgba(2, 2, 2, 0.678);
border-radius: 5px; border-radius: 5px;
transition: transform 0.4s, box-shadow 0.4s; 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 { .card-product:hover {
transform: scale(1.05); transform: scale(1.05);
transition: transform 0.4s, box-shadow 0.4s; transition: transform 0.4s, box-shadow 0.4s;