ui: re-organize some of the navigation to make it cleaner for end-users

passbook/admin/templates/administration/audit/list.html

@@ -1,18 +1,19 @@
-{% extends "administration/base.html" %}
+{% extends "base/page.html" %}
 
 {% load i18n %}
 {% load utils %}
 
-{% block content %}
+{% block page_content %}
-<section class="pf-c-page__main-section pf-m-light">
+<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
+    <section class="pf-c-page__main-section pf-m-light">
         <div class="pf-c-content">
             <h1>
                 <i class="pf-icon pf-icon-catalog"></i>
                 {% trans 'Audit Log' %}
             </h1>
         </div>
-</section>
+    </section>
-<section class="pf-c-page__main-section pf-m-no-padding-mobile">
+    <section class="pf-c-page__main-section pf-m-no-padding-mobile">
         <div class="pf-c-card">
             <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-top">
                 {% include 'partials/pagination.html' %}
@@ -62,5 +63,6 @@
                 {% include 'partials/pagination.html' %}
             </div>
         </div>
-</section>
+    </section>
+</main>
 {% endblock %}

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 @@
 <script src="{% static 'node_modules/codemirror/mode/yaml/yaml.js' %}"></script>
 <script src="{% static 'node_modules/codemirror/mode/jinja2/jinja2.js' %}"></script>
 {% endblock %}
+
+{% block page_content %}
+<div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">
+        <nav class="pf-c-nav" id="page-default-nav-example-primary-nav" aria-label="Global">
+            <ul class="pf-c-nav__list">
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:overview' %}"
+                        class="pf-c-nav__link {% is_active_url 'passbook_admin:overview' %}">
+                        {% trans 'System Status' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:applications' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:applications' 'passbook_admin:application-create' 'passbook_admin:application-update' 'passbook_admin:application-delete' %}">
+                        {% trans 'Applications' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:sources' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:sources' 'passbook_admin:source-create' 'passbook_admin:source-update' 'passbook_admin:source-delete' %}">
+                        {% trans 'Sources' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:providers' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:providers' 'passbook_admin:provider-create' 'passbook_admin:provider-update' 'passbook_admin:provider-delete' %}">
+                        {% trans 'Providers' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:property-mappings' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:property-mappings' 'passbook_admin:property-mapping-create' 'passbook_admin:property-mapping-update' 'passbook_admin:property-mapping-delete' %}">
+                        {% trans 'Property Mappings' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:factors' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:factors' 'passbook_admin:factor-create' 'passbook_admin:factor-update' 'passbook_admin:factor-delete' %}">
+                        {% trans 'Factors' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:policies' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:policies' 'passbook_admin:policy-create' 'passbook_admin:policy-update' 'passbook_admin:policy-delete' 'passbook_admin:policy-test' %}">
+                        {% trans 'Policies' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:invitations' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:invitations' 'passbook_admin:invitation-create' 'passbook_admin:invitation-update' 'passbook_admin:invitation-delete' 'passbook_admin:invitation-test' %}">
+                        {% trans 'Invitations' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:users' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:users' 'passbook_admin:user-update' 'passbook_admin:user-delete' %}">
+                        {% trans 'Users' %}
+                    </a>
+                </li>
+                <li class="pf-c-nav__item">
+                    <a href="{% url 'passbook_admin:groups' %}"
+                        class="pf-c-nav__link {% is_active 'passbook_admin:groups' 'passbook_admin:group-update' 'passbook_admin:group-delete' %}">
+                        {% trans 'Groups' %}
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
+    {% block content %}
+    {% endblock %}
+</main>
+{% endblock %}

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

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' %}
+<div class="pf-c-page" id="page-default-nav-example">
+    <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
+    <header role="banner" class="pf-c-page__header ws-page-header">
+        <div class="pf-c-page__header-brand">
+            <div class="pf-c-page__header-brand-toggle">
+                <button class="pf-c-button pf-m-plain" type="button" id="page-default-nav-example-nav-toggle"
+                    aria-label="Global navigation" aria-expanded="true"
+                    aria-controls="page-default-nav-example-primary-nav">
+                    <i class="fas fa-bars" aria-hidden="true"></i>
+                </button>
+            </div>
+            <a class="pf-c-page__header-brand-link">
+                <img class="pf-c-brand" src="{% static 'passbook/logo.png' %}" alt="" />
+                passbook
+                <!-- <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" alt="passbook" /> -->
+            </a>
+        </div>
+        <div class="pf-c-page__header-nav">
+            <nav class="pf-c-nav" aria-label="Nav">
+                <ul class="pf-c-nav__horizontal-list ws-top-nav">
+                    <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_core:overview' %}"
+                            href="{% url 'passbook_core:overview' %}">{% trans 'Access' %}</a></li>
+                    {% if user.is_superuser %}
+                    <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_admin:overview' %}"
+                            href="{% url 'passbook_admin:overview' %}">{% trans 'Administrate' %}</a></li>
+                    <li class="pf-c-nav__item"><a class="pf-c-nav__link {% is_active_url 'passbook_admin:audit-log' %}"
+                            href="{% url 'passbook_admin:audit-log' %}">{% trans 'Monitor' %}</a></li>
+                    {% endif %}
+                </ul>
+            </nav>
+        </div>
+        <div class="pf-c-page__header-tools">
+            <div class="pf-c-page__header-tools-group pf-m-icons">
+                <a href="{% url 'passbook_core:auth-logout' %}" class="pf-c-button pf-m-plain" type="button">
+                    <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
+                </a>
+            </div>
+            <div class="pf-c-page__header-tools-group">
+                <a href="{% url 'passbook_core:user-settings' %}" class="pf-c-button">
+                    {{ user.username }}
+                </a>
+            </div>
+            <img class="pf-c-avatar" src="{% gravatar user.email %}" alt="">
+        </div>
+    </header>
+    {% block page_content %}
+    {% endblock %}
+</div>
+{% endblock %}

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' %}
-<div class="pf-c-page" id="page-default-nav-example">
+<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
-    <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content">{% trans 'Skip to content' %}</a>
-    <header role="banner" class="pf-c-page__header">
-        <div class="pf-c-page__header-brand">
-            <div class="pf-c-page__header-brand-toggle">
-                <button class="pf-c-button pf-m-plain" type="button" id="page-default-nav-example-nav-toggle"
-                    aria-label="Global navigation" aria-expanded="true"
-                    aria-controls="page-default-nav-example-primary-nav">
-                    <i class="fas fa-bars" aria-hidden="true"></i>
-                </button>
-            </div>
-            <a class="pf-c-page__header-brand-link">
-                <img class="pf-c-brand" src="{% static 'passbook/logo.png' %}" alt="" />
-                <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" alt="passbook" />
-            </a>
-        </div>
-        <div class="pf-c-page__header-tools">
-            <div class="pf-c-page__header-tools-group pf-m-icons">
-                <a href="{% url 'passbook_core:auth-logout' %}" class="pf-c-button pf-m-plain" type="button">
-                    <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
-                </a>
-            </div>
-            <div class="pf-c-page__header-tools-group">
-                <a href="{% url 'passbook_core:user-settings' %}" class="pf-c-button">
-                    {{ user.username }}
-                </a>
-            </div>
-            <img class="pf-c-avatar" src="{% gravatar user.email %}" alt="">
-        </div>
-    </header>
-    <div class="pf-c-page__sidebar pf-m-dark">
-        <div class="pf-c-page__sidebar-body">
-            <nav class="pf-c-nav pf-m-dark" id="page-default-nav-example-primary-nav" aria-label="Global">
-                <ul class="pf-c-nav__list">
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_core:overview' %}" class="pf-c-nav__link  {% is_active_url 'passbook_core:overview' %}">
-                            {% trans 'Overview' %}
-                        </a>
-                    </li>
-                    {% if user.is_superuser %}
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:overview' %}" class="pf-c-nav__link {% is_active_url 'passbook_admin:overview' %}">
-                            {% trans 'System Status' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:applications' %}" class="pf-c-nav__link {% is_active 'passbook_admin:applications' 'passbook_admin:application-create' 'passbook_admin:application-update' 'passbook_admin:application-delete' %}">
-                            {% trans 'Applications' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:sources' %}" class="pf-c-nav__link {% is_active 'passbook_admin:sources' 'passbook_admin:source-create' 'passbook_admin:source-update' 'passbook_admin:source-delete' %}">
-                            {% trans 'Sources' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:providers' %}" class="pf-c-nav__link {% is_active 'passbook_admin:providers' 'passbook_admin:provider-create' 'passbook_admin:provider-update' 'passbook_admin:provider-delete' %}">
-                            {% trans 'Providers' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:property-mappings' %}" class="pf-c-nav__link {% is_active 'passbook_admin:property-mappings' 'passbook_admin:property-mapping-create' 'passbook_admin:property-mapping-update' 'passbook_admin:property-mapping-delete' %}">
-                            {% trans 'Property Mappings' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:factors' %}" class="pf-c-nav__link {% is_active 'passbook_admin:factors' 'passbook_admin:factor-create' 'passbook_admin:factor-update' 'passbook_admin:factor-delete' %}">
-                            {% trans 'Factors' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:policies' %}" class="pf-c-nav__link {% is_active 'passbook_admin:policies' 'passbook_admin:policy-create' 'passbook_admin:policy-update' 'passbook_admin:policy-delete' 'passbook_admin:policy-test' %}">
-                            {% trans 'Policies' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:invitations' %}" class="pf-c-nav__link {% is_active 'passbook_admin:invitations' 'passbook_admin:invitation-create' 'passbook_admin:invitation-update' 'passbook_admin:invitation-delete' 'passbook_admin:invitation-test' %}">
-                            {% trans 'Invitations' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:users' %}" class="pf-c-nav__link {% is_active 'passbook_admin:users' 'passbook_admin:user-update' 'passbook_admin:user-delete' %}">
-                            {% trans 'Users' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:groups' %}" class="pf-c-nav__link {% is_active 'passbook_admin:groups' 'passbook_admin:group-update' 'passbook_admin:group-delete' %}">
-                            {% trans 'Groups' %}
-                        </a>
-                    </li>
-                    <li class="pf-c-nav__item">
-                        <a href="{% url 'passbook_admin:audit-log' %}" class="pf-c-nav__link {% is_active 'passbook_admin:audit-log' %}">
-                            {% trans 'Audit Log' %}
-                        </a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </nav>
-        </div>
-    </div>
-    <main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
     {% block content %}
-            <section class="pf-c-page__main-section pf-m-light">
-                <div class="pf-c-content">
-                    <h1>Main title</h1>
-                    <p>This is a demo of the Page component.</p>
-                </div>
-            </section>
-            <section class="pf-c-page__main-section">
-
-            </section>
     {% endblock %}
-    </main>
+</main>
-</div>
 {% endblock %}

passbook/static/static/passbook/brand.svg

@@ -1,2 +1,2 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-  width="270px" height="20px" viewBox="0 0 150 10" enable-background="new 0 0 270 10" xml:space="preserve"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#fff;}</style></defs><g class="cls-1"><path class="cls-2" d="M1.65,11V2.45H2.87V3a2.81,2.81,0,0,1,.47-.45A1.13,1.13,0,0,1,4,2.38,1.11,1.11,0,0,1,5.1,3a1.55,1.55,0,0,1,.16.5,5.61,5.61,0,0,1,0,.81V6.58c0,.45,0,.77,0,1a1.17,1.17,0,0,1-.55.9,1.23,1.23,0,0,1-.7.16,1.35,1.35,0,0,1-.64-.16A1.53,1.53,0,0,1,2.89,8h0v3ZM4.08,4.43a1.21,1.21,0,0,0-.14-.6.51.51,0,0,0-.46-.22A.54.54,0,0,0,3,3.82a.8.8,0,0,0-.17.54V6.73A.68.68,0,0,0,3,7.2a.6.6,0,0,0,.44.18A.53.53,0,0,0,4,7.17a1,1,0,0,0,.12-.5Z"/><path class="cls-2" d="M8.63,8.54V7.91h0a2.24,2.24,0,0,1-.48.52,1.13,1.13,0,0,1-.69.18A1.39,1.39,0,0,1,7,8.54a1.09,1.09,0,0,1-.43-.24,1.32,1.32,0,0,1-.33-.49A2.33,2.33,0,0,1,6.11,7a4.89,4.89,0,0,1,.08-.91,1.51,1.51,0,0,1,.31-.65,1.44,1.44,0,0,1,.59-.38A3.19,3.19,0,0,1,8,4.93h.59V4.33a1,1,0,0,0-.13-.52A.52.52,0,0,0,8,3.61a.71.71,0,0,0-.44.15.78.78,0,0,0-.26.46H6.13A2,2,0,0,1,6.69,2.9a1.73,1.73,0,0,1,.57-.38A2,2,0,0,1,8,2.38a2.18,2.18,0,0,1,.72.12,1.71,1.71,0,0,1,.59.36,2,2,0,0,1,.38.6,2.18,2.18,0,0,1,.14.84V8.54Zm0-2.62-.34,0a1.2,1.2,0,0,0-.67.18.76.76,0,0,0-.29.68.89.89,0,0,0,.17.56A.55.55,0,0,0,8,7.53a.63.63,0,0,0,.49-.2.91.91,0,0,0,.17-.58Z"/><path class="cls-2" d="M13,4.16a.59.59,0,0,0-.2-.47.65.65,0,0,0-.42-.16.59.59,0,0,0-.45.19.66.66,0,0,0-.15.43.8.8,0,0,0,.08.33.85.85,0,0,0,.44.29l.71.29a1.73,1.73,0,0,1,.95.72,2,2,0,0,1,.26,1,1.85,1.85,0,0,1-.52,1.3,1.56,1.56,0,0,1-.58.39,1.88,1.88,0,0,1-2-.32,1.58,1.58,0,0,1-.4-.57,1.81,1.81,0,0,1-.17-.8h1.15a1.11,1.11,0,0,0,.17.47.56.56,0,0,0,.49.22.71.71,0,0,0,.47-.18A.59.59,0,0,0,13,6.8a.69.69,0,0,0-.13-.43,1.08,1.08,0,0,0-.48-.32l-.59-.21a2.08,2.08,0,0,1-.9-.64,1.66,1.66,0,0,1-.33-1,1.89,1.89,0,0,1,.14-.72,1.78,1.78,0,0,1,.4-.57,1.5,1.5,0,0,1,.56-.36,1.82,1.82,0,0,1,.7-.13,1.93,1.93,0,0,1,.69.13,1.6,1.6,0,0,1,.54.38,1.85,1.85,0,0,1,.36.57,1.82,1.82,0,0,1,.13.7Z"/><path class="cls-2" d="M17.2,4.16a.63.63,0,0,0-.2-.47.69.69,0,0,0-.43-.16.55.55,0,0,0-.44.19.62.62,0,0,0-.16.43.68.68,0,0,0,.09.33.81.81,0,0,0,.43.29l.72.29a1.7,1.7,0,0,1,.94.72,2,2,0,0,1,.26,1,1.85,1.85,0,0,1-.52,1.3,1.61,1.61,0,0,1-.57.39,1.81,1.81,0,0,1-.74.15,1.76,1.76,0,0,1-1.24-.47,1.61,1.61,0,0,1-.41-.57,2,2,0,0,1-.17-.8h1.15a1.12,1.12,0,0,0,.18.47.53.53,0,0,0,.48.22.72.72,0,0,0,.48-.18.59.59,0,0,0,.21-.48.69.69,0,0,0-.14-.43,1,1,0,0,0-.48-.32l-.58-.21a2.06,2.06,0,0,1-.91-.64,1.66,1.66,0,0,1-.33-1A1.89,1.89,0,0,1,15,3.44a1.78,1.78,0,0,1,.4-.57,1.58,1.58,0,0,1,.56-.36,1.82,1.82,0,0,1,.7-.13,1.93,1.93,0,0,1,.69.13,1.75,1.75,0,0,1,.55.38,1.85,1.85,0,0,1,.36.57,2,2,0,0,1,.13.7Z"/><path class="cls-2" d="M19.2,8.54V0h1.22V3h0a1.53,1.53,0,0,1,.48-.47,1.39,1.39,0,0,1,.65-.16,1.26,1.26,0,0,1,.69.16,1.35,1.35,0,0,1,.4.39,1.18,1.18,0,0,1,.15.51,7.72,7.72,0,0,1,0,1V6.73a5.56,5.56,0,0,1-.05.8,1.56,1.56,0,0,1-.15.5,1.12,1.12,0,0,1-1.07.58,1.15,1.15,0,0,1-.7-.18A3.79,3.79,0,0,1,20.42,8v.55Zm2.44-4.21a1,1,0,0,0-.13-.51A.5.5,0,0,0,21,3.61a.57.57,0,0,0-.44.18.66.66,0,0,0-.18.48V6.63a.83.83,0,0,0,.17.54.52.52,0,0,0,.45.21.49.49,0,0,0,.45-.22,1.11,1.11,0,0,0,.15-.6Z"/><path class="cls-2" d="M23.76,4.49a4.83,4.83,0,0,1,0-.68A1.55,1.55,0,0,1,24,3.26a1.59,1.59,0,0,1,.62-.64,1.84,1.84,0,0,1,1-.24,1.87,1.87,0,0,1,1,.24,1.59,1.59,0,0,1,.62.64,1.55,1.55,0,0,1,.18.55,4.83,4.83,0,0,1,.05.68v2a4.72,4.72,0,0,1-.05.68,1.55,1.55,0,0,1-.18.55,1.59,1.59,0,0,1-.62.64,1.87,1.87,0,0,1-1,.24,1.84,1.84,0,0,1-1-.24A1.59,1.59,0,0,1,24,7.73a1.55,1.55,0,0,1-.18-.55,4.72,4.72,0,0,1,0-.68ZM25,6.69a.72.72,0,0,0,.17.52.53.53,0,0,0,.43.17A.55.55,0,0,0,26,7.21a.72.72,0,0,0,.16-.52V4.3A.74.74,0,0,0,26,3.78a.55.55,0,0,0-.44-.17.53.53,0,0,0-.43.17A.74.74,0,0,0,25,4.3Z"/><path class="cls-2" d="M28.2,4.49a4.83,4.83,0,0,1,.05-.68,1.55,1.55,0,0,1,.18-.55,1.59,1.59,0,0,1,.62-.64,1.84,1.84,0,0,1,1-.24,1.87,1.87,0,0,1,1,.24,1.59,1.59,0,0,1,.62.64,1.55,1.55,0,0,1,.18.55,4.83,4.83,0,0,1,.05.68v2a4.72,4.72,0,0,1-.05.68,1.55,1.55,0,0,1-.18.55,1.59,1.59,0,0,1-.62.64,1.87,1.87,0,0,1-1,.24,1.84,1.84,0,0,1-1-.24,1.59,1.59,0,0,1-.62-.64,1.55,1.55,0,0,1-.18-.55,4.72,4.72,0,0,1-.05-.68Zm1.22,2.2a.72.72,0,0,0,.17.52.53.53,0,0,0,.43.17.55.55,0,0,0,.44-.17.72.72,0,0,0,.16-.52V4.3a.74.74,0,0,0-.16-.52A.55.55,0,0,0,30,3.61a.53.53,0,0,0-.43.17.74.74,0,0,0-.17.52Z"/><path class="cls-2" d="M32.75,8.54V0H34V5.11h0l1.47-2.66H36.7L35.24,4.93,37,8.54H35.66l-1.1-2.63L34,6.83V8.54Z"/></g></svg>
+  width="120px" height="20px" viewBox="15 0 10 10" enable-background="new 0 0 270 10" xml:space="preserve"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#fff;}</style></defs><g class="cls-1"><path class="cls-2" d="M1.65,11V2.45H2.87V3a2.81,2.81,0,0,1,.47-.45A1.13,1.13,0,0,1,4,2.38,1.11,1.11,0,0,1,5.1,3a1.55,1.55,0,0,1,.16.5,5.61,5.61,0,0,1,0,.81V6.58c0,.45,0,.77,0,1a1.17,1.17,0,0,1-.55.9,1.23,1.23,0,0,1-.7.16,1.35,1.35,0,0,1-.64-.16A1.53,1.53,0,0,1,2.89,8h0v3ZM4.08,4.43a1.21,1.21,0,0,0-.14-.6.51.51,0,0,0-.46-.22A.54.54,0,0,0,3,3.82a.8.8,0,0,0-.17.54V6.73A.68.68,0,0,0,3,7.2a.6.6,0,0,0,.44.18A.53.53,0,0,0,4,7.17a1,1,0,0,0,.12-.5Z"/><path class="cls-2" d="M8.63,8.54V7.91h0a2.24,2.24,0,0,1-.48.52,1.13,1.13,0,0,1-.69.18A1.39,1.39,0,0,1,7,8.54a1.09,1.09,0,0,1-.43-.24,1.32,1.32,0,0,1-.33-.49A2.33,2.33,0,0,1,6.11,7a4.89,4.89,0,0,1,.08-.91,1.51,1.51,0,0,1,.31-.65,1.44,1.44,0,0,1,.59-.38A3.19,3.19,0,0,1,8,4.93h.59V4.33a1,1,0,0,0-.13-.52A.52.52,0,0,0,8,3.61a.71.71,0,0,0-.44.15.78.78,0,0,0-.26.46H6.13A2,2,0,0,1,6.69,2.9a1.73,1.73,0,0,1,.57-.38A2,2,0,0,1,8,2.38a2.18,2.18,0,0,1,.72.12,1.71,1.71,0,0,1,.59.36,2,2,0,0,1,.38.6,2.18,2.18,0,0,1,.14.84V8.54Zm0-2.62-.34,0a1.2,1.2,0,0,0-.67.18.76.76,0,0,0-.29.68.89.89,0,0,0,.17.56A.55.55,0,0,0,8,7.53a.63.63,0,0,0,.49-.2.91.91,0,0,0,.17-.58Z"/><path class="cls-2" d="M13,4.16a.59.59,0,0,0-.2-.47.65.65,0,0,0-.42-.16.59.59,0,0,0-.45.19.66.66,0,0,0-.15.43.8.8,0,0,0,.08.33.85.85,0,0,0,.44.29l.71.29a1.73,1.73,0,0,1,.95.72,2,2,0,0,1,.26,1,1.85,1.85,0,0,1-.52,1.3,1.56,1.56,0,0,1-.58.39,1.88,1.88,0,0,1-2-.32,1.58,1.58,0,0,1-.4-.57,1.81,1.81,0,0,1-.17-.8h1.15a1.11,1.11,0,0,0,.17.47.56.56,0,0,0,.49.22.71.71,0,0,0,.47-.18A.59.59,0,0,0,13,6.8a.69.69,0,0,0-.13-.43,1.08,1.08,0,0,0-.48-.32l-.59-.21a2.08,2.08,0,0,1-.9-.64,1.66,1.66,0,0,1-.33-1,1.89,1.89,0,0,1,.14-.72,1.78,1.78,0,0,1,.4-.57,1.5,1.5,0,0,1,.56-.36,1.82,1.82,0,0,1,.7-.13,1.93,1.93,0,0,1,.69.13,1.6,1.6,0,0,1,.54.38,1.85,1.85,0,0,1,.36.57,1.82,1.82,0,0,1,.13.7Z"/><path class="cls-2" d="M17.2,4.16a.63.63,0,0,0-.2-.47.69.69,0,0,0-.43-.16.55.55,0,0,0-.44.19.62.62,0,0,0-.16.43.68.68,0,0,0,.09.33.81.81,0,0,0,.43.29l.72.29a1.7,1.7,0,0,1,.94.72,2,2,0,0,1,.26,1,1.85,1.85,0,0,1-.52,1.3,1.61,1.61,0,0,1-.57.39,1.81,1.81,0,0,1-.74.15,1.76,1.76,0,0,1-1.24-.47,1.61,1.61,0,0,1-.41-.57,2,2,0,0,1-.17-.8h1.15a1.12,1.12,0,0,0,.18.47.53.53,0,0,0,.48.22.72.72,0,0,0,.48-.18.59.59,0,0,0,.21-.48.69.69,0,0,0-.14-.43,1,1,0,0,0-.48-.32l-.58-.21a2.06,2.06,0,0,1-.91-.64,1.66,1.66,0,0,1-.33-1A1.89,1.89,0,0,1,15,3.44a1.78,1.78,0,0,1,.4-.57,1.58,1.58,0,0,1,.56-.36,1.82,1.82,0,0,1,.7-.13,1.93,1.93,0,0,1,.69.13,1.75,1.75,0,0,1,.55.38,1.85,1.85,0,0,1,.36.57,2,2,0,0,1,.13.7Z"/><path class="cls-2" d="M19.2,8.54V0h1.22V3h0a1.53,1.53,0,0,1,.48-.47,1.39,1.39,0,0,1,.65-.16,1.26,1.26,0,0,1,.69.16,1.35,1.35,0,0,1,.4.39,1.18,1.18,0,0,1,.15.51,7.72,7.72,0,0,1,0,1V6.73a5.56,5.56,0,0,1-.05.8,1.56,1.56,0,0,1-.15.5,1.12,1.12,0,0,1-1.07.58,1.15,1.15,0,0,1-.7-.18A3.79,3.79,0,0,1,20.42,8v.55Zm2.44-4.21a1,1,0,0,0-.13-.51A.5.5,0,0,0,21,3.61a.57.57,0,0,0-.44.18.66.66,0,0,0-.18.48V6.63a.83.83,0,0,0,.17.54.52.52,0,0,0,.45.21.49.49,0,0,0,.45-.22,1.11,1.11,0,0,0,.15-.6Z"/><path class="cls-2" d="M23.76,4.49a4.83,4.83,0,0,1,0-.68A1.55,1.55,0,0,1,24,3.26a1.59,1.59,0,0,1,.62-.64,1.84,1.84,0,0,1,1-.24,1.87,1.87,0,0,1,1,.24,1.59,1.59,0,0,1,.62.64,1.55,1.55,0,0,1,.18.55,4.83,4.83,0,0,1,.05.68v2a4.72,4.72,0,0,1-.05.68,1.55,1.55,0,0,1-.18.55,1.59,1.59,0,0,1-.62.64,1.87,1.87,0,0,1-1,.24,1.84,1.84,0,0,1-1-.24A1.59,1.59,0,0,1,24,7.73a1.55,1.55,0,0,1-.18-.55,4.72,4.72,0,0,1,0-.68ZM25,6.69a.72.72,0,0,0,.17.52.53.53,0,0,0,.43.17A.55.55,0,0,0,26,7.21a.72.72,0,0,0,.16-.52V4.3A.74.74,0,0,0,26,3.78a.55.55,0,0,0-.44-.17.53.53,0,0,0-.43.17A.74.74,0,0,0,25,4.3Z"/><path class="cls-2" d="M28.2,4.49a4.83,4.83,0,0,1,.05-.68,1.55,1.55,0,0,1,.18-.55,1.59,1.59,0,0,1,.62-.64,1.84,1.84,0,0,1,1-.24,1.87,1.87,0,0,1,1,.24,1.59,1.59,0,0,1,.62.64,1.55,1.55,0,0,1,.18.55,4.83,4.83,0,0,1,.05.68v2a4.72,4.72,0,0,1-.05.68,1.55,1.55,0,0,1-.18.55,1.59,1.59,0,0,1-.62.64,1.87,1.87,0,0,1-1,.24,1.84,1.84,0,0,1-1-.24,1.59,1.59,0,0,1-.62-.64,1.55,1.55,0,0,1-.18-.55,4.72,4.72,0,0,1-.05-.68Zm1.22,2.2a.72.72,0,0,0,.17.52.53.53,0,0,0,.43.17.55.55,0,0,0,.44-.17.72.72,0,0,0,.16-.52V4.3a.74.74,0,0,0-.16-.52A.55.55,0,0,0,30,3.61a.53.53,0,0,0-.43.17.74.74,0,0,0-.17.52Z"/><path class="cls-2" d="M32.75,8.54V0H34V5.11h0l1.47-2.66H36.7L35.24,4.93,37,8.54H35.66l-1.1-2.63L34,6.83V8.54Z"/></g></svg>

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