are0h
/
Fipamo
1
2
Fork 0
Code Issues 19 Pull Requests 1 Packages Projects 1 Releases 22 Wiki Activity

Reponsive: Part 1 - Settings

Browse Source 
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
13 changed files with 257 additions and 165 deletions
Show Stats Download Patch File Download Diff File

6
brain/controller/DashControl.php
Unescape Escape View File

@ -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'),

2
brain/views/dash/_frame.twig
Unescape Escape View File

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

1
brain/views/dash/page-edit.twig
Unescape Escape View File

@ -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'] %}

2
brain/views/dash/partials/navigation.twig
Unescape Escape View File

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

36
brain/views/dash/settings.twig
Unescape Escape View File

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

8
public/assets/css/dash/forms.css
Unescape Escape View File

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

8
public/assets/css/dash/frame.css
Unescape Escape View File

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

160
public/assets/css/dash/settings.css
Unescape Escape View File

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

4
public/assets/css/dash/typography.css
Unescape Escape View File

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

14
public/assets/scripts/Start.js
Unescape Escape View File

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

4
src/com/Start.js
Unescape Escape View File

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

49
src/com/actions/SettingsActions.js
Unescape Escape View File

@ -7,39 +7,40 @@ export default class SettingsActions {
// 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 mailOptions = document.querySelectorAll('.mail-option');
let apiStatus = document let apiStatus = document
.getElementById("api-access-toggle") .getElementById('api-access-toggle')
.getAttribute("data-enabled"); .getAttribute('data-enabled');
let dynamicRenderStatus = document let dynamicRenderStatus = document
.getElementById("dynamic-render-toggle") .getElementById('dynamic-render-toggle')
.getAttribute("data-enabled"); .getAttribute('data-enabled');
var i, count; var i, count;
for (i = 0, count = selects.length; i < count; i++) { for (i = 0, count = selects.length; i < count; i++) {
if (selects[i].getAttribute("data-enabled") == "true") if (selects[i].getAttribute('data-enabled') == 'true')
selected = selects[i].id; 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 = {

14
src/com/controllers/SettingsIndex.js
Unescape Escape View File

@ -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(() => {

Write Preview
Loading…
Cancel
Save