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
parent
78bfe4596b
commit
97278e3a90
6 changed files with 162 additions and 84 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"] {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue