Removed role from header, notification and login
Began the process of removing all invalid role attributes starting with the header, login, and notifications components. Updated the corresponding scripts as well. Made a few structural changes to the header to simply it and then tested it to ensure notification still worked.
This commit is contained in:
parent
2f0b83b492
commit
ac08c77813
13 changed files with 74 additions and 92 deletions
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="theme-color" content="#FFFFFF"/>
|
<meta name="theme-color" content="#1d3040"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>
|
<title>
|
||||||
{% block title %}
|
{% block title %}
|
||||||
|
@ -15,14 +15,10 @@
|
||||||
{% if status %}
|
{% if status %}
|
||||||
<header>
|
<header>
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
<nav role="top-nav">
|
<nav class="top-nav">
|
||||||
<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 role="title">
|
|
||||||
<h1>{{ title }}</h1>
|
<h1>{{ title }}</h1>
|
||||||
</div>
|
<div class="nav-right">
|
||||||
<div role="nav-right">
|
|
||||||
{% if status %}
|
{% if status %}
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
{{ include("dash/partials/navigation.twig") }}
|
{{ include("dash/partials/navigation.twig") }}
|
||||||
|
@ -30,7 +26,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div role="notify">
|
<div class="notify" role="note">
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
{{ include("dash/partials/notifications.twig") }}
|
{{ include("dash/partials/notifications.twig") }}
|
||||||
{% endapply %}
|
{% endapply %}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<section role="login">
|
<section class="login">
|
||||||
<div>
|
<div>
|
||||||
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div role="menu">
|
<div class="menu">
|
||||||
{% if title == "Settings" %}
|
{% if title == "Settings" %}
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
{{ include("dash/partials/submenu_settings.twig") }}
|
{{ include("dash/partials/submenu_settings.twig") }}
|
||||||
|
@ -25,11 +25,11 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button role="menu-toggle">
|
<button class="menu-toggle">
|
||||||
<i class="ti ti-menu-2"></i>
|
<i class="ti ti-menu-2"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div role="mobile-menu">
|
<div class="mobile-menu">
|
||||||
{% if title == "Settings" %}
|
{% if title == "Settings" %}
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
{{ include("dash/partials/submenu_settings.twig") }}
|
{{ include("dash/partials/submenu_settings.twig") }}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<div role="notify-message">
|
<div class="notify-message">
|
||||||
<div role="notify-icons">
|
<div class="notify-icons">
|
||||||
<i class="ti ti-mood-smile" role="notify-good"></i>
|
<i class="ti ti-mood-smile notify-good"></i>
|
||||||
<i class="ti ti-mood-sad" role="notify-notgood"></i>
|
<i class="ti ti-mood-sad notify-notgood"></i>
|
||||||
<i class="ti ti-settings" role="notify-working"></i>
|
<i class="ti ti-settings notify-working"></i>
|
||||||
</div>
|
</div>
|
||||||
<div role="notify-text">
|
<div class="notify-text">
|
||||||
<span role="response-text">Hey Hey</span>
|
<span class="response-text">Hey Hey</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div role="submenu">
|
<div class="submenu">
|
||||||
<button id="save-toggle" title="save settings">
|
<button id="save-toggle" title="save settings">
|
||||||
<i class="ti ti-device-floppy"></i>
|
<i class="ti ti-device-floppy"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div role="submenu">
|
<div class="submenu">
|
||||||
<a href='/dashboard/pages' title="view pages">
|
<a href='/dashboard/pages' title="view pages">
|
||||||
<button>
|
<button>
|
||||||
<i class="ti ti-book-2"></i>
|
<i class="ti ti-book-2"></i>
|
||||||
|
|
|
@ -73,26 +73,26 @@ header {
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-left"] img {
|
header > nav > a img {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="title"] {
|
header > nav > h1 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="title"] h1 {
|
header > nav > h1 {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-right"] {
|
header > nav > div.nav-right {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div > div[role="mobile-menu"] {
|
header > nav > div > div.mobile-menu {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
@ -101,7 +101,7 @@ header > nav > div > div[role="mobile-menu"] {
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-right"] button {
|
header > nav > div.nav-right button {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
@ -109,25 +109,21 @@ header > nav > div[role="nav-right"] button {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
|
header > nav > div.nav-right > button.menu-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-right"] div[role="submenu"] {
|
header > nav > div.nav-right div.submenu {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-right"] div[role="submenu"] button {
|
header > nav > div.nav-right div.submenu button {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header > nav > div.nav-right div.submenu button[data-render="true"] {
|
||||||
> nav
|
|
||||||
> div[role="nav-right"]
|
|
||||||
div[role="submenu"]
|
|
||||||
button[data-render="true"] {
|
|
||||||
background: var(--tertiary);
|
background: var(--tertiary);
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
@ -141,11 +137,11 @@ header
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 530px) {
|
@media only screen and (max-width: 530px) {
|
||||||
header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
|
header > nav > div.nav-right > button.menu-toggle {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div > div[role="menu"] {
|
header > nav > div > div.menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/* LOGIN */
|
/* LOGIN */
|
||||||
|
|
||||||
section[role="login"],
|
section.login,
|
||||||
section[role="password-reset"],
|
section[role="password-reset"],
|
||||||
section[role="restore-fresh"],
|
section[role="restore-fresh"],
|
||||||
section[role="restore-backup"] {
|
section[role="restore-backup"] {
|
||||||
|
@ -20,19 +20,19 @@ section[role="restore-backup"] {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="login"] form input {
|
section.login form input {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="login"] form button {
|
section.login form button {
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
width: 82%;
|
width: 82%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="login"] form a {
|
section.login form a {
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
width: 10%;
|
width: 10%;
|
||||||
|
@ -88,7 +88,7 @@ section[role="restore-backup"] form input {
|
||||||
/* RESPONSIVE */
|
/* RESPONSIVE */
|
||||||
|
|
||||||
@media only screen and (max-width: 500px) {
|
@media only screen and (max-width: 500px) {
|
||||||
section[role="login"],
|
section.login,
|
||||||
section[role="password-reset"],
|
section[role="password-reset"],
|
||||||
section[role="restore-fresh"],
|
section[role="restore-fresh"],
|
||||||
section[role="restore-backup"] {
|
section[role="restore-backup"] {
|
||||||
|
@ -97,14 +97,14 @@ section[role="restore-backup"] form input {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 375px) {
|
@media only screen and (max-width: 375px) {
|
||||||
section[role="login"],
|
section.login,
|
||||||
section[role="password-reset"],
|
section[role="password-reset"],
|
||||||
section[role="restore-fresh"],
|
section[role="restore-fresh"],
|
||||||
section[role="restore-backup"] {
|
section[role="restore-backup"] {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="login"] img,
|
section.login img,
|
||||||
section[role="password-reset"] img,
|
section[role="password-reset"] img,
|
||||||
section[role="restore-fresh"] img,
|
section[role="restore-fresh"] img,
|
||||||
section[role="restore-backup"] img {
|
section[role="restore-backup"] img {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
header > nav[role="top-nav"] {
|
header > nav.top-nav {
|
||||||
display: grid;
|
display: grid;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
grid-template-columns: 50px auto auto;
|
grid-template-columns: 50px auto auto;
|
||||||
|
@ -15,7 +15,7 @@ header > nav[role="top-nav"] {
|
||||||
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div[role="notify"] {
|
header > div.notify {
|
||||||
display: grid;
|
display: grid;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -31,20 +31,17 @@ header > div[role="notify"] {
|
||||||
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div[role="notify"] > div[role="notify-message"] {
|
header > div.notify > div.notify-message {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 86%;
|
height: 86%;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div[role="notify"] > div[role="notify-message"] div {
|
header > div.notify > div.notify-message div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transition: all 0.2s linear;
|
transition: all 0.2s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header > div.notify > div.notify-message > div.notify-text {
|
||||||
> div[role="notify"]
|
|
||||||
> div[role="notify-message"]
|
|
||||||
> div[role="notify-text"] {
|
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 79%;
|
height: 79%;
|
||||||
|
@ -52,30 +49,23 @@ header
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header > div.notify > div.notify-message > div.notify-icons {
|
||||||
> div[role="notify"]
|
|
||||||
> div[role="notify-message"]
|
|
||||||
> div[role="notify-icons"] {
|
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header
|
header > div.notify > div.notify-message > div.notify-text span {
|
||||||
> div[role="notify"]
|
|
||||||
> div[role="notify-message"]
|
|
||||||
> div[role="notify-text"]
|
|
||||||
span {
|
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div[role="notify"] > div[role="notify-message"] i {
|
header > div.notify > div.notify-message i {
|
||||||
display: none;
|
display: none;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
i[role="notify-working"] {
|
i.notify-working {
|
||||||
animation: 2s infinite linear spin;
|
animation: 2s infinite linear spin;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|
|
@ -3767,15 +3767,15 @@ $8b9e2899b2e82f52$var$anime.random = function(min, max) {
|
||||||
var $8b9e2899b2e82f52$export$2e2bcd8739ae039 = $8b9e2899b2e82f52$var$anime;
|
var $8b9e2899b2e82f52$export$2e2bcd8739ae039 = $8b9e2899b2e82f52$var$anime;
|
||||||
|
|
||||||
|
|
||||||
const $accfb6154319a04b$var$notifcation = document.querySelector('[role="notify-message"]');
|
const $accfb6154319a04b$var$notifcation = document.querySelector(".notify-message");
|
||||||
const $accfb6154319a04b$var$notify = document.getElementById("notify-message");
|
const $accfb6154319a04b$var$notify = document.getElementById("notify-message");
|
||||||
const $accfb6154319a04b$var$responseText = document.querySelector('[role="response-text"]');
|
const $accfb6154319a04b$var$responseText = document.querySelector(".response-text");
|
||||||
const $accfb6154319a04b$var$notifyText = document.querySelector('[role="notify-text"]');
|
const $accfb6154319a04b$var$notifyText = document.querySelector(".notify-text");
|
||||||
const $accfb6154319a04b$var$notifyIcons = document.querySelector('[role="notify-icons"]');
|
const $accfb6154319a04b$var$notifyIcons = document.querySelector(".notify-icons");
|
||||||
//const notifyProgress = document.getElementById('notify-progress');
|
//const notifyProgress = document.getElementById('notify-progress');
|
||||||
const $accfb6154319a04b$var$iconGood = document.querySelector('[role="notify-good"]');
|
const $accfb6154319a04b$var$iconGood = document.querySelector(".notify-good");
|
||||||
const $accfb6154319a04b$var$iconNotGood = document.querySelector('[role="notify-notgood"]');
|
const $accfb6154319a04b$var$iconNotGood = document.querySelector(".notify-notgood");
|
||||||
const $accfb6154319a04b$var$iconWorking = document.querySelector('[role="notify-working"]');
|
const $accfb6154319a04b$var$iconWorking = document.querySelector(".notify-working");
|
||||||
class $accfb6154319a04b$export$2e2bcd8739ae039 {
|
class $accfb6154319a04b$export$2e2bcd8739ae039 {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
|
@ -3805,12 +3805,12 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
|
||||||
$accfb6154319a04b$var$iconWorking.style.display = "block";
|
$accfb6154319a04b$var$iconWorking.style.display = "block";
|
||||||
}
|
}
|
||||||
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
||||||
targets: document.querySelector('[role="top-nav"]'),
|
targets: document.querySelector(".top-nav"),
|
||||||
rotateX: "180deg",
|
rotateX: "180deg",
|
||||||
easing: "easeOutQuint"
|
easing: "easeOutQuint"
|
||||||
});
|
});
|
||||||
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
||||||
targets: document.querySelector('[role="notify"]'),
|
targets: document.querySelector(".notify"),
|
||||||
rotateX: "10deg",
|
rotateX: "10deg",
|
||||||
easing: "easeOutQuint",
|
easing: "easeOutQuint",
|
||||||
complete: ()=>{
|
complete: ()=>{
|
||||||
|
@ -3845,12 +3845,12 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
|
||||||
duration: 350
|
duration: 350
|
||||||
});
|
});
|
||||||
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
||||||
targets: document.querySelector('[role="top-nav"]'),
|
targets: document.querySelector(".top-nav"),
|
||||||
rotateX: "0deg",
|
rotateX: "0deg",
|
||||||
easing: "easeOutQuint"
|
easing: "easeOutQuint"
|
||||||
});
|
});
|
||||||
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
|
||||||
targets: document.querySelector('[role="notify"]'),
|
targets: document.querySelector(".notify"),
|
||||||
rotateX: "180deg",
|
rotateX: "180deg",
|
||||||
easing: "easeOutQuint"
|
easing: "easeOutQuint"
|
||||||
});
|
});
|
||||||
|
@ -7201,8 +7201,8 @@ class $f32c20539eb29606$export$2e2bcd8739ae039 {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor(){
|
constructor(){
|
||||||
this.mobile = false;
|
this.mobile = false;
|
||||||
this.mobileMenu = document.querySelector('[role="mobile-menu"]');
|
this.mobileMenu = document.querySelector(".mobile-menu");
|
||||||
document.querySelector('[role="menu-toggle"]').addEventListener("click", (e)=>this.handleMobile(e));
|
document.querySelector(".menu-toggle").addEventListener("click", (e)=>this.handleMobile(e));
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -4,9 +4,9 @@ export default class Menu {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {
|
constructor() {
|
||||||
this.mobile = false;
|
this.mobile = false;
|
||||||
this.mobileMenu = document.querySelector('[role="mobile-menu"]');
|
this.mobileMenu = document.querySelector('.mobile-menu');
|
||||||
document
|
document
|
||||||
.querySelector('[role="menu-toggle"]')
|
.querySelector('.menu-toggle')
|
||||||
.addEventListener('click', e => this.handleMobile(e));
|
.addEventListener('click', e => this.handleMobile(e));
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
import anime from 'animejs/lib/anime.es.js';
|
import anime from 'animejs/lib/anime.es.js';
|
||||||
const notifcation = document.querySelector('[role="notify-message"]');
|
const notifcation = document.querySelector('.notify-message');
|
||||||
const notify = document.getElementById('notify-message');
|
const notify = document.getElementById('notify-message');
|
||||||
const responseText = document.querySelector('[role="response-text"]');
|
const responseText = document.querySelector('.response-text');
|
||||||
const notifyText = document.querySelector('[role="notify-text"]');
|
const notifyText = document.querySelector('.notify-text');
|
||||||
const notifyIcons = document.querySelector('[role="notify-icons"]');
|
const notifyIcons = document.querySelector('.notify-icons');
|
||||||
//const notifyProgress = document.getElementById('notify-progress');
|
//const notifyProgress = document.getElementById('notify-progress');
|
||||||
const iconGood = document.querySelector('[role="notify-good"]');
|
const iconGood = document.querySelector('.notify-good');
|
||||||
const iconNotGood = document.querySelector('[role="notify-notgood"]');
|
const iconNotGood = document.querySelector('.notify-notgood');
|
||||||
const iconWorking = document.querySelector('[role="notify-working"]');
|
const iconWorking = document.querySelector('.notify-working');
|
||||||
|
|
||||||
export default class Notfications {
|
export default class Notfications {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
@ -41,13 +41,13 @@ export default class Notfications {
|
||||||
}
|
}
|
||||||
|
|
||||||
new anime({
|
new anime({
|
||||||
targets: document.querySelector('[role="top-nav"]'),
|
targets: document.querySelector('.top-nav'),
|
||||||
rotateX: '180deg',
|
rotateX: '180deg',
|
||||||
easing: 'easeOutQuint'
|
easing: 'easeOutQuint'
|
||||||
});
|
});
|
||||||
|
|
||||||
new anime({
|
new anime({
|
||||||
targets: document.querySelector('[role="notify"]'),
|
targets: document.querySelector('.notify'),
|
||||||
rotateX: '10deg',
|
rotateX: '10deg',
|
||||||
easing: 'easeOutQuint',
|
easing: 'easeOutQuint',
|
||||||
complete: () => {
|
complete: () => {
|
||||||
|
@ -85,13 +85,13 @@ export default class Notfications {
|
||||||
});
|
});
|
||||||
|
|
||||||
new anime({
|
new anime({
|
||||||
targets: document.querySelector('[role="top-nav"]'),
|
targets: document.querySelector('.top-nav'),
|
||||||
rotateX: '0deg',
|
rotateX: '0deg',
|
||||||
easing: 'easeOutQuint'
|
easing: 'easeOutQuint'
|
||||||
});
|
});
|
||||||
|
|
||||||
new anime({
|
new anime({
|
||||||
targets: document.querySelector('[role="notify"]'),
|
targets: document.querySelector('.notify'),
|
||||||
rotateX: '180deg',
|
rotateX: '180deg',
|
||||||
easing: 'easeOutQuint'
|
easing: 'easeOutQuint'
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue