From ec37a637f8d0629baed669f83ff548a566c8da86 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Wed, 9 Feb 2022 09:51:21 +0100
Subject: [PATCH] chg: [header] moved inline style in css file

---
 .../header/header-notification-item.php       | 14 ++++-----
 .../layouts/header/header-notifications.php   |  2 +-
 webroot/css/layout-style.css                  |  2 +-
 webroot/css/layout.css                        | 29 +++++++++++++++++++
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/templates/element/layouts/header/header-notification-item.php b/templates/element/layouts/header/header-notification-item.php
index 36156d7..59a3df8 100644
--- a/templates/element/layouts/header/header-notification-item.php
+++ b/templates/element/layouts/header/header-notification-item.php
@@ -3,34 +3,32 @@
 use Cake\Routing\Router;
 
 $seed = 's-' . mt_rand();
-$datetimeMW = 90;
 $variant = empty($notification['variant']) ? 'primary' : $notification['variant'];
 ?>
 <a
-    class="dropdown-item px-2 btn"
+    class="notification-item dropdown-item px-2 btn"
     <?php if (empty($notification['_useModal'])): ?>
         href="<?= Router::url($notification['router']) ?>"
     <?php else: ?>
         onclick="UI.submissionModal('<?= Router::url($notification['router']) ?>', {closeOnSuccess: false})"
     <?php endif; ?>
-    style="max-height: 76px;"
     title="<?= sprintf('%s:&#010; %s', $this->ValueGetter->get($notification['text']), $this->ValueGetter->get($notification['details'])) ?>"
 >
     <div class="d-flex align-items-center">
         <?php if (!empty($notification['icon'])) : ?>
-            <span class="rounded-circle <?= "btn-{$variant} me-2" ?> position-relative" style="width: 36px; height: 36px">
+            <span class="notification-icon rounded-circle <?= "btn-{$variant} me-2" ?> position-relative">
                 <?= $this->Bootstrap->icon($notification['icon'], ['class' => ['fa-fw', 'position-absolute top-50 start-50 translate-middle']]) ?>
             </span>
         <?php endif; ?>
-        <span class="" style="max-width: calc(100% - 40px - 0.25rem);">
+        <span class="notification-text-container">
             <div class="d-flex justify-content-between align-items-center">
-                <span class="text-truncate" style=" max-width: calc(100% - <?= $datetimeMW ?>px);"><?= $this->ValueGetter->get($notification['text']) ?></span>
+                <span class="notification-title text-truncate"><?= $this->ValueGetter->get($notification['text']) ?></span>
                 <?php if (!empty($notification['datetime'])) : ?>
-                    <small id="<?= $seed ?>" class="text-muted fw-light" style="max-width: <?= $datetimeMW ?>px;"><?= h($notification['datetime']->format('Y-m-d\TH:i:s')) ?></small>
+                    <small id="<?= $seed ?>" class="notification-date text-muted fw-light"><?= h($notification['datetime']->format('Y-m-d\TH:i:s')) ?></small>
                 <?php endif; ?>
             </div>
             <?php if (!empty($notification['details'])) : ?>
-                <small class="text-muted text-wrap lh-1 text-truncate" style="-webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;">
+                <small class="notification-details text-muted text-wrap lh-1 text-truncate">
                     <?= $this->ValueGetter->get($notification['details']) ?>
                 </small>
             <?php endif; ?>
diff --git a/templates/element/layouts/header/header-notifications.php b/templates/element/layouts/header/header-notifications.php
index 2888de5..e18b619 100644
--- a/templates/element/layouts/header/header-notifications.php
+++ b/templates/element/layouts/header/header-notifications.php
@@ -30,7 +30,7 @@ $variant = array_flip($severity)[$maxSeverity];
             ?>
         </span>
     </a>
-    <div class="dropdown-menu dropdown-menu-end" style="min-width: 320px; max-width: 25vw; max-height: 50vh; overflow-y: auto;">
+    <div class="dropdown-menu dropdown-menu-end notification-menu">
         <h6 class="dropdown-header d-flex justify-content-between">
             <span><?= __n('{0} Notification', '{0} Notifications', count($notifications), count($notifications)) ?></span>
         </h6>
diff --git a/webroot/css/layout-style.css b/webroot/css/layout-style.css
index 3efdc2f..f01a93d 100644
--- a/webroot/css/layout-style.css
+++ b/webroot/css/layout-style.css
@@ -136,4 +136,4 @@ header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:ho
 }
 .navbar-dark .composed-app-icon-container > .app-icon {
     background-color: white;
-}
\ No newline at end of file
+}
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index 4df9f4b..92a6afe 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -513,6 +513,35 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
     min-width: 25px;
 }
 
+.navbar .right-navbar .notification-menu {
+    min-width: 320px;
+    max-width: 25vw;
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.navbar .right-navbar .notification-menu a.notification-item {
+    max-height: 76px;
+}
+.navbar .right-navbar .notification-menu a.notification-item .notification-icon {
+    width: 36px;
+    height: 36px
+}
+.navbar .right-navbar .notification-menu a.notification-item .notification-text-container {
+    max-width: calc(100% - 40px - 0.25rem);
+}
+.navbar .right-navbar .notification-menu a.notification-item .notification-title {
+    max-width: calc(100% - 90px);
+}
+.navbar .right-navbar .notification-menu a.notification-item .notification-date {
+    max-width: 90px;
+}
+.navbar .right-navbar .notification-menu a.notification-item .notification-details {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
 .composed-app-icon-container {
     height: calc(var(--navbar-height) - 10px);
     width: calc(var(--navbar-height) - 10px);