xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests Activity

ui overall part 3: settings, site menu editor

Browse source
This commit is contained in:
Ro 2021-05-24 14:42:46 -07:00
parent 033fe5e48b
commit 0765ea4555
7 changed files with 162 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
brain/views/dash/navigation.twig
View file

@ -5,7 +5,7 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfafd"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=sdsdsds">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
@ -14,13 +14,21 @@
<div id="nav-pages"> <div id="nav-pages">
{% for item in menu %} {% for item in menu %}
<div id="{{item.id}}" class="nav-item" data-slug="{{item.slug}}" data-uuid="{{item.uuid}}" data-path="{{item.path}}"> <div id="{{item.id}}" class="nav-item" data-slug="{{item.slug}}" data-uuid="{{item.uuid}}" data-path="{{item.path}}">
<svg id="item-arrows" viewbox="0 0 20 20" class="icons"> <svg id="item-arrows">
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/> <use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
</svg> </svg>
<label>{{item.title}}</label> <label>{{item.title}}</label>
<div id="nav-btns"> <div id="nav-btns">
<button id="edit-item" class="nav-btn" data-id="{{item.uuid}}">EDIT</button> <button id="edit-item" class="nav-btn" data-id="{{item.uuid}}" title="edit page">
<button id="remove-item" class="nav-btn" data-uuid="{{item.uuid}}" data-id="{{item.id}}">REMOVE</button> <svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
</svg>
</button>
<button id="remove-item" class="nav-btn" data-uuid="{{item.uuid}}" data-id="{{item.id}}" title="delete from menu">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
</svg>
</button>
</div> </div>
</div> </div>

61
brain/views/dash/settings.twig
View file

@ -11,27 +11,22 @@
{% endblock %} {% endblock %}
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=adfafd"> <link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=asdfdf">
{% endblock %} {% endblock %}
{% block mainContent %} {% block mainContent %}
<div id="settings-actions"> <div id="settings-actions">
<div id="buttons"> <div id="buttons">
<button id="save-toggle"> <button id="save-toggle" title="save settings">
<svg id="submit-update" viewbox="0 0 20 20" class="icons"> <svg id="submit-update" class="icons">
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/> <use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
</svg> </svg>
</button> </button>
<button id="publish-pages"> <button id="publish-pages" title="publish site">
<svg id="submit-update" viewbox="0 0 20 20" class="icons"> <svg id="submit-update" class="icons">
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/> <use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
</svg> </svg>
</button> </button>
<button id="render-toggle" data-render="{{render}}">
<svg id="submit-update" viewbox="0 0 20 20" class="icons">
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-ccw"/>
</svg>
</button>
</div> </div>
</div> </div>
<div id="site-background"> <div id="site-background">
@ -42,39 +37,49 @@
<div id="settings-index"> <div id="settings-index">
<div id="settings-index-wrapper"> <div id="settings-index-wrapper">
<div id="member-settings" class="columns"> <div id="member-settings" class="columns">
<div id="member-settings-1" class="column"> <div id="member-settings-1" class="column is-one-third">
<label> AVATAR </label>
<div id="member-avatar-drop"> <div id="member-avatar-drop">
<img id="avatar" src="{{member['avatar']}}" for="avatar-upload"/> <img id="avatar" src="{{member['avatar']}}" for="avatar-upload"/>
<input id="avatar-upload" type="file" name="avatar-upload" /> <input id="avatar-upload" type="file" name="avatar-upload" />
</div> </div>
</div> </div>
<div id="member-settings-2" class="column"> <div class="column is-three-fifths">
<label>INFO</label> <div class="columns">
<input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{member['handle']}}" autofocus /> <div id="member-settings-2" class="column">
<input type='text' name='email' id='settings-email' placeholder='email' value="{{member['email']}}" autofocus /> <input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{member['handle']}}" autofocus />
<input type='text' name='base-url' id='settings-url' placeholder='url' value="{{baseUrl}}" autofocus /> <input type='text' name='email' id='settings-email' placeholder='email' value="{{member['email']}}" 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 id="member-settings-3" class="column">
<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 />
</div>
</div>
<div class="columns">
<div class="column is-full">
<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff', autofocus>{{desc}}</textarea>
</div>
</div>
</div> </div>
</div> </div>
<div id="member-utils" class="columns"> <div id="member-utils" class="columns">
<div id="util-1" class="column"> <div id="util-1" class="column is-one-third">
<label>BACK UP TOOLS</label> <br /> <button id="create-backup">BACK UP YOUR SITE</button><br />
<button id="create-backup">CREATE BACK UP</button><br /> </div>
<div id="util-2" class="column is-three-fifths">
{% if lastBackup != '' %} {% if lastBackup != '' %}
<div class="backup-meta"> <div class="backup-meta">
The last back up was created <a href="/api/v1/files">{{lastBackup}}</a><br /> LAST BACK UP <a href="/api/v1/files">{{lastBackup}}</a><br />
</div> </div>
{% else %} {% else %}
<span>span No back ups. Frowny face.</span> <span>span No back ups. Frowny face.</span>
{% endif %} {% endif %}
</div> </div>
<div id="util-2" class="column">
<label> MAINTENANCE </label><br />
<button id="reindex-pages">REINDEX PAGES</button>
</div>
</div> </div>
<div id="option-settings" class="columns"> <div id="option-settings" class="columns">
<div id="theme-settings" class="column"> <div id="theme-settings" class="column">

83
public/assets/css/dash.css
View file

@ -2390,12 +2390,21 @@ svg.icons {
} }
#settings-actions #buttons { #settings-actions #buttons {
width: 155px; width: 155px;
margin: 0 auto; margin: 30px auto;
text-align: center;
background: #EFEBE3;
padding: 2px;
border-radius: 3px;
} }
#settings-actions #buttons button { #settings-actions #buttons button {
margin: 5px; color: #EFEBE3;
border-radius: 3px;
width: 40px;
margin: 0 10px 0 10px;
} }
#settings-actions #buttons button svg { #settings-actions #buttons button svg {
width: 25px;
height: 20px;
fill: #EFEBE3; fill: #EFEBE3;
} }
#settings-actions #buttons button[data-render=false] { #settings-actions #buttons button[data-render=false] {
@ -2444,18 +2453,19 @@ svg.icons {
#settings-index #settings-index-wrapper button { #settings-index #settings-index-wrapper button {
margin-top: 5px; margin-top: 5px;
width: 100%; width: 100%;
height: 45px; height: 33px;
} }
#settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #option-settings, #settings-index #settings-index-wrapper #member-utils { #settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #option-settings, #settings-index #settings-index-wrapper #member-utils {
background: #1D3040; background: #EFEBE3;
padding: 5px; padding: 5px;
border-radius: 5px 0 5px 0; border-radius: 5px 0 5px 0;
width: 100%; width: 100%;
margin: 20px auto; margin: 20px auto;
} }
#settings-index #settings-index-wrapper #member-settings label, #settings-index #settings-index-wrapper #site-settings label, #settings-index #settings-index-wrapper #option-settings label, #settings-index #settings-index-wrapper #member-utils label { #settings-index #settings-index-wrapper #member-settings label, #settings-index #settings-index-wrapper #site-settings label, #settings-index #settings-index-wrapper #option-settings label, #settings-index #settings-index-wrapper #member-utils label {
font-family: "Lucida Console", Monaco, monospace; font-family: Helvetica, Arial, sans-serif;
color: #EFEBE3; color: #1D3040;
font-weight: bold;
} }
#settings-index #settings-index-wrapper #member-settings span, #settings-index #settings-index-wrapper #site-settings span, #settings-index #settings-index-wrapper #option-settings span, #settings-index #settings-index-wrapper #member-utils span { #settings-index #settings-index-wrapper #member-settings span, #settings-index #settings-index-wrapper #site-settings span, #settings-index #settings-index-wrapper #option-settings span, #settings-index #settings-index-wrapper #member-utils span {
color: #b2cce5; color: #b2cce5;
@ -2471,11 +2481,12 @@ svg.icons {
display: none; display: none;
} }
#settings-index #settings-index-wrapper #member-settings .backup-meta, #settings-index #settings-index-wrapper #site-settings .backup-meta, #settings-index #settings-index-wrapper #option-settings .backup-meta, #settings-index #settings-index-wrapper #member-utils .backup-meta { #settings-index #settings-index-wrapper #member-settings .backup-meta, #settings-index #settings-index-wrapper #site-settings .backup-meta, #settings-index #settings-index-wrapper #option-settings .backup-meta, #settings-index #settings-index-wrapper #member-utils .backup-meta {
background: black; background: #1D3040;
color: #EFEBE3; color: #EFEBE3;
padding: 8px; padding: 8px;
border-radius: 3px; border-radius: 3px;
margin: 5px 0 0 0; margin: 5px 0 0 0;
text-align: center;
} }
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop { #settings-index #settings-index-wrapper #member-settings #member-avatar-drop, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop, #settings-index #settings-index-wrapper #member-utils #member-avatar-drop {
display: inline-block; display: inline-block;
@ -2508,29 +2519,36 @@ svg.icons {
width: 95%; width: 95%;
margin: 0 5px 10px 0; margin: 0 5px 10px 0;
} }
#settings-index #settings-index-wrapper #member-settings textarea, #settings-index #settings-index-wrapper #site-settings textarea, #settings-index #settings-index-wrapper #option-settings textarea, #settings-index #settings-index-wrapper #member-utils textarea { #settings-index #settings-index-wrapper textarea {
background: black; background: #1D3040;
width: 95%; width: 93%;
height: 155px; height: 128px;
color: #b2cce5; color: #f5ab35;
padding: 10px; padding: 10px;
display: inline-block;
} }
#settings-index #settings-index-wrapper #option-settings #theme-settings a { #settings-index #settings-index-wrapper #option-settings #theme-settings a {
width: 95%; width: 95%;
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
height: 25px; height: 15px;
padding: 10px; padding: 10px;
display: inline-block; display: inline-block;
} }
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=false] { #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=false] {
background: black; background: #EFEBE3;
color: #b2cce5;
border-radius: 3px;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] {
background: #b2cce5;
color: #1D3040; color: #1D3040;
border-radius: 3px; border-radius: 3px;
font-weight: bold;
border-top: 1px #fc6399 solid;
border-bottom: 1px #fc6399 solid;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] {
background: #fc6399;
color: #1D3040;
border-radius: 3px;
font-weight: bold;
border-top: 1px #1D3040 solid;
border-bottom: 1px #1D3040 solid;
} }
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] svg { #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] svg {
fill: #1D3040; fill: #1D3040;
@ -2552,7 +2570,7 @@ svg.icons {
color: #fc6399; color: #fc6399;
} }
#settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled=false] { #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled=false] {
color: #EFEBE3; color: #1D3040;
} }
#settings-index #settings-index-wrapper #option-settings #mail-settings input { #settings-index #settings-index-wrapper #option-settings #mail-settings input {
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
@ -2593,21 +2611,23 @@ svg.icons {
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
} }
#nav-index #nav-index-wrapper {
padding: 0.75rem;
}
#nav-index #nav-index-wrapper #nav-pages .nav-item { #nav-index #nav-index-wrapper #nav-pages .nav-item {
display: block; display: block;
width: 98%; width: 98%;
background: #1D3040; background: #EFEBE3;
border-radius: 3px; border-radius: 3px;
color: #EFEBE3; color: #fc6399;
height: 30px; height: 30px;
padding: 10px; padding: 10px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
font-size: 1.5em; font-size: 1.5em;
cursor: move; cursor: move;
} }
#nav-index #nav-index-wrapper #nav-pages .nav-item #item-arrows {
fill: #1D3040;
width: 40px;
height: 30px;
}
#nav-index #nav-index-wrapper #nav-pages label { #nav-index #nav-index-wrapper #nav-pages label {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -2617,10 +2637,19 @@ svg.icons {
} }
#nav-index #nav-index-wrapper #nav-pages #nav-btns { #nav-index #nav-index-wrapper #nav-pages #nav-btns {
float: right; float: right;
top: -5px;
position: relative;
} }
#nav-index #nav-index-wrapper #nav-pages #nav-btns button { #nav-index #nav-index-wrapper #nav-pages #nav-btns button {
font-size: 0.8em; color: #EFEBE3;
margin: 0 0 0 10px; border-radius: 3px;
width: 40px;
margin: 0 10px 0 10px;
}
#nav-index #nav-index-wrapper #nav-pages #nav-btns button svg {
fill: #EFEBE3;
width: 25px;
height: 20px;
} }
@media only screen and (max-width: 375px) { @media only screen and (max-width: 375px) {

2
public/assets/scripts/dash.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
src/com/controllers/SettingsIndex.js
View file

@ -62,9 +62,11 @@ export default class SettingsIndex {
//document //document
//.getElementById('privacy-toggle') //.getElementById('privacy-toggle')
//.addEventListener('click', e => this.togglePrivacy(e)); //.addEventListener('click', e => this.togglePrivacy(e));
/*
document document
.getElementById("render-toggle") .getElementById("render-toggle")
.addEventListener("click", (e) => this.toggleRender(e)); .addEventListener("click", (e) => this.toggleRender(e));
*/
document document
.getElementById("send-mail") .getElementById("send-mail")
.addEventListener("click", (e) => this.handleMailer(e)); .addEventListener("click", (e) => this.handleMailer(e));
@ -86,9 +88,11 @@ export default class SettingsIndex {
.getElementById("create-backup") .getElementById("create-backup")
.addEventListener("click", (e) => this.handleBackup(e)); .addEventListener("click", (e) => this.handleBackup(e));
/*
document document
.getElementById("reindex-pages") .getElementById("reindex-pages")
.addEventListener("click", (e) => this.handleReindex(e)); .addEventListener("click", (e) => this.handleReindex(e));
*/
} }
//-------------------------- //--------------------------
// event handlers // event handlers

23
src/styles/main/_navigation.sass
View file

@ -4,20 +4,22 @@
margin: 0 auto margin: 0 auto
#nav-index-wrapper #nav-index-wrapper
padding: 0.75rem
#nav-pages #nav-pages
.nav-item .nav-item
display: block display: block
width: 98% width: 98%
background: $primary background: $white
border-radius: 3px border-radius: 3px
color: $white color: $highlight
height: 30px height: 30px
padding: 10px padding: 10px
margin: 0 0 10px 0 margin: 0 0 10px 0
font-size: 1.5em font-size: 1.5em
cursor: move cursor: move
#item-arrows
fill: $primary
width: 40px
height: 30px
label label
display: inline-block display: inline-block
@ -28,10 +30,17 @@
#nav-btns #nav-btns
float: right float: right
top: -5px
position: relative
button button
font-size: 0.8em color: $white
margin: 0 0 0 10px border-radius: 3px
width: 40px
margin: 0 10px 0 10px
svg
fill: $white
width: 25px
height: 20px
@media only screen and (max-width: 375px) @media only screen and (max-width: 375px)
#nav-index #nav-index

61
src/styles/main/_settings.sass
View file

@ -6,11 +6,19 @@
margin-left: -20% margin-left: -20%
#buttons #buttons
width: 155px width: 155px
margin: 0 auto margin: 30px auto
text-align: center
background: $white
padding: 2px
border-radius: 3px
button button
//width 30% color: $white
margin: 5px border-radius: 3px
width: 40px
margin: 0 10px 0 10px
svg svg
width: 25px
height: 20px
fill: $white fill: $white
button[data-render='false'] button[data-render='false']
background: color.adjust($primary, $lightness: -60%) background: color.adjust($primary, $lightness: -60%)
@ -49,23 +57,23 @@
width: 94% width: 94%
max-width: 900px max-width: 900px
margin: 0 auto margin: 0 auto
#settings-index-wrapper #settings-index-wrapper
padding: 0.75rem padding: 0.75rem
button button
margin-top: 5px margin-top: 5px
width: 100% width: 100%
height: 45px height: 33px
#member-settings, #site-settings, #option-settings, #member-utils #member-settings, #site-settings, #option-settings, #member-utils
background: $primary background: $white
padding: 5px padding: 5px
border-radius: 5px 0 5px 0 border-radius: 5px 0 5px 0
label label
font-family: $monoType font-family: $baseType
color: $white color: $primary
font-weight: bold
span span
color: $secondary color: $secondary
@ -78,11 +86,12 @@
visibility: hidden visibility: hidden
display: none display: none
.backup-meta .backup-meta
background: color.adjust($primary, $lightness: -20%) background: $primary
color: $white color: $white
padding: 8px padding: 8px
border-radius: 3px border-radius: 3px
margin: 5px 0 0 0 margin: 5px 0 0 0
text-align: center
width: 100% width: 100%
margin: 20px auto margin: 20px auto
@ -117,32 +126,38 @@
width: 95% width: 95%
margin: 0 5px 10px 0 margin: 0 5px 10px 0
textarea textarea
background: color.adjust($primary, $lightness: -20%) background: $primary
width: 95% width: 93%
height: 155px height: 128px
color: $secondary color: $tertiary
padding: 10px padding: 10px
display: inline-block
#option-settings #option-settings
#theme-settings #theme-settings
a a
width: 95% width: 95%
margin: 0 5px 5px 0 margin: 0 5px 5px 0
height: 25px height: 15px
padding: 10px padding: 10px
display: inline-block display: inline-block
a[data-enabled='false'] a[data-enabled='false']
background: color.adjust($primary, $lightness: -60%) background: $white
color: $secondary
border-radius: 3px
a[data-enabled='true']
background: $secondary
color: $primary color: $primary
border-radius: 3px border-radius: 3px
font-weight: bold
border-top: 1px $highlight solid
border-bottom: 1px $highlight solid
a[data-enabled='true']
background: $highlight
color: $primary
border-radius: 3px
font-weight: bold
border-top: 1px $primary solid
border-bottom: 1px $primary solid
svg svg
fill: $primary fill: $primary
display: inline-block display: inline-block
@ -164,7 +179,7 @@
color: $highlight color: $highlight
a.mail-option[data-enabled='false'] a.mail-option[data-enabled='false']
color: $white color: $primary
input input
// width 94% // width 94%