From 82654b3fd9b8e4c8b60eb9d526406710cbde3432 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Thu, 27 Feb 2020 14:59:34 +0100 Subject: [PATCH] ui: re-organize some of the navigation to make it cleaner for end-users --- .../templates/administration/audit/list.html | 120 ++++++++--------- .../admin/templates/administration/base.html | 81 +++++++++++- passbook/admin/views/audit.py | 2 +- passbook/core/templates/base/page.html | 59 +++++++++ passbook/core/templates/overview/base.html | 122 +----------------- passbook/static/static/passbook/brand.svg | 2 +- passbook/static/static/passbook/pf.css | 114 ++++++++++++++++ 7 files changed, 322 insertions(+), 178 deletions(-) create mode 100644 passbook/core/templates/base/page.html diff --git a/passbook/admin/templates/administration/audit/list.html b/passbook/admin/templates/administration/audit/list.html index f2f89c7ba..43844f362 100644 --- a/passbook/admin/templates/administration/audit/list.html +++ b/passbook/admin/templates/administration/audit/list.html @@ -1,66 +1,68 @@ -{% extends "administration/base.html" %} +{% extends "base/page.html" %} {% load i18n %} {% load utils %} -{% block content %} -
-
-

- - {% trans 'Audit Log' %} -

-
-
-
-
-
- {% include 'partials/pagination.html' %} +{% block page_content %} +
+
+
+

+ + {% trans 'Audit Log' %} +

- - - - - - - - - - - - {% for entry in object_list %} - - - - - - - - {% endfor %} - -
{% trans 'Action' %}{% trans 'Context' %}{% trans 'User' %}{% trans 'Creation Date' %}{% trans 'Client IP' %}
-
-
{{ entry.action }}
- {{ entry.app|default:'-' }} -
- 		- {{ entry.context }} - - - {{ entry.user }} - - - - {{ entry.created }} - - - - {{ entry.client_ip }} - -
-
- {% include 'partials/pagination.html' %} +
+
+
+
+ {% include 'partials/pagination.html' %} +
+ + + + + + + + + + + + {% for entry in object_list %} + + + + + + + + {% endfor %} + +
{% trans 'Action' %}{% trans 'Context' %}{% trans 'User' %}{% trans 'Creation Date' %}{% trans 'Client IP' %}
+
+
{{ entry.action }}
+ {{ entry.app|default:'-' }} +
+ 		+ {{ entry.context }} + + + {{ entry.user }} + + + + {{ entry.created }} + + + + {{ entry.client_ip }} + +
+
+ {% include 'partials/pagination.html' %} +
-
-
+ + {% endblock %} diff --git a/passbook/admin/templates/administration/base.html b/passbook/admin/templates/administration/base.html index 25953a71a..2be718d76 100644 --- a/passbook/admin/templates/administration/base.html +++ b/passbook/admin/templates/administration/base.html @@ -1,6 +1,10 @@ -{% extends "overview/base.html" %} +{% extends "base/page.html" %} {% load static %} +{% load i18n %} + +{% load is_active %} +{% load utils %} {% block head %} {{ block.super }} @@ -12,3 +16,78 @@ {% endblock %} + +{% block page_content %} +
+
+ +
+
+
+ {% block content %} + {% endblock %} +
+{% endblock %} diff --git a/passbook/admin/views/audit.py b/passbook/admin/views/audit.py index 10d5aa48b..56b274c8f 100644 --- a/passbook/admin/views/audit.py +++ b/passbook/admin/views/audit.py @@ -12,4 +12,4 @@ class EventListView(PermissionListMixin, ListView): template_name = "administration/audit/list.html" permission_required = "passbook_audit.view_event" ordering = "-created" - paginate_by = 10 + paginate_by = 20 diff --git a/passbook/core/templates/base/page.html b/passbook/core/templates/base/page.html new file mode 100644 index 000000000..736df9119 --- /dev/null +++ b/passbook/core/templates/base/page.html @@ -0,0 +1,59 @@ +{% extends "base/skeleton.html" %} + +{% load static %} +{% load i18n %} + +{% load is_active %} +{% load utils %} + +{% block body %} +{% include 'partials/messages.html' %} +
+ {% trans 'Skip to content' %} + + {% block page_content %} + {% endblock %} +
+{% endblock %} diff --git a/passbook/core/templates/overview/base.html b/passbook/core/templates/overview/base.html index 4c3c7947d..22ef69a13 100644 --- a/passbook/core/templates/overview/base.html +++ b/passbook/core/templates/overview/base.html @@ -1,4 +1,4 @@ -{% extends "base/skeleton.html" %} +{% extends "base/page.html" %} {% load static %} {% load i18n %} @@ -6,120 +6,10 @@ {% load is_active %} {% load utils %} -{% block body %} +{% block page_content %} {% include 'partials/messages.html' %} -
- {% trans 'Skip to content' %} - -
-
- -
-
-
- {% block content %} -
-
-

Main title

-

This is a demo of the Page component.

-
-
-
- -
- {% endblock %} -
-
+
+ {% block content %} + {% endblock %} +
{% endblock %} diff --git a/passbook/static/static/passbook/brand.svg b/passbook/static/static/passbook/brand.svg index 73bd224f2..15c3f9d61 100644 --- a/passbook/static/static/passbook/brand.svg +++ b/passbook/static/static/passbook/brand.svg @@ -1,2 +1,2 @@ + width="120px" height="20px" viewBox="15 0 10 10" enable-background="new 0 0 270 10" xml:space="preserve"> diff --git a/passbook/static/static/passbook/pf.css b/passbook/static/static/passbook/pf.css index 8ba1ae9d8..742cffcfa 100644 --- a/passbook/static/static/passbook/pf.css +++ b/passbook/static/static/passbook/pf.css @@ -197,3 +197,117 @@ form .form-row p.datetime { input[data-is-monospace] { font-family: monospace; } + + +.ws-page-header { + background-color: #151515; + min-height: auto +} + +@media (min-width: 992px) { + .ws-page-header .pf-c-page__header-nav { + margin-left:12px + } +} + +.ws-page-header .pf-c-nav__scroll-button { + outline-offset: -4px; + height: 100%; + top: 0 +} + +.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__item { + margin-right: 0 +} + +.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link { + padding-top: 22px; + padding-right: var(--pf-global--spacer--md); + padding-left: var(--pf-global--spacer--md); + color: var(--pf-global--Color--light-100) +} + +@media (max-width: 991px) { + .ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link { + padding-top:10px + } +} + +.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:after { + top: 0!important; + height: 4px +} + +.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:active,.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:hover { + -webkit-transition: .5s; + transition: .5s +} + +.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link.pf-m-current,.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:active,.ws-page-header .pf-c-nav__horizontal-list .pf-c-nav__link:hover { + background-color: var(--pf-global--BackgroundColor--light-100); + color: #151515!important; + font-weight: var(--pf-global--FontWeight--normal) +} + +.ws-page-header li a:after { + content: ""; + position: absolute; + left: 50%!important; + bottom: 0; + -webkit-transform: translateX(-50%) scaleX(0); + transform: translateX(-50%) scaleX(0); + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + width: 100%; + height: 1px; + background-color: var(--pf-global--BackgroundColor--light-100); + color: #151515!important; + -webkit-transition: -webkit-transform .25s; + transition: -webkit-transform .25s; + transition: transform .25s; + transition: transform .25s,-webkit-transform .25s +} + +.ws-page-header li a:hover:after { + -webkit-transform: translateX(-50%) scaleX(1); + transform: translateX(-50%) scaleX(1) +} + +.ws-page-header li a.pf-m-current:after { + left: 0!important; + -webkit-transform: none; + transform: none +} + +.ws-page-sidebar#page-sidebar { + color: #fff; + box-shadow: none +} + +.ws-page-sidebar .pf-c-nav { + margin-top: 16px +} + +.pf-site-search { + padding: 0 0 2px; + width: 150px; + background: transparent; + -webkit-transition: .25s; + transition: .25s +} + +.ws-page-header .pf-c-page__header-brand-toggle { + display: none; + visibility: hidden +} + +@media (max-width: 768px) { + .pf-site-search { + width:100px + } + + .ws-page-header .pf-c-page__header-brand-toggle { + display: block; + visibility: visible + } +}