From 9097aa95d72ddbede1324d307fd3e30593c4bbe4 Mon Sep 17 00:00:00 2001 From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com> Date: Tue, 17 Dec 2024 18:38:35 +0100 Subject: [PATCH] alerts: refactor alerts and fix issues --- .../bo_component_library.html | 48 +++++++---- .../meinberlin_contrib/components/alert.html | 29 +++---- .../dashboard_component_library.html | 81 ++++++++++++------- .../scss/components_dashboard/_alert.scss | 75 ++++++++--------- .../scss/components_user_facing/_alert.scss | 33 +++----- .../scss/styles_dashboard/_variables.scss | 13 ++- .../a4images/image_upload_widget.html | 4 +- 7 files changed, 159 insertions(+), 124 deletions(-) diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/bo_component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/bo_component_library.html index 74c84f28c9..9cdc589800 100644 --- a/meinberlin/apps/contrib/templates/meinberlin_contrib/bo_component_library.html +++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/bo_component_library.html @@ -4,22 +4,36 @@ {% block title %}Component Library — {{ block.super }}{% endblock %} {% block content %} -
- -
-
- {% include 'meinberlin_contrib/components/breadcrumb.html' %} - {% include 'meinberlin_contrib/components/card.html' %} -
+{% include 'meinberlin_contrib/components/breadcrumb.html' %} + - + + +
+

Component Library

+ +
+

Alerts

+ {% include 'meinberlin_contrib/components/alert.html' with alert_headline='Info' alert_message='Error during validation. Please check your entries.' alert_type='info' %} + {% include 'meinberlin_contrib/components/alert.html' with alert_headline='Success' alert_message='Error during validation. Please check your entries.' alert_type='success' %} + {% include 'meinberlin_contrib/components/alert.html' with alert_headline='Warning' alert_message='Error during validation. Please check your entries.' alert_type='warning' %} + {% include 'meinberlin_contrib/components/alert.html' with alert_headline='Error' alert_message='Error during validation. Please check your entries.' alert_type='danger' %} +
+ +
+

Cards

+ {% include 'meinberlin_contrib/components/card.html' %} +
+
{% endblock %} diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/components/alert.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/components/alert.html index d60f92c1e7..d57ce6c0d7 100644 --- a/meinberlin/apps/contrib/templates/meinberlin_contrib/components/alert.html +++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/components/alert.html @@ -1,22 +1,17 @@ {% load i18n %} -
-
-
- {% if alert_headline %} -

+

+ {% endif %} +

+ {% translate alert_message %} +

+
diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/dashboard_component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/dashboard_component_library.html index 639cb17bf2..ea7f944551 100644 --- a/meinberlin/apps/contrib/templates/meinberlin_contrib/dashboard_component_library.html +++ b/meinberlin/apps/contrib/templates/meinberlin_contrib/dashboard_component_library.html @@ -367,37 +367,62 @@

Alerts

-
+ + +
- + + +

Blocks

diff --git a/meinberlin/assets/scss/components_dashboard/_alert.scss b/meinberlin/assets/scss/components_dashboard/_alert.scss index 9a65a365e3..504fc8e865 100644 --- a/meinberlin/assets/scss/components_dashboard/_alert.scss +++ b/meinberlin/assets/scss/components_dashboard/_alert.scss @@ -1,63 +1,66 @@ -@use "sass:color"; - -$messages-margin-bottom: 25px; - -.messages { - margin: 0 0 $messages-margin-bottom; - padding: 0; +.alert { + position: relative; + color: $info; + background-color: $info-bg; + animation: slide-in 0.2s ease-in-out; +} - li { - display: block; - } +.alert__content { + padding: 1.5rem 2rem 1.5rem 1.5rem; + margin: 0 auto; + max-width: 81rem; // reproduces the old container max-width in bootstrap +} - + .messages { - margin-top: -$messages-margin-bottom; - } +.alert__headline { + margin-top: 0; } -.alert { +.alert__text { margin: 0; - padding: $padding * 1.2 0; - background-color: color.adjust($info, $lightness: 60%); - color: $info; - text-align: center; + line-height: 1.5; } +/* Alert types */ .alert--success { - background-color: color.adjust($success, $lightness: 70%); color: $success; + background-color: $success-bg; } .alert--error, .alert--danger { - background-color: color.adjust($danger, $lightness: 50%); color: $danger; + background-color: $danger-bg; } .alert--warning { - background-color: color.adjust($warning, $lightness: 48%); color: $warning; -} - -.alert__close { - float: right; - color: inherit; + background-color: $warning-bg; } .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}); +/* Close button */ +.alert__close { + position: absolute; + top: 0.5rem; + right: 0.5rem; + padding: 0.25rem; + border: 0; + color: inherit; + cursor: pointer; } -// compensate for margin-bottom on messages -.project-header, -.hero-unit { - .messages + & { - margin-top: -$messages-margin-bottom; +/* Animation */ +@keyframes slide-in { + from { + opacity: 0; + transform: translateY(-10px); } -} + + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file diff --git a/meinberlin/assets/scss/components_user_facing/_alert.scss b/meinberlin/assets/scss/components_user_facing/_alert.scss index c3c89f2dc1..f91e51ea74 100644 --- a/meinberlin/assets/scss/components_user_facing/_alert.scss +++ b/meinberlin/assets/scss/components_user_facing/_alert.scss @@ -1,19 +1,18 @@ .alert { + position: relative; margin: $padding 0; background-color: $message-light-blue; } -.a4-alert__container { - display: flex; - justify-content: space-between; -} - -.a4-alert__content { - padding: $padding * 1.375 $padding * 1.125; +.alert__content { + padding: 1.125rem 2rem 1.125rem 1.125rem; + margin: 0 auto; + max-width: 81rem; } .alert__headline { - margin: 0; + margin: 0 0 .4em; + line-height: 1.353em; padding: 0; color: inherit; } @@ -24,9 +23,13 @@ } .alert__close { - padding: $padding * 0.625; - height: fit-content; + position: absolute; + top: 0.5rem; + right: 0.5rem; + padding: 0.25rem; + border: 0; color: inherit; + cursor: pointer; } .alert--success { @@ -47,14 +50,4 @@ .alert--small { padding: 0.5em; -} - -.alert:first-child { - margin: 0; - margin-bottom: $padding; -} - -.alert:last-child { - margin: 0; - margin-top: $padding; } \ No newline at end of file diff --git a/meinberlin/assets/scss/styles_dashboard/_variables.scss b/meinberlin/assets/scss/styles_dashboard/_variables.scss index 16a47065b4..87b200d6b5 100644 --- a/meinberlin/assets/scss/styles_dashboard/_variables.scss +++ b/meinberlin/assets/scss/styles_dashboard/_variables.scss @@ -8,11 +8,18 @@ $primary: #00a982 !default; $primary-tint: #f5ccdd !default; $secondary: #253276 !default; $secondary-darker: #1c2659 !default; -$success: #0a820a !default; -$info: $secondary !default; -$warning: #f49e00 !default; + +// Alerts and Messages +$info: #1c2659 !default; +$success: #0f5132 !default; +$warning: #664d03 !default; $danger: #a72b1e !default; +$info-bg: #ebf1f7 !default; +$success-bg: #e2f1eb !default; +$danger-bg: #fdecee !default; +$warning-bg: #f9f4e4 !default; + $body-bg: #fff !default; $bg-secondary: #f2f2f2 !default; $bg-tertiary: #e6e6e6 !default; diff --git a/meinberlin/templates/a4images/image_upload_widget.html b/meinberlin/templates/a4images/image_upload_widget.html index 0bb8635050..823ce00d6c 100644 --- a/meinberlin/templates/a4images/image_upload_widget.html +++ b/meinberlin/templates/a4images/image_upload_widget.html @@ -28,8 +28,6 @@ >
-
- {% include 'meinberlin_contrib/components/alert.html' with alert_message='Your image will be uploaded/removed once you save your changes at the end of this page.' alert_type='info' %} -
+ {% include 'meinberlin_contrib/components/alert.html' with alert_message='Your image will be uploaded/removed once you save your changes at the end of this page.' alert_type='info' %}