Notifications Rework #81

Integrated the Notifications UI component into the header to streamline
user alerts into the overall experience.

Also added titles to use the space created by moving the notifications
compoenent to it's own space.
This commit is contained in:
Ro 2023-03-26 19:47:42 -07:00
parent 78bfe4596b
commit 97278e3a90
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
6 changed files with 162 additions and 84 deletions

View file

@ -14,14 +14,12 @@
{% if status %}
<header>
{% apply spaceless %}
<nav>
<nav role="top-nav">
<div role="nav-left">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
</div>
<div role="notifications">
{% apply spaceless %}
{{ include("dash/partials/notifications.twig") }}
{% endapply %}
<div role="title">
<h1>{{ title }}</h1>
</div>
<div role="nav-right">
{% if status %}
@ -31,6 +29,11 @@
{% endif %}
</div>
</nav>
<div role="notify">
{% apply spaceless %}
{{ include("dash/partials/notifications.twig") }}
{% endapply %}
</div>
{% endapply %}
{% endif %}
</header>

View file

@ -60,19 +60,12 @@ header {
width: 100%;
max-width: 900px;
margin: 10px auto;
background: var(--white);
height: 50px;
border-radius: 5px;
left: 50%;
transform: translate(-50%, 0);
position: fixed;
z-index: 500;
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
}
header > nav {
display: grid;
grid-template-columns: 50px 1fr auto;
}
header > nav > div[role="nav-left"] img {
@ -80,6 +73,16 @@ header > nav > div[role="nav-left"] img {
padding: 5px;
}
header > nav > div[role="title"] {
text-align: left;
height: 100%;
}
header > nav > div[role="title"] h1 {
color: var(--primary);
margin: 15px;
}
header > nav > div[role="nav-right"] {
padding: 5px;
}

View file

@ -1,53 +1,78 @@
header > nav > div[role="notifications"] {
width: 100%;
header > nav[role="top-nav"] {
display: grid;
text-align: right;
grid-template-columns: 50px auto auto;
height: 100%;
position: relative;
background: var(--white);
border-radius: 3px;
transform-style: preserve-3d;
transform-origin: 100% 50%;
transform: rotateX(0deg);
transition: all 0.1s ease-out;
perspective: 500px;
backface-visibility: hidden;
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
}
header > nav > div[role="notifications"] > div[role="notify-message"] {
header > div[role="notify"] {
display: grid;
height: 100%;
position: relative;
background: var(--black);
border-radius: 3px;
transform-style: preserve-3d;
transform-origin: 100% 50%;
transform: rotateX(180deg);
transition: all 0.3s ease-out;
perspective: 500px;
backface-visibility: hidden;
margin-top: -50px;
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
}
header > div[role="notify"] > div[role="notify-message"] {
display: flex;
height: 86%;
}
header > nav > div[role="notifications"] > div[role="notify-message"] div {
header > div[role="notify"] > div[role="notify-message"] div {
display: inline-block;
transition: all 0.2s linear;
}
header
> nav
> div[role="notifications"]
> div[role="notify"]
> div[role="notify-message"]
> div[role="notify-text"] {
color: var(--white);
border-radius: 5px;
height: 79%;
margin-top: 5px;
margin-top: 8px;
opacity: 0;
}
header
> nav
> div[role="notifications"]
> div[role="notify"]
> div[role="notify-message"]
> div[role="notify-icons"] {
margin: 5px;
width: 0;
width: 40px;
opacity: 0;
}
header
> nav
> div[role="notifications"]
> div[role="notify"]
> div[role="notify-message"]
> div[role="notify-text"]
span {
display: block;
padding: 5px;
margin-top: 4px;
}
header > nav > div[role="notifications"] > div[role="notify-message"] i {
header > div[role="notify"] > div[role="notify-message"] i {
display: none;
color: var(--primary);
color: var(--white);
}
i[role="notify-working"] {

View file

@ -8,7 +8,7 @@ article[role="settings"] h1 {
color: var(--white);
}
section label {
section[role="member-settings"] label {
background: var(--primary);
color: var(--white);
padding: 3px;

View file

@ -4201,36 +4201,58 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
$accfb6154319a04b$var$iconWorking.style.display = "block";
}
$accfb6154319a04b$var$responseText.innerHTML = text;
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyIcons,
width: 39,
opacity: 1,
easing: "easeInQuint",
duration: 300
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="top-nav"]'),
rotateX: "180deg",
easing: "easeOutQuint"
});
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyText,
backgroundColor: color,
opacity: 1,
easing: "easeInOutQuad",
duration: 400,
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="notify"]'),
rotateX: "10deg",
easing: "easeOutQuint",
complete: ()=>{
setTimeout(()=>{
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyText,
backgroundColor: color,
opacity: 0,
easing: "easeInOutQuad",
duration: 400
});
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyIcons,
width: 0,
opacity: 0,
easing: "easeOutQuint",
duration: 350
});
}, 2000);
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyIcons,
width: 39,
opacity: 1,
easing: "easeInQuint",
duration: 300
});
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyText,
backgroundColor: color,
opacity: 1,
easing: "easeInOutQuad",
duration: 400,
complete: ()=>{
setTimeout(()=>{
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyText,
backgroundColor: color,
opacity: 0,
easing: "easeInOutQuad",
duration: 400
});
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyIcons,
width: 0,
opacity: 0,
easing: "easeOutQuint",
duration: 350
});
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="top-nav"]'),
rotateX: "0deg",
easing: "easeOutQuint"
});
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="notify"]'),
rotateX: "180deg",
easing: "easeOutQuint"
});
}, 2500);
}
});
}
});
}

View file

@ -40,38 +40,63 @@ export default class Notfications {
}
responseText.innerHTML = text;
anime({
targets: notifyIcons,
width: 39,
opacity: 1,
easing: 'easeInQuint',
duration: 300
new anime({
targets: document.querySelector('[role="top-nav"]'),
rotateX: '180deg',
easing: 'easeOutQuint'
});
anime({
targets: notifyText,
backgroundColor: color,
opacity: 1,
easing: 'easeInOutQuad',
duration: 400,
new anime({
targets: document.querySelector('[role="notify"]'),
rotateX: '10deg',
easing: 'easeOutQuint',
complete: () => {
setTimeout(() => {
anime({
targets: notifyText,
backgroundColor: color,
opacity: 0,
easing: 'easeInOutQuad',
duration: 400
});
new anime({
targets: notifyIcons,
width: 39,
opacity: 1,
easing: 'easeInQuint',
duration: 300
});
anime({
targets: notifyIcons,
width: 0,
opacity: 0,
easing: 'easeOutQuint',
duration: 350
});
}, 2000);
new anime({
targets: notifyText,
backgroundColor: color,
opacity: 1,
easing: 'easeInOutQuad',
duration: 400,
complete: () => {
setTimeout(() => {
anime({
targets: notifyText,
backgroundColor: color,
opacity: 0,
easing: 'easeInOutQuad',
duration: 400
});
anime({
targets: notifyIcons,
width: 0,
opacity: 0,
easing: 'easeOutQuint',
duration: 350
});
new anime({
targets: document.querySelector('[role="top-nav"]'),
rotateX: '0deg',
easing: 'easeOutQuint'
});
new anime({
targets: document.querySelector('[role="notify"]'),
rotateX: '180deg',
easing: 'easeOutQuint'
});
}, 2500);
}
});
}
});
}