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

Compare commits

base: are0h:develop
Branches Tags
are0h:develop
are0h:toggle-buttons-#109
are0h:beta
are0h:nodejs-version-freeze
are0h:sql-version-freeze
are0h:1.0.0
are0h:b1.0.1
are0h:b1.2.0
are0h:b1.2.1
are0h:b1.2.2
are0h:b1.2.3
are0h:b1.2.4
are0h:b2.0.0
are0h:b2.1.0
are0h:b2.1.1
are0h:b2.2.0
are0h:b2.2.1
are0h:b2.2.2
are0h:b2.2.3
are0h:b2.2.4
are0h:b2.3.0
are0h:b2.4.0
are0h:b2.4.1
are0h:b2.5.0
are0h:b2.5.1
are0h:b2.6.0
are0h:b2.6.1
..
compare: are0h:toggle-buttons-#109
Branches Tags
are0h:develop
are0h:toggle-buttons-#109
are0h:beta
are0h:nodejs-version-freeze
are0h:sql-version-freeze
are0h:1.0.0
are0h:b1.0.1
are0h:b1.2.0
are0h:b1.2.1
are0h:b1.2.2
are0h:b1.2.3
are0h:b1.2.4
are0h:b2.0.0
are0h:b2.1.0
are0h:b2.1.1
are0h:b2.2.0
are0h:b2.2.1
are0h:b2.2.2
are0h:b2.2.3
are0h:b2.2.4
are0h:b2.3.0
are0h:b2.4.0
are0h:b2.4.1
are0h:b2.5.0
are0h:b2.5.1
are0h:b2.6.0
are0h:b2.6.1

1 Commits
develop ... toggle-but

Author SHA1 Message Date
Zoë Bijl a687b50452 Fix for #109, add toggle state to buttons 
Adds aria-pressed to the “Options” toggle buttons; this communicates their state to assistive technologies.
 1 year ago
21 changed files with 213 additions and 185 deletions
Show Stats

2
README.md
Unescape Escape View File

@ -2,7 +2,7 @@
The Fipamo project was born from a need for a simple, easy to use no data blog platform that doesn't require much effort to set up and maintain. Fipamo uses Markdown to handle posts and renders them to flat html so you can serve them from anywhere. No complicated set ups. No long list of dependencies. Just set up and go. The Fipamo project was born from a need for a simple, easy to use no data blog platform that doesn't require much effort to set up and maintain. Fipamo uses Markdown to handle posts and renders them to flat html so you can serve them from anywhere. No complicated set ups. No long list of dependencies. Just set up and go.
Because it's the 21 century. This should be easy. Because nobody has time for all that.
## Check the (WIP) Docs to get you started. <br> ## Check the (WIP) Docs to get you started. <br>

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

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="theme-color" content="#1d3040"/> <meta name="theme-color" content="#FFFFFF"/>
<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,10 +15,14 @@
{% if status %} {% if status %}
<header> <header>
{% apply spaceless %} {% apply spaceless %}
<nav class="top-nav"> <nav role="top-nav">
<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a> <div role="nav-left">
<h1>{{ title }}</h1> <a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
<div class="nav-right"> </div>
<div role="title">
<h1>{{ title }}</h1>
</div>
<div role="nav-right">
{% if status %} {% if status %}
{% apply spaceless %} {% apply spaceless %}
{{ include("dash/partials/navigation.twig") }} {{ include("dash/partials/navigation.twig") }}
@ -26,7 +30,7 @@
{% endif %} {% endif %}
</div> </div>
</nav> </nav>
<div class="notify" role="note"> <div role="notify">
{% apply spaceless %} {% apply spaceless %}
{{ include("dash/partials/notifications.twig") }} {{ include("dash/partials/notifications.twig") }}
{% endapply %} {% endapply %}

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

@ -1,4 +1,4 @@
<section class="login"> <section role="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>

8
brain/views/dash/partials/index.twig
Unescape Escape View File

@ -1,10 +1,10 @@
<section class="index-header"> <section role="index-header">
<div class="index-header-left"> <div role="index-header-left">
<h1>Recent</h1> <h1>Recent</h1>
</div> </div>
<div class="index-header-right"></div> <div role="index-header-right"></div>
</section> </section>
<section class="index-recent-pages"> <section role="index-recent-pages">
{% if data["entryCount"] != 0 %} {% if data["entryCount"] != 0 %}
{% for page in data['pages'] %} {% for page in data['pages'] %}
{% if page.media[0].type == 'mp4' %} {% if page.media[0].type == 'mp4' %}

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

@ -1,4 +1,4 @@
<div class="menu"> <div role="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 class="menu-toggle"> <button role="menu-toggle">
<i class="ti ti-menu-2"></i> <i class="ti ti-menu-2"></i>
</button> </button>
<div class="mobile-menu"> <div role="mobile-menu">
{% if title == "Settings" %} {% if title == "Settings" %}
{% apply spaceless %} {% apply spaceless %}
{{ include("dash/partials/submenu_settings.twig") }} {{ include("dash/partials/submenu_settings.twig") }}

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

@ -1,10 +1,10 @@
<div class="notify-message"> <div role="notify-message">
<div class="notify-icons"> <div role="notify-icons">
<i class="ti ti-mood-smile notify-good"></i> <i class="ti ti-mood-smile" role="notify-good"></i>
<i class="ti ti-mood-sad notify-notgood"></i> <i class="ti ti-mood-sad" role="notify-notgood"></i>
<i class="ti ti-settings notify-working"></i> <i class="ti ti-settings" role="notify-working"></i>
</div> </div>
<div class="notify-text"> <div role="notify-text">
<span class="response-text">Hey Hey</span> <span role="response-text">Hey Hey</span>
</div> </div>
</div> </div>

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

@ -16,17 +16,17 @@
{% set published = 'false' %} {% set published = 'false' %}
{% endif %} {% endif %}
<br> <br>
<button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ menu }}" title='Pin to Menu'> <button id="option-menu-pin" class="option-inactive post-option-btn" aria-pressed="{{ menu }}" data-active="{{ menu }}" title='Pin to Menu'>
<svg id="option-page-icon" role="icon"> <svg id="option-page-icon" role="icon">
<use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/> <use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
</svg> </svg>
</button> </button>
<button id="option-feature" class="option-inactive post-option-btn" data-active="{{ featured }}" title='Feature'> <button id="option-feature" class="option-inactive post-option-btn" aria-pressed="{{ featured }}" data-active="{{ featured }}" title='Feature'>
<svg id="option-feature-icon" role="icon"> <svg id="option-feature-icon" role="icon">
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/> <use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
</svg> </svg>
</button> </button>
<button id="option-published" class="option-inactive post-option-btn" data-active="{{ published }}" title='Published'> <button id="option-published" class="option-inactive post-option-btn" aria-pressed="{{ published }}" data-active="{{ published }}" title='Published'>
<svg id="option-published-icon" role="icon"> <svg id="option-published-icon" role="icon">
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/> <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
</svg> </svg>

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

@ -1,4 +1,4 @@
<div class="submenu"> <div role="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>

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

@ -1,4 +1,4 @@
<div class="submenu"> <div role="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>

18
brain/views/dash/settings.twig
Unescape Escape View File

@ -9,14 +9,14 @@
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<article class="settings"> <article role="settings">
<section class="member-settings"> <section role="member-settings">
<div class="member-avatar"> <div role="member-avatar">
<div class="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div> <div role="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div>
<input id="avatar-upload" type="file" name="avatar-upload"/> <input id="avatar-upload" type="file" name="avatar-upload"/>
</div> </div>
<div class="site-background"> <div role="site-background">
<div class="background" style="background: url({{ background }} ) no-repeat center center / cover"></div> <div role="background" style="background: url({{ background }} ) no-repeat center center / cover"></div>
<input id="background-upload" type="file" name="backgrond-upload"/> <input id="background-upload" type="file" name="backgrond-upload"/>
</div> </div>
<div> <div>
@ -39,7 +39,7 @@
<span>span No back ups. Frowny face.</span> <span>span No back ups. Frowny face.</span>
{% endif %} {% endif %}
</div> </div>
<div class="features"> <div role="features">
{% if apiStatus is defined and apiStatus == "true" %} {% if apiStatus is defined and apiStatus == "true" %}
<button id="api-access-toggle" title="allow external api" data-enabled="true"> <button id="api-access-toggle" title="allow external api" data-enabled="true">
<i class="ti ti-phone-incoming"></i> <i class="ti ti-phone-incoming"></i>
@ -67,7 +67,7 @@
{% endif %} {% endif %}
</div> </div>
<div class="theme"> <div role="theme">
<label>Themes</label><br/> <label>Themes</label><br/>
{% for theme in themes %} {% for theme in themes %}
{% if theme.name == currentTheme %} {% if theme.name == currentTheme %}
@ -84,7 +84,7 @@
{% endfor %} {% endfor %}
</div> </div>
<div class="mail"> <div role="mail">
<label>Email</label><br/> <label>Email</label><br/>
{% if mailOption == "option-none" or mailOption == "" %} {% if mailOption == "option-none" or mailOption == "" %}
<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a> <a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>

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

@ -73,26 +73,26 @@ header {
z-index: 500; z-index: 500;
} }
header > nav > a img { header > nav > div[role="nav-left"] img {
width: 40px; width: 40px;
padding: 5px; padding: 5px;
} }
header > nav > h1 { header > nav > div[role="title"] {
text-align: left; text-align: left;
height: 100%; height: 100%;
} }
header > nav > h1 { header > nav > div[role="title"] h1 {
color: var(--primary); color: var(--primary);
margin: 15px; margin: 15px;
} }
header > nav > div.nav-right { header > nav > div[role="nav-right"] {
padding: 5px; padding: 5px;
} }
header > nav > div > div.mobile-menu { header > nav > div > div[role="mobile-menu"] {
display: none; display: none;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
@ -101,7 +101,7 @@ header > nav > div > div.mobile-menu {
background: var(--white); background: var(--white);
} }
header > nav > div.nav-right button { header > nav > div[role="nav-right"] button {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-left: 5px; margin-left: 5px;
@ -109,21 +109,25 @@ header > nav > div.nav-right button {
color: var(--white); color: var(--white);
} }
header > nav > div.nav-right > button.menu-toggle { header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
display: none; display: none;
} }
header > nav > div.nav-right div.submenu { header > nav > div[role="nav-right"] div[role="submenu"] {
display: inline; display: inline;
} }
header > nav > div.nav-right div.submenu button { header > nav > div[role="nav-right"] div[role="submenu"] button {
background: var(--primary); background: var(--primary);
color: var(--white); color: var(--white);
font-size: 0.8em; font-size: 0.8em;
} }
header > nav > div.nav-right div.submenu button[data-render="true"] { header
> nav
> div[role="nav-right"]
div[role="submenu"]
button[data-render="true"] {
background: var(--tertiary); background: var(--tertiary);
color: var(--primary); color: var(--primary);
} }
@ -137,11 +141,11 @@ header > nav > div.nav-right div.submenu button[data-render="true"] {
} }
@media only screen and (max-width: 530px) { @media only screen and (max-width: 530px) {
header > nav > div.nav-right > button.menu-toggle { header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
display: inline; display: inline;
} }
header > nav > div > div.menu { header > nav > div > div[role="menu"] {
display: none; display: none;
} }
} }

54
public/assets/css/dash/index.css
Unescape Escape View File

@ -1,4 +1,4 @@
section[class="index-header"] { section[role="index-header"] {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
width: 100%; width: 100%;
@ -6,7 +6,7 @@ section[class="index-header"] {
margin: 60px auto 0; margin: 60px auto 0;
} }
section[class="index-recent-pages"] a { section[role="index-recent-pages"] a {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
@ -17,7 +17,7 @@ section[class="index-recent-pages"] a {
position: relative; position: relative;
} }
section[class="index-recent-pages"] a video { section[role="index-recent-pages"] a video {
width: 100%; width: 100%;
position: absolute; position: absolute;
object-fit: cover; object-fit: cover;
@ -25,32 +25,32 @@ section[class="index-recent-pages"] a video {
border-radius: 5px; border-radius: 5px;
} }
section[class="index-recent-pages"] a:nth-child(1) { section[role="index-recent-pages"] a:nth-child(1) {
grid-column: 1/4; grid-column: 1/4;
grid-row: 1/3; grid-row: 1/3;
} }
section[class="index-recent-pages"] a:nth-child(2) { section[role="index-recent-pages"] a:nth-child(2) {
grid-row: 3/6; grid-row: 3/6;
} }
section[class="index-recent-pages"] a:nth-child(3) { section[role="index-recent-pages"] a:nth-child(3) {
grid-column: 2/4; grid-column: 2/4;
grid-row: 3/5; grid-row: 3/5;
} }
section[class="index-header"] div[class="index-header-right"] { section[role="index-header"] div[role="index-header-right"] {
display: flex; display: flex;
justify-content: right; justify-content: right;
align-items: center; align-items: center;
} }
section[class="index-header"] div[class="index-header-right"] a { section[role="index-header"] div[role="index-header-right"] a {
border-bottom: none; border-bottom: none;
margin-left: 5px; margin-left: 5px;
} }
section[class="index-recent-pages"] { section[role="index-recent-pages"] {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(200px, auto); grid-auto-rows: minmax(200px, auto);
@ -60,31 +60,31 @@ section[class="index-recent-pages"] {
margin: 10px auto; margin: 10px auto;
} }
section[class="index-recent-pages"] a button { section[role="index-recent-pages"] a button {
padding: 1px 5px; padding: 1px 5px;
} }
section[class="index-recent-pages"] button i { section[role="index-recent-pages"] button i {
font-size: 1.8em; font-size: 1.8em;
} }
section[class="index-recent-pages"] button[data-active="true"] { section[role="index-recent-pages"] button[data-active="true"] {
background: var(--primary); background: var(--primary);
} }
section[class="index-recent-pages"] button[data-active="true"] i { section[role="index-recent-pages"] button[data-active="true"] i {
color: var(--tertiary); color: var(--tertiary);
} }
section[class="index-recent-pages"] button[data-active="false"] { section[role="index-recent-pages"] button[data-active="false"] {
background: var(--secondary); background: var(--secondary);
} }
section[class="index-recent-pages"] button[data-active="false"] i { section[role="index-recent-pages"] button[data-active="false"] i {
fill: var(--primary); fill: var(--primary);
} }
section[class="index-recent-pages"] aside { section[role="index-recent-pages"] aside {
font-size: 1.1em; font-size: 1.1em;
color: var(--white); color: var(--white);
text-shadow: 2px 2px 2px var(--black); text-shadow: 2px 2px 2px var(--black);
@ -92,57 +92,57 @@ section[class="index-recent-pages"] aside {
z-index: 10; z-index: 10;
} }
section[class="index-recent-pages"] hr { section[role="index-recent-pages"] hr {
color: var(--white); color: var(--white);
border: 0.1px solid; border: 0.1px solid;
margin: 7px 0; margin: 7px 0;
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
section[class="index-header"], section[role="index-header"],
section[class="index-recent-pages"] { section[role="index-recent-pages"] {
width: 97%; width: 97%;
} }
} }
@media only screen and (max-width: 520px) { @media only screen and (max-width: 520px) {
section[class="index-recent-pages"] { section[role="index-recent-pages"] {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
section[class="index-recent-pages"] a:nth-child(1) { section[role="index-recent-pages"] a:nth-child(1) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 1/2; grid-row: 1/2;
} }
section[class="index-recent-pages"] a:nth-child(2) { section[role="index-recent-pages"] a:nth-child(2) {
grid-row: 2/3; grid-row: 2/3;
grid-column: 1/2; grid-column: 1/2;
} }
section[class="index-recent-pages"] a:nth-child(3) { section[role="index-recent-pages"] a:nth-child(3) {
grid-column: 2/3; grid-column: 2/3;
grid-row: 2/3; grid-row: 2/3;
} }
} }
@media only screen and (max-width: 350px) { @media only screen and (max-width: 350px) {
section[class="index-recent-pages"] a:nth-child(2) { section[role="index-recent-pages"] a:nth-child(2) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 2/3; grid-row: 2/3;
} }
section[class="index-recent-pages"] a:nth-child(3) { section[role="index-recent-pages"] a:nth-child(3) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 3/4; grid-row: 3/4;
} }
section[class="index-recent-pages"] a:nth-child(4) { section[role="index-recent-pages"] a:nth-child(4) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 4/5; grid-row: 4/5;
} }
section[class="index-recent-pages"] a:nth-child(5) { section[role="index-recent-pages"] a:nth-child(5) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 5/6; grid-row: 5/6;
} }

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

@ -1,6 +1,6 @@
/* LOGIN */ /* LOGIN */
section.login, section[role="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.login form input { section[role="login"] form input {
width: 95%; width: 95%;
height: 30px; height: 30px;
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section.login form button { section[role="login"] form button {
padding: 10px 5px; padding: 10px 5px;
width: 82%; width: 82%;
} }
section.login form a { section[role="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.login, section[role="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.login, section[role="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.login img, section[role="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 {

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

@ -1,4 +1,4 @@
header > nav.top-nav { header > nav[role="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.top-nav {
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%); box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
} }
header > div.notify { header > div[role="notify"] {
display: grid; display: grid;
height: 100%; height: 100%;
position: relative; position: relative;
@ -31,17 +31,20 @@ header > div.notify {
box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%); box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
} }
header > div.notify > div.notify-message { header > div[role="notify"] > div[role="notify-message"] {
display: flex; display: flex;
height: 86%; height: 86%;
} }
header > div.notify > div.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 > div.notify > div.notify-message > div.notify-text { header
> 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%;
@ -49,23 +52,30 @@ header > div.notify > div.notify-message > div.notify-text {
opacity: 0; opacity: 0;
} }
header > div.notify > div.notify-message > div.notify-icons { header
> div[role="notify"]
> div[role="notify-message"]
> div[role="notify-icons"] {
margin: 5px; margin: 5px;
width: 40px; width: 40px;
opacity: 0; opacity: 0;
} }
header > div.notify > div.notify-message > div.notify-text span { header
> div[role="notify"]
> div[role="notify-message"]
> div[role="notify-text"]
span {
display: block; display: block;
padding: 5px; padding: 5px;
} }
header > div.notify > div.notify-message i { header > div[role="notify"] > div[role="notify-message"] i {
display: none; display: none;
color: var(--white); color: var(--white);
} }
i.notify-working { i[role="notify-working"] {
animation: 2s infinite linear spin; animation: 2s infinite linear spin;
height: 40px; height: 40px;
width: 40px; width: 40px;

114
public/assets/css/dash/settings.css
Unescape Escape View File

@ -1,22 +1,22 @@
article[class="settings"] { article[role="settings"] {
margin: 100px auto; margin: 100px auto;
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
transition: all 0.8s linear; transition: all 0.8s linear;
} }
article[class="settings"] h1 { article[role="settings"] h1 {
color: var(--white); color: var(--white);
} }
article[class="settings"] label { article[role="settings"] label {
color: var(--secondary); color: var(--secondary);
margin-bottom: 10px; margin-bottom: 10px;
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
} }
section[class="member-settings"] { section[role="member-settings"] {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-columns: auto; grid-auto-columns: auto;
@ -26,100 +26,100 @@ section[class="member-settings"] {
margin: 10px auto; margin: 10px auto;
} }
section[class="member-settings"] > div:nth-child(1) { section[role="member-settings"] > div:nth-child(1) {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/3; grid-row: 1/3;
} }
section[class="member-settings"] > div:nth-child(2) { section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/4; grid-column: 2/4;
grid-row: 1/3; grid-row: 1/3;
} }
section[class="member-settings"] > div:nth-child(3) { section[role="member-settings"] > div:nth-child(3) {
grid-row: 1/3; grid-row: 1/3;
} }
section[class="member-settings"] > div:nth-child(4) { section[role="member-settings"] > div:nth-child(4) {
color: var(--white); color: var(--white);
} }
section[class="member-settings"] > div:nth-child(4) a { section[role="member-settings"] > div:nth-child(4) a {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
color: var(--tertiary); color: var(--tertiary);
} }
section[class="member-settings"] > div:nth-child(5) { section[role="member-settings"] > div:nth-child(5) {
grid-column: 2/4; grid-column: 2/4;
} }
section[class="member-settings"] > div:nth-child(6) { section[role="member-settings"] > div:nth-child(6) {
grid-column: 1/3; grid-column: 1/3;
} }
section[class="member-settings"] > div:nth-child(7) { section[role="member-settings"] > div:nth-child(7) {
grid-column: 3/5; grid-column: 3/5;
min-height: 325px; min-height: 325px;
} }
section[class="member-settings"] > div:nth-child(8) { section[role="member-settings"] > div:nth-child(8) {
grid-column: 1/4; grid-column: 1/4;
color: var(--white); color: var(--white);
word-wrap: break-word; word-wrap: break-word;
} }
section[class="member-settings"] > div[class="member-avatar"] div, section[role="member-settings"] > div[role="member-avatar"] div,
section[class="member-settings"] > div[class="site-background"] div { section[role="member-settings"] > div[role="site-background"] div {
height: 100%; height: 100%;
border-radius: 3px; border-radius: 3px;
} }
section[class="member-settings"] div input[type="file"] { section[role="member-settings"] div input[type="file"] {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
section[class="member-settings"] div input[type="text"] { section[role="member-settings"] div input[type="text"] {
width: 98.4%; width: 98.4%;
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[class="member-settings"] div textarea { section[role="member-settings"] div textarea {
width: 98.4%; width: 98.4%;
height: 63%; height: 63%;
} }
article[class="settings"] button { article[role="settings"] button {
width: 100%; width: 100%;
text-align: left; text-align: left;
height: 50px; height: 50px;
margin-bottom: 5px; margin-bottom: 5px;
} }
article[class="settings"] button > span { article[role="settings"] button > span {
font-size: 0.8em; font-size: 0.8em;
display: inline; display: inline;
top: -10px; top: -10px;
position: relative; position: relative;
} }
section[class="member-settings"] section[role="member-settings"]
> div[class="features"] > div[role="features"]
button[data-enabled="true"] { button[data-enabled="true"] {
color: var(--white); color: var(--white);
} }
section[class="member-settings"] section[role="member-settings"]
> div[class="features"] > div[role="features"]
button[data-enabled="false"] { button[data-enabled="false"] {
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
} }
section[class="member-settings"] section[role="member-settings"]
> div[class="theme"] > div[role="theme"]
button[data-enabled="true"] { button[data-enabled="true"] {
color: var(--white); color: var(--white);
background: var(--highlight); background: var(--highlight);
@ -128,8 +128,8 @@ section[class="member-settings"]
padding: 3px; padding: 3px;
} }
section[class="member-settings"] section[role="member-settings"]
> div[class="theme"] > div[role="theme"]
button[data-enabled="false"] { button[data-enabled="false"] {
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
@ -138,7 +138,7 @@ section[class="member-settings"]
padding: 3px; padding: 3px;
} }
section[class="member-settings"] > div[class="mail"] a { section[role="member-settings"] > div[role="mail"] a {
margin-right: 3px; margin-right: 3px;
color: var(--secondary); color: var(--secondary);
display: inline-block; display: inline-block;
@ -147,129 +147,129 @@ section[class="member-settings"] > div[class="mail"] a {
border-top: var(--primary) 1px solid; border-top: var(--primary) 1px solid;
} }
section[class="member-settings"] > div[class="mail"] a[data-enabled="true"] { section[role="member-settings"] > div[role="mail"] a[data-enabled="true"] {
color: var(--tertiary); color: var(--tertiary);
font-weight: bold; font-weight: bold;
border-top: var(--highlight) 1px solid; border-top: var(--highlight) 1px solid;
} }
section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] { section[role="member-settings"] > div[role="mail"] div[data-enabled="false"] {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
section[class="member-settings"] > div[class="mail"] input { section[role="member-settings"] > div[role="mail"] input {
width: 98.4%; width: 98.4%;
height: 40px; height: 40px;
padding-left: 5px; padding-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[class="data-settings"] { section[role="data-settings"] {
color: var(--white); color: var(--white);
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
main > article[class="settings"] { main > article[role="settings"] {
width: 97%; width: 97%;
} }
} }
@media only screen and (max-width: 650px) { @media only screen and (max-width: 650px) {
section[class="member-settings"] div input[type="text"] { section[role="member-settings"] div input[type="text"] {
width: 99.3%; width: 99.3%;
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[class="member-settings"] { section[role="member-settings"] {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
section[class="member-settings"] > div[class="mail"] input { section[role="member-settings"] > div[role="mail"] input {
width: 97.7%; width: 97.7%;
height: 40px; height: 40px;
padding-left: 5px; padding-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[class="member-settings"] div textarea { section[role="member-settings"] div textarea {
height: 80px; height: 80px;
width: 99.3%; width: 99.3%;
} }
section[class="member-settings"] > div:nth-child(1) { section[role="member-settings"] > div:nth-child(1) {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/3; grid-row: 1/3;
height: 200px; height: 200px;
} }
section[class="member-settings"] > div:nth-child(2) { section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/3; grid-column: 2/3;
grid-row: 1/3; grid-row: 1/3;
} }
section[class="member-settings"] > div:nth-child(3) { section[role="member-settings"] > div:nth-child(3) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 3/5; grid-row: 3/5;
} }
section[class="member-settings"] > div:nth-child(4) { section[role="member-settings"] > div:nth-child(4) {
grid-column: 1/2; grid-column: 1/2;
} }
section[class="member-settings"] > div:nth-child(5) { section[role="member-settings"] > div:nth-child(5) {
grid-column: 2/3; grid-column: 2/3;
} }
section[class="member-settings"] > div:nth-child(6) { section[role="member-settings"] > div:nth-child(6) {
grid-column: 1/2; grid-column: 1/2;
} }
section[class="member-settings"] > div:nth-child(7) { section[role="member-settings"] > div:nth-child(7) {
grid-column: 2/3; grid-column: 2/3;
min-height: 325px; min-height: 325px;
} }
section[class="member-settings"] > div:nth-child(8) { section[role="member-settings"] > div:nth-child(8) {
grid-column: 1/3; grid-column: 1/3;
} }
} }
@media only screen and (max-width: 530px) { @media only screen and (max-width: 530px) {
section[class="member-settings"] > div[class="mail"] input { section[role="member-settings"] > div[role="mail"] input {
width: 98.5%; width: 98.5%;
} }
section[class="member-settings"] { section[role="member-settings"] {
grid-template-columns: 100%; grid-template-columns: 100%;
} }
section[class="member-settings"] div textarea { section[role="member-settings"] div textarea {
height: 80px; height: 80px;
} }
section[class="member-settings"] > div:nth-child(1) { section[role="member-settings"] > div:nth-child(1) {
grid-row: 1/3; grid-row: 1/3;
height: 200px; height: 200px;
} }
section[class="member-settings"] > div:nth-child(2) { section[role="member-settings"] > div:nth-child(2) {
grid-row: 3/5; grid-row: 3/5;
grid-column: 1; grid-column: 1;
height: 200px; height: 200px;
} }
section[class="member-settings"] > div:nth-child(3) { section[role="member-settings"] > div:nth-child(3) {
grid-column: 1; grid-column: 1;
grid-row: 5/7; grid-row: 5/7;
} }
section[class="member-settings"] > div:nth-child(4), section[role="member-settings"] > div:nth-child(4),
section[class="member-settings"] > div:nth-child(5), section[role="member-settings"] > div:nth-child(5),
section[class="member-settings"] > div:nth-child(6), section[role="member-settings"] > div:nth-child(6),
section[class="member-settings"] > div:nth-child(7), section[role="member-settings"] > div:nth-child(7),
section[class="member-settings"] > div:nth-child(8) { section[role="member-settings"] > div:nth-child(8) {
grid-column: 1; grid-column: 1;
} }
} }

39
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; var $8b9e2899b2e82f52$export$2e2bcd8739ae039 = $8b9e2899b2e82f52$var$anime;
const $accfb6154319a04b$var$notifcation = document.querySelector(".notify-message"); const $accfb6154319a04b$var$notifcation = document.querySelector('[role="notify-message"]');
const $accfb6154319a04b$var$notify = document.getElementById("notify-message"); const $accfb6154319a04b$var$notify = document.getElementById("notify-message");
const $accfb6154319a04b$var$responseText = document.querySelector(".response-text"); const $accfb6154319a04b$var$responseText = document.querySelector('[role="response-text"]');
const $accfb6154319a04b$var$notifyText = document.querySelector(".notify-text"); const $accfb6154319a04b$var$notifyText = document.querySelector('[role="notify-text"]');
const $accfb6154319a04b$var$notifyIcons = document.querySelector(".notify-icons"); const $accfb6154319a04b$var$notifyIcons = document.querySelector('[role="notify-icons"]');
//const notifyProgress = document.getElementById('notify-progress'); //const notifyProgress = document.getElementById('notify-progress');
const $accfb6154319a04b$var$iconGood = document.querySelector(".notify-good"); const $accfb6154319a04b$var$iconGood = document.querySelector('[role="notify-good"]');
const $accfb6154319a04b$var$iconNotGood = document.querySelector(".notify-notgood"); const $accfb6154319a04b$var$iconNotGood = document.querySelector('[role="notify-notgood"]');
const $accfb6154319a04b$var$iconWorking = document.querySelector(".notify-working"); const $accfb6154319a04b$var$iconWorking = document.querySelector('[role="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(".top-nav"), targets: document.querySelector('[role="top-nav"]'),
rotateX: "180deg", rotateX: "180deg",
easing: "easeOutQuint" easing: "easeOutQuint"
}); });
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector(".notify"), targets: document.querySelector('[role="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(".top-nav"), targets: document.querySelector('[role="top-nav"]'),
rotateX: "0deg", rotateX: "0deg",
easing: "easeOutQuint" easing: "easeOutQuint"
}); });
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector(".notify"), targets: document.querySelector('[role="notify"]'),
rotateX: "180deg", rotateX: "180deg",
easing: "easeOutQuint" easing: "easeOutQuint"
}); });
@ -6690,8 +6690,13 @@ class $371d2518d50c1748$export$2e2bcd8739ae039 {
break; break;
} }
if (currentOption != null) { if (currentOption != null) {
let active = currentOption.getAttribute("data-active"); let active = currentOption.getAttribute("aria-pressed");
active == "false" ? currentOption.setAttribute("data-active", "true") : currentOption.setAttribute("data-active", "false"); currentOption.setAttribute("data-active", "false");
currentOption.setAttribute("aria-pressed", "false");
if (active == "false") {
currentOption.setAttribute("data-active", "true");
currentOption.setAttribute("aria-pressed", "true");
}
} }
} }
handleEditorOptions(e) { handleEditorOptions(e) {
@ -6920,10 +6925,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
//console.log(err); //console.log(err);
})); }));
//handle set up image uploads //handle set up image uploads
document.querySelector(".avatar").addEventListener("click", ()=>{ document.querySelector('[role="avatar"]').addEventListener("click", ()=>{
document.getElementById("avatar-upload").click(); document.getElementById("avatar-upload").click();
}); });
document.querySelector(".background").addEventListener("click", ()=>{ document.querySelector('[role="background"]').addEventListener("click", ()=>{
document.getElementById("background-upload").click(); document.getElementById("background-upload").click();
}); });
document.getElementById("avatar-upload").addEventListener("change", (e)=>{ document.getElementById("avatar-upload").addEventListener("change", (e)=>{
@ -7201,8 +7206,8 @@ class $f32c20539eb29606$export$2e2bcd8739ae039 {
//-------------------------- //--------------------------
constructor(){ constructor(){
this.mobile = false; this.mobile = false;
this.mobileMenu = document.querySelector(".mobile-menu"); this.mobileMenu = document.querySelector('[role="mobile-menu"]');
document.querySelector(".menu-toggle").addEventListener("click", (e)=>this.handleMobile(e)); document.querySelector('[role="menu-toggle"]').addEventListener("click", (e)=>this.handleMobile(e));
} }
//-------------------------- //--------------------------
// methods // methods

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

File diff suppressed because one or more lines are too long

13
src/com/controllers/PageEditor.js
Unescape Escape View File

@ -127,10 +127,15 @@ export default class PostEditor {
break; break;
} }
if (currentOption != null) { if (currentOption != null) {
let active = currentOption.getAttribute('data-active'); let active = currentOption.getAttribute('aria-pressed');
active == 'false'
? currentOption.setAttribute('data-active', 'true') currentOption.setAttribute('data-active', 'false');
: currentOption.setAttribute('data-active', 'false'); currentOption.setAttribute('aria-pressed', 'false');
if (active == 'false') {
currentOption.setAttribute('data-active', 'true');
currentOption.setAttribute('aria-pressed', 'true');
}
} }
} }
handleEditorOptions(e) { handleEditorOptions(e) {

4
src/com/controllers/SettingsIndex.js
Unescape Escape View File

@ -39,10 +39,10 @@ export default class SettingsIndex {
}) })
); );
//handle set up image uploads //handle set up image uploads
document.querySelector('.avatar').addEventListener('click', () => { document.querySelector('[role="avatar"]').addEventListener('click', () => {
document.getElementById('avatar-upload').click(); document.getElementById('avatar-upload').click();
}); });
document.querySelector('.background').addEventListener('click', () => { document.querySelector('[role="background"]').addEventListener('click', () => {
document.getElementById('background-upload').click(); document.getElementById('background-upload').click();
}); });
document.getElementById('avatar-upload').addEventListener( document.getElementById('avatar-upload').addEventListener(

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

@ -4,9 +4,9 @@ export default class Menu {
//-------------------------- //--------------------------
constructor() { constructor() {
this.mobile = false; this.mobile = false;
this.mobileMenu = document.querySelector('.mobile-menu'); this.mobileMenu = document.querySelector('[role="mobile-menu"]');
document document
.querySelector('.menu-toggle') .querySelector('[role="menu-toggle"]')
.addEventListener('click', e => this.handleMobile(e)); .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'; import anime from 'animejs/lib/anime.es.js';
const notifcation = document.querySelector('.notify-message'); const notifcation = document.querySelector('[role="notify-message"]');
const notify = document.getElementById('notify-message'); const notify = document.getElementById('notify-message');
const responseText = document.querySelector('.response-text'); const responseText = document.querySelector('[role="response-text"]');
const notifyText = document.querySelector('.notify-text'); const notifyText = document.querySelector('[role="notify-text"]');
const notifyIcons = document.querySelector('.notify-icons'); const notifyIcons = document.querySelector('[role="notify-icons"]');
//const notifyProgress = document.getElementById('notify-progress'); //const notifyProgress = document.getElementById('notify-progress');
const iconGood = document.querySelector('.notify-good'); const iconGood = document.querySelector('[role="notify-good"]');
const iconNotGood = document.querySelector('.notify-notgood'); const iconNotGood = document.querySelector('[role="notify-notgood"]');
const iconWorking = document.querySelector('.notify-working'); const iconWorking = document.querySelector('[role="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('.top-nav'), targets: document.querySelector('[role="top-nav"]'),
rotateX: '180deg', rotateX: '180deg',
easing: 'easeOutQuint' easing: 'easeOutQuint'
}); });
new anime({ new anime({
targets: document.querySelector('.notify'), targets: document.querySelector('[role="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('.top-nav'), targets: document.querySelector('[role="top-nav"]'),
rotateX: '0deg', rotateX: '0deg',
easing: 'easeOutQuint' easing: 'easeOutQuint'
}); });
new anime({ new anime({
targets: document.querySelector('.notify'), targets: document.querySelector('[role="notify"]'),
rotateX: '180deg', rotateX: '180deg',
easing: 'easeOutQuint' easing: 'easeOutQuint'
}); });

Write Preview
Loading…
Cancel
Save