templates/alert: add template for alert

templates/alert: changed css clases

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="{% if alert_type == 'info' or alert_type == 'success' %}polite{% elif alert_type == 'danger' %}assertive{% endif %}" aria-atomic="true">
+  <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>
+  <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>

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

@@ -1,31 +1,31 @@
-{% 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 breadcrumbs %}
-    <div id="content-header">
-        <nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
-            <ol>
-                <li><a href="{% url 'wagtail_serve' '' %}">meinBerlin</a></li>
-                <li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a></li>
-                <li class="active" aria-current="page">{{ project.name|truncatechars:50 }}</li>
-            </ol>
-        </nav>
-    </div>
-{% endblock %}
-
-{% block content %}
-<div id="layout-grid__area--maincontent">
-    <div>
-        {# As bplan projects don't set the information and the result field, the default project detail, which is shown prior to the first phase, looks bad. #}
-        {# This replaces the default project detail by a simple notice that the participation has not started yet. #}
-
-        <h1 class="u-first-heading">{% translate 'Participation is not possible at the moment.' %}</h1>
-        <p>
-            {% html_date project.modules.first.future_phases.first.start_date 'DATE_FORMAT' as start_date %}
-            {% blocktranslate with date=start_date %}It starts on {{ date }}.{% endblocktrans %}
-        </p>
-    </div>
-</div>
-{% endblock %}
+{% 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 title %}
+
+{% block breadcrumbs %}
+    <div id="content-header">
+        <nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
+            <ol>
+                <li><a href="{% url 'wagtail_serve' '' %}">meinBerlin</a></li>
+                <li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a></li>
+                <li class="active" aria-current="page">{{ project.name|truncatechars:50 }}</li>
+            </ol>
+        </nav>
+    </div>
+{% endblock breadcrumbs %}
+
+{% block content %}
+<div id="layout-grid__area--maincontent">
+    <div>
+        {# As bplan projects don't set the information and the result field, the default project detail, which is shown prior to the first phase, looks bad. #}
+        {# This replaces the default project detail by a simple notice that the participation has not started yet. #}
+
+        <h1 class="u-first-heading">{% translate 'Participation is not possible at the moment.' %}</h1>
+        <p>
+            {% html_date project.modules.first.future_phases.first.start_date 'DATE_FORMAT' as start_date %}
+            {% blocktranslate with date=start_date %}It starts on {{ date }}.{% endblocktrans %}
+        </p>
+    </div>
+</div>
+{% endblock content %}