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

Settings CSS Remix

Browse Source 
Wasn't feeling the previous CSS responsive structure, so edited it to be
a bit more streamline.

Also fixed small issue with the backup API request.

Made a small change to notifications so the alert stays live while the
system is processing a request rather than going back to an unalert
state.
toggle-buttons-#109
Ro 2 years ago
parent bfb0873f5f
commit 2ce86fad2e
Signed by: are0h
GPG Key ID: 29B551CDBD4D3B50
6 changed files with 247 additions and 220 deletions
Show Stats Download Patch File Download Diff File

1
brain/utility/Maintenance.php
Unescape Escape View File

@ -2,6 +2,7 @@
namespace brain\utility; namespace brain\utility;
use brain\data\Settings;
use Carbon\Carbon; use Carbon\Carbon;
class Maintenance class Maintenance

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

@ -10,7 +10,6 @@
{% block mainContent %} {% block mainContent %}
<article role="settings"> <article role="settings">
<h2>Info</h2>
<section role="member-settings"> <section role="member-settings">
<div role="member-avatar"> <div role="member-avatar">
<div role="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div> <div role="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div>
@ -23,114 +22,103 @@
<div> <div>
<input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{ member['handle'] }}" autofocus/> <input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{ member['handle'] }}" autofocus/>
<input type='text' name='email' id='settings-email' placeholder='email' value="{{ member['email'] }}" autofocus/> <input type='text' name='email' id='settings-email' placeholder='email' value="{{ member['email'] }}" autofocus/>
</div>
<div>
<input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ baseUrl }}" autofocus/> <input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ baseUrl }}" autofocus/>
<input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ siteTitle }}" autofocus/> <input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ siteTitle }}" autofocus/>
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
</div> </div>
<div> <div>
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea> <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/>
{% else %}
<span>span No back ups. Frowny face.</span>
{% endif %}
</div> </div>
</section>
<h2>Options</h2>
<section role="site-settings">
<div role="features"> <div role="features">
<label>Features</label> {% if apiStatus is defined and apiStatus == "true" %}
<br> <button id="api-access-toggle" title="allow external api" data-enabled="true">
{% if apiStatus is defined and apiStatus == "true" %} <i class="ti ti-phone-incoming"></i>
<button id="api-access-toggle" title="allow external api" data-enabled="true"> <span id="api-status">API ACCESS ENABLED</span>
<i class="ti ti-phone-incoming"></i> </button>
<span id="api-status">API ACCESS ENABLED</span>
</button>
{% else %} {% else %}
<button id="api-access-toggle" title="allow external api" data-enabled="false"> <button id="api-access-toggle" title="allow external api" data-enabled="false">
<i class="ti ti-phone-incoming"></i> <i class="ti ti-phone-incoming"></i>
<span id="api-status">API ACCESS NOT ENABLED</span> <span id="api-status">API ACCESS NOT ENABLED</span>
</button> </button>
{% endif %} {% endif %}
{% if dynamicRenderStatus is defined and dynamicRenderStatus == "true" %} {% if dynamicRenderStatus is defined and dynamicRenderStatus == "true" %}
<button id="dynamic-render-toggle" title="allow external api" data-enabled="true"> <button id="dynamic-render-toggle" title="allow external api" data-enabled="true">
<i class="ti ti-arrow-merge"></i> <i class="ti ti-arrow-merge"></i>
<span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span> <span id="dynamic-render-status">DYNAMIC PAGE RENDERING</span>
</button> </button>
{% else %}
<button id="dynamic-render-toggle" title="allow external api" data-enabled="false">
<i class="ti ti-arrow-merge"></i>
<span id="dynamic-render-status">STATIC PAGE RENDERING</span>
</button>
{% endif %}
</div>
<div role="theme">
<label>Themes</label><br/>
{% for theme in themes %}
{% if theme.name == currentTheme %}
<button id="{{ theme.name }}" class="theme-select" data-enabled="true">
<i class="ti ti-brush"></i>
<span>{{ theme['display-name'] }}</span>
</button>
{% else %} {% else %}
<button id="dynamic-render-toggle" title="allow external api" data-enabled="false"> <button href="#" id="{{ theme.name }}" class="theme-select" data-enabled="false">
<i class="ti ti-arrow-merge"></i> <i class="ti ti-brush-off"></i>
<span id="dynamic-render-status">STATIC PAGE RENDERING</span> <span>{{ theme['display-name'] }}</span>
</button> </button>
{% endif %} {% endif %}
</div>
<div role="theme">
<label>Themes</label><br/>
{% for theme in themes %}
{% if theme.name == currentTheme %}
<button id="{{ theme.name }}" class="theme-select" data-enabled="true">
<i class="ti ti-brush"></i>
<span>{{ theme['display-name'] }}</span>
</button>
{% else %}
<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 %} {% 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 %}
<a href="#" class="mail-option" id="option-none" data-enabled="false">NONE</a> <a href="#" class="mail-option" id="option-none" data-enabled="false">NONE</a>
{% endif %} {% endif %}
{% if mailOption == "option-mg" or mailOption == "" %} {% if mailOption == "option-mg" or mailOption == "" %}
<a href="#" class="mail-option" id="option-mg" data-enabled="true">MAILGUN</a> <a href="#" class="mail-option" id="option-mg" data-enabled="true">MAILGUN</a>
{% else %} {% else %}
<a href="#" class="mail-option" id="option-mg" data-enabled="false">MAILGUN</a> <a href="#" class="mail-option" id="option-mg" data-enabled="false">MAILGUN</a>
{% endif %} {% endif %}
{% if mailOption == "option-smtp" or mailOption == "" %} {% if mailOption == "option-smtp" or mailOption == "" %}
<a href="#" class="mail-option" id="option-smtp" data-enabled="true">SMTP</a> <a href="#" class="mail-option" id="option-smtp" data-enabled="true">SMTP</a>
{% else %} {% else %}
<a href="#" class="mail-option" id="option-smtp" data-enabled="false">SMTP</a> <a href="#" class="mail-option" id="option-smtp" data-enabled="false">SMTP</a>
{% endif %} {% endif %}
{% apply spaceless %} {% apply spaceless %}
{{ include("dash/partials/mailforms.twig") }} {{ include("dash/partials/mailforms.twig") }}
{% endapply %} {% endapply %}
<button id="send-mail"> <button id="send-mail">
<i class="ti ti-mailbox"></i> <i class="ti ti-mailbox"></i>
<span>TEST MAIL</span> <span>TEST MAIL</span>
</button> </button>
<br/><br/> <br/><br/>
</div> </div>
</section> <div>
<h2>Data</h2> <label>API KEY</label>
<section role="data-settings"> <br/>
<div> {{ member['key'] }}
<label>API KEY</label> <br/>
<br/> <label>FORM TOKEN</label><br/>
{{ member['key'] }} {{ ftoken }}
<br/> </div>
<label>FORM TOKEN</label><br/> </section>
{{ ftoken }} </article>
</div> {% endblock %}
<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/>
{% else %}
<span>span No back ups. Frowny face.</span>
{% endif %}
</div>
</section>
</article>
{% endblock %}

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

@ -16,13 +16,11 @@ article[role="settings"] label {
font-weight: 400; font-weight: 400;
} }
section[role="member-settings"], section[role="member-settings"] {
section[role="site-settings"],
section[role="data-settings"],
section[role="backup-settings"] {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px; grid-auto-columns: auto;
gap: 15px;
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 10px auto; margin: 10px auto;
@ -32,8 +30,47 @@ section[role="member-settings"] {
width: 100%; width: 100%;
} }
section[role="member-settings"] > div[role="member-avatar"] { section[role="member-settings"] > div:nth-child(1) {
height: 300px; grid-column: 1/2;
grid-row: 1/3;
}
section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/4;
grid-row: 1/3;
}
section[role="member-settings"] > div:nth-child(3) {
grid-row: 1/3;
}
section[role="member-settings"] > div:nth-child(4) {
color: var(--white);
}
section[role="member-settings"] > div:nth-child(4) a {
font-weight: bold;
text-decoration: underline;
color: var(--tertiary);
}
section[role="member-settings"] > div:nth-child(5) {
grid-column: 2/4;
}
section[role="member-settings"] > div:nth-child(6) {
grid-column: 1/3;
}
section[role="member-settings"] > div:nth-child(7) {
grid-column: 3/5;
min-height: 325px;
}
section[role="member-settings"] > div:nth-child(8) {
grid-column: 1/4;
color: var(--white);
word-wrap: break-word;
} }
section[role="member-settings"] > div[role="member-avatar"] div, section[role="member-settings"] > div[role="member-avatar"] div,
@ -55,15 +92,7 @@ section[role="member-settings"] div input[type="text"] {
section[role="member-settings"] div textarea { section[role="member-settings"] div textarea {
width: 99%; width: 99%;
height: 86%; height: 63%;
}
section[role="member-settings"] > div:nth-child(1) {
grid-column: 1/2;
}
section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/4;
} }
article[role="settings"] button { article[role="settings"] button {
@ -80,20 +109,22 @@ article[role="settings"] button > span {
position: relative; position: relative;
} }
section[role="site-settings"] section[role="member-settings"]
> div[role="features"] > div[role="features"]
button[data-enabled="true"] { button[data-enabled="true"] {
color: var(--white); color: var(--white);
} }
section[role="site-settings"] section[role="member-settings"]
> div[role="features"] > div[role="features"]
button[data-enabled="false"] { button[data-enabled="false"] {
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
} }
section[role="site-settings"] > div[role="theme"] button[data-enabled="true"] { section[role="member-settings"]
> div[role="theme"]
button[data-enabled="true"] {
color: var(--white); color: var(--white);
background: var(--highlight); background: var(--highlight);
display: block; display: block;
@ -101,7 +132,9 @@ section[role="site-settings"] > div[role="theme"] button[data-enabled="true"] {
padding: 3px; padding: 3px;
} }
section[role="site-settings"] > div[role="theme"] button[data-enabled="false"] { section[role="member-settings"]
> div[role="theme"]
button[data-enabled="false"] {
color: var(--primary); color: var(--primary);
background: var(--secondary); background: var(--secondary);
display: block; display: block;
@ -109,7 +142,7 @@ section[role="site-settings"] > div[role="theme"] button[data-enabled="false"] {
padding: 3px; padding: 3px;
} }
section[role="site-settings"] > div[role="mail"] a { section[role="member-settings"] > div[role="mail"] a {
margin-right: 3px; margin-right: 3px;
color: var(--secondary); color: var(--secondary);
display: inline-block; display: inline-block;
@ -118,18 +151,18 @@ section[role="site-settings"] > div[role="mail"] a {
border-top: var(--primary) 1px solid; border-top: var(--primary) 1px solid;
} }
section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] { section[role="member-settings"] > div[role="mail"] a[data-enabled="true"] {
color: var(--tertiary); color: var(--tertiary);
font-weight: bold; font-weight: bold;
border-top: var(--highlight) 1px solid; border-top: var(--highlight) 1px solid;
} }
section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] { section[role="member-settings"] > div[role="mail"] div[data-enabled="false"] {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
section[role="site-settings"] > div[role="mail"] input { section[role="member-settings"] > div[role="mail"] input {
width: 96%; width: 96%;
height: 30px; height: 30px;
padding: 5px; padding: 5px;
@ -140,17 +173,6 @@ section[role="data-settings"] {
color: var(--white); color: var(--white);
} }
section[role="data-settings"] div:nth-child(1) {
grid-column: 1/3;
word-wrap: break-word;
}
section[role="data-settings"] a {
font-weight: bold;
text-decoration: underline;
color: var(--tertiary);
}
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
main > article[role="settings"] { main > article[role="settings"] {
width: 97%; width: 97%;
@ -161,68 +183,81 @@ section[role="data-settings"] a {
} }
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 650px) {
article[role="settings"] button { section[role="member-settings"] {
width: 98%; grid-template-columns: 1fr 1fr;
} }
article[role="settings"] button > span { section[role="member-settings"] div textarea {
font-size: 0.6em; height: 80px;
} }
section[role="member-settings"], section[role="member-settings"] > div:nth-child(1) {
section[role="site-settings"], grid-column: 1/2;
section[role="data-settings"], grid-row: 1/3;
section[role="backup-settings"] { height: 200px;
grid-template-columns: 1fr 1fr;
} }
section[role="member-settings"] > div:nth-child(2) { section[role="member-settings"] > div:nth-child(2) {
grid-column: 2/3; grid-column: 2/3;
grid-row: 1/3;
} }
section[role="member-settings"] > div:nth-child(5) { section[role="member-settings"] > div:nth-child(3) {
grid-column: 1/3; grid-column: 1/3;
grid-row: 3/5;
} }
main > article[role="settings"] > section[role="member-settings"] { section[role="member-settings"] > div:nth-child(4) {
width: auto; grid-column: 1/2;
} }
section[role="member-settings"] > div[role="member-avatar"] { section[role="member-settings"] > div:nth-child(5) {
height: 200px; grid-column: 2/3;
} }
section[role="site-settings"] > div:nth-child(3) { section[role="member-settings"] > div:nth-child(6) {
grid-column: 1/3; grid-column: 1/2;
} }
section[role="data-settings"] > div:nth-child(2) { section[role="member-settings"] > div:nth-child(7) {
grid-column: 2/3;
min-height: 325px;
}
section[role="member-settings"] > div:nth-child(8) {
grid-column: 1/3; grid-column: 1/3;
} }
} }
@media only screen and (max-width: 330px) { @media only screen and (max-width: 530px) {
section[role="member-settings"], section[role="member-settings"] {
section[role="site-settings"],
section[role="data-settings"],
section[role="backup-settings"] {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-auto-rows: 1fr 1fr auto auto;
} }
section[role="member-settings"] > div:nth-child(2), section[role="member-settings"] div textarea {
section[role="member-settings"] > div:nth-child(3), height: 80px;
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) { section[role="member-settings"] > div:nth-child(1) {
grid-column: 1/3; grid-row: 1/3;
height: 200px;
}
section[role="member-settings"] > div:nth-child(2) {
grid-row: 3/5;
} }
article[role="settings"] button > span { section[role="member-settings"] > div:nth-child(3) {
font-size: 0.8em; grid-column: 1;
grid-row: 5/7;
}
section[role="member-settings"] > div:nth-child(4),
section[role="member-settings"] > div:nth-child(5),
section[role="member-settings"] > div:nth-child(6),
section[role="member-settings"] > div:nth-child(7),
section[role="member-settings"] > div:nth-child(8) {
grid-column: 1/3;
} }
} }

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

@ -445,7 +445,7 @@ const $7e781a188206b2b3$export$d46ee33f41c7e43d = "apiUseNotAuthorized";
data = { data = {
task: "create_backup" task: "create_backup"
}; };
this._request(url, event, method, type, data).then((result)=>{ this._request(url, null, event, method, type, data).then((result)=>{
resolve(result); resolve(result);
}).catch((err)=>{ }).catch((err)=>{
reject(err); reject(err);
@ -4186,6 +4186,7 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
$accfb6154319a04b$var$iconGood.style.display = "none"; $accfb6154319a04b$var$iconGood.style.display = "none";
$accfb6154319a04b$var$iconNotGood.style.display = "none"; $accfb6154319a04b$var$iconNotGood.style.display = "none";
var color = ""; var color = "";
$accfb6154319a04b$var$responseText.innerHTML = text;
if (status !== null) { if (status !== null) {
if (status) { if (status) {
color = "#32cd32"; color = "#32cd32";
@ -4200,7 +4201,6 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
color = "#200317"; color = "#200317";
$accfb6154319a04b$var$iconWorking.style.display = "block"; $accfb6154319a04b$var$iconWorking.style.display = "block";
} }
$accfb6154319a04b$var$responseText.innerHTML = text;
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
targets: document.querySelector('[role="top-nav"]'), targets: document.querySelector('[role="top-nav"]'),
rotateX: "180deg", rotateX: "180deg",
@ -4226,30 +4226,32 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
duration: 400, duration: 400,
complete: ()=>{ complete: ()=>{
setTimeout(()=>{ setTimeout(()=>{
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ if (status !== null) {
targets: $accfb6154319a04b$var$notifyText, (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
backgroundColor: color, targets: $accfb6154319a04b$var$notifyText,
opacity: 0, backgroundColor: color,
easing: "easeInOutQuad", opacity: 0,
duration: 400 easing: "easeInOutQuad",
}); duration: 400
(0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ });
targets: $accfb6154319a04b$var$notifyIcons, (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
width: 0, targets: $accfb6154319a04b$var$notifyIcons,
opacity: 0, width: 0,
easing: "easeOutQuint", opacity: 0,
duration: 350 easing: "easeOutQuint",
}); duration: 350
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ });
targets: document.querySelector('[role="top-nav"]'), new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
rotateX: "0deg", targets: document.querySelector('[role="top-nav"]'),
easing: "easeOutQuint" rotateX: "0deg",
}); easing: "easeOutQuint"
new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({ });
targets: document.querySelector('[role="notify"]'), new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
rotateX: "180deg", targets: document.querySelector('[role="notify"]'),
easing: "easeOutQuint" rotateX: "180deg",
}); easing: "easeOutQuint"
});
}
}, 2500); }, 2500);
} }
}); });

3
src/com/controllers/MaintenanceManager.js
Unescape Escape View File

@ -135,8 +135,7 @@ class MaintenanceManager {
method = REQUEST_TYPE_POST; method = REQUEST_TYPE_POST;
type = CONTENT_TYPE_JSON; type = CONTENT_TYPE_JSON;
data = { task: 'create_backup' }; data = { task: 'create_backup' };
this._request(url, null, event, method, type, data)
this._request(url, event, method, type, data)
.then(result => { .then(result => {
resolve(result); resolve(result);
}) })

52
src/com/ui/Notifications.js
Unescape Escape View File

@ -24,6 +24,7 @@ export default class Notfications {
iconNotGood.style.display = 'none'; iconNotGood.style.display = 'none';
var color = ''; var color = '';
responseText.innerHTML = text;
if (status !== null) { if (status !== null) {
if (status) { if (status) {
color = '#32cd32'; color = '#32cd32';
@ -38,7 +39,6 @@ export default class Notfications {
color = '#200317'; color = '#200317';
iconWorking.style.display = 'block'; iconWorking.style.display = 'block';
} }
responseText.innerHTML = text;
new anime({ new anime({
targets: document.querySelector('[role="top-nav"]'), targets: document.querySelector('[role="top-nav"]'),
@ -67,33 +67,35 @@ export default class Notfications {
duration: 400, duration: 400,
complete: () => { complete: () => {
setTimeout(() => { setTimeout(() => {
anime({ if (status !== null) {
targets: notifyText, anime({
backgroundColor: color, targets: notifyText,
opacity: 0, backgroundColor: color,
easing: 'easeInOutQuad', opacity: 0,
duration: 400 easing: 'easeInOutQuad',
}); duration: 400
});
anime({ anime({
targets: notifyIcons, targets: notifyIcons,
width: 0, width: 0,
opacity: 0, opacity: 0,
easing: 'easeOutQuint', easing: 'easeOutQuint',
duration: 350 duration: 350
}); });
new anime({ new anime({
targets: document.querySelector('[role="top-nav"]'), targets: document.querySelector('[role="top-nav"]'),
rotateX: '0deg', rotateX: '0deg',
easing: 'easeOutQuint' easing: 'easeOutQuint'
}); });
new anime({ new anime({
targets: document.querySelector('[role="notify"]'), targets: document.querySelector('[role="notify"]'),
rotateX: '180deg', rotateX: '180deg',
easing: 'easeOutQuint' easing: 'easeOutQuint'
}); });
}
}, 2500); }, 2500);
} }
}); });

Write Preview
Loading…
Cancel
Save