Browse Source

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.
broaden_customised_reminder_message
Alexandre Iooss 7 years ago
committed by klafyvel
parent
commit
10c6a268d2
  1. 5
      re2o/urls.py
  2. 158
      static/css/admin.css
  3. 91
      templates/admin/base_site.html
  4. 57
      templates/admin/custom_index.html

5
re2o/urls.py

@ -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

@ -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

@ -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&ndash;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

@ -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…
Cancel
Save