new navigation

froide/account/templates/account/includes/breadcrumbs.html

@@ -1,6 +1,12 @@
 {% load i18n %}
 <nav class="container" aria-label="breadcrumb">
     <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a href="/">
+                <i class="fa fa-home"></i>
+                <span class="sr-only">{% trans "Home Page" %}</span>
+            </a>
+        </li>
         <li class="breadcrumb-item">
             <a href="{% url 'account-show' %}">{% translate "Account" %}</a>
         </li>

froide/foirequest/templates/foirequest/header/breadcrumb.html

@@ -1,6 +1,12 @@
 {% load i18n %}
 <nav class="container" aria-label="breadcrumb">
     <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+            <a href="/">
+                <i class="fa fa-home"></i>
+                <span class="sr-only">{% trans "Home Page" %}</span>
+            </a>
+        </li>
         <li class="breadcrumb-item">
             {% if object.user == request.user %}
                 <a href="{% url 'account-show' %}">{% trans "My requests" %}</a>

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

@@ -15,7 +15,6 @@
         <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>

froide/helper/templatetags/breadcrumb_helper.py

@@ -0,0 +1,31 @@
+from django import template
+from django.urls import NoReverseMatch, reverse
+
+register = template.Library()
+
+
+def normalize_breadcrumb(breadcrumb):
+    if type(breadcrumb) == tuple:
+        if type(breadcrumb[1]) == str:
+            try:
+                breadcrumb = (breadcrumb[0], reverse(breadcrumb[1]))
+            except NoReverseMatch:
+                pass
+
+        return breadcrumb
+    else:
+        return (breadcrumb, None)
+
+
+@register.simple_tag(takes_context=True)
+def get_breadcrumbs(context, view=None):
+    if hasattr(view, "get_breadcrumbs") and callable(view.get_breadcrumbs):
+        view.get_breadcrumbs(context)
+
+    if hasattr(view, "breadcrumbs"):
+        return map(normalize_breadcrumb, view.breadcrumbs)
+
+
+@register.filter
+def has_link(value):
+    return type(value) == tuple and len(value) == 2

froide/organization/templates/organization/organization_detail.html

@@ -7,6 +7,12 @@
         <div class="container">
             <nav aria-label="breadcrumb">
                 <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <a href="/">
+                            <i class="fa fa-home"></i>
+                            <span class="sr-only">{% trans "Home Page" %}</span>
+                        </a>
+                    </li>
                     <li class="breadcrumb-item">
                         <a href="{% url 'organization-list' %}">{% trans "Organizations" %}</a>
                     </li>

froide/organization/templates/organization/organization_list.html

@@ -7,6 +7,12 @@
     <div class="bg-body-tertiary">
         <nav class="container" aria-label="breadcrumb">
             <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/">
+                        <i class="fa fa-home"></i>
+                        <span class="sr-only">{% trans "Home Page" %}</span>
+                    </a>
+                </li>
                 <li class="breadcrumb-item">
                     <a href="{% url 'organization-list' %}">{% trans "Organizations" %}</a>
                 </li>

froide/organization/templates/organization/organization_list_own.html

@@ -7,6 +7,12 @@
     <div class="bg-body-tertiary">
         <nav class="container" aria-label="breadcrumb">
             <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/">
+                        <i class="fa fa-home"></i>
+                        <span class="sr-only">{% trans "Home Page" %}</span>
+                    </a>
+                </li>
                 <li class="breadcrumb-item">
                     <a href="{% url 'organization-list' %}">{% trans "Organizations" %}</a>
                 </li>

froide/organization/templates/organization/organization_update_form.html

@@ -9,6 +9,12 @@
     <div class="bg-body-tertiary">
         <nav class="container" aria-label="breadcrumb">
             <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/">
+                        <i class="fa fa-home"></i>
+                        <span class="sr-only">{% trans "Home Page" %}</span>
+                    </a>
+                </li>
                 <li class="breadcrumb-item">
                     <a href="{% url 'organization-list' %}">{% trans "Organizations" %}</a>
                 </li>

froide/templates/base.html

@@ -2,34 +2,44 @@
 {% load i18n %}
 {% load static %}
 {% load frontendbuild %}
+
 {% block body_tag %}
-    {% if request.user.is_authenticated and request.session.impostor %}
-        {% include "account/includes/impostor.html" %}
-    {% endif %}
-    {% block top_block %}{% endblock %}
-    {% block navbar %}
-        {% include "header.html" %}
-    {% endblock %}
-    {% block body_wrapper %}
-        <main class="main">
-            {% block index_banner %}{% endblock %}
-            {% block foisite_advice %}{% endblock %}
-            {% block messages %}
-                {% include "snippets/messages.html" %}
-            {% endblock messages %}
-            {% block body %}
-                <div class="container mb-5 mt-3">
-                    {% block app_body %}{% endblock %}
-                </div>
-            {% endblock %}
-        </main>
-    {% endblock %}
-    {% block footer_container %}
-        {% include "footer.html" %}
-    {% endblock %}
+  {% if request.user.is_authenticated and request.session.impostor %}
+    {% include "account/includes/impostor.html" %}
+  {% endif %}
+
+  {% block top_block %}{% endblock %}
+
+  {% block navbar %}
+    {% include "header.html" %}
+  {% endblock %}
+
+  {% include "snippets/breadcrumbs.html" %}
+
+  {% block body_wrapper %}
+    <main class="main">
+      {% block index_banner %}{% endblock %}
+      {% block foisite_advice %}{% endblock %}
+
+      {% block messages %}
+        {% include "snippets/messages.html" %}
+      {% endblock messages %}
+
+      {% block body %}
+        <div class="container mb-5 mt-3">
+          {% block app_body %}{% endblock %}
+        </div>
+      {% endblock %}
+    </main>
+  {% endblock %}
+
+  {% block footer_container %}
+    {% include "footer.html" %}
+  {% endblock %}
 {% endblock body_tag %}
+
 {% block scripts %}
-    {% renderfrontendhmr %}
-    {% addfrontendbuild "main.js" %}
-    {{ block.super }}
+  {% renderfrontendhmr %}
+  {% addfrontendbuild "main.js" %}
+  {{ block.super }}
 {% endblock %}

froide/templates/header.html

@@ -6,6 +6,7 @@
     {% get_menu_items as menu_items %}
 {% endif %}
 <header id="header">
+    <a href="#main" class="visually-hidden-focusable skippy">{% trans "Skip to main content" %}</a>
     <nav class="navbar navbar-secondary navbar-expand-md navbar-light justify-content-between {% block navbar-class %}{% endblock %}">
         <div class="container">
             {% block nav_brand %}

froide/templates/simple_base.html

@@ -2,17 +2,21 @@
 {% load i18n %}
 {% load static %}
 {% load frontendbuild %}
+
 {% block body_tag %}
-    <main class="main">
+    <main class="main" id="main">
         {% include "snippets/messages.html" %}
+
         {% block body %}
             <div class="container">
                 {% block app_body %}{% endblock %}
             </div>
         {% endblock %}
     </main>
+
     {% block extra_footer %}{% endblock %}
 {% endblock body_tag %}
+
 {% block scripts %}
     {% addfrontendbuild "main.js" %}
     {{ block.super }}

froide/templates/snippets/breadcrumbs.html

@@ -0,0 +1,31 @@
+{% load i18n %}
+{% load breadcrumb_helper %}
+{# Renders breadcrumbs that are defined in view #}
+{% get_breadcrumbs view as breadcrumbs %}
+{% if breadcrumbs != None %}
+    {% if breadcrumbs_background %}
+        <div class="text-bg-{{ breadcrumbs_background }}{% if overlay %} breadcrumb-overlay{% endif %}">
+        {% endif %}
+        <nav class="container-md" aria-label="breadcrumb">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    {# djlint:off D018 #}
+                    <a href="/"> {# djlint:on #}
+                        <i class="fa fa-home"></i>
+                        <span class="sr-only">{% trans "Home Page" %}</span>
+                    </a>
+                </li>
+                {% for breadcrumb in breadcrumbs %}
+                    <li class="breadcrumb-item{% if forloop.last %} active{% endif %}">
+                        {% if breadcrumb|has_link %}
+                            <a href="{{ breadcrumb.1 }}"
+                               {% if forloop.last %}aria-current="page"{% endif %}>{{ breadcrumb.0 }}</a>
+                        {% else %}
+                            {{ breadcrumb }}
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ol>
+        </nav>
+        {% if breadcrumbs_background %}</div>{% endif %}
+{% endif %}

frontend/javascript/snippets/search.ts

@@ -23,7 +23,6 @@ document
     ])
     const currentBase = firstPathSegment(window.location.pathname)
     const bestMatch = searchBases.find((s) => s[0] === currentBase)?.[1]
-    console.log(bestMatch)
 
     if (bestMatch !== undefined) {
       form.action = bestMatch

frontend/styles/components/breadcrumb.scss

@@ -1,40 +1,52 @@
 .breadcrumb {
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
   padding: $spacer * 0.5 0;
   background-color: inherit;
-  overflow: hidden;
+  overflow: auto;
   margin: 0;
+  gap: $spacer * 0.5;
+  scroll-snap-type: x;
 
   &-item {
-    margin-right: $spacer * 0.5;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    float: none;
     white-space: nowrap;
+    scroll-snap-align: end;
+
+    & + .breadcrumb-item::before {
+      float: none;
+      color: inherit;
+    }
 
     &,
     > * {
-      color: var(--#{$prefix}tertiary-color);
-      font-size: small;
+      color: inherit;
+      font-size: $font-size-sm;
       white-space: nowrap;
+      opacity: 0.9;
 
       @include media-breakpoint-up(lg) {
         font-size: $font-size-sm;
       }
     }
 
     &:last-child {
-      margin-right: none;
-
       &,
       > * {
-        color: var(--#{$prefix}body-color);
+        color: inherit;
+        opacity: 1;
       }
     }
   }
 
   &-item + &-item {
     padding-left: 0;
   }
+}
 
+.breadcrumb-overlay {
+  margin-bottom: -2.3rem;
+  z-index: 40;
+  --#{$prefix}bg-opacity: 0.9;
 }

frontend/styles/components/dropdown.scss

@@ -0,0 +1,3 @@
+.dropdown-menu {
+  overflow: hidden; // for crisp edges
+}

frontend/styles/components/misc.scss

@@ -150,3 +150,7 @@ input.copy-text {
     z-index: -1;
   }
 }
+
+.skippy {
+  z-index: 1070;
+}