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