style: padronixação modal | tooltips

This commit is contained in:
2025-01-22 08:45:56 -03:00
parent 891f23ec2e
commit 155cf44fec
6 changed files with 68 additions and 92 deletions

View File

@@ -83,14 +83,17 @@ Detalhes {{comanda.name}}
{% for item in consumo%}
<tr>
<td>
<td >
{{item.product.name}}
{% if item.product.cuisine == True %}
<span data-tooltip="Observações para preparo." data-flow="top">
<img
onclick="openModalObs({{item.id}})"
src="{% static 'midia/icons/note.svg' %}"
style="width: 25px; height: 35px; cursor: pointer;">
</img>
</span>
{% endif %}
</td>
@@ -145,17 +148,16 @@ Detalhes {{comanda.name}}
<dialog id="modal-obs" style="display: none;">
<article>
<h2>Observação do Pedido</h2>
<textarea style="height: 200px;" name="obs" id="obs"></textarea>
<p>Observações do pedido que serão enviadas para o preparo na cozinha.</p>
<textarea placeholder="Ex.: pedido sem cebola. para viagem." name="obs" id="obs"></textarea>
<div>
<button onclick="addOrder()" >OK</button>
<button onclick="closeModalObs()" >Cancela</button>
<div style="display: flex;gap: 10px;">
<button type="submit" onclick="addOrder()" >OK</button>
<button type="button" onclick="closeModalObs()" style="background-color:red;">Cancela</button>
</div>
</div>
</dialog>
</article>
</dialog>
@@ -168,13 +170,14 @@ Detalhes {{comanda.name}}
<h4 id="troco">Troco: </h4>
</div>
<footer>
<button class="secondary" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="backPage()" style="background-color:green;">
Receber
<div style="display: flex;gap: 10px;">
<button type="submit" hx-get="{% url 'paymentComanda' comanda.id %} " hx-trigger="click" hx-swap="none" onclick="backPage()">Receber</button>
<button type="button" class="secondary" onclick=" modal_conta_client()">
Conta
</button>
<button class="secondary" onclick=" modal_conta_client()">
Conta Cliente
</button>
<button onclick="close_modal_payment_comanda()" style="background-color:red;">Cancelar</button>
<button type="button" onclick="close_modal_payment_comanda()" style="background-color:red;">Cancelar</button>
</div>
</footer>
</article>
</dialog>
@@ -195,8 +198,10 @@ Detalhes {{comanda.name}}
{% endfor %}
</select>
<div style="display: flex;gap: 10px;">
<button type="submit">Alterar</button>
<button type="button" onclick="closeModalAlter()" style="background-color:red;">Cancelar</button>
</div>
</form>
</article>
</dialog >
@@ -223,10 +228,11 @@ Detalhes {{comanda.name}}
</select>
</div>
<footer>
<button type="submit" class="secondary" style="background-color:green;" >
Adicionar a conta
</button>
<button onclick="close_modal_conta_client()" style="background-color:red;">Cancelar</button>
<div style="display: flex;gap: 10px;">
<button type="submit" >
Adicionar a conta</button>
<button type="button" onclick="close_modal_conta_client()" style="background-color:red;">Cancelar</button>
</div>
</form>
</footer>
</article>

Binary file not shown.

View File

@@ -56,20 +56,22 @@ Produtos
<input type="hidden" name="id-product" id="id-{{product.id}}" value="{{ product.id }}">
{% if product.active == True %}
<button style="background-color: rgba(255, 0, 0, 0); padding: 0px;">
<button style="background-color: rgba(255, 0, 0, 0); padding: 0px;border: 0px;">
<span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
<img
src="{% static 'midia/icons/toggle-on.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
>
style=" width: 35px; height: 35px; cursor: pointer;" >
</img>
</span>
</button>
{% else %}
<button style="background-color: rgba(0, 128, 0, 0); padding: 0px;" >
<button style="background-color: rgba(0, 128, 0, 0); padding: 0px;border: 0px;" >
<span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
<img
src="{% static 'midia/icons/toggle-off.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
>
style=" width: 35px; height: 35px; cursor: pointer;" >
</img>
<span>
</button>
{% endif %}
@@ -106,10 +108,14 @@ Produtos
</select>
<textarea id="productDescription" name="description" rows="4" placeholder="Descrição"></textarea>
<footer class="grid-buttons">
<footer>
<div style="display: flex;gap: 10px;">
<button id="save" type="submit">Salvar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click" hx-target="#product-list" >Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button>
<button type="submit" onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editProduct' 1 %}" hx-trigger="click" hx-target="#product-list" >Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
</div>
</footer>
</form>

View File

@@ -11,11 +11,14 @@
<td>
{{item.product.name}}
{% if item.product.cuisine == True %}
<span data-tooltip="Observações para preparo." data-flow="top">
<img
onclick="openModalObs({{item.id}})"
src="{% static 'midia/icons/note.svg' %}"
style="width: 25px; height: 35px; cursor: pointer;">
</img>
<span>
{% endif %}
</td>

View File

@@ -32,20 +32,22 @@
<input type="hidden" name="id-product" id="id-{{product.id}}" value="{{ product.id }}">
{% if product.active == True %}
<button style="background-color: rgba(255, 0, 0, 0); padding: 0px;">
<button style="background-color: rgba(255, 0, 0, 0); padding: 0px;border: 0px;">
<span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
<img
src="{% static 'midia/icons/toggle-on.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
>
</img>
style=" width: 35px; height: 35px; cursor: pointer;" >
</img>
</span>
</button>
{% else %}
<button style="background-color: rgba(0, 128, 0, 0); padding: 0px;" >
<button style="background-color: rgba(0, 128, 0, 0); padding: 0px;border: 0px;" >
<span data-tooltip="Ativar ou Desativar Produto" data-flow="top">
<img
src="{% static 'midia/icons/toggle-off.svg' %}"
style=" width: 35px; height: 35px; cursor: pointer;"
>
</img>
style=" width: 35px; height: 35px; cursor: pointer;" >
</img>
<span>
</button>
{% endif %}

View File

@@ -4,15 +4,12 @@
gap: 10px;
max-width: 95%;
margin: 40px;
/* margin: 0 auto; */
}
.card-comanda {
width: 80%;
gap: 3px;
/* min-width: 220px;
min-height: 250px; */
background: var(--main-gradient);
border-radius: 5px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
@@ -29,44 +26,6 @@
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
/* button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
} */
.modal {
display: none;
position: fixed;
padding: 20px;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transform: translate(-50%, -50%);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
border-radius: 10px;
width: 90%;
max-width: 500px;
}
form {
display: flex;
flex-direction: column;