diff --git a/src/open_inwoner/components/templates/components/Notification/Notification.html b/src/open_inwoner/components/templates/components/Notification/Notification.html index 8305b92862..b6c7f87ad1 100644 --- a/src/open_inwoner/components/templates/components/Notification/Notification.html +++ b/src/open_inwoner/components/templates/components/Notification/Notification.html @@ -1,5 +1,5 @@ {% load i18n button_tags icon_tags button_tags icon_tags %} -
+
{% if not icon == False %}
{% icon icon %} diff --git a/src/open_inwoner/components/templatetags/notification_tags.py b/src/open_inwoner/components/templatetags/notification_tags.py index 799147c5e4..ea9aa01db6 100644 --- a/src/open_inwoner/components/templatetags/notification_tags.py +++ b/src/open_inwoner/components/templatetags/notification_tags.py @@ -31,7 +31,7 @@ def notification(type, message, **kwargs): Add a notification to the screen. These will be places inline. Usage: - {% notification type="success" message="this is the message" closable=True %} + {% notification type="success" message="this is the message" closable=True ctx="cases" %} {% notification type="warning" title="title" message="this is the message" action="#" action_text="Verzoek opsturen" %} Variables: @@ -43,6 +43,8 @@ def notification(type, message, **kwargs): - action_text: string | The text of the button. - closable: bool | If a close button should be shown. - compact: boolean | Whether to use compact styling or not. + - ctx: string | The context in which the tag is rendered; used to add + classes to HTML element and override CSS """ message_types = { "debug": "bug_report", diff --git a/src/open_inwoner/scss/components/Notification/_Notification.scss b/src/open_inwoner/scss/components/Notification/_Notification.scss index f77ab4fac9..b492c42f74 100644 --- a/src/open_inwoner/scss/components/Notification/_Notification.scss +++ b/src/open_inwoner/scss/components/Notification/_Notification.scss @@ -49,10 +49,6 @@ width: 24px; } - &__content { - width: 100%; - } - &__close { position: absolute; top: var(--spacing-small); @@ -78,4 +74,22 @@ @media (min-width: 768px) { margin: var(--spacing-tiny) 0; } + + // Overrides based on context + &--cases { + padding: var(--spacing-small); + margin-bottom: var(--spacing-medium); + align-items: center; + + .notification__icon { + display: flex; + padding-left: var(--spacing-medium); + align-items: center; + } + + .notification__close { + top: 0; + position: inherit; + } + } } diff --git a/src/open_inwoner/templates/pages/cases/list_inner.html b/src/open_inwoner/templates/pages/cases/list_inner.html index 2fb071f71b..82db67e63c 100644 --- a/src/open_inwoner/templates/pages/cases/list_inner.html +++ b/src/open_inwoner/templates/pages/cases/list_inner.html @@ -1,4 +1,4 @@ -{% load link_tags button_tags i18n anchor_menu_tags grid_tags icon_tags list_tags pagination_tags utils %} +{% load link_tags button_tags i18n anchor_menu_tags grid_tags icon_tags list_tags notification_tags pagination_tags utils %}
{% anchor_menu anchors desktop=True %} @@ -14,7 +14,7 @@

{{ page_title }} ({{ paginator.count }})

{% if case.datum_laatste_wijziging %} - +

{{ case.naam }}

{% render_list %}