Removed invalid role attributes from Settings page

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
develop
Ro 1 year ago
parent bea40049fc
commit 599fca18f1
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50

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

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

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

File diff suppressed because one or more lines are too long

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

Loading…
Cancel
Save