cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [header] moved inline style in css file

pull/93/head
Sami Mokaddem 2022-02-09 09:51:21 +01:00
parent e67c711935
commit ec37a637f8
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
4 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
templates/element/layouts/header/header-notification-item.php
View File

@ -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; ?>

2
templates/element/layouts/header/header-notifications.php
View File

@ -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>

2
webroot/css/layout-style.css
View File

@ -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;
}
}

29
webroot/css/layout.css
View File

@ -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);