Backend notification functionality and styling.

This commit is contained in:
Alex Tselegidis 2022-01-17 21:19:17 +01:00
parent 6589e4e5c8
commit 777d15423c
2 changed files with 11 additions and 10 deletions

View file

@ -83,22 +83,23 @@ root {
margin-right: 15px; margin-right: 15px;
} }
#notification .alert button { #notification .alert button:not(.btn-close) {
margin-right: 15px; margin-right: 15px;
} }
#notification .alert .btn-close {
margin-top: 5px;
}
#notification .alert { #notification .alert {
margin-bottom: 0; margin-bottom: 0;
background-color: #f5e8a8; background-color: #f5e8a8;
color: #9e9980; color: #9e9980;
box-shadow: 1px 1px 1px #a0a0a0; box-shadow: 1px 1px 1px #a0a0a0;
padding: 15px;
position: fixed; position: fixed;
z-index: 200; z-index: 200;
right: 15px; right: 15px;
bottom: 15px; bottom: 15px;
min-width: 300px;
max-width: 750px;
} }
#notification .close { #notification .close {

View file

@ -73,15 +73,15 @@ window.App.Layouts.Backend = (function () {
$notification.empty(); $notification.empty();
const $instance = $('<div/>', { const $instance = $('<div/>', {
'class': 'notification alert', 'class': 'notification alert alert-dismissible fade show',
'html': [ 'html': [
$('<strong/>', {
'html': message
}),
$('<button/>', { $('<button/>', {
'type': 'button', 'type': 'button',
'class': 'btn-close', 'class': 'btn-close',
'data-dismiss': 'alert' 'data-bs-dismiss': 'alert'
}),
$('<strong/>', {
'html': message
}) })
] ]
}).appendTo($notification); }).appendTo($notification);
@ -93,7 +93,7 @@ window.App.Layouts.Backend = (function () {
'on': { 'on': {
'click': action.function 'click': action.function
} }
}).appendTo($instance); }).prependTo($instance);
}); });
$notification.show('fade'); $notification.show('fade');