dash index redesigned and cleaned up

This commit is contained in:
Ro 2019-01-31 12:36:59 -05:00
parent 2bdeb81979
commit fc1e44ad73
14 changed files with 167 additions and 88 deletions

View file

@ -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
}); });

View file

@ -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

View file

@ -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);

View file

@ -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")

View 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')

View file

@ -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

View file

@ -1,9 +1,7 @@
#dash-login.columns #dash-login
#dash-index-one.column
h1 What up
#dash-index-two.column
.dash-form#dash-form .dash-form#dash-form
form(class='login', name="login" action="/@/dashboard/login" method="POST") form(class='login', name="login" action="/@/dashboard/login" method="POST")
input(type='text', name='handle' class='form-control', placeholder='handle', required, autofocus) input(type='text', name='handle' class='form-control', placeholder='handle', required, autofocus)
input(type='password', name='password' class='form-control', placeholder='password', required) input(type='password', name='password' class='form-control', placeholder='password', required)
button(id="login-btn", class='login-btn', type='submit') COME ON IN button(id="login-btn", class='login-btn', type='submit') SUBMIT YOUR STUFF

View file

@ -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'

View file

@ -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

View file

@ -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

View file

@ -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)

View file

@ -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

View file

@ -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