mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 05:25:40 +00:00
style: padronixação modal | tooltips
This commit is contained in:
@@ -86,11 +86,14 @@ Detalhes {{comanda.name}}
|
||||
<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.
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;"
|
||||
>
|
||||
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 %}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user