diff --git a/brain/controller/DashControl.php b/brain/controller/DashControl.php index d03f0ca..2b479b6 100644 --- a/brain/controller/DashControl.php +++ b/brain/controller/DashControl.php @@ -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 = [ diff --git a/brain/views/dash/_frame.twig b/brain/views/dash/_frame.twig index f048630..7903787 100644 --- a/brain/views/dash/_frame.twig +++ b/brain/views/dash/_frame.twig @@ -43,6 +43,6 @@ {% endapply %} - + diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig index c7f92c1..23e1d89 100644 --- a/brain/views/dash/page-edit.twig +++ b/brain/views/dash/page-edit.twig @@ -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'] %} diff --git a/brain/views/dash/partials/navigation.twig b/brain/views/dash/partials/navigation.twig index 2a21f3f..e793db0 100644 --- a/brain/views/dash/partials/navigation.twig +++ b/brain/views/dash/partials/navigation.twig @@ -1,5 +1,5 @@
- {% if title == "Dash Settings" %} + {% if title == "Settings" %} {% apply spaceless %} {{ include("dash/partials/submenu_settings.twig") }} {% endapply %} diff --git a/brain/views/dash/settings.twig b/brain/views/dash/settings.twig index 182f440..698e105 100644 --- a/brain/views/dash/settings.twig +++ b/brain/views/dash/settings.twig @@ -10,14 +10,14 @@ {% block mainContent %}
-

Settings

+

Info

- +
- image for site background +
@@ -32,9 +32,10 @@
+

Options

- +
{% if apiStatus is defined and apiStatus == "true" %} {% else %} - {{ theme['display-name'] }} + {% endif %} {% endfor %}
-
+
{% if mailOption == "option-none" or mailOption == "" %} NONE {% else %} @@ -95,12 +102,16 @@ {% apply spaceless %} {{ include("dash/partials/mailforms.twig") }} {% endapply %} - +

+

Data

-
+

{{ member['key'] }} @@ -108,8 +119,11 @@
{{ ftoken }}
-
-
+
+
{% if lastBackup != '' %} LAST BACK UP
{{ lastBackup }}
diff --git a/public/assets/css/dash/forms.css b/public/assets/css/dash/forms.css index 31a8801..2c0df70 100644 --- a/public/assets/css/dash/forms.css +++ b/public/assets/css/dash/forms.css @@ -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, diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css index 5579b1f..7caaaef 100644 --- a/public/assets/css/dash/frame.css +++ b/public/assets/css/dash/frame.css @@ -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%; + } +} diff --git a/public/assets/css/dash/settings.css b/public/assets/css/dash/settings.css index 7e5bb3e..631f791 100644 --- a/public/assets/css/dash/settings.css +++ b/public/assets/css/dash/settings.css @@ -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; + } } diff --git a/public/assets/css/dash/typography.css b/public/assets/css/dash/typography.css index cd88d74..d588aa4 100644 --- a/public/assets/css/dash/typography.css +++ b/public/assets/css/dash/typography.css @@ -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; } diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index d4c8763..86c8ec6 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -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) diff --git a/src/com/Start.js b/src/com/Start.js index 167671c..b843adb 100644 --- a/src/com/Start.js +++ b/src/com/Start.js @@ -1,9 +1,9 @@ -import Base from "./Base"; +import Base from './Base'; document.addEventListener( - "DOMContentLoaded", - function () { - new Base(); - }, - false + 'DOMContentLoaded', + function () { + new Base(); + }, + false ); diff --git a/src/com/actions/SettingsActions.js b/src/com/actions/SettingsActions.js index 07bdffc..0b48bd1 100644 --- a/src/com/actions/SettingsActions.js +++ b/src/com/actions/SettingsActions.js @@ -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 + //-------------------------- } diff --git a/src/com/controllers/SettingsIndex.js b/src/com/controllers/SettingsIndex.js index 619e18e..150a1f1 100644 --- a/src/com/controllers/SettingsIndex.js +++ b/src/com/controllers/SettingsIndex.js @@ -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(() => {