core: improve error page

passbook/core/templates/base/page.html

@@ -1,11 +1,7 @@
 {% extends "base/skeleton.html" %}
 
-{% load static %}
 {% load i18n %}
 
-{% load passbook_is_active %}
-{% load passbook_utils %}
-
 {% block body %}
 <pb-messages url="{% url 'passbook_api:messages-list' %}"></pb-messages>
 <div class="pf-c-page">

passbook/core/templates/base/skeleton.html

@@ -25,12 +25,10 @@
         {% if 'passbook_impersonate_user' in request.session %}
         <div class="pf-c-banner pf-m-warning pf-c-alert pf-m-sticky">
             <div class="pf-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap" style="height: 100%;">
-                <div class=""></div>
                 <div class="pf-u-display-none pf-u-display-block-on-lg">
                     {% blocktrans with user=user %}You're currently impersonating {{ user }}.{% endblocktrans %}
                     <a href="{% url 'passbook_core:impersonate-end' %}?back={{ request.get_full_path }}" id="acceptMessage">{% trans 'Stop impersonation' %}</a>
                 </div>
-                <div class=""></div>
             </div>
         </div>
         {% endif %}

passbook/core/templates/error/generic.html

@@ -1,24 +1,26 @@
-{% extends 'login/base_full.html' %}
+{% extends 'base/page.html' %}
 
-{% load static %}
 {% load i18n %}
 {% load passbook_utils %}
 
-{% block title %}
-{% trans card_title %}
-{% endblock %}
-
-{% block card_title %}
-{% trans card_title %}
-{% endblock %}
-
-{% block card %}
-<form method="POST" class="pf-c-form">
-    {% if message %}
-    <h3>{% trans message %}</h3>
-    {% endif %}
-    {% if 'back' in request.GET %}
-    <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
-    {% endif %}
-</form>
+{% block body %}
+<section class="pf-c-page__main-section pf-m-no-padding-mobile pf-m-xl">
+    <div class="pf-c-empty-state">
+        <div class="pf-c-empty-state__content">
+            <i class="fas fa-exclamation-circle pf-c-empty-state__icon" aria-hidden="true"></i>
+            <h1 class="pf-c-title pf-m-lg">
+                {% trans title %}
+            </h1>
+            <div class="pf-c-empty-state__body">
+                {% if message %}
+                <h3>{% trans message %}</h3>
+                {% endif %}
+            </div>
+            {% if 'back' in request.GET %}
+            <a href="{% back %}" class="pf-c-button pf-m-primary pf-m-block">{% trans 'Back' %}</a>
+            {% endif %}
+            <a href="/" class="pf-c-button pf-m-primary pf-m-block">{% trans 'Go to home' %}</a>
+        </div>
+    </div>
+</section>
 {% endblock %}

passbook/core/views/error.py

@@ -29,7 +29,7 @@ class ServerErrorTemplateResponse(TemplateResponse, HttpResponseServerError):
 class BadRequestView(TemplateView):
     """Show Bad Request message"""
 
-    extra_context = {"card_title": "Bad Request"}
+    extra_context = {"title": "Bad Request"}
 
     response_class = BadRequestTemplateResponse
     template_name = "error/generic.html"
@@ -38,7 +38,7 @@ class BadRequestView(TemplateView):
 class ForbiddenView(TemplateView):
     """Show Forbidden message"""
 
-    extra_context = {"card_title": "Forbidden"}
+    extra_context = {"title": "Forbidden"}
 
     response_class = ForbiddenTemplateResponse
     template_name = "error/generic.html"
@@ -47,7 +47,7 @@ class ForbiddenView(TemplateView):
 class NotFoundView(TemplateView):
     """Show Not Found message"""
 
-    extra_context = {"card_title": "Not Found"}
+    extra_context = {"title": "Not Found"}
 
     response_class = NotFoundTemplateResponse
     template_name = "error/generic.html"
@@ -56,7 +56,7 @@ class NotFoundView(TemplateView):
 class ServerErrorView(TemplateView):
     """Show Server Error message"""
 
-    extra_context = {"card_title": "Server Error"}
+    extra_context = {"title": "Server Error"}
 
     response_class = ServerErrorTemplateResponse
     template_name = "error/generic.html"

passbook/static/static/dist/passbook.css

@@ -307,3 +307,7 @@ input[data-is-monospace] {
 .pf-c-content h1 :first-child {
     margin-right: var(--pf-global--spacer--sm);
 }
+
+.pf-c-empty-state {
+    height: 100vh;
+}

passbook/static/static/src/passbook.css

@@ -307,3 +307,7 @@ input[data-is-monospace] {
 .pf-c-content h1 :first-child {
     margin-right: var(--pf-global--spacer--sm);
 }
+
+.pf-c-empty-state {
+    height: 100vh;
+}