forked from projects/fipamo
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:
parent
97278e3a90
commit
bfb0873f5f
13 changed files with 257 additions and 165 deletions
|
@ -35,7 +35,7 @@ class DashControl
|
||||||
$form_token = Session::get('form_token');
|
$form_token = Session::get('form_token');
|
||||||
$updated = new Carbon($settings['global']['last_backup']);
|
$updated = new Carbon($settings['global']['last_backup']);
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
'title' => 'Dash Settings',
|
'title' => 'Settings',
|
||||||
'private' => $settings['global']['private'],
|
'private' => $settings['global']['private'],
|
||||||
'renderOnSave' => $settings['global']['renderOnSave'],
|
'renderOnSave' => $settings['global']['renderOnSave'],
|
||||||
'background' => $settings['global']['background'],
|
'background' => $settings['global']['background'],
|
||||||
|
@ -71,7 +71,7 @@ class DashControl
|
||||||
$settings = $config->getSettings();
|
$settings = $config->getSettings();
|
||||||
$template = 'dash/navigation.twig';
|
$template = 'dash/navigation.twig';
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
'title' => 'Edit Dash Navigation',
|
'title' => 'Edit Menu',
|
||||||
'status' => Session::active(),
|
'status' => Session::active(),
|
||||||
'menu' => $settings['menu'],
|
'menu' => $settings['menu'],
|
||||||
];
|
];
|
||||||
|
@ -138,7 +138,7 @@ class DashControl
|
||||||
}
|
}
|
||||||
|
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
'title' => 'Fipamo | Edit Page',
|
'title' => $page['title'],
|
||||||
'page' => $page,
|
'page' => $page,
|
||||||
'mode' => $mode,
|
'mode' => $mode,
|
||||||
'token' => Session::get('form_token'),
|
'token' => Session::get('form_token'),
|
||||||
|
@ -166,7 +166,7 @@ class DashControl
|
||||||
$response->getBody()->write($html);
|
$response->getBody()->write($html);
|
||||||
|
|
||||||
return $response;
|
return $response;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
'title' => 'Fipamo | Create Page',
|
'title' => 'Fipamo | Create Page',
|
||||||
|
@ -185,7 +185,7 @@ class DashControl
|
||||||
Session::kill();
|
Session::kill();
|
||||||
header('Location: /dashboard');
|
header('Location: /dashboard');
|
||||||
exit();
|
exit();
|
||||||
break;
|
break;
|
||||||
case 'reset-password':
|
case 'reset-password':
|
||||||
$template = 'dash/reset-password.twig';
|
$template = 'dash/reset-password.twig';
|
||||||
$pageOptions = [
|
$pageOptions = [
|
||||||
|
|
|
@ -43,6 +43,6 @@
|
||||||
{% endapply %}
|
{% endapply %}
|
||||||
</main>
|
</main>
|
||||||
<footer></footer>
|
<footer></footer>
|
||||||
<script src="/assets/scripts/start.js?=dfdfdfse" type="text/javascript"></script>
|
<script type="module" src="/assets/scripts/start.js?=dfdfdfse"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -9,7 +9,6 @@
|
||||||
{% set slug = page['slug'] %}
|
{% set slug = page['slug'] %}
|
||||||
{% set layout = page['layout'] %}
|
{% set layout = page['layout'] %}
|
||||||
{% set feature = page['feature'] %}
|
{% set feature = page['feature'] %}
|
||||||
{% set title = page['title'] %}
|
|
||||||
{% set tags = page['tags'] %}
|
{% set tags = page['tags'] %}
|
||||||
{% set content = page['content'] %}
|
{% set content = page['content'] %}
|
||||||
{% set date = page['created'] %}
|
{% set date = page['created'] %}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div role="menu">
|
<div role="menu">
|
||||||
{% if title == "Dash Settings" %}
|
{% if title == "Settings" %}
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
{{ include("dash/partials/submenu_settings.twig") }}
|
{{ include("dash/partials/submenu_settings.twig") }}
|
||||||
{% endapply %}
|
{% endapply %}
|
||||||
|
|
|
@ -10,14 +10,14 @@
|
||||||
|
|
||||||
{% block mainContent %}
|
{% block mainContent %}
|
||||||
<article role="settings">
|
<article role="settings">
|
||||||
<h1>Settings</h1>
|
<h2>Info</h2>
|
||||||
<section role="member-settings">
|
<section role="member-settings">
|
||||||
<div role="member-avatar">
|
<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"/>
|
<input id="avatar-upload" type="file" name="avatar-upload"/>
|
||||||
</div>
|
</div>
|
||||||
<div role="site-background">
|
<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"/>
|
<input id="background-upload" type="file" name="backgrond-upload"/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -32,9 +32,10 @@
|
||||||
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
|
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<h2>Options</h2>
|
||||||
<section role="site-settings">
|
<section role="site-settings">
|
||||||
<div role="features">
|
<div role="features">
|
||||||
<label>Options</label>
|
<label>Features</label>
|
||||||
<br>
|
<br>
|
||||||
{% if apiStatus is defined and apiStatus == "true" %}
|
{% if apiStatus is defined and apiStatus == "true" %}
|
||||||
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
<button id="api-access-toggle" title="allow external api" data-enabled="true">
|
||||||
|
@ -67,15 +68,21 @@
|
||||||
<label>Themes</label><br/>
|
<label>Themes</label><br/>
|
||||||
{% for theme in themes %}
|
{% for theme in themes %}
|
||||||
{% if theme.name == currentTheme %}
|
{% 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 %}
|
{% 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 %}
|
{% 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 %}
|
||||||
|
@ -95,12 +102,16 @@
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
{{ include("dash/partials/mailforms.twig") }}
|
{{ include("dash/partials/mailforms.twig") }}
|
||||||
{% endapply %}
|
{% 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/>
|
<br/><br/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<h2>Data</h2>
|
||||||
<section role="data-settings">
|
<section role="data-settings">
|
||||||
<div class="column">
|
<div>
|
||||||
<label>API KEY</label>
|
<label>API KEY</label>
|
||||||
<br/>
|
<br/>
|
||||||
{{ member['key'] }}
|
{{ member['key'] }}
|
||||||
|
@ -108,8 +119,11 @@
|
||||||
<label>FORM TOKEN</label><br/>
|
<label>FORM TOKEN</label><br/>
|
||||||
{{ ftoken }}
|
{{ ftoken }}
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div>
|
||||||
<button id="create-backup">BACK UP YOUR SITE</button><br/>
|
<button id="create-backup">
|
||||||
|
<i class="ti ti-disc"></i>
|
||||||
|
<span>BACK UP YOUR SITE</span>
|
||||||
|
</button><br/>
|
||||||
{% if lastBackup != '' %}
|
{% if lastBackup != '' %}
|
||||||
LAST BACK UP<br/>
|
LAST BACK UP<br/>
|
||||||
<a href="/api/v1/files">{{ lastBackup }}</a><br/>
|
<a href="/api/v1/files">{{ lastBackup }}</a><br/>
|
||||||
|
|
|
@ -18,15 +18,15 @@ input[type="text"] {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font: 18px var(--base-type);
|
font: 18px var(--base-type);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--primary);
|
background: var(--white);
|
||||||
color: var(--tertiary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: var(--white);
|
color: var(--primary);
|
||||||
background: var(--primary);
|
background: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
|
|
|
@ -149,3 +149,11 @@ section[role="login"] form a {
|
||||||
margin: 0 0 0 10px;
|
margin: 0 0 0 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 900px) {
|
||||||
|
header {
|
||||||
|
width: 97%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -2,19 +2,18 @@ article[role="settings"] {
|
||||||
margin: 100px auto;
|
margin: 100px auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
|
transition: all 0.8s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
article[role="settings"] h1 {
|
article[role="settings"] h1 {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"] label {
|
article[role="settings"] label {
|
||||||
background: var(--primary);
|
color: var(--secondary);
|
||||||
color: var(--white);
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"],
|
section[role="member-settings"],
|
||||||
|
@ -27,12 +26,20 @@ section[role="backup-settings"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
background: var(--white);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"] div {
|
section[role="member-settings"] {
|
||||||
width: 98%;
|
width: 100%;
|
||||||
padding: 5px;
|
}
|
||||||
|
|
||||||
|
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"] {
|
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"] {
|
section[role="member-settings"] div input[type="text"] {
|
||||||
width: 96%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 40px;
|
||||||
padding: 5px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"] div textarea {
|
section[role="member-settings"] div textarea {
|
||||||
background: var(--primary);
|
width: 99%;
|
||||||
width: 91%;
|
height: 86%;
|
||||||
padding: 5px;
|
|
||||||
height: 79%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"] div:nth-child(1) {
|
section[role="member-settings"] > div:nth-child(1) {
|
||||||
grid-column: 1/2;
|
grid-column: 1/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"] div:nth-child(2) {
|
section[role="member-settings"] > div:nth-child(2) {
|
||||||
grid-column: 2/4;
|
grid-column: 2/4;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="member-settings"] div img {
|
article[role="settings"] button {
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="site-settings"] > div {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="site-settings"] > div[role="features"] button {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
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;
|
font-size: 0.8em;
|
||||||
display: inline;
|
display: inline;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
|
@ -95,7 +93,7 @@ section[role="site-settings"]
|
||||||
background: var(--secondary);
|
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);
|
color: var(--white);
|
||||||
background: var(--highlight);
|
background: var(--highlight);
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -103,7 +101,7 @@ section[role="site-settings"] > div[role="theme"] a[data-enabled="true"] {
|
||||||
padding: 3px;
|
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);
|
color: var(--primary);
|
||||||
background: var(--secondary);
|
background: var(--secondary);
|
||||||
display: block;
|
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 {
|
section[role="site-settings"] > div[role="mail"] a {
|
||||||
margin-right: 3px;
|
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"] {
|
section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] {
|
||||||
color: var(--primary);
|
color: var(--tertiary);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: underline;
|
border-top: var(--highlight) 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] {
|
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;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="site-settings"] > div[role="mail"] button {
|
section[role="data-settings"] {
|
||||||
width: 96%;
|
color: var(--white);
|
||||||
height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="data-settings"] div {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="data-settings"] div:nth-child(1) {
|
section[role="data-settings"] div:nth-child(1) {
|
||||||
|
@ -148,13 +145,84 @@ section[role="data-settings"] div:nth-child(1) {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
section[role="data-settings"] button {
|
|
||||||
width: 96%;
|
|
||||||
height: 30px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section[role="data-settings"] a {
|
section[role="data-settings"] a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: underline;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,12 +15,12 @@ h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1.8em;
|
font-size: 1.6em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.5em;
|
font-size: 1.3em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7196,7 +7196,7 @@ class $8a9e11caee7219b1$export$2e2bcd8739ae039 {
|
||||||
let desc = document.getElementById("settings-desc").value;
|
let desc = document.getElementById("settings-desc").value;
|
||||||
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
||||||
let render = document.getElementById("render-toggle").getAttribute("data-render");
|
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 selected = "";
|
||||||
let selects = document.querySelectorAll(".theme-select");
|
let selects = document.querySelectorAll(".theme-select");
|
||||||
let smtpDomain = document.getElementById("smtp-domain").value;
|
let smtpDomain = document.getElementById("smtp-domain").value;
|
||||||
|
@ -7315,10 +7315,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
||||||
//console.log(err);
|
//console.log(err);
|
||||||
}));
|
}));
|
||||||
//handle set up image uploads
|
//handle set up image uploads
|
||||||
document.getElementById("avatar").addEventListener("click", ()=>{
|
document.querySelector('[role="avatar"]').addEventListener("click", ()=>{
|
||||||
document.getElementById("avatar-upload").click();
|
document.getElementById("avatar-upload").click();
|
||||||
});
|
});
|
||||||
document.getElementById("background").addEventListener("click", ()=>{
|
document.querySelector('[role="background"]').addEventListener("click", ()=>{
|
||||||
document.getElementById("background-upload").click();
|
document.getElementById("background-upload").click();
|
||||||
});
|
});
|
||||||
document.getElementById("avatar-upload").addEventListener("change", (e)=>{
|
document.getElementById("avatar-upload").addEventListener("change", (e)=>{
|
||||||
|
@ -7335,10 +7335,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (apiButton.getAttribute("data-enabled") == "false") {
|
if (apiButton.getAttribute("data-enabled") == "false") {
|
||||||
apiButton.setAttribute("data-enabled", "true");
|
apiButton.setAttribute("data-enabled", "true");
|
||||||
apiStatus.innerHTML = "EXTERNAL API ACCESS IS ENABLED";
|
apiStatus.innerHTML = "API ACCESS IS ENABLED";
|
||||||
} else {
|
} else {
|
||||||
apiButton.setAttribute("data-enabled", "false");
|
apiButton.setAttribute("data-enabled", "false");
|
||||||
apiStatus.innerHTML = "EXTERNAL API ACCESS IS NOT ENABLED";
|
apiStatus.innerHTML = "API ACCESS IS DISABLED";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
//handle dynamic page rendering
|
//handle dynamic page rendering
|
||||||
|
@ -7435,10 +7435,10 @@ class $b33d1a942dce8554$export$2e2bcd8739ae039 {
|
||||||
this.mm.filesUpload(files[0].type, upload).then((r)=>{
|
this.mm.filesUpload(files[0].type, upload).then((r)=>{
|
||||||
if (type == "avatar-upload") {
|
if (type == "avatar-upload") {
|
||||||
$b33d1a942dce8554$var$notify.alert(r.message, true);
|
$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 {
|
} else {
|
||||||
$b33d1a942dce8554$var$notify.alert(r.message, true);
|
$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(()=>{
|
}).catch(()=>{
|
||||||
//console.log(err)
|
//console.log(err)
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import Base from "./Base";
|
import Base from './Base';
|
||||||
|
|
||||||
document.addEventListener(
|
document.addEventListener(
|
||||||
"DOMContentLoaded",
|
'DOMContentLoaded',
|
||||||
function () {
|
function () {
|
||||||
new Base();
|
new Base();
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,78 +1,79 @@
|
||||||
export default class SettingsActions {
|
export default class SettingsActions {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {}
|
constructor() {}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
getInfo() {
|
getInfo() {
|
||||||
let handle = document.getElementById("settings-handle").value;
|
let handle = document.getElementById('settings-handle').value;
|
||||||
let email = document.getElementById("settings-email").value;
|
let email = document.getElementById('settings-email').value;
|
||||||
let url = document.getElementById("settings-url").value;
|
let url = document.getElementById('settings-url').value;
|
||||||
let title = document.getElementById("settings-title").value;
|
let title = document.getElementById('settings-title').value;
|
||||||
let desc = document.getElementById("settings-desc").value;
|
let desc = document.getElementById('settings-desc').value;
|
||||||
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
//let privacy = document.getElementById('privacy-toggle').getAttribute('data-private');
|
||||||
let render = document
|
let render = document.getElementById('render-toggle').getAttribute('data-render');
|
||||||
.getElementById("render-toggle")
|
let background = document
|
||||||
.getAttribute("data-render");
|
.querySelector('[role="background"]')
|
||||||
let background = document.getElementById("background").src;
|
.style.backgroundImage.slice(4, -1)
|
||||||
let selected = "";
|
.replace(/"/g, '');
|
||||||
let selects = document.querySelectorAll(".theme-select");
|
let selected = '';
|
||||||
let smtpDomain = document.getElementById("smtp-domain").value;
|
let selects = document.querySelectorAll('.theme-select');
|
||||||
let smtpEmail = document.getElementById("smtp-email").value;
|
let smtpDomain = document.getElementById('smtp-domain').value;
|
||||||
let smtpPass = document.getElementById("smtp-pass").value;
|
let smtpEmail = document.getElementById('smtp-email').value;
|
||||||
let mgDomain = document.getElementById("mg-domain").value;
|
let smtpPass = document.getElementById('smtp-pass').value;
|
||||||
let mgKey = document.getElementById("mg-key").value;
|
let mgDomain = document.getElementById('mg-domain').value;
|
||||||
let mailActive = "";
|
let mgKey = document.getElementById('mg-key').value;
|
||||||
let mailOptions = document.querySelectorAll(".mail-option");
|
let mailActive = '';
|
||||||
let apiStatus = document
|
let mailOptions = document.querySelectorAll('.mail-option');
|
||||||
.getElementById("api-access-toggle")
|
let apiStatus = document
|
||||||
.getAttribute("data-enabled");
|
.getElementById('api-access-toggle')
|
||||||
let dynamicRenderStatus = document
|
.getAttribute('data-enabled');
|
||||||
.getElementById("dynamic-render-toggle")
|
let dynamicRenderStatus = document
|
||||||
.getAttribute("data-enabled");
|
.getElementById('dynamic-render-toggle')
|
||||||
var i, count;
|
.getAttribute('data-enabled');
|
||||||
for (i = 0, count = selects.length; i < count; i++) {
|
var i, count;
|
||||||
if (selects[i].getAttribute("data-enabled") == "true")
|
for (i = 0, count = selects.length; i < count; i++) {
|
||||||
selected = selects[i].id;
|
if (selects[i].getAttribute('data-enabled') == 'true')
|
||||||
}
|
selected = selects[i].id;
|
||||||
|
}
|
||||||
|
|
||||||
for (i = 0, count = mailOptions.length; i < count; i++) {
|
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;
|
mailActive = mailOptions[i].id;
|
||||||
}
|
}
|
||||||
let settingsData = {
|
let settingsData = {
|
||||||
global: {
|
global: {
|
||||||
base_url: url,
|
base_url: url,
|
||||||
title: title,
|
title: title,
|
||||||
descriptions: desc,
|
descriptions: desc,
|
||||||
background: background,
|
background: background,
|
||||||
private: false,
|
private: false,
|
||||||
renderOnSave: render,
|
renderOnSave: render,
|
||||||
theme: selected,
|
theme: selected,
|
||||||
externalAPI: apiStatus,
|
externalAPI: apiStatus,
|
||||||
dynamicRender: dynamicRenderStatus
|
dynamicRender: dynamicRenderStatus
|
||||||
},
|
},
|
||||||
member: { handle: handle, email: email },
|
member: { handle: handle, email: email },
|
||||||
email: {
|
email: {
|
||||||
active: mailActive,
|
active: mailActive,
|
||||||
smtp: {
|
smtp: {
|
||||||
domain: smtpDomain,
|
domain: smtpDomain,
|
||||||
email: smtpEmail,
|
email: smtpEmail,
|
||||||
password: smtpPass
|
password: smtpPass
|
||||||
},
|
},
|
||||||
mailgun: {
|
mailgun: {
|
||||||
domain: mgDomain,
|
domain: mgDomain,
|
||||||
key: mgKey
|
key: mgKey
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return new Promise(function (resolve) {
|
return new Promise(function (resolve) {
|
||||||
resolve(settingsData);
|
resolve(settingsData);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,10 +39,10 @@ export default class SettingsIndex {
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
//handle set up image uploads
|
//handle set up image uploads
|
||||||
document.getElementById('avatar').addEventListener('click', () => {
|
document.querySelector('[role="avatar"]').addEventListener('click', () => {
|
||||||
document.getElementById('avatar-upload').click();
|
document.getElementById('avatar-upload').click();
|
||||||
});
|
});
|
||||||
document.getElementById('background').addEventListener('click', () => {
|
document.querySelector('[role="background"]').addEventListener('click', () => {
|
||||||
document.getElementById('background-upload').click();
|
document.getElementById('background-upload').click();
|
||||||
});
|
});
|
||||||
document.getElementById('avatar-upload').addEventListener(
|
document.getElementById('avatar-upload').addEventListener(
|
||||||
|
@ -67,10 +67,10 @@ export default class SettingsIndex {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (apiButton.getAttribute('data-enabled') == 'false') {
|
if (apiButton.getAttribute('data-enabled') == 'false') {
|
||||||
apiButton.setAttribute('data-enabled', 'true');
|
apiButton.setAttribute('data-enabled', 'true');
|
||||||
apiStatus.innerHTML = 'EXTERNAL API ACCESS IS ENABLED';
|
apiStatus.innerHTML = 'API ACCESS IS ENABLED';
|
||||||
} else {
|
} else {
|
||||||
apiButton.setAttribute('data-enabled', 'false');
|
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 => {
|
.then(r => {
|
||||||
if (type == 'avatar-upload') {
|
if (type == 'avatar-upload') {
|
||||||
notify.alert(r.message, true);
|
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 {
|
} else {
|
||||||
notify.alert(r.message, true);
|
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(() => {
|
.catch(() => {
|
||||||
|
|
Loading…
Reference in a new issue