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

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

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>

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

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

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

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,

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

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

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

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)

View file

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

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 = {

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