🚧 error page redesign

froide/helper/templates/helper/search/multi_search.html

@@ -0,0 +1,23 @@
+{% load i18n %}
+
+<form action="{% url "foirequest-list" %}" method="get" class="froide-multi-search">
+  <div class="d-grid gap-2 d-md-flex">
+    <select class="form-select flex-grow-0{% if small %} form-select-sm{% endif %}">
+      {% for search in searches %}
+      <option value="{{ search.url }}">
+        {{ search.title }}
+      </option>
+      {% endfor %}
+    </select>
+    <input
+      name="q"
+      type="search"
+      class="form-control w-100{% if small %} form-control-sm{% endif %}"
+      placeholder="{% trans "Search term" %}" />
+    <button type="submit" class="btn btn-outline-primary text-nowrap{% if small %} btn-sm{% endif %}">
+      <i class="fa fa-search"></i>
+      <span class="visually-hidden">{% trans "Search" %}</span>
+      <span class="d-md-none d-lg-inline" aria-hidden="true">{% trans "Search" %}</span>
+    </button>
+  </div>
+</form>

froide/helper/templatetags/search_helper.py

@@ -14,3 +14,10 @@ def render_search_list(context, current, num_results=None, query=""):
         "searches": searches,
         "query": query,
     }
+
+
+@register.inclusion_tag("helper/search/multi_search.html", takes_context=True)
+def multi_search(context, small=False):
+    searches = search_registry.get_searches(context["request"])
+
+    return {"searches": searches, "small": small}

froide/templates/400.html

@@ -1,6 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>{% blocktrans %}400 - Bad Request{% endblocktrans %}</h2>
-{% endblock %}
+{% block error %}
+{% blocktrans %}400 - Bad Request{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}This one seems to be on you. Please contact us, if this error comes as a surprise.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/403.html

@@ -1,11 +1,10 @@
-{% extends 'base.html' %}
+{% extends "error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>{% blocktrans %}403 - Forbidden{% endblocktrans %}</h2>
-{% if message %}
-  <p>{{ message }}</p>
-{% else %}
-  <p>{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}</p>
-{% endif %}
-{% endblock %}
+{% block error %}
+{% blocktrans %}403 - Forbidden{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/404.html

@@ -1,9 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>
-  {% blocktrans %}404 - Not Found{% endblocktrans %}
-</h2>
-<span class="text-white">{{ exception }}</span>
-{% endblock %}
+{% block error %}
+{% blocktrans %}404 - Not Found{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}Nothing to see here.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/500.html

@@ -1,14 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
-{% load static %}
 
-{% block css %}
-<link href="{% static 'css/main.css' %}" rel="stylesheet">
-{% endblock %}
+{% block error %}
+{% blocktrans %}500 - Server Error{% endblocktrans %}
+{% endblock error %}
 
-{% block app_body %}
-<h2>{% blocktrans %}500 - Server Error{% endblocktrans %}</h2>
-{% if request.sentry.id %}
-<p>{% blocktrans with ref=request.sentry.id %}If you need assistance, you may reference this error as <strong>{{ ref }}</strong>.{% endblocktrans %}</p>
-{% endif %}
-{% endblock %}
+{% block error_description %}
+{% blocktrans with ref=request.sentry.id %}We logged the error and are working on fixing it. If you need to contact us, please use the reference <code>{{ ref }}</code>.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/error_base.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load search_helper %}
+
+{% block body %}
+  <div class="container mt-3">
+    <h2 class="mb-3">{% block error %}{% endblock error %}</h2>
+
+    <div class="row">
+      <div class="col col-md-8">
+        <div class="redacted error-redacted-bar mb-1" aria-hidden="true">&nbsp;</div>
+        <div class="mb-1 error-page-description">
+          <span>{% block error_description %}{% endblock error_description %}</span>
+        </div>
+        <div class="redacted error-redacted-bar mb-1" aria-hidden="true">&nbsp;</div>
+        <div class="redacted error-redacted-bar" aria-hidden="true">&nbsp;</div>
+      </div>
+
+      {% block error_right %}{% endblock error_right %}
+    </div>
+  </div>
+
+  <div class="py-3 py-lg-5 my-5 text-bg-subtle tight-margin">
+    <div class="container">
+      <p class="lead">
+        {% blocktrans %}You can try searching or go back to the <a href="/">Home page</a>.{% endblocktrans %}
+      </p>
+
+      {% multi_search %}
+    </div>
+  </div>
+
+  {% block error_footer %}{% endblock error_footer %}
+{% endblock body %}

frontend/javascript/snippets/search.ts

@@ -1,48 +1,30 @@
-function applyToForm(searchForm: HTMLFormElement): void {
-  function submitForm(): void {
-    searchForm.submit()
-  }
-  const inputs = searchForm.querySelectorAll('select')
-  let i
-  for (i = 0; i < inputs.length; i += 1) {
-    const selectInput = inputs[i]
-    selectInput.addEventListener('change', submitForm)
-  }
+const firstPathSegment = (path: string) => path.split('/')[1]
 
-  function dropdownSubmit(input: HTMLInputElement) {
-    return function (this: HTMLElement, e: Event) {
-      e.preventDefault()
-      input.value = this.dataset.value ?? ''
-      searchForm.submit()
-    }
-  }
+document
+  .querySelectorAll<HTMLFormElement>('.froide-multi-search')
+  .forEach((form) => {
+    const select = form.querySelector('select')
+    if (select === null) return
 
-  const dropdowns = searchForm.querySelectorAll('.dropdown')
-  for (i = 0; i < dropdowns.length; i += 1) {
-    const dropdown = dropdowns[i]
-    const input = dropdown.querySelector('input')
-    dropdown.querySelectorAll('.dropdown-menu a').forEach((dropdownLink) => {
-      dropdownLink.addEventListener(
-        'click',
-        dropdownSubmit(input as HTMLInputElement)
-      )
+    select.addEventListener('change', () => {
+      form.action = select.value
     })
-  }
-}
 
-const domSearchForm = document.querySelector<HTMLFormElement>('.search-form')
-if (domSearchForm !== null) {
-  applyToForm(domSearchForm)
-}
+    /*
+      the select has options like /documents/search/.
+      if the first path segment (here /documents/) of that url matches the
+      first path segment of the current window URL, select that option.
+    */
+    const searchBases = [...select.querySelectorAll('option')].map((o) => [
+      firstPathSegment(o.value),
+      o.value
+    ])
+    const currentBase = firstPathSegment(window.location.pathname)
+    const bestMatch = searchBases.find((s) => s[0] === currentBase)?.[1]
+    console.log(bestMatch)
 
-document.addEventListener('shown.bs.modal', (event) => {
-  if (event.target == null) {
-    return
-  }
-  if (event.target instanceof HTMLElement) {
-    const focussable = event.target.querySelector('[data-focus]')
-    if (focussable instanceof HTMLInputElement) {
-      focussable.focus()
+    if (bestMatch !== undefined) {
+      form.action = bestMatch
+      select.value = bestMatch
     }
-  }
-})
+  })

frontend/styles/components/misc.scss

@@ -124,3 +124,28 @@ input.copy-text {
   aspect-ratio: 3/2;
   object-fit: contain;
 }
+
+.error-redacted-bar {
+  height: 1.25em;
+}
+
+.error-page-description {
+  position: relative;
+
+  span {
+    background-color: var(--#{$prefix}body-bg);
+    padding-bottom: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--redacted);
+    height: 1.25em;
+    z-index: -1;
+  }
+}

frontend/styles/root.scss

@@ -20,7 +20,7 @@
 
   --shadow-blue: #{transparentize($blue-700, 0.85)};
   --shadow-gray: #{transparentize($gray-700, 0.6)};
-  --shadow-yellow: #{transparentize($yellow-700, 0.85)};
+  --shadow-yellow: #{transparentize($yellow-300, 0.85)};
 
   @each $name, $value in $froide-theme-dark {
     $bg: map.get($value, "bg");

frontend/styles/utilities.scss

@@ -1,51 +1,54 @@
-@use "sass:map";
+@use 'sass:map';
+@use 'sass:list';
 
 @each $name in $froide-theme {
   .text-bg-#{$name} {
     color: var(--froide-#{$name}-color);
     background-color: var(--froide-#{$name}-bg);
-    --bs-link-color-rgb: var(--froide-#{$name}-color-rgb);
-    --bs-link-hover-color-rgb: var(--froide-#{$name}-color-rgb);
+    --#{$prefix}heading-color: var(--froide-#{$name}-color);
   }
   .bg-#{$name} {
     background-color: var(--froide-#{$name}-bg);
   }
   .text-#{$name} {
     color: var(--froide-#{$name}-color);
-    --bs-link-color-rgb: var(--froide-#{$name}-color-rgb);
-    --bs-link-hover-color-rgb: var(--froide-#{$name}-color-rgb);
+    --#{$prefix}heading-color: var(--froide-#{$name}-color);
   }
 }
 
 // This gives us text-bg classes for the color-mode compatibole
 // bootstrap colors
 
 $bootstrap-extras: (
-  "body": (
-    "variable": "body",
+  'body': (
+    'body-color',
+    'body-bg'
   ),
-  "body-secondary": (
-    "variable": "secondary",
+  'body-secondary': (
+    'secondary-color',
+    'secondary-bg'
   ),
-  "body-tertiary": (
-    "variable": "tertiary",
+  'body-tertiary': (
+    'tertiary',
+    'tertiary-bg'
   ),
+  'light-subtle': (
+    'light-text-emphasis',
+    'light-bg-subtle'
+  ),
+  'dark-subtle': (
+    'dark-text-emphasis',
+    'dark-bg-subtle'
+  )
 );
 
-@each $name, $data in $bootstrap-extras {
-  $varname: map.get($data, "variable");
+@each $name, $vars in $bootstrap-extras {
   .text-bg-#{$name} {
-    color: var(--#{$prefix}#{$varname}-color);
-    background-color: var(--#{$prefix}#{$varname}-bg);
-  }
-}
+    $color: list.nth($vars, 1);
+    $bg: list.nth($vars, 2);
 
-.text-bg-light-subtle {
-  color: var(--#{$prefix}light-text-emphasis);
-  background-color: var(--#{$prefix}light-bg-subtle);
-}
-
-.text-bg-dark-subtle {
-  color: var(--#{$prefix}dark-text-emphasis);
-  background-color: var(--#{$prefix}dark-bg-subtle);
+    color: var(--#{$prefix}#{$color});
+    background-color: var(--#{$prefix}#{$bg});
+    --#{$prefix}heading-color: var(--froide-#{$name}-color);
+  }
 }