Browse Source

feat: Adiciona navbar padrão do SAPL nas páginas do Django Admin

Substitui o navbar padrão do Django Admin pelo navbar do SAPL
para manter consistência visual em toda a aplicação, incluindo
as páginas administrativas do módulo TCE.

- Cria template admin/base_site.html que sobrescreve o template base
- Remove header padrão do Django Admin
- Integra navbar do SAPL com menu dinâmico (navbar.yaml)
- Mantém menu de autenticação com opções do usuário
- Adiciona estilos para ajustar layout do admin

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
pull/3858/head
rangelbruno 12 months ago
parent
commit
7784f0b559
  1. 191
      sapl/templates/admin/base_site.html
  2. 224
      sapl/templates/admin/tce/change_form.html
  3. 224
      sapl/templates/admin/tce/change_list.html

191
sapl/templates/admin/base_site.html

@ -7,15 +7,15 @@
{{ block.super }} {{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
<style> <style>
/* Remove o header padrão do Django Admin */ /* Remove completamente o navbar antigo do django_admin_bootstrapped */
#header { .navbar.navbar-default.navbar-fixed-top {
display: none !important; display: none !important;
} }
/* Ajustes para o container principal */ /* Ajustes para o container principal */
#container { body > .container {
margin-top: 0; margin-top: 0 !important;
padding-top: 0; padding-top: 0 !important;
} }
.breadcrumbs { .breadcrumbs {
@ -29,45 +29,184 @@
body { body {
padding-top: 0 !important; padding-top: 0 !important;
} }
/* Estilos completos do navbar do SAPL */
#sapl-admin-navbar {
position: relative;
z-index: 1050;
width: 100%;
margin-bottom: 20px;
background-color: #343a40;
}
#sapl-admin-navbar .navbar {
background-color: #343a40;
border: 0;
border-radius: 0;
margin-bottom: 0;
min-height: 50px;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
#sapl-admin-navbar .container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
#sapl-admin-navbar .navbar-brand {
color: #fff !important;
font-size: 1.25rem;
padding: 10px 15px;
text-decoration: none;
font-weight: 500;
}
#sapl-admin-navbar .navbar-brand:hover {
color: #fff !important;
}
#sapl-admin-navbar .navbar-collapse {
display: flex !important;
align-items: center;
justify-content: space-between;
flex-grow: 1;
}
#sapl-admin-navbar .navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
#sapl-admin-navbar .nav-item {
position: relative;
}
#sapl-admin-navbar .nav-link {
color: rgba(255,255,255,.75) !important;
padding: 10px 15px;
display: block;
text-decoration: none;
}
#sapl-admin-navbar .nav-link:hover {
color: rgba(255,255,255,1) !important;
background-color: rgba(255,255,255,.1);
}
#sapl-admin-navbar .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
#sapl-admin-navbar .dropdown:hover > .dropdown-menu {
display: block;
}
#sapl-admin-navbar .dropdown-menu-right {
right: 0;
left: auto;
}
#sapl-admin-navbar .dropdown-item {
display: block;
width: 100%;
padding: 8px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
}
#sapl-admin-navbar .dropdown-item:hover {
background-color: #f5f5f5;
color: #262626;
}
#sapl-admin-navbar .dropdown-item.disabled {
color: #777;
cursor: not-allowed;
}
#sapl-admin-navbar .dropdown-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
#sapl-admin-navbar .navbar-nav.ml-auto {
margin-left: auto;
}
#sapl-admin-navbar img {
border-radius: 50%;
}
</style> </style>
{% endblock %} {% endblock %}
{% block branding %} {% block branding %}{% endblock %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{% endblock %} {% block usertools %}{% endblock %}
{% block nav-global %} {% block nav-global %}{% endblock %}
<!-- Navbar do SAPL -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> {% block breadcrumbs %}
<div class="container"> <!-- Navbar do SAPL -->
<div id="sapl-admin-navbar">
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="/">legisinc</a> <a class="navbar-brand" href="/">legisinc</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <div class="navbar-collapse" id="navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
{% navbar 'navbar.yaml' %} {% navbar 'navbar.yaml' %}
<ul class="nav navbar-nav justify-content-end" id="autenticacao"> <ul class="navbar-nav ml-auto">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <a class="nav-link" href="#">
<img height="30" width="30" src="/static/sapl/frontend/img/authenticated.png"> <img height="30" width="30" src="/static/sapl/frontend/img/authenticated.png">
<span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <div class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item"><a>{{user.username}}</a></li> <a class="dropdown-item disabled">{{user.username}}</a>
<div class="dropdown-divider"></div>
{% if 'parlamentares.can_vote' in user.get_all_permissions %} {% if 'parlamentares.can_vote' in user.get_all_permissions %}
<li class="dropdown-item"><a href="" onclick="window.open('/voto-individual/','Voto Individual','width=1000, height=800, scrollbars=yes')";> <a class="dropdown-item" href="#" onclick="window.open('/voto-individual/','Voto Individual','width=1000, height=800, scrollbars=yes'); return false;">
Votar Matéria Votar Matéria
</a></li> </a>
{% endif %} {% endif %}
<li class="dropdown-item"><a href="/sistema/alterar-senha/">Alterar senha</a></li> <a class="dropdown-item" href="/sistema/alterar-senha/">Alterar senha</a>
<li class="dropdown-item"><a href="/logout/">Sair</a></li> <a class="dropdown-item" href="/logout/">Sair</a>
</ul> </div>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</div>
{{ block.super }}
{% endblock %} {% endblock %}

224
sapl/templates/admin/tce/change_form.html

@ -1,72 +1,226 @@
{% extends "admin/change_form.html" %} {% extends "admin/change_form.html" %}
{% load i18n static menus %} {% load i18n static menus %}
{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block extrahead %} {% block extrahead %}
{{ block.super }} {{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
<style> <style>
/* Remove o header padrão do Django Admin */ /* Remove completamente o navbar antigo do django_admin_bootstrapped */
#header { .navbar.navbar-default.navbar-fixed-top {
display: none !important; display: none !important;
} }
/* Ajustes para o container principal */ /* Ajustes para o container principal */
#container { body > .container {
margin-top: 0; margin-top: 0 !important;
padding-top: 0; padding-top: 0 !important;
} }
.breadcrumbs { .breadcrumbs {
background: #f8f9fa; background: #f8f9fa;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
margin-top: 0;
}
/* Ajusta o body para não ter padding no topo */
body {
padding-top: 0 !important;
}
/* Estilos completos do navbar do SAPL */
#sapl-admin-navbar {
position: relative;
z-index: 1050;
width: 100%;
margin-bottom: 20px;
background-color: #343a40;
}
#sapl-admin-navbar .navbar {
background-color: #343a40;
border: 0;
border-radius: 0;
margin-bottom: 0;
min-height: 50px;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
#sapl-admin-navbar .container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
#sapl-admin-navbar .navbar-brand {
color: #fff !important;
font-size: 1.25rem;
padding: 10px 15px;
text-decoration: none;
font-weight: 500;
}
#sapl-admin-navbar .navbar-brand:hover {
color: #fff !important;
}
#sapl-admin-navbar .navbar-collapse {
display: flex !important;
align-items: center;
justify-content: space-between;
flex-grow: 1;
}
#sapl-admin-navbar .navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
#sapl-admin-navbar .nav-item {
position: relative;
}
#sapl-admin-navbar .nav-link {
color: rgba(255,255,255,.75) !important;
padding: 10px 15px;
display: block;
text-decoration: none;
}
#sapl-admin-navbar .nav-link:hover {
color: rgba(255,255,255,1) !important;
background-color: rgba(255,255,255,.1);
}
#sapl-admin-navbar .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
#sapl-admin-navbar .dropdown:hover > .dropdown-menu {
display: block;
}
#sapl-admin-navbar .dropdown-menu-right {
right: 0;
left: auto;
}
#sapl-admin-navbar .dropdown-item {
display: block;
width: 100%;
padding: 8px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
}
#sapl-admin-navbar .dropdown-item:hover {
background-color: #f5f5f5;
color: #262626;
}
#sapl-admin-navbar .dropdown-item.disabled {
color: #777;
cursor: not-allowed;
}
#sapl-admin-navbar .dropdown-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
#sapl-admin-navbar .navbar-nav.ml-auto {
margin-left: auto;
}
#sapl-admin-navbar img {
border-radius: 50%;
} }
</style> </style>
{% endblock %} {% endblock %}
{% block bodyclass %}{{ block.super }} tce-admin{% endblock %} {% block branding %}{% endblock %}
{% block content_title %} {% block usertools %}{% endblock %}
<h1 class="mb-4">
<i class="fas fa-edit"></i> {{ title }} {% block nav-global %}{% endblock %}
</h1>
<div class="mb-3">
<a href="{% url 'admin:'|add:opts.app_label|add:'_'|add:opts.model_name|add:'_changelist' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> {% trans 'Voltar à Lista' %}
</a>
<a href="{% url 'sapl.tce:admin_index' %}" class="btn btn-secondary">
<i class="fas fa-home"></i> {% trans 'Dashboard TCE' %}
</a>
</div>
{% endblock %}
{% block nav-global %} {% block breadcrumbs %}
<!-- Navbar do SAPL --> <!-- Navbar do SAPL -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div id="sapl-admin-navbar">
<div class="container"> <nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="/">legisinc</a> <a class="navbar-brand" href="/">legisinc</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <div class="navbar-collapse" id="navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
{% navbar 'navbar.yaml' %} {% navbar 'navbar.yaml' %}
<ul class="nav navbar-nav justify-content-end" id="autenticacao"> <ul class="navbar-nav ml-auto">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <a class="nav-link" href="#">
<img height="30" width="30" src="/static/sapl/frontend/img/authenticated.png"> <img height="30" width="30" src="/static/sapl/frontend/img/authenticated.png">
<span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <div class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item"><a>{{user.username}}</a></li> <a class="dropdown-item disabled">{{user.username}}</a>
<li class="dropdown-item"><a href="{% url 'sapl.base:alterar_senha' %}">Alterar senha</a></li> <div class="dropdown-divider"></div>
<li class="dropdown-item"><a href="{% url 'sapl.base:logout' %}">Sair</a></li> {% if 'parlamentares.can_vote' in user.get_all_permissions %}
</ul> <a class="dropdown-item" href="#" onclick="window.open('/voto-individual/','Voto Individual','width=1000, height=800, scrollbars=yes'); return false;">
Votar Matéria
</a>
{% endif %}
<a class="dropdown-item" href="/sistema/alterar-senha/">Alterar senha</a>
<a class="dropdown-item" href="/logout/">Sair</a>
</div>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</div>
{{ block.super }}
{% endblock %}
{% block content_title %}
<h1 class="mb-4">
<i class="fas fa-edit"></i> {{ title }}
</h1>
<div class="mb-3">
<a href="{% url 'admin:'|add:opts.app_label|add:'_'|add:opts.model_name|add:'_changelist' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> {% trans 'Voltar à Lista' %}
</a>
<a href="{% url 'sapl.tce:admin_index' %}" class="btn btn-secondary">
<i class="fas fa-home"></i> {% trans 'Dashboard TCE' %}
</a>
</div>
{% endblock %} {% endblock %}

224
sapl/templates/admin/tce/change_list.html

@ -1,75 +1,223 @@
{% extends "admin/change_list.html" %} {% extends "admin/change_list.html" %}
{% load i18n static menus %} {% load i18n static menus %}
{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block extrahead %} {% block extrahead %}
{{ block.super }} {{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
<style> <style>
/* Remove o header padrão do Django Admin */ /* Remove completamente o navbar antigo do django_admin_bootstrapped */
#header { .navbar.navbar-default.navbar-fixed-top {
display: none !important; display: none !important;
} }
/* Injeta o navbar do SAPL antes do conteúdo */
body::before {
content: '';
display: block;
}
/* Ajustes para o container principal */ /* Ajustes para o container principal */
#container { body > .container {
margin-top: 0; margin-top: 0 !important;
padding-top: 0; padding-top: 0 !important;
} }
.breadcrumbs { .breadcrumbs {
background: #f8f9fa; background: #f8f9fa;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
margin-top: 0;
}
/* Ajusta o body para não ter padding no topo */
body {
padding-top: 0 !important;
}
/* Estilos completos do navbar do SAPL */
#sapl-admin-navbar {
position: relative;
z-index: 1050;
width: 100%;
margin-bottom: 20px;
background-color: #343a40;
}
#sapl-admin-navbar .navbar {
background-color: #343a40;
border: 0;
border-radius: 0;
margin-bottom: 0;
min-height: 50px;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
#sapl-admin-navbar .container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
#sapl-admin-navbar .navbar-brand {
color: #fff !important;
font-size: 1.25rem;
padding: 10px 15px;
text-decoration: none;
font-weight: 500;
}
#sapl-admin-navbar .navbar-brand:hover {
color: #fff !important;
}
#sapl-admin-navbar .navbar-collapse {
display: flex !important;
align-items: center;
justify-content: space-between;
flex-grow: 1;
}
#sapl-admin-navbar .navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
#sapl-admin-navbar .nav-item {
position: relative;
}
#sapl-admin-navbar .nav-link {
color: rgba(255,255,255,.75) !important;
padding: 10px 15px;
display: block;
text-decoration: none;
}
#sapl-admin-navbar .nav-link:hover {
color: rgba(255,255,255,1) !important;
background-color: rgba(255,255,255,.1);
}
#sapl-admin-navbar .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
#sapl-admin-navbar .dropdown:hover > .dropdown-menu {
display: block;
}
#sapl-admin-navbar .dropdown-menu-right {
right: 0;
left: auto;
}
#sapl-admin-navbar .dropdown-item {
display: block;
width: 100%;
padding: 8px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
}
#sapl-admin-navbar .dropdown-item:hover {
background-color: #f5f5f5;
color: #262626;
}
#sapl-admin-navbar .dropdown-item.disabled {
color: #777;
cursor: not-allowed;
}
#sapl-admin-navbar .dropdown-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
#sapl-admin-navbar .navbar-nav.ml-auto {
margin-left: auto;
}
#sapl-admin-navbar img {
border-radius: 50%;
} }
</style> </style>
{% endblock %} {% endblock %}
{% block bodyclass %}{{ block.super }} tce-admin{% endblock %} {% block branding %}{% endblock %}
{% block content_title %} {% block usertools %}{% endblock %}
<h1 class="mb-4">
<i class="fas fa-list"></i> {{ title }}
</h1>
<div class="mb-3">
<a href="{% url 'sapl.tce:admin_index' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> {% trans 'Voltar ao Dashboard TCE' %}
</a>
</div>
{% endblock %}
{% block nav-global %} {% block nav-global %}{% endblock %}
<!-- Navbar do SAPL -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> {% block breadcrumbs %}
<div class="container"> <!-- Navbar do SAPL -->
<div id="sapl-admin-navbar">
<nav class="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="/">legisinc</a> <a class="navbar-brand" href="/">legisinc</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <div class="navbar-collapse" id="navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
{% navbar 'navbar.yaml' %} {% navbar 'navbar.yaml' %}
<ul class="nav navbar-nav justify-content-end" id="autenticacao"> <ul class="navbar-nav ml-auto">
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <a class="nav-link" href="#">
<img height="30" width="30" src="/static/sapl/frontend/img/authenticated.png"> <img height="30" width="30" src="/static/sapl/frontend/img/authenticated.png">
<span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <div class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item"><a>{{user.username}}</a></li> <a class="dropdown-item disabled">{{user.username}}</a>
<li class="dropdown-item"><a href="{% url 'sapl.base:alterar_senha' %}">Alterar senha</a></li> <div class="dropdown-divider"></div>
<li class="dropdown-item"><a href="{% url 'sapl.base:logout' %}">Sair</a></li> {% if 'parlamentares.can_vote' in user.get_all_permissions %}
</ul> <a class="dropdown-item" href="#" onclick="window.open('/voto-individual/','Voto Individual','width=1000, height=800, scrollbars=yes'); return false;">
Votar Matéria
</a>
{% endif %}
<a class="dropdown-item" href="/sistema/alterar-senha/">Alterar senha</a>
<a class="dropdown-item" href="/logout/">Sair</a>
</div>
</li> </li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</div>
{{ block.super }}
{% endblock %}
{% block content_title %}
<h1 class="mb-4">
<i class="fas fa-list"></i> {{ title }}
</h1>
<div class="mb-3">
<a href="{% url 'sapl.tce:admin_index' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> {% trans 'Voltar ao Dashboard TCE' %}
</a>
</div>
{% endblock %} {% endblock %}

Loading…
Cancel
Save