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');
$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'),

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

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

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

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

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

@ -1,5 +1,5 @@
<div role="menu">
{% if title == "Dash Settings" %}
{% if title == "Settings" %}
{% apply spaceless %}
{{ include("dash/partials/submenu_settings.twig") }}
{% endapply %}

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

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

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

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

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

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

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

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

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

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

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

@ -7,39 +7,40 @@ export default class SettingsActions {
// 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 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 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");
.getElementById('api-access-toggle')
.getAttribute('data-enabled');
let dynamicRenderStatus = document
.getElementById("dynamic-render-toggle")
.getAttribute("data-enabled");
.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")
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")
if (mailOptions[i].getAttribute('data-enabled') == 'true')
mailActive = mailOptions[i].id;
}
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
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(() => {

Write Preview
Loading…
Cancel
Save