feat: ajusta colunas, alinhamento e densidade da tabela de clientes
This commit is contained in:
@@ -271,6 +271,31 @@ a.botao:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
|
||||
.botao-toggle-log:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
|
||||
.secao-log-conteudo { padding-top: 4px; }
|
||||
|
||||
.table-clientes { table-layout: fixed; }
|
||||
|
||||
.table-clientes th.col-codigo, .table-clientes td.col-codigo,
|
||||
.table-clientes th.col-cnpj, .table-clientes td.col-cnpj,
|
||||
.table-clientes th.col-status, .table-clientes td.col-status {
|
||||
text-align: center;
|
||||
}
|
||||
.table-clientes th.col-acoes, .table-clientes td.col-acoes { text-align: right; }
|
||||
|
||||
.table-clientes td.col-codigo, .table-clientes td.col-cnpj {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.table-clientes td.col-cnpj { white-space: nowrap; }
|
||||
|
||||
.table-clientes col.col-codigo { width: 90px; }
|
||||
.table-clientes col.col-razao, .table-clientes col.col-fantasia { width: 27%; }
|
||||
.table-clientes col.col-cnpj { width: 160px; }
|
||||
.table-clientes col.col-status { width: 70px; }
|
||||
.table-clientes col.col-acoes { width: 230px; }
|
||||
|
||||
.table-clientes th, .table-clientes td { padding: 7px 14px; }
|
||||
|
||||
.botao.botao-tabela { margin-top: 0; padding: 7px 12px; font-size: 0.875rem; vertical-align: middle; }
|
||||
.table-clientes td.col-acoes { white-space: nowrap; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { transition: none !important; }
|
||||
}
|
||||
|
||||
@@ -26,27 +26,35 @@
|
||||
{% set busca_qs = ('&busca=' + (busca | urlencode)) if busca else '' %}
|
||||
{% set qs_base = ('&ordenar_por=' + ordenar_por + '&direcao=' + direcao + '&por_pagina=' + (por_pagina | string) + '&status=' + status + busca_qs) | safe %}
|
||||
<div class="tabela-wrap">
|
||||
<table>
|
||||
<table class="table-clientes">
|
||||
<colgroup>
|
||||
<col class="col-codigo">
|
||||
<col class="col-razao">
|
||||
<col class="col-fantasia">
|
||||
<col class="col-cnpj">
|
||||
<col class="col-status">
|
||||
<col class="col-acoes">
|
||||
</colgroup>
|
||||
<tr>
|
||||
{% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
|
||||
{% for campo, rotulo in colunas_tabela %}
|
||||
{% set colunas_tabela = [("codigo", "Código", "col-codigo"), ("razao", "Razão", "col-razao"), ("fantasia", "Fantasia", "col-fantasia"), ("cnpj", "CNPJ", "col-cnpj")] %}
|
||||
{% for campo, rotulo, classe_coluna in colunas_tabela %}
|
||||
{% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
|
||||
<th>
|
||||
<th class="{{ classe_coluna }}">
|
||||
<a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1&por_pagina={{ por_pagina }}&status={{ status }}{{ busca_qs }}">
|
||||
{{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
|
||||
</a>
|
||||
</th>
|
||||
{% endfor %}
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
<th class="col-status">Status</th>
|
||||
<th class="col-acoes"></th>
|
||||
</tr>
|
||||
{% for c in clientes %}
|
||||
<tr>
|
||||
<td>{{ c.CODIGO }}</td>
|
||||
<td>{{ c.RAZAO }}</td>
|
||||
<td>{{ c.FANTASIA }}</td>
|
||||
<td>{{ c.CNPJ }}</td>
|
||||
<td>
|
||||
<td class="col-codigo">{{ c.CODIGO }}</td>
|
||||
<td class="col-razao">{{ c.RAZAO }}</td>
|
||||
<td class="col-fantasia">{{ c.FANTASIA }}</td>
|
||||
<td class="col-cnpj">{{ c.CNPJ }}</td>
|
||||
<td class="col-status">
|
||||
<form method="post" action="/clientes/{{ c.ID }}/alternar-ativo" style="display:inline">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
<input type="hidden" name="redirecionar_para" value="{{ redirecionar_para }}">
|
||||
@@ -60,9 +68,9 @@
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<a class="botao" href="/clientes/{{ c.ID }}">Abrir</a>
|
||||
<button type="button" class="botao botao-gerar-chave" data-codigo="{{ c.CODIGO }}" onclick="gerarChaveReativacao(this)">Gerar chave</button>
|
||||
<td class="col-acoes">
|
||||
<a class="botao botao-tabela" href="/clientes/{{ c.ID }}">Abrir</a>
|
||||
<button type="button" class="botao botao-tabela botao-gerar-chave" data-codigo="{{ c.CODIGO }}" onclick="gerarChaveReativacao(this)">Gerar chave</button>
|
||||
<span class="chave-feedback" aria-live="polite"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user