projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

Removed invalid role attributes from Settings page

Browse source 
Cleaned up the settings page by removing the improper usage of the role
tag and replaced it with class to maintain current design integrity.
Also updated the script files that was referencing the old role tags
This commit is contained in:
Ro 2023-08-01 15:51:33 -07:00
parent bea40049fc
commit 599fca18f1
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
5 changed files with 71 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
brain/views/dash/settings.twig
View file

@ -9,14 +9,14 @@
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<article role="settings"> <article class="settings">
<section role="member-settings"> <section class="member-settings">
<div role="member-avatar"> <div class="member-avatar">
<div role="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div> <div class="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 role="site-background"> <div class="site-background">
<div role="background" style="background: url({{ background }} ) no-repeat center center / cover"></div> <div class="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 role="features"> <div class="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 role="theme"> <div class="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 role="mail"> <div class="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>

114
public/assets/css/dash/settings.css
View file

@ -1,22 +1,22 @@
article[role="settings"] { article[class="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[role="settings"] h1 { article[class="settings"] h1 {
color: var(--white); color: var(--white);
} }
article[role="settings"] label { article[class="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[role="member-settings"] { section[class="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[role="member-settings"] {
margin: 10px auto; margin: 10px auto;
} }
section[role="member-settings"] > div:nth-child(1) { section[class="member-settings"] > div:nth-child(1) {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/3; grid-row: 1/3;
} }
section[role="member-settings"] > div:nth-child(2) { section[class="member-settings"] > div:nth-child(2) {
grid-column: 2/4; grid-column: 2/4;
grid-row: 1/3; grid-row: 1/3;
} }
section[role="member-settings"] > div:nth-child(3) { section[class="member-settings"] > div:nth-child(3) {
grid-row: 1/3; grid-row: 1/3;
} }
section[role="member-settings"] > div:nth-child(4) { section[class="member-settings"] > div:nth-child(4) {
color: var(--white); color: var(--white);
} }
section[role="member-settings"] > div:nth-child(4) a { section[class="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[role="member-settings"] > div:nth-child(5) { section[class="member-settings"] > div:nth-child(5) {
grid-column: 2/4; grid-column: 2/4;
} }
section[role="member-settings"] > div:nth-child(6) { section[class="member-settings"] > div:nth-child(6) {
grid-column: 1/3; grid-column: 1/3;
} }
section[role="member-settings"] > div:nth-child(7) { section[class="member-settings"] > div:nth-child(7) {
grid-column: 3/5; grid-column: 3/5;
min-height: 325px; min-height: 325px;
} }
section[role="member-settings"] > div:nth-child(8) { section[class="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[role="member-settings"] > div[role="member-avatar"] div, section[class="member-settings"] > div[class="member-avatar"] div,
section[role="member-settings"] > div[role="site-background"] div { section[class="member-settings"] > div[class="site-background"] div {
height: 100%; height: 100%;
border-radius: 3px; border-radius: 3px;
} }
section[role="member-settings"] div input[type="file"] { section[class="member-settings"] div input[type="file"] {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
section[role="member-settings"] div input[type="text"] { section[class="member-settings"] div input[type="text"] {
width: 98.4%; width: 98.4%;
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[role="member-settings"] div textarea { section[class="member-settings"] div textarea {
width: 98.4%; width: 98.4%;
height: 63%; height: 63%;
} }
article[role="settings"] button { article[class="settings"] button {
width: 100%; width: 100%;
text-align: left; text-align: left;
height: 50px; height: 50px;
margin-bottom: 5px; margin-bottom: 5px;
} }
article[role="settings"] button > span { article[class="settings"] button > span {
font-size: 0.8em; font-size: 0.8em;
display: inline; display: inline;
top: -10px; top: -10px;
position: relative; position: relative;
} }
section[role="member-settings"] section[class="member-settings"]
> div[role="features"] > div[class="features"]
button[data-enabled="true"] { button[data-enabled="true"] {
color: var(--white); color: var(--white);
} }
section[role="member-settings"] section[class="member-settings"]
> div[role="features"] > div[class="features"]
button[data-enabled="false"] { button[data-enabled="false"] {
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
} }
section[role="member-settings"] section[class="member-settings"]
> div[role="theme"] > div[class="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[role="member-settings"]
padding: 3px; padding: 3px;
} }
section[role="member-settings"] section[class="member-settings"]
> div[role="theme"] > div[class="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[role="member-settings"]
padding: 3px; padding: 3px;
} }
section[role="member-settings"] > div[role="mail"] a { section[class="member-settings"] > div[class="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[role="member-settings"] > div[role="mail"] a {
border-top: var(--primary) 1px solid; border-top: var(--primary) 1px solid;
} }
section[role="member-settings"] > div[role="mail"] a[data-enabled="true"] { section[class="member-settings"] > div[class="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[role="member-settings"] > div[role="mail"] div[data-enabled="false"] { section[class="member-settings"] > div[class="mail"] div[data-enabled="false"] {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
section[role="member-settings"] > div[role="mail"] input { section[class="member-settings"] > div[class="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[role="data-settings"] { section[class="data-settings"] {
color: var(--white); color: var(--white);
} }
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
main > article[role="settings"] { main > article[class="settings"] {
width: 97%; width: 97%;
} }
} }
@media only screen and (max-width: 650px) { @media only screen and (max-width: 650px) {
section[role="member-settings"] div input[type="text"] { section[class="member-settings"] div input[type="text"] {
width: 99.3%; width: 99.3%;
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[role="member-settings"] { section[class="member-settings"] {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
section[role="member-settings"] > div[role="mail"] input { section[class="member-settings"] > div[class="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[role="member-settings"] div textarea { section[class="member-settings"] div textarea {
height: 80px; height: 80px;
width: 99.3%; width: 99.3%;
} }
section[role="member-settings"] > div:nth-child(1) { section[class="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[role="member-settings"] > div:nth-child(2) { section[class="member-settings"] > div:nth-child(2) {
grid-column: 2/3; grid-column: 2/3;
grid-row: 1/3; grid-row: 1/3;
} }
section[role="member-settings"] > div:nth-child(3) { section[class="member-settings"] > div:nth-child(3) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 3/5; grid-row: 3/5;
} }
section[role="member-settings"] > div:nth-child(4) { section[class="member-settings"] > div:nth-child(4) {
grid-column: 1/2; grid-column: 1/2;
} }
section[role="member-settings"] > div:nth-child(5) { section[class="member-settings"] > div:nth-child(5) {
grid-column: 2/3; grid-column: 2/3;
} }
section[role="member-settings"] > div:nth-child(6) { section[class="member-settings"] > div:nth-child(6) {
grid-column: 1/2; grid-column: 1/2;
} }
section[role="member-settings"] > div:nth-child(7) { section[class="member-settings"] > div:nth-child(7) {
grid-column: 2/3; grid-column: 2/3;
min-height: 325px; min-height: 325px;
} }
section[role="member-settings"] > div:nth-child(8) { section[class="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[role="member-settings"] > div[role="mail"] input { section[class="member-settings"] > div[class="mail"] input {
width: 98.5%; width: 98.5%;
} }
section[role="member-settings"] { section[class="member-settings"] {
grid-template-columns: 100%; grid-template-columns: 100%;
} }
section[role="member-settings"] div textarea { section[class="member-settings"] div textarea {
height: 80px; height: 80px;
} }
section[role="member-settings"] > div:nth-child(1) { section[class="member-settings"] > div:nth-child(1) {
grid-row: 1/3; grid-row: 1/3;
height: 200px; height: 200px;
} }
section[role="member-settings"] > div:nth-child(2) { section[class="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[role="member-settings"] > div:nth-child(3) { section[class="member-settings"] > div:nth-child(3) {
grid-column: 1; grid-column: 1;
grid-row: 5/7; grid-row: 5/7;
} }
section[role="member-settings"] > div:nth-child(4), section[class="member-settings"] > div:nth-child(4),
section[role="member-settings"] > div:nth-child(5), section[class="member-settings"] > div:nth-child(5),
section[role="member-settings"] > div:nth-child(6), section[class="member-settings"] > div:nth-child(6),
section[role="member-settings"] > div:nth-child(7), section[class="member-settings"] > div:nth-child(7),
section[role="member-settings"] > div:nth-child(8) { section[class="member-settings"] > div:nth-child(8) {
grid-column: 1; grid-column: 1;
} }
} }

4
public/assets/scripts/dash.js
View file

@ -6920,10 +6920,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
//console.log(err); //console.log(err);
})); }));
//handle set up image uploads //handle set up image uploads
document.querySelector('[role="avatar"]').addEventListener("click", ()=>{ document.querySelector(".avatar").addEventListener("click", ()=>{
document.getElementById("avatar-upload").click(); document.getElementById("avatar-upload").click();
}); });
document.querySelector('[role="background"]').addEventListener("click", ()=>{ document.querySelector(".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)=>{

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

File diff suppressed because one or more lines are too long

4
src/com/controllers/SettingsIndex.js
View file

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