style: page comandas and modal add product in comanda

This commit is contained in:
2024-12-19 20:39:19 -03:00
parent 2ac5acf4c0
commit 40dec27674
6 changed files with 19 additions and 15 deletions

View File

@@ -14,7 +14,7 @@ Comandas
<body> <body>
<button id="openModal">Abrir Comanda</button> <button id="openModal">Abrir Comanda</button>
<div class="container "> <div class="grid-container ">
{% for comanda in comandas %} {% for comanda in comandas %}

View File

@@ -47,7 +47,7 @@ Detalhes {{comanda.name}}
<tr> <tr>
<td>{{item.product.name}}</td> <td>{{item.product.name}}</td>
<td>R$ {{item.product.price}}</td> <td>R$ {{item.product.price}}</td>
<td><button hx-get="{% url 'removeProductComanda' item.id %} " hx-trigger="click" hx-target="#list-products-comanda" onclick="open_remove_product_comanda()">🗑️ Apagar</button></td> <td><button hx-get="{% url 'removeProductComanda' item.id %} " hx-trigger="click" hx-target="#list-products-comanda" onclick="open_remove_product_comanda()">🗑️ Excluir</button></td>
</tr> </tr>
@@ -64,26 +64,28 @@ Detalhes {{comanda.name}}
</div> </div>
<div class="modal" id="Modal-add-product">
<div class="modal-content"> <dialog id="Modal-add-product" style="display: none;" >
<article>
<form id="productForm" > <form id="productForm" >
<h2>Adicionar Produto <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button></h2> <h2>Adicionar Produto <button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button></h2>
<input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><br> <input type="text" id="search-product" name="search-product" placeholder="Buscar Produto" hx-get="{% url 'listProduct' comanda.id %}" hx-trigger="keyup" hx-target="#product-list"><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" hx-get="{% url 'addProduct' product.id comanda.id %} " hx-trigger="click" hx-target="#list-products-comanda"> <article style="background-color: #293552;" hx-get="{% url 'addProduct' product.id comanda.id %} " hx-trigger="click" hx-target="#list-products-comanda">
{{product.name}} <br> {{product.name}} <br>
R$ {{product.price}} R$ {{product.price}}
</div> </article >
{% endfor %} {% endfor %}
</div> </div>
<!-- <input type="number" step="1" id="product-qtd" name="qtd" required placeholder="Quantidade"><br> -->
<!-- <button type="submit">Salvar</button> -->
</form> </form>
</div>
</div> </article>
</dialog>

Binary file not shown.

View File

@@ -3,10 +3,10 @@
{% for product in products %} {% for product in products %}
{{co}} {{co}}
<div class="card" hx-get="{% url 'addProduct' product.id comanda_id %} " hx-trigger="click" hx-target="#list-products-comanda"> <article style="background-color: #293552;" hx-get="{% url 'addProduct' product.id comanda_id %} " hx-trigger="click" hx-target="#list-products-comanda">
{{product.name}} <br> {{product.name}} <br>
R$ {{product.price}} R$ {{product.price}}
</div> </article>
{% endfor %} {% endfor %}

View File

@@ -1,8 +1,8 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(4, 2fr); grid-template-columns: repeat(3, 2fr);
gap: 20px; gap: 20px;
max-width: 800px; /* Define a largura máxima do grid */ max-width: 90%; /* Define a largura máxima do grid */
margin: 0 auto; /* Centraliza o grid na página */ margin: 0 auto; /* Centraliza o grid na página */
} }

View File

@@ -1964,7 +1964,9 @@ details[open] > summary::after {
* Card (<article>) * Card (<article>)
*/ */
article { article {
margin-bottom: var(--pico-block-spacing-vertical); /* margin-bottom: var(--pico-block-spacing-vertical); */
margin: 0px;
max-width: 95%;
padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-card-background-color); background: var(--pico-card-background-color);