Reponsive: Part 1 - Settings

Started cleaning up responsive styles for the site starting with the
Settings section. Still needs some tweaking but the structure for that
section is in so it's just a matter of police.

Some changes need to be made to the main nav as reduced viewport throws
off the alignment.
toggle-buttons-#109
Ro 2 years ago
parent 97278e3a90
commit bfb0873f5f
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50

@ -35,7 +35,7 @@ class DashControl
$form_token = Session::get('form_token'); $form_token = Session::get('form_token');
$updated = new Carbon($settings['global']['last_backup']); $updated = new Carbon($settings['global']['last_backup']);
$pageOptions = [ $pageOptions = [
'title' => 'Dash Settings', 'title' => 'Settings',
'private' => $settings['global']['private'], 'private' => $settings['global']['private'],
'renderOnSave' => $settings['global']['renderOnSave'], 'renderOnSave' => $settings['global']['renderOnSave'],
'background' => $settings['global']['background'], 'background' => $settings['global']['background'],
@ -71,7 +71,7 @@ class DashControl
$settings = $config->getSettings(); $settings = $config->getSettings();
$template = 'dash/navigation.twig'; $template = 'dash/navigation.twig';
$pageOptions = [ $pageOptions = [
'title' => 'Edit Dash Navigation', 'title' => 'Edit Menu',
'status' => Session::active(), 'status' => Session::active(),
'menu' => $settings['menu'], 'menu' => $settings['menu'],
]; ];
@ -138,7 +138,7 @@ class DashControl
} }
$pageOptions = [ $pageOptions = [
'title' => 'Fipamo | Edit Page', 'title' => $page['title'],
'page' => $page, 'page' => $page,
'mode' => $mode, 'mode' => $mode,
'token' => Session::get('form_token'), 'token' => Session::get('form_token'),
@ -166,7 +166,7 @@ class DashControl
$response->getBody()->write($html); $response->getBody()->write($html);
return $response; return $response;
break; break;
default: default:
$pageOptions = [ $pageOptions = [
'title' => 'Fipamo | Create Page', 'title' => 'Fipamo | Create Page',
@ -185,7 +185,7 @@ class DashControl
Session::kill(); Session::kill();
header('Location: /dashboard'); header('Location: /dashboard');
exit(); exit();
break; break;
case 'reset-password': case 'reset-password':
$template = 'dash/reset-password.twig'; $template = 'dash/reset-password.twig';
$pageOptions = [ $pageOptions = [

@ -43,6 +43,6 @@
{% endapply %} {% endapply %}
</main> </main>
<footer></footer> <footer></footer>
<script src="/assets/scripts/start.js?=dfdfdfse" type="text/javascript"></script> <script type="module" src="/assets/scripts/start.js?=dfdfdfse"></script>
</body> </body>
</html> </html>

@ -9,7 +9,6 @@
{% set slug = page['slug'] %} {% set slug = page['slug'] %}
{% set layout = page['layout'] %} {% set layout = page['layout'] %}
{% set feature = page['feature'] %} {% set feature = page['feature'] %}
{% set title = page['title'] %}
{% set tags = page['tags'] %} {% set tags = page['tags'] %}
{% set content = page['content'] %} {% set content = page['content'] %}
{% set date = page['created'] %} {% set date = page['created'] %}

@ -1,5 +1,5 @@
<div role="menu"> <div role="menu">
{% if title == "Dash Settings" %} {% if title == "Settings" %}
{% apply spaceless %} {% apply spaceless %}
{{ include("dash/partials/submenu_settings.twig") }} {{ include("dash/partials/submenu_settings.twig") }}
{% endapply %} {% endapply %}

@ -10,14 +10,14 @@
{% block mainContent %} {% block mainContent %}
<article role="settings"> <article role="settings">
<h1>Settings</h1> <h2>Info</h2>
<section role="member-settings"> <section role="member-settings">
<div role="member-avatar"> <div role="member-avatar">
<img id="avatar" src="{{ member['avatar'] }}" for="avatar-upload"/> <div role="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 role="site-background">
<img id="background" src="{{ background }}" alt="image for site background" for="background-upload"/> <div role="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>
@ -32,9 +32,10 @@
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea> <textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
</div> </div>
</section> </section>
<h2>Options</h2>
<section role="site-settings"> <section role="site-settings">
<div role="features"> <div role="features">
<label>Options</label> <label>Features</label>
<br> <br>
{% 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">
@ -67,15 +68,21 @@
<label>Themes</label><br/> <label>Themes</label><br/>
{% for theme in themes %} {% for theme in themes %}
{% if theme.name == currentTheme %} {% if theme.name == currentTheme %}
<a href="#" id="{{ theme.name }}" class="theme-select" data-enabled="true">{{ theme['display-name'] }}</a> <button id="{{ theme.name }}" class="theme-select" data-enabled="true">
<i class="ti ti-brush"></i>
<span>{{ theme['display-name'] }}</span>
</button>
{% else %} {% else %}
<a href="#" id="{{ theme.name }}" class="theme-select" data-enabled="false">{{ theme['display-name'] }}</a> <button href="#" id="{{ theme.name }}" class="theme-select" data-enabled="false">
<i class="ti ti-brush-off"></i>
<span>{{ theme['display-name'] }}</span>
</button>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
<div role="mail"> <div role="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>
{% else %} {% else %}
@ -95,12 +102,16 @@
{% apply spaceless %} {% apply spaceless %}
{{ include("dash/partials/mailforms.twig") }} {{ include("dash/partials/mailforms.twig") }}
{% endapply %} {% endapply %}
<button id="send-mail">TEST MAIL</button> <button id="send-mail">
<i class="ti ti-mailbox"></i>
<span>TEST MAIL</span>
</button>
<br/><br/> <br/><br/>
</div> </div>
</section> </section>
<h2>Data</h2>
<section role="data-settings"> <section role="data-settings">
<div class="column"> <div>
<label>API KEY</label> <label>API KEY</label>
<br/> <br/>
{{ member['key'] }} {{ member['key'] }}
@ -108,8 +119,11 @@
<label>FORM TOKEN</label><br/> <label>FORM TOKEN</label><br/>
{{ ftoken }} {{ ftoken }}
</div> </div>
<div class="column"> <div>
<button id="create-backup">BACK UP YOUR SITE</button><br/> <button id="create-backup">
<i class="ti ti-disc"></i>
<span>BACK UP YOUR SITE</span>
</button><br/>
{% if lastBackup != '' %} {% if lastBackup != '' %}
LAST BACK UP<br/> LAST BACK UP<br/>
<a href="/api/v1/files">{{ lastBackup }}</a><br/> <a href="/api/v1/files">{{ lastBackup }}</a><br/>

@ -18,15 +18,15 @@ input[type="text"] {
border-radius: 5px; border-radius: 5px;
font: 18px var(--base-type); font: 18px var(--base-type);
display: inline-block; display: inline-block;
background: var(--primary); background: var(--white);
color: var(--tertiary); color: var(--primary);
} }
textarea { textarea {
border: 0; border: 0;
border-radius: 3px; border-radius: 3px;
color: var(--white); color: var(--primary);
background: var(--primary); background: var(--white);
} }
button, button,

@ -149,3 +149,11 @@ section[role="login"] form a {
margin: 0 0 0 10px; margin: 0 0 0 10px;
font-weight: 600; font-weight: 600;
} }
/* RESPONSIVE */
@media only screen and (max-width: 900px) {
header {
width: 97%;
}
}

@ -2,19 +2,18 @@ article[role="settings"] {
margin: 100px auto; margin: 100px auto;
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
transition: all 0.8s linear;
} }
article[role="settings"] h1 { article[role="settings"] h1 {
color: var(--white); color: var(--white);
} }
section[role="member-settings"] label { article[role="settings"] label {
background: var(--primary); color: var(--secondary);
color: var(--white);
padding: 3px;
border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
display: inline-block; display: inline-block;
font-weight: 400;
} }
section[role="member-settings"], section[role="member-settings"],
@ -27,12 +26,20 @@ section[role="backup-settings"] {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 10px auto; margin: 10px auto;
background: var(--white);
} }
section[role="member-settings"] div { section[role="member-settings"] {
width: 98%; width: 100%;
padding: 5px; }
section[role="member-settings"] > div[role="member-avatar"] {
height: 300px;
}
section[role="member-settings"] > div[role="member-avatar"] div,
section[role="member-settings"] > div[role="site-background"] div {
height: 100%;
border-radius: 3px;
} }
section[role="member-settings"] div input[type="file"] { section[role="member-settings"] div input[type="file"] {
@ -41,41 +48,32 @@ section[role="member-settings"] div input[type="file"] {
} }
section[role="member-settings"] div input[type="text"] { section[role="member-settings"] div input[type="text"] {
width: 96%; width: 100%;
height: 30px; height: 40px;
padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
section[role="member-settings"] div textarea { section[role="member-settings"] div textarea {
background: var(--primary); width: 99%;
width: 91%; height: 86%;
padding: 5px;
height: 79%;
} }
section[role="member-settings"] div:nth-child(1) { section[role="member-settings"] > div:nth-child(1) {
grid-column: 1/2; grid-column: 1/2;
} }
section[role="member-settings"] div:nth-child(2) { section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/4; grid-column: 2/4;
} }
section[role="member-settings"] div img { article[role="settings"] button {
width: 100%;
}
section[role="site-settings"] > div {
padding: 10px;
}
section[role="site-settings"] > div[role="features"] button {
width: 100%; width: 100%;
text-align: left; text-align: left;
height: 50px;
margin-bottom: 5px;
} }
section[role="site-settings"] > div[role="features"] button > span { article[role="settings"] button > span {
font-size: 0.8em; font-size: 0.8em;
display: inline; display: inline;
top: -10px; top: -10px;
@ -95,7 +93,7 @@ section[role="site-settings"]
background: var(--secondary); background: var(--secondary);
} }
section[role="site-settings"] > div[role="theme"] a[data-enabled="true"] { section[role="site-settings"] > div[role="theme"] button[data-enabled="true"] {
color: var(--white); color: var(--white);
background: var(--highlight); background: var(--highlight);
display: block; display: block;
@ -103,7 +101,7 @@ section[role="site-settings"] > div[role="theme"] a[data-enabled="true"] {
padding: 3px; padding: 3px;
} }
section[role="site-settings"] > div[role="theme"] a[data-enabled="false"] { section[role="site-settings"] > div[role="theme"] button[data-enabled="false"] {
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
display: block; display: block;
@ -113,12 +111,17 @@ section[role="site-settings"] > div[role="theme"] a[data-enabled="false"] {
section[role="site-settings"] > div[role="mail"] a { section[role="site-settings"] > div[role="mail"] a {
margin-right: 3px; margin-right: 3px;
color: var(--secondary);
display: inline-block;
height: 40px;
padding: 15px 0 0;
border-top: var(--primary) 1px solid;
} }
section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] { section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] {
color: var(--primary); color: var(--tertiary);
font-weight: bold; font-weight: bold;
text-decoration: underline; border-top: var(--highlight) 1px solid;
} }
section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] { section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] {
@ -133,14 +136,8 @@ section[role="site-settings"] > div[role="mail"] input {
margin-bottom: 10px; margin-bottom: 10px;
} }
section[role="site-settings"] > div[role="mail"] button { section[role="data-settings"] {
width: 96%; color: var(--white);
height: 30px;
padding: 5px;
}
section[role="data-settings"] div {
padding: 10px;
} }
section[role="data-settings"] div:nth-child(1) { section[role="data-settings"] div:nth-child(1) {
@ -148,13 +145,84 @@ section[role="data-settings"] div:nth-child(1) {
word-wrap: break-word; word-wrap: break-word;
} }
section[role="data-settings"] button {
width: 96%;
height: 30px;
padding: 5px;
}
section[role="data-settings"] a { section[role="data-settings"] a {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
color: var(--tertiary);
}
@media only screen and (max-width: 900px) {
main > article[role="settings"] {
width: 97%;
}
main > article[role="settings"] > section[role="member-settings"] {
width: 97.5%;
}
}
@media only screen and (max-width: 480px) {
article[role="settings"] button {
width: 98%;
}
article[role="settings"] button > span {
font-size: 0.6em;
}
section[role="member-settings"],
section[role="site-settings"],
section[role="data-settings"],
section[role="backup-settings"] {
grid-template-columns: 1fr 1fr;
}
section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/3;
}
section[role="member-settings"] > div:nth-child(5) {
grid-column: 1/3;
}
main > article[role="settings"] > section[role="member-settings"] {
width: auto;
}
section[role="member-settings"] > div[role="member-avatar"] {
height: 200px;
}
section[role="site-settings"] > div:nth-child(3) {
grid-column: 1/3;
}
section[role="data-settings"] > div:nth-child(2) {
grid-column: 1/3;
}
}
@media only screen and (max-width: 330px) {
section[role="member-settings"],
section[role="site-settings"],
section[role="data-settings"],
section[role="backup-settings"] {
grid-template-columns: 1fr;
grid-auto-rows: 1fr 1fr auto auto;
}
section[role="member-settings"] > div:nth-child(2),
section[role="member-settings"] > div:nth-child(3),
section[role="member-settings"] > div:nth-child(4),
section[role="member-settings"] > div:nth-child(5) {
grid-column: 1/2;
}
section[role="site-settings"] > div:nth-child(1) {
grid-column: 1/3;
}
article[role="settings"] button > span {
font-size: 0.8em;
}
} }

@ -15,12 +15,12 @@ h1 {
} }
h2 { h2 {
font-size: 1.8em; font-size: 1.6em;
font-weight: 600; font-weight: 600;
} }
h3 { h3 {
font-size: 1.5em; font-size: 1.3em;
font-weight: 500; font-weight: 500;
} }

@ -7196,7 +7196,7 @@ class $8a9e11caee7219b1$export$2e2bcd8739ae039 {
let desc = document.getElementById("settings-desc").value; let desc = document.getElementById("settings-desc").value;
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private'); //let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
let render = document.getElementById("render-toggle").getAttribute("data-render"); let render = document.getElementById("render-toggle").getAttribute("data-render");
let background = document.getElementById("background").src; let background = document.querySelector('[role="background"]').style.backgroundImage.slice(4, -1).replace(/"/g, "");
let selected = ""; let selected = "";
let selects = document.querySelectorAll(".theme-select"); let selects = document.querySelectorAll(".theme-select");
let smtpDomain = document.getElementById("smtp-domain").value; let smtpDomain = document.getElementById("smtp-domain").value;
@ -7315,10 +7315,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
//console.log(err); //console.log(err);
})); }));
//handle set up image uploads //handle set up image uploads
document.getElementById("avatar").addEventListener("click", ()=>{ document.querySelector('[role="avatar"]').addEventListener("click", ()=>{
document.getElementById("avatar-upload").click(); document.getElementById("avatar-upload").click();
}); });
document.getElementById("background").addEventListener("click", ()=>{ document.querySelector('[role="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)=>{
@ -7335,10 +7335,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
e.preventDefault(); e.preventDefault();
if (apiButton.getAttribute("data-enabled") == "false") { if (apiButton.getAttribute("data-enabled") == "false") {
apiButton.setAttribute("data-enabled", "true"); apiButton.setAttribute("data-enabled", "true");
apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED"; apiStatus.innerHTML = "API ACCESS IS ENABLED";
} else { } else {
apiButton.setAttribute("data-enabled", "false"); apiButton.setAttribute("data-enabled", "false");
apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED"; apiStatus.innerHTML = "API ACCESS IS DISABLED";
} }
}); });
//handle dynamic page rendering //handle dynamic page rendering
@ -7435,10 +7435,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
this.mm.filesUpload(files[0].type, upload).then((r)=>{ this.mm.filesUpload(files[0].type, upload).then((r)=>{
if (type == "avatar-upload") { if (type == "avatar-upload") {
$b33d1a942dce8554$var$notify.alert(r.message, true); $b33d1a942dce8554$var$notify.alert(r.message, true);
document.getElementById("avatar").src = r.filePath; document.querySelector('[role="avatar"]').style.background = "url(" + r.filePath + ") no-repeat center center / cover";
} else { } else {
$b33d1a942dce8554$var$notify.alert(r.message, true); $b33d1a942dce8554$var$notify.alert(r.message, true);
document.getElementById("background").src = r.filePath; document.querySelector('[role="background"]').style.background = "url(" + r.filePath + ") no-repeat center center / cover";
} }
}).catch(()=>{ }).catch(()=>{
//console.log(err) //console.log(err)

@ -1,9 +1,9 @@
import Base from "./Base"; import Base from './Base';
document.addEventListener( document.addEventListener(
"DOMContentLoaded", 'DOMContentLoaded',
function () { function () {
new Base(); new Base();
}, },
false false
); );

@ -1,78 +1,79 @@
export default class SettingsActions { export default class SettingsActions {
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
constructor() {} constructor() {}
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
getInfo() { getInfo() {
let handle = document.getElementById("settings-handle").value; let handle = document.getElementById('settings-handle').value;
let email = document.getElementById("settings-email").value; let email = document.getElementById('settings-email').value;
let url = document.getElementById("settings-url").value; let url = document.getElementById('settings-url').value;
let title = document.getElementById("settings-title").value; let title = document.getElementById('settings-title').value;
let desc = document.getElementById("settings-desc").value; let desc = document.getElementById('settings-desc').value;
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private'); //let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
let render = document let render = document.getElementById('render-toggle').getAttribute('data-render');
.getElementById("render-toggle") let background = document
.getAttribute("data-render"); .querySelector('[role="background"]')
let background = document.getElementById("background").src; .style.backgroundImage.slice(4, -1)
let selected = ""; .replace(/"/g, '');
let selects = document.querySelectorAll(".theme-select"); let selected = '';
let smtpDomain = document.getElementById("smtp-domain").value; let selects = document.querySelectorAll('.theme-select');
let smtpEmail = document.getElementById("smtp-email").value; let smtpDomain = document.getElementById('smtp-domain').value;
let smtpPass = document.getElementById("smtp-pass").value; let smtpEmail = document.getElementById('smtp-email').value;
let mgDomain = document.getElementById("mg-domain").value; let smtpPass = document.getElementById('smtp-pass').value;
let mgKey = document.getElementById("mg-key").value; let mgDomain = document.getElementById('mg-domain').value;
let mailActive = ""; let mgKey = document.getElementById('mg-key').value;
let mailOptions = document.querySelectorAll(".mail-option"); let mailActive = '';
let apiStatus = document let mailOptions = document.querySelectorAll('.mail-option');
.getElementById("api-access-toggle") let apiStatus = document
.getAttribute("data-enabled"); .getElementById('api-access-toggle')
let dynamicRenderStatus = document .getAttribute('data-enabled');
.getElementById("dynamic-render-toggle") let dynamicRenderStatus = document
.getAttribute("data-enabled"); .getElementById('dynamic-render-toggle')
var i, count; .getAttribute('data-enabled');
for (i = 0, count = selects.length; i < count; i++) { var i, count;
if (selects[i].getAttribute("data-enabled") == "true") for (i = 0, count = selects.length; i < count; i++) {
selected = selects[i].id; if (selects[i].getAttribute('data-enabled') == 'true')
} selected = selects[i].id;
}
for (i = 0, count = mailOptions.length; i < count; i++) { for (i = 0, count = mailOptions.length; i < count; i++) {
if (mailOptions[i].getAttribute("data-enabled") == "true") if (mailOptions[i].getAttribute('data-enabled') == 'true')
mailActive = mailOptions[i].id; mailActive = mailOptions[i].id;
} }
let settingsData = { let settingsData = {
global: { global: {
base_url: url, base_url: url,
title: title, title: title,
descriptions: desc, descriptions: desc,
background: background, background: background,
private: false, private: false,
renderOnSave: render, renderOnSave: render,
theme: selected, theme: selected,
externalAPI: apiStatus, externalAPI: apiStatus,
dynamicRender: dynamicRenderStatus dynamicRender: dynamicRenderStatus
}, },
member: { handle: handle, email: email }, member: { handle: handle, email: email },
email: { email: {
active: mailActive, active: mailActive,
smtp: { smtp: {
domain: smtpDomain, domain: smtpDomain,
email: smtpEmail, email: smtpEmail,
password: smtpPass password: smtpPass
}, },
mailgun: { mailgun: {
domain: mgDomain, domain: mgDomain,
key: mgKey key: mgKey
} }
} }
}; };
return new Promise(function (resolve) { return new Promise(function (resolve) {
resolve(settingsData); resolve(settingsData);
}); });
} }
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
} }

@ -39,10 +39,10 @@ export default class SettingsIndex {
}) })
); );
//handle set up image uploads //handle set up image uploads
document.getElementById('avatar').addEventListener('click', () => { document.querySelector('[role="avatar"]').addEventListener('click', () => {
document.getElementById('avatar-upload').click(); document.getElementById('avatar-upload').click();
}); });
document.getElementById('background').addEventListener('click', () => { document.querySelector('[role="background"]').addEventListener('click', () => {
document.getElementById('background-upload').click(); document.getElementById('background-upload').click();
}); });
document.getElementById('avatar-upload').addEventListener( document.getElementById('avatar-upload').addEventListener(
@ -67,10 +67,10 @@ export default class SettingsIndex {
e.preventDefault(); e.preventDefault();
if (apiButton.getAttribute('data-enabled') == 'false') { if (apiButton.getAttribute('data-enabled') == 'false') {
apiButton.setAttribute('data-enabled', 'true'); apiButton.setAttribute('data-enabled', 'true');
apiStatus.innerHTML = 'EXTERNAL API ACCESS IS ENABLED'; apiStatus.innerHTML = 'API ACCESS IS ENABLED';
} else { } else {
apiButton.setAttribute('data-enabled', 'false'); apiButton.setAttribute('data-enabled', 'false');
apiStatus.innerHTML = 'EXTERNAL API ACCESS IS NOT ENABLED'; apiStatus.innerHTML = 'API ACCESS IS DISABLED';
} }
}); });
@ -200,10 +200,12 @@ export default class SettingsIndex {
.then(r => { .then(r => {
if (type == 'avatar-upload') { if (type == 'avatar-upload') {
notify.alert(r.message, true); notify.alert(r.message, true);
document.getElementById('avatar').src = r.filePath; document.querySelector('[role="avatar"]').style.background =
'url(' + r.filePath + ') no-repeat center center / cover';
} else { } else {
notify.alert(r.message, true); notify.alert(r.message, true);
document.getElementById('background').src = r.filePath; document.querySelector('[role="background"]').style.background =
'url(' + r.filePath + ') no-repeat center center / cover';
} }
}) })
.catch(() => { .catch(() => {

Loading…
Cancel
Save