templates/alert: add template for alert

added changelog

removed not needed classes

finished alert redesign

changelog/_8471.md

@@ -0,0 +1,16 @@
+### Fixed
+
+- fixed linting in: `project_bplan_detail.html`, `project_detail.html`, `module_detail.html`, `base.html` 
+
+### Changed
+
+- moved `/components/_alert.scss` to components_dashboard folder
+
+### Added
+- introduced a reusable snippet `alerts.html` to enhance consistency and maintainability across alerts and prevent code duplication.
+- added snippet to `project_detail.html`, `module_detail.html`, `base.html` 
+- added alert__headline, .alert__content  and alert__text to `/components_user_facing/_alert.scss`
+
+### Removed
+
+- removed messages class, @use "sass:color", $messages-margin-bottom form `/components_user_facing/_alert.scss`

meinberlin/apps/contrib/templates/meinberlin_contrib/components/alert.html

@@ -0,0 +1,13 @@
+{% load i18n %}
+
+<div class="alert alert--{{ alert_type }}" role="alert" aria-live="polite" aria-atomic="true">
+  <button type="button" class="alert__close" data-bs-dismiss="alert" aria-label="{% translate 'Close' %}"><i class="fa fa-times" aria-hidden="true"></i></button>
+  <div class="alert__content">
+    {% if alert_headline %}
+      <h3 class="alert__headline">{% translate alert_headline %}</h3>
+    {% endif %}
+    <p class="alert__text">
+      {% translate alert_message %}
+    </p>
+  </div>
+</div>

meinberlin/apps/projects/templates/meinberlin_projects/project_bplan_detail.html

@@ -1,7 +1,7 @@
 {% extends "meinberlin_projects/project_detail.html" %}
 {% load i18n rules react_follows thumbnail wagtailcore_tags meinberlin_project_tags offlineevent_tags contrib_tags ckeditor_tags %}
 
-{% block title %}{{project.name}} — {{ block.super }}{% endblock %}{
+{% block title %}{{ project.name }} — {{ block.super }}{% endblock title %}
 
 {% block breadcrumbs %}
     <div id="content-header">
@@ -13,7 +13,7 @@
             </ol>
         </nav>
     </div>
-{% endblock %}
+{% endblock breadcrumbs %}
 
 {% block content %}
 <div id="layout-grid__area--maincontent">
@@ -28,4 +28,4 @@ <h1 class="u-first-heading">{% translate 'Participation is not possible at the m
         </p>
     </div>
 </div>
-{% endblock %}
+{% endblock content %}

meinberlin/apps/projects/templates/meinberlin_projects/project_detail.html

@@ -15,15 +15,8 @@
 
 {% block extra_messages %}
     {{ block.super }}
-
     {% if project.is_draft %}
-        <ul class="messages">
-            <li class="alert alert--warning" role="alert">
-                <div class="container">
-                    {% translate "This project is not published yet." %}
-                </div>
-            </li>
-        </ul>
+        {% include 'meinberlin_contrib/components/alert.html' with alert_message='This project has not yet been published.' alert_type='info' aria_live_value='polite' %}
     {% endif %}
 {% endblock extra_messages %}
 
@@ -48,7 +41,7 @@
             <div class="mainbar__left">
                 <div class="image">
                     <div class="image__image">
-                        <img src="{{ project.image | thumbnail_url:"heroimage" }}" alt='{% if project.image_alt_text %}{{ project.image_alt_text }}{% else %}{% translate "Here you can find a decorative picture." %}{% endif %}' width="100%" height="auto" loading="lazy"/>
+                        <img src="{{ project.image | thumbnail_url:'heroimage' }}" alt="{% if project.image_alt_text %}{{ project.image_alt_text }}{% else %}{% translate 'Here you can find a decorative picture.' %}{% endif %}" width="100%" height="auto" loading="lazy"/>
                     </div>
                 </div>
             </div>

meinberlin/assets/scss/components_user_facing/_alert.scss

@@ -1,26 +1,30 @@
-@use "sass:color";
+.alert {
+    margin: $padding 0;
+    padding: $padding * 0.625;
+    background-color: $message-light-blue;
+    color: $text-base;
+    text-align: start;
+}
 
-$messages-margin-bottom: 25px;
+.alert__content {
+    padding: $padding $padding * 0.5;
+}
 
-.messages {
-    margin: 0 0 $messages-margin-bottom;
+.alert__headline {
+    margin: 0;
     padding: 0;
-
-    li {
-        display: block;
-    }
-
-    + .messages {
-        margin-top: -$messages-margin-bottom;
-    }
+    color: inherit;
 }
 
-.alert {
+.alert__text {
     margin: 0;
-    padding: $padding * 1.2 0;
-    background-color: $message-light-blue;
-    color: $text-base;
-    text-align: center;
+    padding: 0;
+}
+
+.alert__close {
+    padding: 0;
+    float: right;
+    color: inherit;
 }
 
 .alert--success {
@@ -39,25 +43,6 @@ $messages-margin-bottom: 25px;
     color: $text-base;
 }
 
-.alert__close {
-    float: right;
-    color: inherit;
-}
-
 .alert--small {
     padding: 0.5em;
-}
-
-// If this directly follows the dialog box (see header.scss), add 16px
-// additional padding to the default value (see above).
-.messages:first-child > :first-child {
-    padding-top: calc(16px + #{$padding * 1.2});
-}
-
-// compensate for margin-bottom on messages
-.project-header,
-.hero-unit {
-    .messages + & {
-        margin-top: -$messages-margin-bottom;
-    }
-}
+}

meinberlin/assets/scss/style_dashboard.scss

@@ -27,7 +27,7 @@
 @import "components/action";
 
 // @import "components/accordion";
-@import "components/alert";
+@import "components_dashboard/alert";
 @import "components/blocks";
 @import "components_dashboard/breadcrumbs";
 @import "components_dashboard/button";

meinberlin/templates/a4modules/module_detail.html

@@ -5,32 +5,26 @@
 {% block extra_css %}
     {{ block.super }}
     <link rel="stylesheet" href="{% static 'dsgvo_video_embed.css' %}"/>
-{% endblock %}
+{% endblock extra_css %}
 
 {% block extra_js %}
     {{ block.super }}
     <script type="text/javascript" src="{% static 'dsgvo_video_embed.js' %}"></script>
-{% endblock %}
+{% endblock extra_js %}
 
 {% block title %}
     {{ project.name }}
-    &mdash;
+    —
     {{ block.super }}
-{% endblock %}
+{% endblock title %}
 
 {% block extra_messages %}
     {{ block.super }}
 
     {% if project.is_draft %}
-        <ul class="messages">
-            <li class="alert alert--warning" role="alert">
-                <div class="container">
-                    {% translate 'This project is not published yet.' %}
-                </div>
-            </li>
-        </ul>
+        {% include 'meinberlin_contrib/components/alert.html' with alert_message='This project has not yet been published.' alert_type='info' aria_live_value='polite' %}
     {% endif %}
-{% endblock %}
+{% endblock extra_messages %}
 
 <!-- Breadcrumbs are only necessary for multimodule projects with simultaneously running modules since the project detail
      template correctly displays breadcrumbs for other project -->
@@ -51,7 +45,7 @@
                 </nav>
             </div>
         </div>
-    {% endblock %}
+    {% endblock breadcrumbs %}
 {% endif %}
 
 {% block content %}
@@ -92,20 +86,19 @@ <h1 class="project-header__title">{{ module.name }}</h1>
             <p class="project-header__description">{{ module.description }}</p>
         </div>
     </div>
-
-
+
     <section id="layout-grid__area--maincontent">
         <div class="modul-servicepanel fullwidth panel--heavy phase-info">
             <div class="servicepanel__main">
                 {% include "a4modules/includes/module_detail_phase.html" %}
             </div>
             <div class="servicepanel__right phase-info__cta">
-                {% block project_action %}{% endblock %}
+                {% block project_action %}{% endblock project_action %}
             </div>
         </div>
 
-        {% block voting_token_field %}{% endblock %}
-        {% block phase_content %}{% endblock %}
+        {% block voting_token_field %}{% endblock voting_token_field %}
+        {% block phase_content %}{% endblock phase_content %}
         {% if module.is_in_module_cluster %}
             <section class="participation-tile__wrapper">
                 <div class="participation-tile__list-container">
@@ -121,4 +114,4 @@ <h2 class="participation-tile__list-header">{% translate 'More from this online
             </section>
         {% endif %}
     </section>
-</div>{% endblock %}
+{% endblock content %}

meinberlin/templates/base.html

@@ -49,24 +49,19 @@
     </div>
     {% block header %}
       {% include "header.html" %}
-    {% endblock %}
+    {% endblock header %}
     <!-- FIXME we don't currently want their grid in dashboard however this does not work if someone names wagtail, project or plan page 'dashboard' -->
     <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 %}
-            {% block menu %}{% userindicator %}{% endblock %}
+            {% block breadcrumbs %}{% endblock breadcrumbs %}
+            {% block menu %}{% userindicator %}{% endblock menu %}
         </div>
 
         {% if messages %}
-        <ul class="messages">
             {% for message in messages %}
-            <li class="alert alert--{{ message.level_tag }}" aria-live="polite" aria-atomic="true" id="alert">
-                <div class="container">
-                    {{ message }}
-                </div>
-            </li>
+                {% include 'meinberlin_contrib/components/alert.html' with alert_message=message|stringformat:"s" alert_headline=message.level_headline alert_type=message.level_tag %}
             {% endfor %}
-        </ul>
+
         {% endif %}
 
         {% block extra_messages %}{% endblock extra_messages %}