comunatec/controles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: melhoria no layout da tela de login - ajustes no container, responsividade e estilização dos campos

Browse Source
This commit is contained in:
andersonid
2025-04-03 20:29:07 -03:00
parent 0447524a91
commit 50516664e4
3 changed files with 427 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
templates/home.html
View File

@@ -1,6 +1,6 @@
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block title %}Início{% endblock %}
{% block content %}
<div class="row g-4">
@@ -190,7 +190,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalEditarMilitante">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalEditarMilitante" style="background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;">
<i class="fas fa-edit me-2"></i>Editar
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
@@ -315,14 +315,6 @@
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<<<<<<< HEAD
<p>Tem certeza que deseja excluir este militante?</p>
<p class="text-danger">Esta ação não pode ser desfeita.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-danger" id="confirmDelete">
=======
<p>Tem certeza que deseja excluir este item?</p>
<p class="text-danger"><small>Esta ação não pode ser desfeita.</small></p>
</div>
@@ -331,23 +323,114 @@
<i class="fas fa-times me-2"></i>Cancelar
</button>
<button type="button" class="btn btn-danger" id="btnConfirmarExclusao">
>>>>>>> 324660d (refactor: melhorias na interface e funcionalidades - Atualização do layout do dashboard com Bootstrap 5 - Remoção do template editar_pagamento.html (integrado ao modal) - Melhorias no template home.html com cards estatísticos - Ajustes nos estilos e responsividade - Correções nas rotas e conexões do banco de dados - Implementação do modal de edição de pagamentos - Adição de efeitos hover e melhorias visuais)
<i class="fas fa-trash me-2"></i>Excluir
</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<style>
.welcome-header {
background: linear-gradient(to right, var(--background-color), rgba(232, 0, 12, 0.05));
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.welcome-header h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.welcome-header h4 {
font-size: 1.2rem;
color: var(--secondary-color);
opacity: 0.8;
margin: 0;
}
.valor-container {
flex: 1;
min-width: 0; /* Permite que o texto quebre corretamente */
}
.valor-cota {
font-size: calc(1.2rem + 0.8vw);
line-height: 1.2;
word-break: break-word;
margin-right: 0.5rem;
}
.icon-container {
font-size: 1.5rem;
opacity: 0.8;
margin-left: 8px;
margin-top: 4px;
}
/* Estilo para o backdrop com blur em todos os modais */
.modal-backdrop.show {
backdrop-filter: blur(8px);
background-color: rgba(0, 0, 0, 0.7);
}
/* Estilo para o botão de fechar dos modais */
.btn-close {
background-color: transparent;
padding: 0.5rem;
opacity: 0.8;
transition: opacity 0.2s;
filter: invert(1) grayscale(100%) brightness(200%);
}
.btn-close:hover {
opacity: 1;
background-color: transparent;
}
/* Estilo para modais */
.modal-content {
border: none;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.modal-header {
background: linear-gradient(to right, var(--bs-gray-dark), var(--bs-gray));
color: white;
border-radius: 12px 12px 0 0;
border-bottom: none;
padding: 1rem;
}
.modal-body {
padding: 1.5rem;
}
.modal-footer {
border-top: 1px solid #eee;
padding: 1rem;
}
/* Garantir que o botão de editar fique azul */
.btn-primary {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--bs-primary-dark) !important;
border-color: var(--bs-primary-dark) !important;
}
</style>
{% block extra_js %}
<script>
<<<<<<< HEAD
// Função para formatar CPF
function formatCPF(cpf) {
return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4");
}
=======
document.addEventListener('DOMContentLoaded', function() {
// Modal de Detalhes
const militanteModal = document.getElementById('militanteModal');
@@ -426,49 +509,23 @@ document.addEventListener('DOMContentLoaded', function() {
btnEditar.replaceWith(btnEditar.cloneNode(true));
btnExcluir.replaceWith(btnExcluir.cloneNode(true));
});
>>>>>>> a430b82 (fix: corrige fluxo de modais na home - Ajusta modal de militantes para abrir detalhes primeiro - Corrige preenchimento de dados nos modais - Mantém fluxo: detalhes -> editar/excluir)
// Função para formatar telefone
function formatPhone(phone) {
return phone.replace(/(\d{2})(\d{5})(\d{4})/, "($1) $2-$3");
}
// Função para carregar detalhes do militante
function loadMilitanteDetails(id) {
fetch(`/api/militante/${id}`)
.then(response => response.json())
.then(data => {
document.getElementById('militanteNome').textContent = data.nome;
document.getElementById('militanteCPF').textContent = formatCPF(data.cpf);
document.getElementById('militanteEmail').textContent = data.email;
document.getElementById('militanteTelefone').textContent = formatPhone(data.telefone);
document.getElementById('militanteEndereco').textContent = data.endereco;
document.getElementById('militanteFiliado').textContent = data.filiado ? 'Filiado' : 'Não Filiado';
// Preencher formulário de edição
document.getElementById('editNome').value = data.nome;
document.getElementById('editCpf').value = data.cpf;
document.getElementById('editEmail').value = data.email;
document.getElementById('editTelefone').value = data.telefone;
document.getElementById('editEndereco').value = data.endereco;
document.getElementById('editFiliado').checked = data.filiado;
});
}
// Função para excluir militante
function deleteMilitante(id) {
fetch(`/api/militante/${id}`, {
method: 'DELETE',
// Envio do formulário de edição via AJAX
const formEditarMilitante = document.getElementById('formEditarMilitante');
formEditarMilitante.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch(this.action, {
method: 'POST',
body: formData,
headers: {
'Content-Type': 'application/json'
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
<<<<<<< HEAD
if (data.success) {
window.location.reload();
=======
if (data.status === 'success') {
// Fechar os modais
bootstrap.Modal.getInstance(document.getElementById('modalEditarMilitante')).hide();
@@ -476,68 +533,29 @@ document.addEventListener('DOMContentLoaded', function() {
// Atualizar a página
location.reload();
>>>>>>> a430b82 (fix: corrige fluxo de modais na home - Ajusta modal de militantes para abrir detalhes primeiro - Corrige preenchimento de dados nos modais - Mantém fluxo: detalhes -> editar/excluir)
} else {
alert('Erro ao excluir militante: ' + data.message);
// Mostrar erro
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-danger alert-dismissible fade show';
alertDiv.innerHTML = `
${data.message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.querySelector('.modal-body').insertBefore(alertDiv, formEditarMilitante);
}
});
}
<<<<<<< HEAD
// Event listeners
document.addEventListener('DOMContentLoaded', function() {
// Máscara para CPF
const cpfInput = document.getElementById('editCpf');
cpfInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 11) value = value.slice(0, 11);
e.target.value = formatCPF(value);
});
// Máscara para telefone
const phoneInput = document.getElementById('editTelefone');
phoneInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length > 11) value = value.slice(0, 11);
e.target.value = formatPhone(value);
});
// Submit do formulário de edição
const formEditar = document.getElementById('formEditarMilitante');
formEditar.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(formEditar);
const data = Object.fromEntries(formData.entries());
fetch('/api/militante/' + data.id, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.location.reload();
} else {
alert('Erro ao editar militante: ' + data.message);
}
});
});
// Confirmação de exclusão
const confirmDelete = document.getElementById('confirmDelete');
confirmDelete.addEventListener('click', function() {
const id = this.dataset.militanteId;
deleteMilitante(id);
})
.catch(error => {
console.error('Erro:', error);
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-danger alert-dismissible fade show';
alertDiv.innerHTML = `
Erro ao atualizar militante. Tente novamente.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.querySelector('.modal-body').insertBefore(alertDiv, formEditarMilitante);
});
});
<<<<<<< HEAD
=======
=======
>>>>>>> a430b82 (fix: corrige fluxo de modais na home - Ajusta modal de militantes para abrir detalhes primeiro - Corrige preenchimento de dados nos modais - Mantém fluxo: detalhes -> editar/excluir)
// Função para carregar dados do pagamento no modal
function carregarDadosPagamento(id) {
fetch(`/api/pagamentos/${id}`)
@@ -616,14 +634,10 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
});
>>>>>>> 324660d (refactor: melhorias na interface e funcionalidades - Atualização do layout do dashboard com Bootstrap 5 - Remoção do template editar_pagamento.html (integrado ao modal) - Melhorias no template home.html com cards estatísticos - Ajustes nos estilos e responsividade - Correções nas rotas e conexões do banco de dados - Implementação do modal de edição de pagamentos - Adição de efeitos hover e melhorias visuais)
</script>
<<<<<<< HEAD
=======
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/militantes.js') }}"></script>
{% endblock %}
>>>>>>> a430b82 (fix: corrige fluxo de modais na home - Ajusta modal de militantes para abrir detalhes primeiro - Corrige preenchimento de dados nos modais - Mantém fluxo: detalhes -> editar/excluir)
{% endblock %}