forked from projects/fipamo
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
parent
bea40049fc
commit
599fca18f1
5 changed files with 71 additions and 71 deletions
|
|
@ -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…
Reference in a new issue