ui overall part 3: settings, site menu editor
This commit is contained in:
Ro
parent
033fe5e48b
commit
0765ea4555
7 changed files with 162 additions and 92 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</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 class="column is-three-fifths">
|
||||
<div class="columns">
|
||||
<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 />
|
||||
|
||||
</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">
|
||||
|
|
|
|||
|
|
@ -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
2
public/assets/scripts/dash.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -118,31 +127,37 @@
|
|||
margin: 0 5px 10px 0
|
||||
|
||||
textarea
|
||||
background: color.adjust($primary, $lightness: -20%)
|
||||
width: 95%
|
||||
height: 155px
|
||||
color: $secondary
|
||||
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%
|
||||
|
|
|
|||
Loading…
Reference in a new issue