style: cores

This commit is contained in:
2025-01-21 17:29:43 -03:00
parent 88373b4570
commit 891f23ec2e
8 changed files with 18 additions and 226 deletions

View File

@@ -28,7 +28,7 @@ Clientes
<th style="text-align: left;">Cliente</th> <th style="text-align: left;">Cliente</th>
<th style="text-align: left;width: 20%;">Débito</th> <th style="text-align: left;width: 20%;">Débito</th>
<th class="hide-on-mobile" style="text-align: left;">Contato</th> <th class="hide-on-mobile" style="text-align: left;">Contato</th>
<th style="text-align: left;width: 20%;">Ações</th> <th class="hide-on-mobile" style="text-align: left;width: 20%;">Ações</th>
</tr> </tr>
{% for client in clients %} {% for client in clients %}
@@ -39,7 +39,7 @@ Clientes
<td class="hide-on-mobile" id="contact-{{client.id}}" >{{client.contact}}</td> <td class="hide-on-mobile" id="contact-{{client.id}}" >{{client.contact}}</td>
<td hidden id="active-{{client.id}}" >{{client.active}}</td> <td hidden id="active-{{client.id}}" >{{client.active}}</td>
<td> <td>
<div class="grid-buttons"> <div class="grid-buttons hide-on-mobile">
<img <img
src="{% static 'midia/icons/edit.svg' %}" src="{% static 'midia/icons/edit.svg' %}"
@@ -77,18 +77,17 @@ Clientes
<form action="{% url 'createClient' %}" id="clientForm" method="post" > <form action="{% url 'createClient' %}" id="clientForm" method="post" >
{% csrf_token %} {% csrf_token %}
<h2>Cadastro Cliente</h2> <h2 id="title-window">Cadastro Cliente</h2>
<input type="text" id="clientId" name="clientId" hidden > <input type="text" id="clientId" name="clientId" hidden >
<input type="text" id="clientName" name="name" required placeholder="Nome"> <input type="text" id="clientName" name="name" required placeholder="Nome">
<input type="number" step="0.01" id="clientDebt" name="debt" required placeholder="Débito">
<input type="checkbox" id="active" name="active" placeholder="Ativo">Ativo <input type="checkbox" id="active" name="active" placeholder="Ativo">Ativo
<input type="text" id="clientContact" name="contact" placeholder="Contato"></input> <input type="text" id="clientContact" name="contact" placeholder="Contato"></input>
<footer class="grid-buttons"> <footer class="grid-buttons">
<button id="save" type="submit">Salvar</button> <button id="save" type="submit">Salvar</button>
<button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" >Alterar</button> <button onclick="closeModal()" type="button" id="edit" hx-post="{% url 'editClient' %}" hx-trigger="click" hx-swap="none" style="width: 100%;">Alterar</button>
<button type="button" onclick="closeModal()" style="background-color:red;">Fechar</button> <button type="button" onclick="closeModal()" style="background-color:red;">Cancelar</button>
</footer> </footer>
</form> </form>

Binary file not shown.

View File

@@ -1,40 +1,4 @@
button {
background-color: #007BFF;
color: white;
padding: 10px 10px;
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 { form {
display: flex; display: flex;
@@ -51,14 +15,10 @@ input, textarea {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
* dialog {
transform: scale(1);
}
.grid-buttons { .grid-buttons {
grid-template-columns: 1fr 1fr;
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
@@ -75,28 +35,7 @@ input, textarea {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.card {
width: 100%;
height: 120px;
background-color: #f2f2f2;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px;
font-size: 20px;
font-weight: bold;
color: #333;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.hide-on-mobile { .hide-on-mobile {

View File

@@ -32,8 +32,10 @@ function editclient(id) {
openModal(); openModal();
var buttonSave = document.getElementById('save'); var buttonSave = document.getElementById('save');
var buttonEdit = document.getElementById('edit'); var buttonEdit = document.getElementById('edit');
var titleWindow = document.getElementById('title-window')
buttonSave.style.display = 'none'; buttonSave.style.display = 'none';
buttonEdit.style.display = 'block'; buttonEdit.style.display = 'block';
titleWindow.innerText = 'Editar '
var clientId = document.getElementById('clientId'); var clientId = document.getElementById('clientId');
var clientName = document.getElementById('clientName'); var clientName = document.getElementById('clientName');
var clientContact = document.getElementById('clientContact'); var clientContact = document.getElementById('clientContact');

View File

@@ -1,5 +1,4 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(2, 2fr); grid-template-columns: repeat(2, 2fr);
@@ -24,59 +23,18 @@
.card-product:hover { .card-product:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 3px 3px 10px rgba(185, 185, 185, 0.678); box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
} }
table td th { table td th {
text-align: center; text-align: center;
} }
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%;
height: 90%;
max-width: 500px;
}
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
input, textarea { input, textarea {
width: 95%; width: 95%;
@@ -85,4 +43,4 @@ input, textarea {
margin-top: 5px; margin-top: 5px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }

View File

@@ -24,52 +24,13 @@
.card-product:hover { .card-product:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 2px 2px 10px rgba(185, 185, 185, 0.678); box-shadow: 0px 0px 10px rgba(86, 187, 255, 0.815);
} }
table td th { table td th {
text-align: center; text-align: center;
} }
/* 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%;
height: 90%;
max-width: 500px;
}
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -31,7 +31,7 @@
.card:hover { .card:hover {
transform: translateY(-10px); transform: translateY(-10px);
box-shadow: 0 4px 8px rgba(199, 199, 199, 0.25); box-shadow: 0px 0px 8px rgba(86, 187, 255, 0.815);
} }
.card-resumo { .card-resumo {
@@ -53,7 +53,7 @@
.card-resumo:hover { .card-resumo:hover {
box-shadow: 0 4px 15px rgba(175, 175, 175, 0.295); box-shadow: 0px 0px 15px rgba(86, 187, 255, 0.815);
text-align: left; text-align: left;
line-height: 20px; line-height: 20px;
padding: 15px 30px 15px 30px; padding: 15px 30px 15px 30px;

View File

@@ -1,40 +1,4 @@
button {
background-color: #007BFF;
color: white;
padding: 10px 10px;
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 { form {
display: flex; display: flex;
@@ -51,21 +15,11 @@ input, textarea {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
* dialog {
transform: scale(1);
/* display: flexbox;
max-width: 200;
max-height: 400; */
}
.grid-buttons { .grid-buttons {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 10px; gap: 10px;
max-width: 500px; /* Define a largura máxima do grid */ max-width: 500px;
/* margin: 0 auto; */
} }
.grid-container { .grid-container {
@@ -81,27 +35,6 @@ input, textarea {
width: 100%; width: 100%;
} }
.card {
width: 100%;
height: 120px;
background-color: #f2f2f2;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px; /* Centraliza o texto verticalmente */
font-size: 20px;
font-weight: bold;
color: #333;
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.hide-on-mobile { .hide-on-mobile {