mirror of
https://gitlab2.federez.net/re2o/re2o
synced 2024-12-22 23:13:46 +00:00
Add customisation to Django Contrib Admin
The default theme of Django Contrib Admin is not really great. This theme the Django Admin with Re2o logo and colors. It also comes with a new dynamic-generated menu to navigate in the admin interface. A new index page override the global index of Django Contrib Admin to prepare for new features. This patch is part of the Aube patchset for Re2o, targeting the use of Django Contrib Admin as a manage interface for active members.
This commit is contained in:
Alexandre Iooss
klafyvel
parent
a7d7cbd261
commit
10c6a268d2
4 changed files with 311 additions and 0 deletions
|
|
@ -46,10 +46,15 @@ from __future__ import unicode_literals
|
|||
from django.conf import settings
|
||||
from django.conf.urls import include, url
|
||||
from django.contrib import admin
|
||||
from django.utils.translation import gettext_lazy as _
|
||||
from django.views.generic import RedirectView
|
||||
|
||||
from .views import index, about_page, contact_page
|
||||
|
||||
# Admin site configuration
|
||||
admin.site.index_title = _('Homepage')
|
||||
admin.site.index_template = 'admin/custom_index.html'
|
||||
|
||||
handler500 = 're2o.views.handler500'
|
||||
handler404 = 're2o.views.handler404'
|
||||
|
||||
|
|
|
|||
158
static/css/admin.css
Normal file
158
static/css/admin.css
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
/*
|
||||
* SPDX-License-Identifier: GPL-2.0-or-later
|
||||
*
|
||||
* Copyright © 2019 Alexandre Iooss
|
||||
*
|
||||
* This is the custom style for Django Contrib Admin
|
||||
*/
|
||||
|
||||
/* Colors */
|
||||
#header {
|
||||
background-color: #222;
|
||||
border-bottom: solid 3px #f9a01b;
|
||||
}
|
||||
|
||||
.module h2, .module caption, .inline-group h2 {
|
||||
background: #e6e0d8;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
a.section:link, a.section:visited {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
#user-tools a {
|
||||
border-bottom: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.breadcrumbs {
|
||||
background: #3c3c3c;
|
||||
}
|
||||
|
||||
.button, input[type=submit], input[type=button], .submit-row input, a.button {
|
||||
background: #d8a456;
|
||||
}
|
||||
|
||||
.button:active, input[type=submit]:active, input[type=button]:active, .button:focus, input[type=submit]:focus,
|
||||
input[type=button]:focus, .button:hover, input[type=submit]:hover, input[type=button]:hover {
|
||||
background: #b98d4a;
|
||||
}
|
||||
|
||||
.button.default, input[type=submit].default, .submit-row input.default {
|
||||
background: #b98d4a;
|
||||
}
|
||||
|
||||
.button.default:active, input[type=submit].default:active, .button.default:focus, input[type=submit].default:focus,
|
||||
.button.default:hover, input[type=submit].default:hover {
|
||||
background: #a7752b;
|
||||
}
|
||||
|
||||
/* Image in branding */
|
||||
img.banding-logo {
|
||||
margin-top: -3px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* Navbar menu */
|
||||
#nav {
|
||||
padding: 0;
|
||||
margin: 0 0 0 20px;
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
border-bottom: none;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#nav div.dropdown:hover > a, #nav div.dropdown:focus > a {
|
||||
text-decoration: none;
|
||||
color: #79aec8;
|
||||
}
|
||||
|
||||
#nav a.activated {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#nav div.dropdown {
|
||||
position: relative; /* needed to position the dropdown content */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#nav div.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #444444;
|
||||
min-width: 220px;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#nav div.dropdown-content a {
|
||||
color: #fff;
|
||||
padding: 7px 8px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
#nav div.dropdown-content a:hover {
|
||||
background-color: #636363;
|
||||
}
|
||||
|
||||
#nav div.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Fix navigation hidden */
|
||||
#header {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.login #header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
#footer {
|
||||
padding: 20px 40px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.login #footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
#footer select {
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Pull footer to bottom */
|
||||
#content {
|
||||
min-height: calc(100vh - 310px);
|
||||
}
|
||||
|
||||
.login #content {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Recenter login button */
|
||||
.login .submit-row {
|
||||
padding: 1em 0 0 8.5em !important;
|
||||
}
|
||||
|
||||
/* Dashboard should take all page */
|
||||
.dashboard #content {
|
||||
width: auto;
|
||||
}
|
||||
91
templates/admin/base_site.html
Normal file
91
templates/admin/base_site.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
{% extends "admin/base.html" %}
|
||||
{% comment %}
|
||||
SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
Copyright © 2019 Alexandre Iooss
|
||||
{% endcomment %}
|
||||
|
||||
{% load i18n staticfiles %}
|
||||
|
||||
{% block title %}{{ title }} | {{ name_website }}{% endblock %}
|
||||
|
||||
{% block branding %}
|
||||
<h1 id="site-name">
|
||||
<a href="{% url 'index' %}">
|
||||
<img class="banding-logo" src="{% static 'images/logo_re2o_navbar.svg' %}" alt=""/>
|
||||
</a>
|
||||
<a href="{% url 'index' %}">
|
||||
{{ name_website }}
|
||||
</a>
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block nav-global %}
|
||||
<div id="nav">
|
||||
{% if available_apps %}
|
||||
{% for app in available_apps %}
|
||||
<div class="dropdown">
|
||||
{% if app_list|length == 1 and app.name == app_list.0.name %}
|
||||
<a href="{{ app.app_url }}" class="activated">{{ app.name }}</a>
|
||||
{% else %}
|
||||
<a href="{{ app.app_url }}">{{ app.name }}</a>
|
||||
{% endif %}
|
||||
<div class="dropdown-content">
|
||||
{% for model in app.models %}
|
||||
{% if model.admin_url %}
|
||||
<a href="{{ model.admin_url }}">{{ model.name }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if not forloop.last %}/{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extrahead %}
|
||||
{# Favicon with iOS, Android, touchbar support #}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon/favicon-32x32.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon/favicon-16x16.png' %}">
|
||||
<link rel="manifest" href="{% static 'favicon/site.webmanifest' %}">
|
||||
<link rel="mask-icon" href="{% static 'favicon/safari-pinned-tab.svg' %}" color="#5bbad5">
|
||||
<link rel="shortcut icon" href="{% static 'favicon/favicon.ico' %}">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
{% endblock %}
|
||||
|
||||
{% block extrastyle %}
|
||||
<link rel="stylesheet" type="text/css" href="{% static "css/admin.css" %}"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<div id="footer">
|
||||
<p>
|
||||
{{ name_website }} {% trans "powered by" %}
|
||||
<a href="{% url 'about' %}">Re2o 2016–2019</a>.
|
||||
</p>
|
||||
<p>
|
||||
{% blocktrans trimmed %}
|
||||
This software is under the terms of the
|
||||
<a href="http://www.gnu.org/licenses/gpl-2.0.txt" target="_blank" rel="nofollow">GPLv2</a> License.
|
||||
{% endblocktrans %}
|
||||
</p>
|
||||
<form action="{% url 'set_language' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<select title="language" name="language" onchange="this.form.submit()">
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
{% get_available_languages as LANGUAGES %}
|
||||
{% get_language_info_list for LANGUAGES as languages %}
|
||||
{% for language in languages %}
|
||||
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
|
||||
{{ language.name_local }} ({{ language.code }})
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<noscript>
|
||||
<input type="submit">
|
||||
</noscript>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
57
templates/admin/custom_index.html
Normal file
57
templates/admin/custom_index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
{% extends "admin/index.html" %}
|
||||
{% comment %}
|
||||
SPDX-License-Identifier: GPL-2.0-or-later
|
||||
|
||||
Copyright © 2019 Alexandre Iooss
|
||||
{% endcomment %}
|
||||
|
||||
{% load i18n static %}
|
||||
|
||||
{% block content_title %}
|
||||
<h1>{% blocktrans %}Welcome to {{ name_website }}{% endblocktrans %}</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="content-main">
|
||||
<p>
|
||||
{% blocktrans %}You are on the operator interface. Here you will be able to manage the network and users
|
||||
from the top left menu. You can also go read the developer documentation.{% endblocktrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% blocktrans %}To go back to the main site, click "View site" button in top right menu.{% endblocktrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
<div id="content-related">
|
||||
<div class="module" id="recent-actions-module">
|
||||
<h2>{% trans 'My account' %}</h2>
|
||||
<h3>{% trans 'My recent actions' %}</h3>
|
||||
{% load log %}
|
||||
{% get_admin_log 10 as admin_log for_user user %}
|
||||
{% if not admin_log %}
|
||||
<p>{% trans 'None available' %}</p>
|
||||
{% else %}
|
||||
<ul class="actionlist">
|
||||
{% for entry in admin_log %}
|
||||
<li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
|
||||
{% if entry.is_deletion or not entry.get_admin_url %}
|
||||
{{ entry.object_repr }}
|
||||
{% else %}
|
||||
<a href="{{ entry.get_admin_url }}">{{ entry.object_repr }}</a>
|
||||
{% endif %}
|
||||
<br/>
|
||||
{% if entry.content_type %}
|
||||
<span class="mini quiet">{% filter capfirst %}
|
||||
{{ entry.content_type }}{% endfilter %}</span>
|
||||
{% else %}
|
||||
<span class="mini quiet">{% trans 'Unknown content' %}</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue