dash index redesigned and cleaned up
This commit is contained in:
parent
2bdeb81979
commit
fc1e44ad73
14 changed files with 167 additions and 88 deletions
|
@ -13,10 +13,11 @@ router.get('/', function(req, res)
|
||||||
{
|
{
|
||||||
order: [
|
order: [
|
||||||
['id', 'DESC']
|
['id', 'DESC']
|
||||||
],
|
]
|
||||||
limit: 5
|
|
||||||
}).then(function(posts)
|
}).then(function(posts)
|
||||||
{
|
{
|
||||||
|
let title = '';
|
||||||
|
(!loggedIn) ? title = "Hi, there." : title = "This is the front"
|
||||||
let filtered = [];
|
let filtered = [];
|
||||||
for (let index = 0; index < posts.length; index++)
|
for (let index = 0; index < posts.length; index++)
|
||||||
{
|
{
|
||||||
|
@ -32,7 +33,7 @@ router.get('/', function(req, res)
|
||||||
}
|
}
|
||||||
res.render('dash/index',
|
res.render('dash/index',
|
||||||
{
|
{
|
||||||
title: 'Dashboard',
|
title: title,
|
||||||
user_status: loggedIn,
|
user_status: loggedIn,
|
||||||
items: filtered
|
items: filtered
|
||||||
});
|
});
|
||||||
|
|
|
@ -1535,7 +1535,7 @@ template {
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3 {
|
h3 {
|
||||||
color: #b2cce5;
|
color: #f2f1ef;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
|
@ -1556,7 +1556,7 @@ h3 {
|
||||||
**/
|
**/
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
background-color: #374857;
|
background-color: #161d23;
|
||||||
font: 400 1em 'Apercu', Helvetica, Arial, sans-serif;
|
font: 400 1em 'Apercu', Helvetica, Arial, sans-serif;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -1601,14 +1601,13 @@ svg.icons {
|
||||||
.main-container section header {
|
.main-container section header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background-color: #161d23;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper {
|
.main-container section header #header-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 50px auto;
|
||||||
}
|
}
|
||||||
.main-container section header #header-wrapper #header-one,
|
.main-container section header #header-wrapper #header-one,
|
||||||
.main-container section header #header-wrapper #header-two {
|
.main-container section header #header-wrapper #header-two {
|
||||||
|
@ -1623,6 +1622,10 @@ svg.icons {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.main-container section header #header-wrapper #header-one #dash-menu,
|
||||||
|
.main-container section header #header-wrapper #header-two #dash-menu {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
background-color: #fc6399;
|
background-color: #fc6399;
|
||||||
color: #f2f1ef;
|
color: #f2f1ef;
|
||||||
|
@ -1742,15 +1745,19 @@ svg.icons {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-one #dash-form,
|
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form {
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #dash-form {
|
|
||||||
width: 300px;
|
width: 300px;
|
||||||
|
padding: 0.75em;
|
||||||
|
background: #374857;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-one #dash-index-title,
|
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form input {
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #dash-index-title {
|
width: 290px;
|
||||||
color: #f2f1ef;
|
margin: 0 0 10px 0;
|
||||||
font: 400 2em $titleType;
|
height: 30px;
|
||||||
vertical-align: top;
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form button {
|
||||||
|
width: 300px;
|
||||||
}
|
}
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-menu {
|
#dash-index-content #dash-index #dash-index-wrapper #dash-menu {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@ -1784,21 +1791,61 @@ svg.icons {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent {
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent {
|
||||||
background: #455b6e;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 5px 0 0 0;
|
padding: 5px 0 0 0;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list {
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list {
|
||||||
width: 90%;
|
padding: 0.75em;
|
||||||
margin: 50px auto;
|
|
||||||
}
|
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list h3 {
|
|
||||||
color: #32414e;
|
|
||||||
}
|
}
|
||||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a {
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
background: #f2f1ef;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 3px;
|
||||||
|
vertical-align: top;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a label {
|
||||||
|
font-size: 0.7em;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #161d23;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a div {
|
||||||
|
width: 100%;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(2) {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(2) div {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3) {
|
||||||
|
width: 47%;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(3) div {
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) div,
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) div {
|
||||||
|
height: 275px;
|
||||||
|
}
|
||||||
|
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
|
||||||
|
margin: -305px 0 0 49.3%;
|
||||||
}
|
}
|
||||||
.folio-project-form {
|
.folio-project-form {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -2122,21 +2169,21 @@ select {
|
||||||
}
|
}
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
font: 1em 'Apercu-Mono';
|
font: 1em 'Apercu-Mono';
|
||||||
color: #546d84;
|
color: #b2cce5;
|
||||||
}
|
}
|
||||||
:-moz-placeholder {
|
:-moz-placeholder {
|
||||||
/* Firefox 18- */
|
/* Firefox 18- */
|
||||||
font: 1em 'Apercu-Mono';
|
font: 1em 'Apercu-Mono';
|
||||||
color: #546d84;
|
color: #b2cce5;
|
||||||
}
|
}
|
||||||
::-moz-placeholder {
|
::-moz-placeholder {
|
||||||
/* Firefox 19+ */
|
/* Firefox 19+ */
|
||||||
font: 1em 'Apercu-Mono';
|
font: 1em 'Apercu-Mono';
|
||||||
color: #546d84;
|
color: #b2cce5;
|
||||||
}
|
}
|
||||||
:-ms-input-placeholder {
|
:-ms-input-placeholder {
|
||||||
font: 1em 'Apercu-Mono';
|
font: 1em 'Apercu-Mono';
|
||||||
color: #546d84;
|
color: #b2cce5;
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
-------------------------------
|
-------------------------------
|
||||||
|
|
File diff suppressed because one or more lines are too long
2
themes/dash/assets/js/dash.min.js
vendored
2
themes/dash/assets/js/dash.min.js
vendored
|
@ -9073,7 +9073,7 @@ var parent = module.bundle.parent;
|
||||||
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
|
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
|
||||||
var hostname = "" || location.hostname;
|
var hostname = "" || location.hostname;
|
||||||
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||||
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54297" + '/');
|
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60240" + '/');
|
||||||
|
|
||||||
ws.onmessage = function (event) {
|
ws.onmessage = function (event) {
|
||||||
var data = JSON.parse(event.data);
|
var data = JSON.parse(event.data);
|
||||||
|
|
|
@ -19,11 +19,10 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
||||||
header#header
|
header#header
|
||||||
#header-wrapper.columns
|
#header-wrapper.columns
|
||||||
#header-one.column
|
#header-one.column
|
||||||
a#home(href="/@/dashboard")
|
|
||||||
svg(viewBox="0 0 20 20" class="icons")
|
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-level-up')
|
|
||||||
label#the-title= title
|
label#the-title= title
|
||||||
#header-two.column
|
#header-two.column
|
||||||
|
-if(user_status)
|
||||||
|
include partials/dash-nav
|
||||||
block main-content
|
block main-content
|
||||||
script(src='/dash/assets/js/dashkit.min.js' type="text/javascript")
|
script(src='/dash/assets/js/dashkit.min.js' type="text/javascript")
|
||||||
script(src='/dash/assets/js/dash.min.js' type="text/javascript")
|
script(src='/dash/assets/js/dash.min.js' type="text/javascript")
|
||||||
|
|
7
themes/dash/partials/dash-nav.pug
Normal file
7
themes/dash/partials/dash-nav.pug
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
#dash-menu
|
||||||
|
a#settings(href="/@/dashboard/settings")
|
||||||
|
svg(viewBox="0 0 10 10" class="icons")
|
||||||
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-cog')
|
||||||
|
a#navigation(href="/@/dashboard/navigation")
|
||||||
|
svg(viewBox="0 0 20 20" class="icons")
|
||||||
|
use(xlink:href='/dash/assets/images/sprite.svg#entypo-list')
|
|
@ -1,24 +1,10 @@
|
||||||
#dash-menu
|
|
||||||
a#entries(href="/@/dashboard/posts")
|
|
||||||
svg(viewBox="0 0 20 20" class="icons")
|
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-book')
|
|
||||||
label Posts
|
|
||||||
a#settings(href="/@/dashboard/settings")
|
|
||||||
svg(viewBox="0 0 20 20" class="icons")
|
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-cog')
|
|
||||||
label Settings
|
|
||||||
a#navigation(href="/@/dashboard/navigation")
|
|
||||||
svg(viewBox="0 0 20 20" class="icons")
|
|
||||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-list')
|
|
||||||
label Navigation
|
|
||||||
#dash-recent
|
#dash-recent
|
||||||
#recent-list
|
#recent-list
|
||||||
h3 Recent
|
h3 Recent
|
||||||
br
|
|
||||||
- var index = 0;
|
- var index = 0;
|
||||||
- for ( index; index < items.length; index++)
|
- var cap = 4; // number of respect posts to display
|
||||||
|
- for ( index; index < cap; index++)
|
||||||
a(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
|
a(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
|
||||||
= items[index].post.title
|
div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center")
|
||||||
br
|
label= items[index].post.title
|
||||||
br
|
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
#dash-login.columns
|
#dash-login
|
||||||
#dash-index-one.column
|
.dash-form#dash-form
|
||||||
h1 What up
|
form(class='login', name="login" action="/@/dashboard/login" method="POST")
|
||||||
#dash-index-two.column
|
input(type='text', name='handle' class='form-control', placeholder='handle', required, autofocus)
|
||||||
.dash-form#dash-form
|
input(type='password', name='password' class='form-control', placeholder='password', required)
|
||||||
form(class='login', name="login" action="/@/dashboard/login" method="POST")
|
button(id="login-btn", class='login-btn', type='submit') SUBMIT YOUR STUFF
|
||||||
input(type='text', name='handle' class='form-control', placeholder='handle', required, autofocus)
|
|
||||||
input(type='password', name='password' class='form-control', placeholder='password', required)
|
|
||||||
button(id="login-btn", class='login-btn', type='submit') COME ON IN
|
|
|
@ -1,6 +1,6 @@
|
||||||
extends frame
|
extends frame
|
||||||
block main-content
|
block main-content
|
||||||
|
// move this to backend
|
||||||
-var post_title = ''
|
-var post_title = ''
|
||||||
-var post_plaintext = ''
|
-var post_plaintext = ''
|
||||||
-var post_feature = 'null'
|
-var post_feature = 'null'
|
||||||
|
|
|
@ -36,20 +36,20 @@ select
|
||||||
|
|
||||||
::-webkit-input-placeholder
|
::-webkit-input-placeholder
|
||||||
font 1em 'Apercu-Mono'
|
font 1em 'Apercu-Mono'
|
||||||
color $primary + 20%
|
color $secondary
|
||||||
|
|
||||||
:-moz-placeholder
|
:-moz-placeholder
|
||||||
/* Firefox 18- */
|
/* Firefox 18- */
|
||||||
font 1em 'Apercu-Mono'
|
font 1em 'Apercu-Mono'
|
||||||
color $primary + 20%
|
color $secondary
|
||||||
|
|
||||||
::-moz-placeholder
|
::-moz-placeholder
|
||||||
/* Firefox 19+ */
|
/* Firefox 19+ */
|
||||||
font 1em 'Apercu-Mono'
|
font 1em 'Apercu-Mono'
|
||||||
color $primary + 20%
|
color $secondary
|
||||||
|
|
||||||
:-ms-input-placeholder
|
:-ms-input-placeholder
|
||||||
font 1em 'Apercu-Mono'
|
font 1em 'Apercu-Mono'
|
||||||
color $primary + 20%
|
color $secondary
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -19,20 +19,26 @@
|
||||||
max-width 900px
|
max-width 900px
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
#dash-index-one, #dash-index-two
|
#dash-form
|
||||||
#dash-form
|
width 300px
|
||||||
width 300px
|
padding 0.75em
|
||||||
|
background $primary
|
||||||
|
border-radius 3px
|
||||||
|
|
||||||
#dash-index-title
|
input
|
||||||
color $white
|
width 290px
|
||||||
font 400 2em $titleType
|
margin 0 0 10px 0
|
||||||
vertical-align top
|
height 30px
|
||||||
|
|
||||||
|
button
|
||||||
|
width 300px
|
||||||
|
|
||||||
#dash-menu
|
#dash-menu
|
||||||
padding 10px
|
padding 10px
|
||||||
width 90%
|
width 90%
|
||||||
max-width 900px
|
max-width 900px
|
||||||
margin 50px auto
|
margin 50px auto
|
||||||
|
|
||||||
a
|
a
|
||||||
display inline-block
|
display inline-block
|
||||||
vertical-align top
|
vertical-align top
|
||||||
|
@ -59,21 +65,56 @@
|
||||||
cursor pointer
|
cursor pointer
|
||||||
|
|
||||||
#dash-recent
|
#dash-recent
|
||||||
background $primary + 10%
|
|
||||||
width 100%
|
width 100%
|
||||||
|
max-width 900px
|
||||||
height 100%
|
height 100%
|
||||||
padding 5px 0 0 0
|
padding 5px 0 0 0
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
#recent-list
|
#recent-list
|
||||||
width 90%
|
padding 0.75em
|
||||||
margin 50px auto
|
|
||||||
|
|
||||||
h3
|
|
||||||
color $primary - 10%
|
|
||||||
|
|
||||||
a
|
a
|
||||||
font-size 1.5em
|
font-size 1.5em
|
||||||
font-weight 300
|
font-weight 300
|
||||||
|
background $white
|
||||||
|
display inline-block
|
||||||
|
border-radius 3px
|
||||||
|
vertical-align top
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
label
|
||||||
|
font-size: .7em
|
||||||
|
font-weight: 500
|
||||||
|
color $primary - 60%
|
||||||
|
padding 5px
|
||||||
|
vertical-align: top
|
||||||
|
display: block
|
||||||
|
|
||||||
|
div
|
||||||
|
width 100%
|
||||||
|
background-size cover
|
||||||
|
border-radius 3px
|
||||||
|
|
||||||
|
a:nth-child(2)
|
||||||
|
width 100%
|
||||||
|
margin-bottom 20px
|
||||||
|
div
|
||||||
|
height 500px
|
||||||
|
|
||||||
|
a:nth-child(3)
|
||||||
|
width 47%
|
||||||
|
margin-right 20px
|
||||||
|
div
|
||||||
|
height 600px
|
||||||
|
|
||||||
|
a:nth-child(4), a:nth-child(5)
|
||||||
|
|
||||||
|
width 50%
|
||||||
|
div
|
||||||
|
height 275px
|
||||||
|
|
||||||
|
a:nth-child(5)
|
||||||
|
margin -305px 0 0 49.3%
|
||||||
|
|
||||||
.folio-project-form
|
.folio-project-form
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
text-drop-shadow(rgb-value, opacity, offsetX, offsetY, blur)
|
text-drop-shadow(rgb-value, opacity, offsetX, offsetY, blur)
|
||||||
text-shadow: offsetX offsetY blur rgba(rgb-value, opacity);
|
text-shadow offsetX offsetY blur rgba(rgb-value, opacity)
|
||||||
|
|
||||||
|
|
||||||
object-transitions(rate)
|
object-transitions(rate)
|
||||||
-moz-transition:all rate linear;
|
-moz-transition all rate linear
|
||||||
-webkit-transition:all rate linear;
|
-webkit-transition all rate linear
|
||||||
-o-transition:all rate linear;
|
-o-transition all rate linear
|
||||||
transition:all rate linear;
|
transition all rate linear
|
||||||
|
|
||||||
background-opacity(rgb-value, opacity)
|
background-opacity(rgb-value, opacity)
|
||||||
background: rgba(rgb-value, opacity);
|
background rgba(rgb-value, opacity)
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
html, body
|
html, body
|
||||||
background-color $primary
|
background-color $primary - 60%
|
||||||
font 400 1em $baseType
|
font 400 1em $baseType
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
|
@ -42,14 +42,13 @@ svg.icons
|
||||||
header
|
header
|
||||||
width 100%
|
width 100%
|
||||||
height 100px
|
height 100px
|
||||||
background-color $primary - 60%
|
|
||||||
margin 0
|
margin 0
|
||||||
padding 0
|
padding 0
|
||||||
|
|
||||||
#header-wrapper
|
#header-wrapper
|
||||||
width 100%
|
width 100%
|
||||||
max-width 900px
|
max-width 900px
|
||||||
margin 0 auto
|
margin 50px auto
|
||||||
|
|
||||||
#header-one, #header-two
|
#header-one, #header-two
|
||||||
z-index 10
|
z-index 10
|
||||||
|
@ -62,6 +61,8 @@ svg.icons
|
||||||
text-decoration none
|
text-decoration none
|
||||||
display block
|
display block
|
||||||
// word-break: break-all;
|
// word-break: break-all;
|
||||||
|
#dash-menu
|
||||||
|
text-align: right
|
||||||
|
|
||||||
/* Mozilla based browsers */
|
/* Mozilla based browsers */
|
||||||
::-moz-selection
|
::-moz-selection
|
||||||
|
|
|
@ -102,7 +102,7 @@
|
||||||
$baseType = 'Apercu', Helvetica, Arial, sans-serif;
|
$baseType = 'Apercu', Helvetica, Arial, sans-serif;
|
||||||
|
|
||||||
h1, h2, h3
|
h1, h2, h3
|
||||||
color $secondary
|
color $white
|
||||||
|
|
||||||
h1
|
h1
|
||||||
font-size 2em
|
font-size 2em
|
||||||
|
|
Loading…
Reference in a new issue