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');
$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
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
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
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
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
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
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
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
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
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
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
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
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(() => {