projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 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.
This commit is contained in:
Ro 2023-03-28 18:19:40 -07:00
parent 97278e3a90
commit bfb0873f5f
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
13 changed files with 257 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
brain/controller/DashControl.php
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
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
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
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
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
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
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
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
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
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
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
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
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(() => {