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,14 +4201,24 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
$accfb6154319a04b$var$iconWorking.style.display = "block";
}
$accfb6154319a04b$var$responseText.innerHTML = text;
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="top-nav"]'),
rotateX: "180deg",
easing: "easeOutQuint"
});
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="notify"]'),
rotateX: "10deg",
easing: "easeOutQuint",
complete: ()=>{
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyIcons,
width: 39,
opacity: 1,
easing: "easeInQuint",
duration: 300
});
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: $accfb6154319a04b$var$notifyText,
backgroundColor: color,
opacity: 1,
@ -4230,7 +4240,19 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
easing: "easeOutQuint",
duration: 350
});
}, 2000);
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,7 +40,18 @@ export default class Notfications {
}
responseText.innerHTML = text;
anime({
new anime({
targets: document.querySelector('[role="top-nav"]'),
rotateX: '180deg',
easing: 'easeOutQuint'
});
new anime({
targets: document.querySelector('[role="notify"]'),
rotateX: '10deg',
easing: 'easeOutQuint',
complete: () => {
new anime({
targets: notifyIcons,
width: 39,
opacity: 1,
@ -48,7 +59,7 @@ export default class Notfications {
duration: 300
});
anime({
new anime({
targets: notifyText,
backgroundColor: color,
opacity: 1,
@ -71,7 +82,21 @@ export default class Notfications {
easing: 'easeOutQuint',
duration: 350
});
}, 2000);
new anime({
targets: document.querySelector('[role="top-nav"]'),
rotateX: '0deg',
easing: 'easeOutQuint'
});
new anime({
targets: document.querySelector('[role="notify"]'),
rotateX: '180deg',
easing: 'easeOutQuint'
});
}, 2500);
}
});
}
});
}