diff --git a/froide/helper/templates/helper/search/multi_search.html b/froide/helper/templates/helper/search/multi_search.html new file mode 100644 index 000000000..e6ac20a4d --- /dev/null +++ b/froide/helper/templates/helper/search/multi_search.html @@ -0,0 +1,23 @@ +{% load i18n %} + +
+
+ + + +
+
\ No newline at end of file diff --git a/froide/helper/templatetags/search_helper.py b/froide/helper/templatetags/search_helper.py index aca3a3eaf..34777ca82 100644 --- a/froide/helper/templatetags/search_helper.py +++ b/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} diff --git a/froide/templates/400.html b/froide/templates/400.html index 3bb0bf8bc..5448c9fcb 100644 --- a/froide/templates/400.html +++ b/froide/templates/400.html @@ -1,6 +1,10 @@ -{% extends 'base.html' %} +{% extends "./error_base.html" %} {% load i18n %} -{% block app_body %} -

{% blocktrans %}400 - Bad Request{% endblocktrans %}

-{% 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 %} \ No newline at end of file diff --git a/froide/templates/403.html b/froide/templates/403.html index 8696c1c20..8cf9940e5 100644 --- a/froide/templates/403.html +++ b/froide/templates/403.html @@ -1,11 +1,10 @@ -{% extends 'base.html' %} +{% extends "error_base.html" %} {% load i18n %} -{% block app_body %} -

{% blocktrans %}403 - Forbidden{% endblocktrans %}

-{% if message %} -

{{ message }}

-{% else %} -

{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}

-{% 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 %} diff --git a/froide/templates/404.html b/froide/templates/404.html index e3305671c..ea149ff07 100644 --- a/froide/templates/404.html +++ b/froide/templates/404.html @@ -1,9 +1,10 @@ -{% extends 'base.html' %} +{% extends "./error_base.html" %} {% load i18n %} -{% block app_body %} -

- {% blocktrans %}404 - Not Found{% endblocktrans %} -

-{{ exception }} -{% endblock %} +{% block error %} +{% blocktrans %}404 - Not Found{% endblocktrans %} +{% endblock error %} + +{% block error_description %} +{% blocktrans %}Nothing to see here.{% endblocktrans %} +{% endblock error_description %} \ No newline at end of file diff --git a/froide/templates/500.html b/froide/templates/500.html index c2dc1df3d..663faf402 100644 --- a/froide/templates/500.html +++ b/froide/templates/500.html @@ -1,14 +1,10 @@ -{% extends 'base.html' %} +{% extends "./error_base.html" %} {% load i18n %} -{% load static %} -{% block css %} - -{% endblock %} +{% block error %} +{% blocktrans %}500 - Server Error{% endblocktrans %} +{% endblock error %} -{% block app_body %} -

{% blocktrans %}500 - Server Error{% endblocktrans %}

-{% if request.sentry.id %} -

{% blocktrans with ref=request.sentry.id %}If you need assistance, you may reference this error as {{ ref }}.{% endblocktrans %}

-{% 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 {{ ref }}.{% endblocktrans %} +{% endblock error_description %} \ No newline at end of file diff --git a/froide/templates/error_base.html b/froide/templates/error_base.html new file mode 100644 index 000000000..ec1a641d4 --- /dev/null +++ b/froide/templates/error_base.html @@ -0,0 +1,34 @@ +{% extends "base.html" %} +{% load i18n %} +{% load search_helper %} + +{% block body %} +
+

{% block error %}{% endblock error %}

+ +
+
+ +
+ {% block error_description %}{% endblock error_description %} +
+ + +
+ + {% block error_right %}{% endblock error_right %} +
+
+ +
+
+

+ {% blocktrans %}You can try searching or go back to the Home page.{% endblocktrans %} +

+ + {% multi_search %} +
+
+ + {% block error_footer %}{% endblock error_footer %} +{% endblock body %} \ No newline at end of file diff --git a/frontend/javascript/snippets/search.ts b/frontend/javascript/snippets/search.ts index 9a247bdb5..48b5bba04 100644 --- a/frontend/javascript/snippets/search.ts +++ b/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('.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('.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 } - } -}) + }) diff --git a/frontend/styles/components/misc.scss b/frontend/styles/components/misc.scss index f157cae66..60ce0ae69 100644 --- a/frontend/styles/components/misc.scss +++ b/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; + } +} diff --git a/frontend/styles/root.scss b/frontend/styles/root.scss index c3cfc5c6e..ff6c4d066 100644 --- a/frontend/styles/root.scss +++ b/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"); diff --git a/frontend/styles/utilities.scss b/frontend/styles/utilities.scss index 29fb58388..fc8125edb 100644 --- a/frontend/styles/utilities.scss +++ b/frontend/styles/utilities.scss @@ -1,19 +1,18 @@ -@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); } } @@ -21,31 +20,35 @@ // 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); + } } diff --git a/frontend/styles/variables.scss b/frontend/styles/variables.scss index 2d37d5177..bb330f1de 100644 --- a/frontend/styles/variables.scss +++ b/frontend/styles/variables.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/mixins'; @@ -58,8 +59,7 @@ $body-color-dark: $gray-400; $component-active-color: $white; $component-active-bg: $primary; $headings-color-dark: $white; -$body-tertiary-color: rgba($body-color, .75); - +$body-tertiary-color: rgba($body-color, 0.75); // spacing $spacer: 1rem; @@ -87,7 +87,8 @@ $spacers: ( // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( sm: 540px, - md: 780px, // changed from original Bootstrap 720px for extra space! + // changed from original Bootstrap 720px for extra space! + md: 780px, lg: 960px, xl: 1140px, xxl: 1320px @@ -112,31 +113,39 @@ $box-shadow-yellow: 2px 2px 0 transparentize($yellow-300, 0.85); @import 'bootstrap/scss/variables'; -$froide-theme: ("highlight", "callout"); +$froide-theme: ('subtle', 'highlight', 'callout'); $highlight: var(--froide-highlight-bg); $highlight-color: var(--froide-highlight-color); $froide-theme-light: ( - "highlight": ( - "bg": $yellow-100, - "color": $blue-700, + 'subtle': ( + 'bg': $blue-100, + 'color': $blue-800 ), - "callout": ( - "bg": $blue-10, - "color": $blue-700 + 'highlight': ( + 'bg': $yellow-100, + 'color': $blue-800 ), + 'callout': ( + 'bg': $blue-10, + 'color': $blue-800 + ) ); $froide-theme-dark: ( - "highlight": ( - "bg": $yellow-600, - "color": $white + 'subtle': ( + 'bg': $blue-900, + 'color': $white ), - "callout": ( - "bg": $blue-800, - "color": $white + 'highlight': ( + 'bg': $yellow-300, + 'color': $blue-900 ), + 'callout': ( + 'bg': $blue-800, + 'color': $white + ) ); $breadcrumb-divider: quote('›');