[#2757] Add home view styling for when notifications exist

src/open_inwoner/js/components/index.js

@@ -36,6 +36,7 @@ import './siteimprove/tracking'
 import './twofactor-sms'
 import { FileInput } from './form/FileInput'
 import { ToggleHide } from './card/ToggleHide'
+import './views'
 
 const htmx = (window.htmx = require('htmx.org'))
 

src/open_inwoner/js/components/notifications/index.js

@@ -93,6 +93,8 @@ export class Notification {
    */
   close() {
     this.node.parentElement.removeChild(this.node)
+    // Dispatch a custom event to notify other components that a notification has been closed
+    document.dispatchEvent(new CustomEvent('notificationClosed'))
   }
 
   /**

src/open_inwoner/js/components/views/home-view.js

@@ -0,0 +1,44 @@
+export class NotificationHandler {
+  static selector = '.view---pages-root'
+
+  constructor(root) {
+    this.root = root
+    this.notificationsSection = document.querySelector('.notification')
+
+    this.checkNotifications()
+
+    // Listen for the dispatch event from notifications
+    document.addEventListener(
+      'notificationClosed',
+      this.updateStyling.bind(this)
+    )
+  }
+
+  checkNotifications() {
+    if (
+      this.notificationsSection &&
+      this.notificationsSection.children.length > 0
+    ) {
+      this.root.classList.add('has-notifications')
+    }
+  }
+
+  /**
+   * Updates styling based on presence of the dispatch event
+   */
+  updateStyling() {
+    const notificationExists =
+      this.notificationsSection.querySelector('.notification')
+    if (!notificationExists) {
+      this.root.classList.remove('has-notifications')
+    }
+  }
+}
+
+/**
+ * Controls deviant styling of notifications in Homepage
+ */
+const rootElement = document.querySelector(NotificationHandler.selector)
+if (rootElement) {
+  new NotificationHandler(rootElement)
+}

src/open_inwoner/js/components/views/index.js

@@ -0,0 +1,2 @@
+// Handling exceptions in certain views
+import './home-view'

src/open_inwoner/scss/components/Grid/Grid.scss

@@ -90,15 +90,14 @@
   }
 
   &__welcome.plugin {
-    margin-top: -80px;
+    margin-top: -130px;
     background-color: var(--color-white);
     border-radius: var(--border-radius);
     padding: var(--spacing-large);
     box-sizing: border-box;
     width: 100%;
 
     @media (min-width: 768px) {
-      margin-top: -130px;
       width: 50%;
     }
   }

src/open_inwoner/scss/views/_view.scss

@@ -1,4 +1,30 @@
 .view {
+  &---pages-root {
+    &.has-notifications {
+      .notifications {
+        margin-top: -41px;
+        @media (min-width: 768px) {
+          margin-top: -32px;
+        }
+      }
+      .grid__welcome.plugin {
+        margin-top: -40px;
+        padding: 0;
+
+        @media (min-width: 768px) {
+          margin-top: -30px;
+        }
+      }
+    }
+    .container .button--icon-after {
+      padding-left: 0;
+
+      @media (min-width: 768px) {
+        padding-left: var(--spacing-large);
+      }
+    }
+  }
+
   &--accounts-contact_list {
     .form--horizontal {
       padding-top: var(--row-height);