are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 Wiki Activity

Removed role from header, notification and login

Browse Source 
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.
develop
Ro 1 year ago
parent 2f0b83b492
commit ac08c77813
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG Key ID: 29B551CDBD4D3B50
13 changed files with 74 additions and 92 deletions
Show Stats Download Patch File Download Diff File

16
brain/views/dash/_frame.twig
Unescape Escape View File

@ -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 %}

2
brain/views/dash/forms/login.twig
Unescape Escape View File

@ -1,4 +1,4 @@
<section role="login">
<section class="login">
<div>
<img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/>
</div>

6
brain/views/dash/partials/navigation.twig
Unescape Escape View File

@ -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") }}

14
brain/views/dash/partials/notifications.twig
Unescape Escape View File

@ -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>

2
brain/views/dash/partials/submenu_settings.twig
Unescape Escape View File

@ -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>

2
brain/views/dash/partials/submenu_start.twig
Unescape Escape View File

@ -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>

28
public/assets/css/dash/frame.css
Unescape Escape View File

@ -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;
}
}

14
public/assets/css/dash/init.css
Unescape Escape View File

@ -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 {

28
public/assets/css/dash/notifications.css
Unescape Escape View File

@ -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;

26
public/assets/scripts/dash.js
Unescape Escape View File

@ -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

2
public/assets/scripts/dash.js.map
View File

File diff suppressed because one or more lines are too long

4
src/com/ui/Menu.js
Unescape Escape View File

@ -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));
}
//--------------------------

22
src/com/ui/Notifications.js
Unescape Escape View File

@ -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'
});

Write Preview
Loading…
Cancel
Save