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: [
|
||||
['id', 'DESC']
|
||||
],
|
||||
limit: 5
|
||||
]
|
||||
}).then(function(posts)
|
||||
{
|
||||
let title = '';
|
||||
(!loggedIn) ? title = "Hi, there." : title = "This is the front"
|
||||
let filtered = [];
|
||||
for (let index = 0; index < posts.length; index++)
|
||||
{
|
||||
|
@ -32,7 +33,7 @@ router.get('/', function(req, res)
|
|||
}
|
||||
res.render('dash/index',
|
||||
{
|
||||
title: 'Dashboard',
|
||||
title: title,
|
||||
user_status: loggedIn,
|
||||
items: filtered
|
||||
});
|
||||
|
|
|
@ -1535,7 +1535,7 @@ template {
|
|||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: #b2cce5;
|
||||
color: #f2f1ef;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
|
@ -1556,7 +1556,7 @@ h3 {
|
|||
**/
|
||||
html,
|
||||
body {
|
||||
background-color: #374857;
|
||||
background-color: #161d23;
|
||||
font: 400 1em 'Apercu', Helvetica, Arial, sans-serif;
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -1601,14 +1601,13 @@ svg.icons {
|
|||
.main-container section header {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #161d23;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.main-container section header #header-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
margin: 50px auto;
|
||||
}
|
||||
.main-container section header #header-wrapper #header-one,
|
||||
.main-container section header #header-wrapper #header-two {
|
||||
|
@ -1623,6 +1622,10 @@ svg.icons {
|
|||
text-decoration: none;
|
||||
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 {
|
||||
background-color: #fc6399;
|
||||
color: #f2f1ef;
|
||||
|
@ -1742,15 +1745,19 @@ svg.icons {
|
|||
max-width: 900px;
|
||||
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-index-two #dash-form {
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form {
|
||||
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-index-two #dash-index-title {
|
||||
color: #f2f1ef;
|
||||
font: 400 2em $titleType;
|
||||
vertical-align: top;
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-form input {
|
||||
width: 290px;
|
||||
margin: 0 0 10px 0;
|
||||
height: 30px;
|
||||
}
|
||||
#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 {
|
||||
padding: 10px;
|
||||
|
@ -1784,21 +1791,61 @@ svg.icons {
|
|||
cursor: pointer;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent {
|
||||
background: #455b6e;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
height: 100%;
|
||||
padding: 5px 0 0 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list {
|
||||
width: 90%;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list h3 {
|
||||
color: #32414e;
|
||||
padding: 0.75em;
|
||||
}
|
||||
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a {
|
||||
font-size: 1.5em;
|
||||
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 {
|
||||
display: inline-block;
|
||||
|
@ -2122,21 +2169,21 @@ select {
|
|||
}
|
||||
::-webkit-input-placeholder {
|
||||
font: 1em 'Apercu-Mono';
|
||||
color: #546d84;
|
||||
color: #b2cce5;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
font: 1em 'Apercu-Mono';
|
||||
color: #546d84;
|
||||
color: #b2cce5;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
font: 1em 'Apercu-Mono';
|
||||
color: #546d84;
|
||||
color: #b2cce5;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
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') {
|
||||
var hostname = "" || location.hostname;
|
||||
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) {
|
||||
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-wrapper.columns
|
||||
#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
|
||||
#header-two.column
|
||||
-if(user_status)
|
||||
include partials/dash-nav
|
||||
block main-content
|
||||
script(src='/dash/assets/js/dashkit.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
|
||||
#recent-list
|
||||
h3 Recent
|
||||
br
|
||||
- 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)
|
||||
= items[index].post.title
|
||||
br
|
||||
br
|
||||
div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center")
|
||||
label= items[index].post.title
|
||||
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
#dash-login.columns
|
||||
#dash-index-one.column
|
||||
h1 What up
|
||||
#dash-index-two.column
|
||||
.dash-form#dash-form
|
||||
form(class='login', name="login" action="/@/dashboard/login" method="POST")
|
||||
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
|
||||
#dash-login
|
||||
.dash-form#dash-form
|
||||
form(class='login', name="login" action="/@/dashboard/login" method="POST")
|
||||
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') SUBMIT YOUR STUFF
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
extends frame
|
||||
block main-content
|
||||
|
||||
// move this to backend
|
||||
-var post_title = ''
|
||||
-var post_plaintext = ''
|
||||
-var post_feature = 'null'
|
||||
|
|
|
@ -36,20 +36,20 @@ select
|
|||
|
||||
::-webkit-input-placeholder
|
||||
font 1em 'Apercu-Mono'
|
||||
color $primary + 20%
|
||||
color $secondary
|
||||
|
||||
:-moz-placeholder
|
||||
/* Firefox 18- */
|
||||
font 1em 'Apercu-Mono'
|
||||
color $primary + 20%
|
||||
color $secondary
|
||||
|
||||
::-moz-placeholder
|
||||
/* Firefox 19+ */
|
||||
font 1em 'Apercu-Mono'
|
||||
color $primary + 20%
|
||||
color $secondary
|
||||
|
||||
:-ms-input-placeholder
|
||||
font 1em 'Apercu-Mono'
|
||||
color $primary + 20%
|
||||
color $secondary
|
||||
|
||||
|
||||
|
|
|
@ -19,20 +19,26 @@
|
|||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
#dash-index-one, #dash-index-two
|
||||
#dash-form
|
||||
width 300px
|
||||
#dash-form
|
||||
width 300px
|
||||
padding 0.75em
|
||||
background $primary
|
||||
border-radius 3px
|
||||
|
||||
#dash-index-title
|
||||
color $white
|
||||
font 400 2em $titleType
|
||||
vertical-align top
|
||||
input
|
||||
width 290px
|
||||
margin 0 0 10px 0
|
||||
height 30px
|
||||
|
||||
button
|
||||
width 300px
|
||||
|
||||
#dash-menu
|
||||
padding 10px
|
||||
width 90%
|
||||
max-width 900px
|
||||
margin 50px auto
|
||||
|
||||
a
|
||||
display inline-block
|
||||
vertical-align top
|
||||
|
@ -59,21 +65,56 @@
|
|||
cursor pointer
|
||||
|
||||
#dash-recent
|
||||
background $primary + 10%
|
||||
width 100%
|
||||
max-width 900px
|
||||
height 100%
|
||||
padding 5px 0 0 0
|
||||
margin 0 auto
|
||||
|
||||
#recent-list
|
||||
width 90%
|
||||
margin 50px auto
|
||||
|
||||
h3
|
||||
color $primary - 10%
|
||||
|
||||
padding 0.75em
|
||||
a
|
||||
font-size 1.5em
|
||||
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
|
||||
display inline-block
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
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)
|
||||
-moz-transition:all rate linear;
|
||||
-webkit-transition:all rate linear;
|
||||
-o-transition:all rate linear;
|
||||
transition:all rate linear;
|
||||
-moz-transition all rate linear
|
||||
-webkit-transition all rate linear
|
||||
-o-transition all rate linear
|
||||
transition all rate linear
|
||||
|
||||
background-opacity(rgb-value, opacity)
|
||||
background: rgba(rgb-value, opacity);
|
||||
background rgba(rgb-value, opacity)
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
html, body
|
||||
background-color $primary
|
||||
background-color $primary - 60%
|
||||
font 400 1em $baseType
|
||||
height 100%
|
||||
|
||||
|
@ -42,14 +42,13 @@ svg.icons
|
|||
header
|
||||
width 100%
|
||||
height 100px
|
||||
background-color $primary - 60%
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
#header-wrapper
|
||||
width 100%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
margin 50px auto
|
||||
|
||||
#header-one, #header-two
|
||||
z-index 10
|
||||
|
@ -62,6 +61,8 @@ svg.icons
|
|||
text-decoration none
|
||||
display block
|
||||
// word-break: break-all;
|
||||
#dash-menu
|
||||
text-align: right
|
||||
|
||||
/* Mozilla based browsers */
|
||||
::-moz-selection
|
||||
|
|
|
@ -102,7 +102,7 @@
|
|||
$baseType = 'Apercu', Helvetica, Arial, sans-serif;
|
||||
|
||||
h1, h2, h3
|
||||
color $secondary
|
||||
color $white
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
|
|
Loading…
Reference in a new issue