forked from projects/fipamo
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.
This commit is contained in:
parent
97278e3a90
commit
bfb0873f5f
13 changed files with 257 additions and 165 deletions
|
@ -35,7 +35,7 @@ class DashControl
|
|||
$form_token = Session::get('form_token');
|
||||
$updated = new Carbon($settings['global']['last_backup']);
|
||||
$pageOptions = [
|
||||
'title' => 'Dash Settings',
|
||||
'title' => 'Settings',
|
||||
'private' => $settings['global']['private'],
|
||||
'renderOnSave' => $settings['global']['renderOnSave'],
|
||||
'background' => $settings['global']['background'],
|
||||
|
@ -71,7 +71,7 @@ class DashControl
|
|||
$settings = $config->getSettings();
|
||||
$template = 'dash/navigation.twig';
|
||||
$pageOptions = [
|
||||
'title' => 'Edit Dash Navigation',
|
||||
'title' => 'Edit Menu',
|
||||
'status' => Session::active(),
|
||||
'menu' => $settings['menu'],
|
||||
];
|
||||
|
@ -138,7 +138,7 @@ class DashControl
|
|||
}
|
||||
|
||||
$pageOptions = [
|
||||
'title' => 'Fipamo | Edit Page',
|
||||
'title' => $page['title'],
|
||||
'page' => $page,
|
||||
'mode' => $mode,
|
||||
'token' => Session::get('form_token'),
|
||||
|
@ -166,7 +166,7 @@ class DashControl
|
|||
$response->getBody()->write($html);
|
||||
|
||||
return $response;
|
||||
break;
|
||||
break;
|
||||
default:
|
||||
$pageOptions = [
|
||||
'title' => 'Fipamo | Create Page',
|
||||
|
@ -185,7 +185,7 @@ class DashControl
|
|||
Session::kill();
|
||||
header('Location: /dashboard');
|
||||
exit();
|
||||
break;
|
||||
break;
|
||||
case 'reset-password':
|
||||
$template = 'dash/reset-password.twig';
|
||||
$pageOptions = [
|
||||
|
|
|
@ -43,6 +43,6 @@
|
|||
{% endapply %}
|
||||
</main>
|
||||
<footer></footer>
|
||||
<script src="/assets/scripts/start.js?=dfdfdfse" type="text/javascript"></script>
|
||||
<script type="module" src="/assets/scripts/start.js?=dfdfdfse"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -9,7 +9,6 @@
|
|||
{% set slug = page['slug'] %}
|
||||
{% set layout = page['layout'] %}
|
||||
{% set feature = page['feature'] %}
|
||||
{% set title = page['title'] %}
|
||||
{% set tags = page['tags'] %}
|
||||
{% set content = page['content'] %}
|
||||
{% set date = page['created'] %}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div role="menu">
|
||||
{% if title == "Dash Settings" %}
|
||||
{% if title == "Settings" %}
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/submenu_settings.twig") }}
|
||||
{% endapply %}
|
||||
|
|
|
@ -10,14 +10,14 @@
|
|||
|
||||
{% block mainContent %}
|
||||
<article role="settings">
|
||||
<h1>Settings</h1>
|
||||
<h2>Info</h2>
|
||||
<section role="member-settings">
|
||||
<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"/>
|
||||
</div>
|
||||
<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"/>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -32,9 +32,10 @@
|
|||
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Options</h2>
|
||||
<section role="site-settings">
|
||||
<div role="features">
|
||||
<label>Options</label>
|
||||
<label>Features</label>
|
||||
<br>
|
||||
{% if apiStatus is defined and apiStatus == "true" %}
|
||||
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
||||
|
@ -67,15 +68,21 @@
|
|||
<label>Themes</label><br/>
|
||||
{% for theme in themes %}
|
||||
{% 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 %}
|
||||
<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 %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div role="mail">
|
||||
<label>EMAIL</label><br/>
|
||||
<label>Email</label><br/>
|
||||
{% if mailOption == "option-none" or mailOption == "" %}
|
||||
<a href="#" class="mail-option" id="option-none" data-enabled="true">NONE</a>
|
||||
{% else %}
|
||||
|
@ -95,12 +102,16 @@
|
|||
{% apply spaceless %}
|
||||
{{ include("dash/partials/mailforms.twig") }}
|
||||
{% 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/>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Data</h2>
|
||||
<section role="data-settings">
|
||||
<div class="column">
|
||||
<div>
|
||||
<label>API KEY</label>
|
||||
<br/>
|
||||
{{ member['key'] }}
|
||||
|
@ -108,8 +119,11 @@
|
|||
<label>FORM TOKEN</label><br/>
|
||||
{{ ftoken }}
|
||||
</div>
|
||||
<div class="column">
|
||||
<button id="create-backup">BACK UP YOUR SITE</button><br/>
|
||||
<div>
|
||||
<button id="create-backup">
|
||||
<i class="ti ti-disc"></i>
|
||||
<span>BACK UP YOUR SITE</span>
|
||||
</button><br/>
|
||||
{% if lastBackup != '' %}
|
||||
LAST BACK UP<br/>
|
||||
<a href="/api/v1/files">{{ lastBackup }}</a><br/>
|
||||
|
|
|
@ -18,15 +18,15 @@ input[type="text"] {
|
|||
border-radius: 5px;
|
||||
font: 18px var(--base-type);
|
||||
display: inline-block;
|
||||
background: var(--primary);
|
||||
color: var(--tertiary);
|
||||
background: var(--white);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
color: var(--white);
|
||||
background: var(--primary);
|
||||
color: var(--primary);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
|
@ -149,3 +149,11 @@ section[role="login"] form a {
|
|||
margin: 0 0 0 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
header {
|
||||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,19 +2,18 @@ article[role="settings"] {
|
|||
margin: 100px auto;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
transition: all 0.8s linear;
|
||||
}
|
||||
|
||||
article[role="settings"] h1 {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
section[role="member-settings"] label {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
article[role="settings"] label {
|
||||
color: var(--secondary);
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
section[role="member-settings"],
|
||||
|
@ -27,12 +26,20 @@ section[role="backup-settings"] {
|
|||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 10px auto;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
section[role="member-settings"] div {
|
||||
width: 98%;
|
||||
padding: 5px;
|
||||
section[role="member-settings"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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"] {
|
||||
|
@ -41,41 +48,32 @@ section[role="member-settings"] div input[type="file"] {
|
|||
}
|
||||
|
||||
section[role="member-settings"] div input[type="text"] {
|
||||
width: 96%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
section[role="member-settings"] div textarea {
|
||||
background: var(--primary);
|
||||
width: 91%;
|
||||
padding: 5px;
|
||||
height: 79%;
|
||||
width: 99%;
|
||||
height: 86%;
|
||||
}
|
||||
|
||||
section[role="member-settings"] div:nth-child(1) {
|
||||
section[role="member-settings"] > div:nth-child(1) {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
|
||||
section[role="member-settings"] div:nth-child(2) {
|
||||
section[role="member-settings"] > div:nth-child(2) {
|
||||
grid-column: 2/4;
|
||||
}
|
||||
|
||||
section[role="member-settings"] div img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section[role="site-settings"] > div {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
section[role="site-settings"] > div[role="features"] button {
|
||||
article[role="settings"] button {
|
||||
width: 100%;
|
||||
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;
|
||||
display: inline;
|
||||
top: -10px;
|
||||
|
@ -95,7 +93,7 @@ section[role="site-settings"]
|
|||
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);
|
||||
background: var(--highlight);
|
||||
display: block;
|
||||
|
@ -103,7 +101,7 @@ section[role="site-settings"] > div[role="theme"] a[data-enabled="true"] {
|
|||
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);
|
||||
background: var(--secondary);
|
||||
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 {
|
||||
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"] {
|
||||
color: var(--primary);
|
||||
color: var(--tertiary);
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
border-top: var(--highlight) 1px solid;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
section[role="site-settings"] > div[role="mail"] button {
|
||||
width: 96%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
section[role="data-settings"] div {
|
||||
padding: 10px;
|
||||
section[role="data-settings"] {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
section[role="data-settings"] div:nth-child(1) {
|
||||
|
@ -148,13 +145,84 @@ section[role="data-settings"] div:nth-child(1) {
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
section[role="data-settings"] button {
|
||||
width: 96%;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
section[role="data-settings"] a {
|
||||
font-weight: bold;
|
||||
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 {
|
||||
font-size: 1.8em;
|
||||
font-size: 1.6em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.3em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
|
@ -7196,7 +7196,7 @@ class $8a9e11caee7219b1$export$2e2bcd8739ae039 {
|
|||
let desc = document.getElementById("settings-desc").value;
|
||||
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
||||
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 selects = document.querySelectorAll(".theme-select");
|
||||
let smtpDomain = document.getElementById("smtp-domain").value;
|
||||
|
@ -7315,10 +7315,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
|||
//console.log(err);
|
||||
}));
|
||||
//handle set up image uploads
|
||||
document.getElementById("avatar").addEventListener("click", ()=>{
|
||||
document.querySelector('[role="avatar"]').addEventListener("click", ()=>{
|
||||
document.getElementById("avatar-upload").click();
|
||||
});
|
||||
document.getElementById("background").addEventListener("click", ()=>{
|
||||
document.querySelector('[role="background"]').addEventListener("click", ()=>{
|
||||
document.getElementById("background-upload").click();
|
||||
});
|
||||
document.getElementById("avatar-upload").addEventListener("change", (e)=>{
|
||||
|
@ -7335,10 +7335,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
|||
e.preventDefault();
|
||||
if (apiButton.getAttribute("data-enabled") == "false") {
|
||||
apiButton.setAttribute("data-enabled", "true");
|
||||
apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED";
|
||||
apiStatus.innerHTML = "API ACCESS IS ENABLED";
|
||||
} else {
|
||||
apiButton.setAttribute("data-enabled", "false");
|
||||
apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED";
|
||||
apiStatus.innerHTML = "API ACCESS IS DISABLED";
|
||||
}
|
||||
});
|
||||
//handle dynamic page rendering
|
||||
|
@ -7435,10 +7435,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
|||
this.mm.filesUpload(files[0].type, upload).then((r)=>{
|
||||
if (type == "avatar-upload") {
|
||||
$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 {
|
||||
$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(()=>{
|
||||
//console.log(err)
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import Base from "./Base";
|
||||
import Base from './Base';
|
||||
|
||||
document.addEventListener(
|
||||
"DOMContentLoaded",
|
||||
function () {
|
||||
new Base();
|
||||
},
|
||||
false
|
||||
'DOMContentLoaded',
|
||||
function () {
|
||||
new Base();
|
||||
},
|
||||
false
|
||||
);
|
||||
|
|
|
@ -1,78 +1,79 @@
|
|||
export default class SettingsActions {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
getInfo() {
|
||||
let handle = document.getElementById("settings-handle").value;
|
||||
let email = document.getElementById("settings-email").value;
|
||||
let url = document.getElementById("settings-url").value;
|
||||
let title = document.getElementById("settings-title").value;
|
||||
let desc = document.getElementById("settings-desc").value;
|
||||
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
||||
let render = document
|
||||
.getElementById("render-toggle")
|
||||
.getAttribute("data-render");
|
||||
let background = document.getElementById("background").src;
|
||||
let selected = "";
|
||||
let selects = document.querySelectorAll(".theme-select");
|
||||
let smtpDomain = document.getElementById("smtp-domain").value;
|
||||
let smtpEmail = document.getElementById("smtp-email").value;
|
||||
let smtpPass = document.getElementById("smtp-pass").value;
|
||||
let mgDomain = document.getElementById("mg-domain").value;
|
||||
let mgKey = document.getElementById("mg-key").value;
|
||||
let mailActive = "";
|
||||
let mailOptions = document.querySelectorAll(".mail-option");
|
||||
let apiStatus = document
|
||||
.getElementById("api-access-toggle")
|
||||
.getAttribute("data-enabled");
|
||||
let dynamicRenderStatus = document
|
||||
.getElementById("dynamic-render-toggle")
|
||||
.getAttribute("data-enabled");
|
||||
var i, count;
|
||||
for (i = 0, count = selects.length; i < count; i++) {
|
||||
if (selects[i].getAttribute("data-enabled") == "true")
|
||||
selected = selects[i].id;
|
||||
}
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
getInfo() {
|
||||
let handle = document.getElementById('settings-handle').value;
|
||||
let email = document.getElementById('settings-email').value;
|
||||
let url = document.getElementById('settings-url').value;
|
||||
let title = document.getElementById('settings-title').value;
|
||||
let desc = document.getElementById('settings-desc').value;
|
||||
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
||||
let render = document.getElementById('render-toggle').getAttribute('data-render');
|
||||
let background = document
|
||||
.querySelector('[role="background"]')
|
||||
.style.backgroundImage.slice(4, -1)
|
||||
.replace(/"/g, '');
|
||||
let selected = '';
|
||||
let selects = document.querySelectorAll('.theme-select');
|
||||
let smtpDomain = document.getElementById('smtp-domain').value;
|
||||
let smtpEmail = document.getElementById('smtp-email').value;
|
||||
let smtpPass = document.getElementById('smtp-pass').value;
|
||||
let mgDomain = document.getElementById('mg-domain').value;
|
||||
let mgKey = document.getElementById('mg-key').value;
|
||||
let mailActive = '';
|
||||
let mailOptions = document.querySelectorAll('.mail-option');
|
||||
let apiStatus = document
|
||||
.getElementById('api-access-toggle')
|
||||
.getAttribute('data-enabled');
|
||||
let dynamicRenderStatus = document
|
||||
.getElementById('dynamic-render-toggle')
|
||||
.getAttribute('data-enabled');
|
||||
var i, count;
|
||||
for (i = 0, count = selects.length; i < count; i++) {
|
||||
if (selects[i].getAttribute('data-enabled') == 'true')
|
||||
selected = selects[i].id;
|
||||
}
|
||||
|
||||
for (i = 0, count = mailOptions.length; i < count; i++) {
|
||||
if (mailOptions[i].getAttribute("data-enabled") == "true")
|
||||
mailActive = mailOptions[i].id;
|
||||
}
|
||||
let settingsData = {
|
||||
global: {
|
||||
base_url: url,
|
||||
title: title,
|
||||
descriptions: desc,
|
||||
background: background,
|
||||
private: false,
|
||||
renderOnSave: render,
|
||||
theme: selected,
|
||||
externalAPI: apiStatus,
|
||||
dynamicRender: dynamicRenderStatus
|
||||
},
|
||||
member: { handle: handle, email: email },
|
||||
email: {
|
||||
active: mailActive,
|
||||
smtp: {
|
||||
domain: smtpDomain,
|
||||
email: smtpEmail,
|
||||
password: smtpPass
|
||||
},
|
||||
mailgun: {
|
||||
domain: mgDomain,
|
||||
key: mgKey
|
||||
}
|
||||
}
|
||||
};
|
||||
return new Promise(function (resolve) {
|
||||
resolve(settingsData);
|
||||
});
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
for (i = 0, count = mailOptions.length; i < count; i++) {
|
||||
if (mailOptions[i].getAttribute('data-enabled') == 'true')
|
||||
mailActive = mailOptions[i].id;
|
||||
}
|
||||
let settingsData = {
|
||||
global: {
|
||||
base_url: url,
|
||||
title: title,
|
||||
descriptions: desc,
|
||||
background: background,
|
||||
private: false,
|
||||
renderOnSave: render,
|
||||
theme: selected,
|
||||
externalAPI: apiStatus,
|
||||
dynamicRender: dynamicRenderStatus
|
||||
},
|
||||
member: { handle: handle, email: email },
|
||||
email: {
|
||||
active: mailActive,
|
||||
smtp: {
|
||||
domain: smtpDomain,
|
||||
email: smtpEmail,
|
||||
password: smtpPass
|
||||
},
|
||||
mailgun: {
|
||||
domain: mgDomain,
|
||||
key: mgKey
|
||||
}
|
||||
}
|
||||
};
|
||||
return new Promise(function (resolve) {
|
||||
resolve(settingsData);
|
||||
});
|
||||
}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
}
|
||||
|
|
|
@ -39,10 +39,10 @@ export default class SettingsIndex {
|
|||
})
|
||||
);
|
||||
//handle set up image uploads
|
||||
document.getElementById('avatar').addEventListener('click', () => {
|
||||
document.querySelector('[role="avatar"]').addEventListener('click', () => {
|
||||
document.getElementById('avatar-upload').click();
|
||||
});
|
||||
document.getElementById('background').addEventListener('click', () => {
|
||||
document.querySelector('[role="background"]').addEventListener('click', () => {
|
||||
document.getElementById('background-upload').click();
|
||||
});
|
||||
document.getElementById('avatar-upload').addEventListener(
|
||||
|
@ -67,10 +67,10 @@ export default class SettingsIndex {
|
|||
e.preventDefault();
|
||||
if (apiButton.getAttribute('data-enabled') == 'false') {
|
||||
apiButton.setAttribute('data-enabled', 'true');
|
||||
apiStatus.innerHTML = 'EXTERNAL API ACCESS IS ENABLED';
|
||||
apiStatus.innerHTML = 'API ACCESS IS ENABLED';
|
||||
} else {
|
||||
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 => {
|
||||
if (type == 'avatar-upload') {
|
||||
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 {
|
||||
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(() => {
|
||||
|
|
Loading…
Reference in a new issue