[#8668] Overhaul burger menu & remove blue bar

changelog/8668.md

@@ -0,0 +1,5 @@
+### Changed
+- updated navigation for burger menu
+
+### Removed
+- userindicator (blue bar)

meinberlin/apps/cms/migrations/0047_headerpages_easy_language_page.py

@@ -0,0 +1,28 @@
+# Generated by Django 4.2.11 on 2025-01-08 15:20
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailcore", "0089_log_entry_data_json_null_to_object"),
+        ("meinberlin_cms", "0046_alter_docspage_body"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="headerpages",
+            name="easy_language_page",
+            field=models.ForeignKey(
+                blank=True,
+                help_text="Please add a link to the easy language page.",
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                related_name="easy_language_page",
+                to="wagtailcore.page",
+                verbose_name="Easy Language Form Page",
+            ),
+        ),
+    ]

meinberlin/apps/cms/models/settings.py

@@ -26,6 +26,15 @@ class HeaderPages(BaseSiteSetting):
         on_delete=models.SET_NULL,
         help_text=_("Please add a link to the feedback form page."),
     )
+    easy_language_page = models.ForeignKey(
+        "wagtailcore.Page",
+        related_name="easy_language_page",
+        verbose_name="Easy Language Form Page",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        help_text=_("Please add a link to the easy language page."),
+    )
     # accessibility settings
     feedback_name = models.CharField(max_length=255, blank=True)
     feedback_email = models.EmailField(max_length=255, blank=True)
@@ -48,6 +57,7 @@ class HeaderPages(BaseSiteSetting):
     panels = [
         FieldPanel("help_page"),
         FieldPanel("feedback_page"),
+        FieldPanel("easy_language_page"),
         MultiFieldPanel(
             [
                 FieldPanel("feedback_name"),

meinberlin/apps/platformemails/templates/meinberlin_platformemails/platformemail_form.html

@@ -1,11 +1,10 @@
 {% extends "a4dashboard/base_dashboard.html" %}
-{% load i18n userindicator %}
+{% load i18n %}
 {% block title %}
     {% translate 'Create platform email' %}
 {% endblock title %}
 {% block content %}
     <div class="container">
-        {% userindicator %}
         <div class="offset-lg-3 col-lg-6">
             <h1>{% translate 'Create platform email' %}</h1>
             <p class="form-hint">

meinberlin/apps/users/templatetags/userindicator.py

@@ -24,13 +24,6 @@ def get_next_url(request):
         return request.get_full_path()
 
 
-@register.inclusion_tag("meinberlin_users/user_indicator.html", takes_context=True)
-def userindicator(context):
-    if hasattr(context, "request"):
-        context["redirect_field_value"] = get_next_url(context["request"])
-    return context
-
-
 @register.inclusion_tag("meinberlin_users/initiator_indicator.html", takes_context=True)
 def initiatorindicator(context):
     if hasattr(context, "request"):

meinberlin/assets/scss/components_user_facing/_navigation-meta.scss

@@ -0,0 +1,32 @@
+.navigation-meta .heading {
+    padding-bottom: 1.5em;
+    padding-top: 1.5em;
+    border-top: 1px solid $gray-lighter;
+    border-bottom: 1px solid $gray-lighter;
+}
+
+.navigation-meta a {
+    border-bottom: 1px solid $gray-lighter;
+}
+
+.navigation-meta li:last-child a {
+    border-bottom: 0;
+}
+
+.navigation-meta:last-child li:last-child {
+    border-bottom: 1px solid $gray-lighter;
+}
+
+.navigation-meta .heading:empty {
+    height: 4.375em;
+}
+
+.navigation-meta .navigation-meta__link {
+    margin: 3px;
+    display: block;
+    padding: 1em 0 1em 12px;
+
+    @media screen and (min-width: $breakpoint-tablet-landscape) {
+        padding: 1em 24px;
+    }
+}

meinberlin/assets/scss/style_user_facing.scss

@@ -39,6 +39,7 @@
 @import "components_user_facing/moderator_notes";
 @import "components_user_facing/moderator_status";
 @import "components_user_facing/narrow-wrapper";
+@import "components_user_facing/navigation-meta";
 @import "components_user_facing/nextprev";
 @import "components_user_facing/phase_info";
 @import "components_user_facing/pill";

meinberlin/templates/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-{% load i18n userindicator static contrib_tags wagtailuserbar %}
+{% load i18n static contrib_tags wagtailuserbar %}
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}">
 <head>
@@ -54,7 +54,6 @@
     <main role="main" tabindex="-1" {% if '/dashboard' not in request.path or '/components' not in request.path %} id="layout-grid" {% endif %}>
         <div id="layout-grid__area--contentheader">
             {% block breadcrumbs %}{% endblock breadcrumbs %}
-            {% block menu %}{% userindicator %}{% endblock menu %}
         </div>
 
         {% if messages %}

meinberlin/templates/header.html

@@ -6,7 +6,7 @@
     <div class="header__row-portalbrand">
         <div class="logo">
             <a href="https://www.berlin.de/">
-                <img class="logo" title="{% translate 'To the home page of Berlin.de' %}" src="{% static 'images/logo_berlin.svg' %}" alt="Berlin.de" />
+                <img class="logo" title="{% translate 'To the home page of Berlin.de' %}" src="{% static 'images/logo_berlin.svg' %}" height="33" width="100" alt="Berlin.de" />
             </a>
         </div>
     </div>
@@ -15,7 +15,7 @@
         <div class="pageheader__logo">
             <div class="logo">
                 <a href="{% url 'wagtail_serve' '' %}" title="{% translate 'To the home page' %}">
-                    <img class="svg" src="{% static 'images/logo_mb.svg' %}" alt="{% translate 'meinBerlin logo' %}">
+                    <img class="svg" src="{% static 'images/logo_mb.svg' %}" alt="{% translate 'meinBerlin logo' %}" height="221" width="1080">
                 </a>
             </div>
         </div>
@@ -30,7 +30,7 @@
                 {% get_header_menu "topnav" as topnav %}
                 {% for item in topnav %}
                 <li class="{% if request.path == item.url %}active{% endif %}">
-                    <a href="{{ item.url }}">{{ item.title}}</a>
+                    <a href="{{ item.url }}">{{ item.title }}</a>
                 </li>
                 {% endfor %}
                 {% if settings.meinberlin_cms.HeaderPages.help_page %}
@@ -196,34 +196,7 @@ <h2 class="heading"><span>{% translate 'Menu' %}</span></h2>
                         </button>
                     </div>
                     <div class="overlay__body">
-                        <nav id="navigation-primary" class="js-navigation-primary">
-                            <div class="tree-wrapper js-navigation-tree-wrapper">
-                                <h3 class="aural">{% translate 'Page navigation' %}</h3>
-                                <ul class="navigation-tree">
-                                    <li class="{% if request.path == project_list %}active{% endif %}">
-                                        <a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a>
-                                    </li>
-                                    {% for item in topnav %}
-                                    <li class="{% if request.path == item.url %}active{% endif %}">
-                                        <a href="{{ item.url }}">{{ item.title}}</a>
-                                    </li>
-                                    {% endfor %}
-                                    {% if settings.meinberlin_cms.HeaderPages.help_page %}
-                                    <li class="{% if request.path == settings.meinberlin_cms.HeaderPages.help_page.get_url %}active{% endif %}">
-                                        <a href="{{ settings.meinberlin_cms.HeaderPages.help_page.get_url }}">{% translate 'Help' %}</a>
-                                    </li>
-                                    {% endif %}
-                                    {% if settings.meinberlin_cms.HeaderPages.feedback_page %}
-                                    <li class="{% if request.path == settings.meinberlin_cms.HeaderPages.feedback_page.get_url %}active{% endif %}">
-                                        <a href="{{ settings.meinberlin_cms.HeaderPages.feedback_page.get_url }}">{% translate 'Give Feedback' %}</a>
-                                    </li>
-                                    {% endif %}
-                                    <li>
-                                    </li>
-                                </ul>
-                            </div>
-
-                        </nav>
+                        {% include 'navigation_primary.html' %}
                     </div>
                 </div>
                 <!--googleon: index--><!--/noindex-->

meinberlin/templates/navigation_primary.html

@@ -0,0 +1,102 @@
+{% load i18n %}
+
+<nav id="navigation-primary" class="js-navigation-primary">
+  <div class="tree-wrapper js-navigation-tree-wrapper">
+    <h3 class="aural">{% translate 'Page navigation' %}</h3>
+    <ul class="navigation-tree">
+      <li class="{% if request.path == project_list %}active{% endif %}">
+        <a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a>
+      </li>
+      {% if settings.meinberlin_cms.HeaderPages.help_page %}
+        <li class="{% if request.path == settings.meinberlin_cms.HeaderPages.help_page.get_url %}active{% endif %}">
+          <a href="{{ settings.meinberlin_cms.HeaderPages.help_page.get_url }}">{% translate 'Help & Support' %}</a>
+        </li>
+      {% endif %}
+      {% if request.user.is_authenticated %}
+        {% url 'account_actions' as activity_feed %}
+        <li class="{% if request.path == activity_feed %}active{% endif %}">
+          <a href="{% url 'account_actions' %}">{% translate 'Activity Feed' %}</a>
+        </li>
+      {% endif %}
+      {% for item in topnav %}
+        <li class="{% if request.path == item.url %}active{% endif %}">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </li>
+      {% endfor %}
+      {% if request.user.is_authenticated %}
+        <li>
+          <a href="{% url 'account' %}">{% translate "Your account" %}</a>
+          <ul class="navigation-tree">
+            <li>
+              {% url 'account_profile' as account_url %}
+              <a href="{% url 'account_profile' %}" class="{% if request.path == account_url %}active{% endif %}">{% translate "Account and security" %}</a>
+            </li>
+            <li>
+              {% url 'search_profiles' as search_profiles_url %}
+              <a href="{% url 'search_profiles' %}" class="{% if request.path == search_profiles_url %}active{% endif %}">{% translate "Search profiles" %}</a>
+            </li>
+          </ul>
+        </li>
+      {% endif %}
+    </ul>
+  </div>
+  {% if request.user.organisations %}
+    <div class="navigation-meta">
+      <h3 class="heading">{% translate 'Dashboard' %}</h3>
+      <ul>
+        {% for organisation in request.user.organisations %}
+          <li>
+            <a href="{% url 'a4dashboard:project-list' organisation_slug=organisation.slug %}">{{ organisation.name }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+  <div class="navigation-meta">
+    <h3 class="heading">{% translate 'Accessibility' %}</h3>
+    <ul>
+      {% if settings.meinberlin_cms.HeaderPages.easy_language_page %}
+        <li class="{% if request.path == settings.meinberlin_cms.HeaderPages.easy_language_page.get_url %}active{% endif %}">
+          <a href="{{ settings.meinberlin_cms.HeaderPages.easy_language_page.get_url }}">{% translate 'Simple language' %}</a>
+        </li>
+      {% endif %}
+    </ul>
+  </div>
+  {% if request.user.is_superuser %}
+    <div class="navigation-meta">
+      <h3 class="heading">{% translate "Further links" %}</h3>
+      <ul>
+        {% if request.user.is_superuser %}
+          <li>
+            <a href="{% url 'meinberlin_platformemails:create' %}">{% translate "Platform Email" %}</a>
+          </li>
+        {% endif %}
+      </ul>
+    </div>
+  {% endif %}
+  <div class="navigation-meta">
+    <h3 class="heading">{{ request.user.username }}</h3>
+    <ul>
+      {% if request.user.is_authenticated %}
+        <li>
+          <form class="block--nogap text--color-dark" action="{% url 'account_logout' %}" method="post" aria-label="{% translate 'Logout' %}">
+            {% csrf_token %}
+            <input type="hidden" name="next" value="{{ redirect_field_value }}">
+            <button class="link navigation-meta__link" type="submit">{% translate "Logout" %}</button>
+          </form>
+        </li>
+      {% endif %}
+      {% if not request.user.is_authenticated %}
+        <li>
+          <a href="{% url 'account_login' %}?next={{ redirect_field_value|urlencode }}">{% translate "Login" %}</a>
+        </li>
+        <li>
+          <a href="{% url 'account_signup' %}?next={{ redirect_field_value|urlencode }}">{% translate "Register" %}</a>
+        </li>
+        <li>
+          <a href="{% url 'account_reset_password' %}?next={{ redirect_field_value|urlencode }}">{% translate "Forgot password" %}</a>
+        </li>
+      {% endif %}
+    </ul>
+  </div>
+</nav>