mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 13:35:42 +00:00
style: page comandas and modal add product in comanda
This commit is contained in:
@@ -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 %}
|
||||||
|
|
||||||
|
|||||||
@@ -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.
@@ -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 %}
|
||||||
|
|
||||||
|
|||||||
@@ -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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user