[#1788] Modify styling for case notifications

maykinmedia · Oct 11, 2023 · e90ccf7 · e90ccf7
1 parent f17002b
commit e90ccf7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git 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 %}
-<div class="notification{% if contents %} notification--contents{% endif %}{% if type %} notification--{{ type }}{% endif %}{% if compact %} notification--compact{% endif %}">
+<div class="notification{% if contents %} notification--contents{% endif %}{% if type %} notification--{{ type }}{% endif %}{% if compact %} notification--compact{% endif %} {% if ctx %}notification--{{ ctx }}{% endif %}">
     {% if not icon == False %}
         <div class="notification__icon">
             {% icon icon %}

diff --git 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
@@ -1,7 +1,7 @@
 .notification {
   --notification-color-background: var(--color-orange);
   --notification-color-text: var(--color-orange-dark);
-
+  
   background-color: var(--notification-color-background);
   border-radius: var(--border-radius);
   color: var(--notification-color-text);
@@ -49,10 +49,6 @@
     width: 24px;
   }
 
-  &__content {
-    width: 100%;
-  }
-
   &__close {
     position: absolute;
     top: var(--spacing-small);
@@ -78,4 +74,23 @@
   @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
@@ -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 %}
 
 <div id="cases-list-anchors-oob-desktop" hx-swap-oob="true">
     {% anchor_menu anchors desktop=True %}
@@ -14,7 +14,7 @@ <h2 class="h2" id="cases">{{ page_title }} ({{ paginator.count }})</h2>
             <div class="card__body">
                 <!-- submission cases -->
                 {% if case.datum_laatste_wijziging %}
-                    <a href="{% url 'cases:case_detail' object_id=case.uuid %}" class="cases__link">
+                    <a href="{{ case.url }}"  class="cases__link">
                     <p class="h4"><span class="link link__text">{{ case.naam }}</span></p>
                     {% render_list %}
                     <span class="case-list">