forked from projects/fipamo
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:
parent
78bfe4596b
commit
97278e3a90
6 changed files with 162 additions and 84 deletions
|
@ -14,14 +14,12 @@
|
||||||
{% if status %}
|
{% if status %}
|
||||||
<header>
|
<header>
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
<nav>
|
<nav role="top-nav">
|
||||||
<div role="nav-left">
|
<div role="nav-left">
|
||||||
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
|
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
|
||||||
</div>
|
</div>
|
||||||
<div role="notifications">
|
<div role="title">
|
||||||
{% apply spaceless %}
|
<h1>{{ title }}</h1>
|
||||||
{{ include("dash/partials/notifications.twig") }}
|
|
||||||
{% endapply %}
|
|
||||||
</div>
|
</div>
|
||||||
<div role="nav-right">
|
<div role="nav-right">
|
||||||
{% if status %}
|
{% if status %}
|
||||||
|
@ -31,6 +29,11 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div role="notify">
|
||||||
|
{% apply spaceless %}
|
||||||
|
{{ include("dash/partials/notifications.twig") }}
|
||||||
|
{% endapply %}
|
||||||
|
</div>
|
||||||
{% endapply %}
|
{% endapply %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -60,19 +60,12 @@ header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
background: var(--white);
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 500;
|
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 {
|
header > nav > div[role="nav-left"] img {
|
||||||
|
@ -80,6 +73,16 @@ header > nav > div[role="nav-left"] img {
|
||||||
padding: 5px;
|
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"] {
|
header > nav > div[role="nav-right"] {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,53 +1,78 @@
|
||||||
header > nav > div[role="notifications"] {
|
header > nav[role="top-nav"] {
|
||||||
width: 100%;
|
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;
|
display: flex;
|
||||||
height: 86%;
|
height: 86%;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="notifications"] > div[role="notify-message"] div {
|
header > div[role="notify"] > div[role="notify-message"] div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transition: all 0.2s linear;
|
transition: all 0.2s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header
|
||||||
> nav
|
> div[role="notify"]
|
||||||
> div[role="notifications"]
|
|
||||||
> div[role="notify-message"]
|
> div[role="notify-message"]
|
||||||
> div[role="notify-text"] {
|
> div[role="notify-text"] {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 79%;
|
height: 79%;
|
||||||
margin-top: 5px;
|
margin-top: 8px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header
|
||||||
> nav
|
> div[role="notify"]
|
||||||
> div[role="notifications"]
|
|
||||||
> div[role="notify-message"]
|
> div[role="notify-message"]
|
||||||
> div[role="notify-icons"] {
|
> div[role="notify-icons"] {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
width: 0;
|
width: 40px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header
|
||||||
> nav
|
> div[role="notify"]
|
||||||
> div[role="notifications"]
|
|
||||||
> div[role="notify-message"]
|
> div[role="notify-message"]
|
||||||
> div[role="notify-text"]
|
> div[role="notify-text"]
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px;
|
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;
|
display: none;
|
||||||
color: var(--primary);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
i[role="notify-working"] {
|
i[role="notify-working"] {
|
||||||
|
|
|
@ -8,7 +8,7 @@ article[role="settings"] h1 {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
section label {
|
section[role="member-settings"] label {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
|
|
|
@ -4201,14 +4201,24 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
|
||||||
$accfb6154319a04b$var$iconWorking.style.display = "block";
|
$accfb6154319a04b$var$iconWorking.style.display = "block";
|
||||||
}
|
}
|
||||||
$accfb6154319a04b$var$responseText.innerHTML = text;
|
$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,
|
targets: $accfb6154319a04b$var$notifyIcons,
|
||||||
width: 39,
|
width: 39,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
easing: "easeInQuint",
|
easing: "easeInQuint",
|
||||||
duration: 300
|
duration: 300
|
||||||
});
|
});
|
||||||
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
||||||
targets: $accfb6154319a04b$var$notifyText,
|
targets: $accfb6154319a04b$var$notifyText,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
|
@ -4230,7 +4240,19 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
|
||||||
easing: "easeOutQuint",
|
easing: "easeOutQuint",
|
||||||
duration: 350
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,7 +40,18 @@ export default class Notfications {
|
||||||
}
|
}
|
||||||
responseText.innerHTML = text;
|
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,
|
targets: notifyIcons,
|
||||||
width: 39,
|
width: 39,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
|
@ -48,7 +59,7 @@ export default class Notfications {
|
||||||
duration: 300
|
duration: 300
|
||||||
});
|
});
|
||||||
|
|
||||||
anime({
|
new anime({
|
||||||
targets: notifyText,
|
targets: notifyText,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
|
@ -71,7 +82,21 @@ export default class Notfications {
|
||||||
easing: 'easeOutQuint',
|
easing: 'easeOutQuint',
|
||||||
duration: 350
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue