projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki 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 %}
{% 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 %}
{% block mainContent %}
@ -14,13 +14,21 @@
<div id="nav-pages">
{% for item in menu %}
<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"/>
</svg>
<label>{{item.title}}</label>
<div id="nav-btns">
<button id="edit-item" class="nav-btn" data-id="{{item.uuid}}">EDIT</button>
<button id="remove-item" class="nav-btn" data-uuid="{{item.uuid}}" data-id="{{item.id}}">REMOVE</button>
<button id="edit-item" class="nav-btn" data-id="{{item.uuid}}" title="edit page">
<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>

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

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

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

@ -2390,12 +2390,21 @@ svg.icons {
}
#settings-actions #buttons {
width: 155px;
margin: 0 auto;
margin: 30px auto;
text-align: center;
background: #EFEBE3;
padding: 2px;
border-radius: 3px;
}
#settings-actions #buttons button {
margin: 5px;
color: #EFEBE3;
border-radius: 3px;
width: 40px;
margin: 0 10px 0 10px;
}
#settings-actions #buttons button svg {
width: 25px;
height: 20px;
fill: #EFEBE3;
}
#settings-actions #buttons button[data-render=false] {
@ -2444,18 +2453,19 @@ svg.icons {
#settings-index #settings-index-wrapper button {
margin-top: 5px;
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 {
background: #1D3040;
background: #EFEBE3;
padding: 5px;
border-radius: 5px 0 5px 0;
width: 100%;
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 {
font-family: "Lucida Console", Monaco, monospace;
color: #EFEBE3;
font-family: Helvetica, Arial, sans-serif;
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 {
color: #b2cce5;
@ -2471,11 +2481,12 @@ svg.icons {
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 {
background: black;
background: #1D3040;
color: #EFEBE3;
padding: 8px;
border-radius: 3px;
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 {
display: inline-block;
@ -2508,29 +2519,36 @@ svg.icons {
width: 95%;
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 {
background: black;
width: 95%;
height: 155px;
color: #b2cce5;
#settings-index #settings-index-wrapper textarea {
background: #1D3040;
width: 93%;
height: 128px;
color: #f5ab35;
padding: 10px;
display: inline-block;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a {
width: 95%;
margin: 0 5px 5px 0;
height: 25px;
height: 15px;
padding: 10px;
display: inline-block;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=false] {
background: black;
color: #b2cce5;
border-radius: 3px;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled=true] {
background: #b2cce5;
background: #EFEBE3;
color: #1D3040;
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 {
fill: #1D3040;
@ -2552,7 +2570,7 @@ svg.icons {
color: #fc6399;
}
#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 {
margin: 0 5px 5px 0;
@ -2593,21 +2611,23 @@ svg.icons {
max-width: 900px;
margin: 0 auto;
}
#nav-index #nav-index-wrapper {
padding: 0.75rem;
}
#nav-index #nav-index-wrapper #nav-pages .nav-item {
display: block;
width: 98%;
background: #1D3040;
background: #EFEBE3;
border-radius: 3px;
color: #EFEBE3;
color: #fc6399;
height: 30px;
padding: 10px;
margin: 0 0 10px 0;
font-size: 1.5em;
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 {
display: inline-block;
vertical-align: middle;
@ -2617,10 +2637,19 @@ svg.icons {
}
#nav-index #nav-index-wrapper #nav-pages #nav-btns {
float: right;
top: -5px;
position: relative;
}
#nav-index #nav-index-wrapper #nav-pages #nav-btns button {
font-size: 0.8em;
margin: 0 0 0 10px;
color: #EFEBE3;
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) {

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

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

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

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

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