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

View file

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

View file

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

View file

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

View file

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