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.

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'
 

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;
+}

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 %}

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 %}