dash index redesigned and cleaned up

brain/routes/back/index.js

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

themes/dash/assets/css/dash.css

@@ -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-form {
-#dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #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-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 {
   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%;
+  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 {
   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;
 }
 /**
 -------------------------------

themes/dash/assets/js/dash.min.js

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

themes/dash/frame.pug

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

themes/dash/partials/dash-nav.pug

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

themes/dash/partials/front.pug

@@ -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
+          div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center")
-        br
+          label= items[index].post.title
-        br
   

themes/dash/partials/login.pug

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

themes/dash/post-edit.pug

@@ -1,6 +1,6 @@
 extends frame
 block main-content
-
+  // move this to backend
   -var post_title = ''
   -var post_plaintext = ''
   -var post_feature = 'null'

themes/dash/src/styles/main/_forms.styl

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

themes/dash/src/styles/main/_index.styl

@@ -19,20 +19,26 @@
         max-width 900px
         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
         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%
+          padding 0.75em
-          margin 50px auto
-
-          h3
-            color $primary - 10%
-
           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

themes/dash/src/styles/main/_mixins.styl

@@ -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;
+	-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: rgba(rgb-value, opacity);
+	background rgba(rgb-value, opacity)

themes/dash/src/styles/main/_structure.styl

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

themes/dash/src/styles/main/_typography.styl

@@ -102,7 +102,7 @@
 $baseType = 'Apercu', Helvetica, Arial, sans-serif;
 
 h1, h2, h3
-    color $secondary
+    color $white
 
 h1 
     font-size 2em