are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 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
develop
Ro 1 year ago
parent bea40049fc
commit 599fca18f1
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50
5 changed files with 71 additions and 71 deletions
Show Stats Download Patch File Download Diff File

18
brain/views/dash/settings.twig
Unescape Escape 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>

114
public/assets/css/dash/settings.css
Unescape Escape 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;
}
}

4
public/assets/scripts/dash.js
Unescape Escape 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)=>{

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
Unescape Escape 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(

Write Preview
Loading…
Cancel
Save