From 10c6a268d25d9101b9a29448c5279dd6b720bc91 Mon Sep 17 00:00:00 2001 From: Alexandre Iooss Date: Mon, 15 Apr 2019 09:45:08 +0200 Subject: [PATCH] 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 | 5 + static/css/admin.css | 158 ++++++++++++++++++++++++++++++ templates/admin/base_site.html | 91 +++++++++++++++++ templates/admin/custom_index.html | 57 +++++++++++ 4 files changed, 311 insertions(+) create mode 100644 static/css/admin.css create mode 100644 templates/admin/base_site.html create mode 100644 templates/admin/custom_index.html diff --git a/re2o/urls.py b/re2o/urls.py index fb6fcc6a..9c13965b 100644 --- a/re2o/urls.py +++ b/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' diff --git a/static/css/admin.css b/static/css/admin.css new file mode 100644 index 00000000..b8888ae4 --- /dev/null +++ b/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; +} diff --git a/templates/admin/base_site.html b/templates/admin/base_site.html new file mode 100644 index 00000000..ebccdad7 --- /dev/null +++ b/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 %} +

+ + + + + {{ name_website }} + +

+{% endblock %} + +{% block nav-global %} + +{% endblock %} + +{% block extrahead %} + {# Favicon with iOS, Android, touchbar support #} + + + + + + + +{% endblock %} + +{% block extrastyle %} + +{% endblock %} + +{% block footer %} + +{% endblock %} diff --git a/templates/admin/custom_index.html b/templates/admin/custom_index.html new file mode 100644 index 00000000..df0a330c --- /dev/null +++ b/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 %} +

{% blocktrans %}Welcome to {{ name_website }}{% endblocktrans %}

+{% endblock %} + +{% block content %} +
+

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

+

+ {% blocktrans %}To go back to the main site, click "View site" button in top right menu.{% endblocktrans %} +

+
+{% endblock %} + +{% block sidebar %} +
+
+

{% trans 'My account' %}

+

{% trans 'My recent actions' %}

+ {% load log %} + {% get_admin_log 10 as admin_log for_user user %} + {% if not admin_log %} +

{% trans 'None available' %}

+ {% else %} +
    + {% for entry in admin_log %} +
  • + {% if entry.is_deletion or not entry.get_admin_url %} + {{ entry.object_repr }} + {% else %} + {{ entry.object_repr }} + {% endif %} +
    + {% if entry.content_type %} + {% filter capfirst %} + {{ entry.content_type }}{% endfilter %} + {% else %} + {% trans 'Unknown content' %} + {% endif %} +
    • + {% endfor %} +
+ {% endif %} +
+
+{% endblock %}