feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais
This commit is contained in:
andersonid
@@ -9,6 +9,8 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css?v=1" rel="stylesheet">
|
||||
<!-- Font Awesome 6 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?v=1">
|
||||
<!-- Componentes CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
@@ -22,6 +24,7 @@
|
||||
--info-color: #0dcaf0;
|
||||
--background-gradient: linear-gradient(135deg, var(--primary-color) 40%, white 100%);
|
||||
--navbar-stripe: 4px solid var(--primary-color);
|
||||
--table-header-bg: #d8dde2;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -420,6 +423,21 @@
|
||||
padding: 2rem 1rem;
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #0d6efd;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
</style>
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
{% block title %}Militantes{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<<<<<<< HEAD
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
@@ -12,42 +13,94 @@
|
||||
{% if current_user.has_permission('gerenciar_militantes') %}
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNovoMilitante">
|
||||
<i class="fas fa-user-plus me-2"></i>Novo Militante
|
||||
=======
|
||||
<div class="table-container">
|
||||
<div class="list-header">
|
||||
<h2 class="list-title">
|
||||
<i class="fas fa-users"></i>Militantes
|
||||
</h2>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalNovoMilitante">
|
||||
<i class="fas fa-user-plus me-2"></i>Novo Militante
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="search-bar">
|
||||
<div class="search-input-group input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Pesquisar militantes..." id="searchInput">
|
||||
</div>
|
||||
<div class="list-actions">
|
||||
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse">
|
||||
<i class="fas fa-filter me-2"></i>Filtrar
|
||||
</button>
|
||||
<button class="btn btn-outline-primary" type="button">
|
||||
<i class="fas fa-file-export me-2"></i>Exportar
|
||||
>>>>>>> ee71e7b (feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais)
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Pesquisar militantes...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<i class="fas fa-filter me-1"></i>Filtrar
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#" data-filter="todos">Todos</a></li>
|
||||
<li><a class="dropdown-item" href="#" data-filter="filiados">Filiados</a></li>
|
||||
<li><a class="dropdown-item" href="#" data-filter="nao-filiados">Não Filiados</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-secondary" id="btnExportar">
|
||||
<i class="fas fa-download me-1"></i>Exportar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>CPF</th>
|
||||
<th>Email</th>
|
||||
<th>Telefone</th>
|
||||
<th>Filiado</th>
|
||||
<th class="text-end">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for militante in militantes %}
|
||||
<tr>
|
||||
<td>{{ militante.nome }}</td>
|
||||
<td>{{ militante.cpf }}</td>
|
||||
<td>{{ militante.email }}</td>
|
||||
<td>{{ militante.telefone }}</td>
|
||||
<td>
|
||||
<span class="badge {{ 'bg-success' if militante.filiado else 'bg-secondary' }}">
|
||||
{{ 'Sim' if militante.filiado else 'Não' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group-actions">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modalEditarMilitante"
|
||||
data-militante-id="{{ militante.id }}"
|
||||
data-militante-nome="{{ militante.nome }}"
|
||||
data-militante-cpf="{{ militante.cpf }}"
|
||||
data-militante-email="{{ militante.email }}"
|
||||
data-militante-telefone="{{ militante.telefone }}"
|
||||
data-militante-endereco="{{ militante.endereco }}"
|
||||
data-militante-filiado="{{ militante.filiado }}"
|
||||
title="Editar">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
data-militante-id="{{ militante.id }}"
|
||||
data-militante-nome="{{ militante.nome }}"
|
||||
title="Excluir">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="militantesTable">
|
||||
<thead>
|
||||
@@ -132,10 +185,29 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
=======
|
||||
<div class="pagination-container">
|
||||
<div class="text-muted">
|
||||
Mostrando <span id="countMilitantes">{{ militantes|length }}</span> militantes
|
||||
>>>>>>> ee71e7b (feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais)
|
||||
</div>
|
||||
<nav aria-label="Navegação de páginas">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item disabled" id="prevPage">
|
||||
<a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item" id="nextPage">
|
||||
<a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
@@ -268,6 +340,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
=======
|
||||
<!-- Modais -->
|
||||
{% include 'modals/militante_novo.html' %}
|
||||
{% include 'modals/militante_editar.html' %}
|
||||
{% include 'modals/militante_excluir.html' %}
|
||||
>>>>>>> ee71e7b (feat: padroniza componentes e estilos globais - Cria components.css, ajusta cores e organiza modais)
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
|
||||
51
templates/modals/militante_editar.html
Normal file
51
templates/modals/militante_editar.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!-- Modal de Edição -->
|
||||
<div class="modal fade" id="modalEditarMilitante" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-user-edit me-2"></i>Editar Militante
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="formEditarMilitante" method="post">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editNome" class="form-label">Nome:</label>
|
||||
<input type="text" class="form-control" id="editNome" name="nome" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editCpf" class="form-label">CPF:</label>
|
||||
<input type="text" class="form-control" id="editCpf" name="cpf" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editEmail" class="form-label">Email:</label>
|
||||
<input type="email" class="form-control" id="editEmail" name="email" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="editTelefone" class="form-label">Telefone:</label>
|
||||
<input type="text" class="form-control" id="editTelefone" name="telefone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editEndereco" class="form-label">Endereço:</label>
|
||||
<input type="text" class="form-control" id="editEndereco" name="endereco">
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="editFiliado" name="filiado">
|
||||
<label class="form-check-label" for="editFiliado">Filiado</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" form="formEditarMilitante" class="btn btn-success">
|
||||
<i class="fas fa-save me-2"></i>Salvar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
23
templates/modals/militante_excluir.html
Normal file
23
templates/modals/militante_excluir.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Confirmar Exclusão</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Tem certeza que deseja excluir o militante <strong id="militanteNome"></strong>?</p>
|
||||
<p class="text-danger mb-0">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>
|
||||
<form action="" method="POST" id="deleteForm" class="d-inline">
|
||||
<button type="submit" class="btn btn-danger">
|
||||
<i class="fas fa-trash me-2"></i>Excluir
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
56
templates/modals/militante_novo.html
Normal file
56
templates/modals/militante_novo.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!-- Modal de Novo Militante -->
|
||||
<div class="modal fade" id="modalNovoMilitante" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">
|
||||
<i class="fas fa-user-plus me-2"></i>Novo Militante
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="formNovoMilitante" method="post" action="{{ url_for('novo_militante') }}">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="nome" class="form-label">Nome:</label>
|
||||
<input type="text" class="form-control" id="nome" name="nome" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="cpf" class="form-label">CPF:</label>
|
||||
<input type="text" class="form-control" id="cpf" name="cpf" required
|
||||
pattern="\d{3}\.?\d{3}\.?\d{3}-?\d{2}"
|
||||
title="Digite um CPF no formato: xxx.xxx.xxx-xx">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">Email:</label>
|
||||
<input type="email" class="form-control" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="telefone" class="form-label">Telefone:</label>
|
||||
<input type="text" class="form-control" id="telefone" name="telefone">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="endereco" class="form-label">Endereço:</label>
|
||||
<input type="text" class="form-control" id="endereco" name="endereco">
|
||||
</div>
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="filiado" name="filiado">
|
||||
<label class="form-check-label" for="filiado">Filiado</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" form="formNovoMilitante" class="btn btn-primary">
|
||||
<i class="fas fa-save me-2"></i>Salvar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user