dash index redesigned and cleaned up

sql-version-freeze
Ro 6 years ago
parent 2bdeb81979
commit fc1e44ad73

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

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

@ -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 index = 0;
- 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…
Cancel
Save