Formatted Account pages + fixed search UI

agent.js

@@ -6,9 +6,12 @@
 
 global.PROCNAME = 'AGENT';
 global.ROOTPATH = __dirname;
-global.CORE_PATH = ROOTPATH + './node_modules/requarks-core/';
-//global.CORE_PATH = ROOTPATH + '/../core/';
 global.IS_DEBUG = process.env.NODE_ENV === 'development';
+if(IS_DEBUG) {
+  global.CORE_PATH = ROOTPATH + '/../core/';
+} else {
+  global.CORE_PATH = ROOTPATH + './node_modules/requarks-core/';
+}
 
 // ----------------------------------------
 // Load Winston

client/scss/app.scss

@@ -1,3 +1,6 @@
+
+$primary: 'indigo';
+
 @import 'core-client/scss/core';
 @import 'core-client/scss/components/alert';
 @import 'core-client/scss/components/button';
@@ -8,13 +11,15 @@
 @import 'core-client/scss/components/markdown-content';
 @import 'core-client/scss/components/modal';
 @import 'core-client/scss/components/nav';
+@import 'core-client/scss/components/panel';
+@import 'core-client/scss/components/search';
 @import 'core-client/scss/components/sidebar';
 @import 'core-client/scss/components/typography';
 
 @import './libs/twemoji-awesome';
 @import './libs/jquery-contextmenu';
 
-//@import './components/_editor';
+@import './components/_editor';
 
 @import './layout/_header';
 //@import './layout/_content';

client/scss/components/_editor.scss

@@ -1,13 +1,13 @@
 
 .editor-toolbar {
 	z-index: 2;
-	background-color: rgba(0,0,0,0.65);
+	background-color: rgba(0,0,0,0.75);
 	border: none;
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
 	opacity: 1;
 	position: fixed;
-	top: 52px;
+	top: 51px;
 	left: 0;
 	width: 100%;
 
@@ -44,7 +44,7 @@
 
 	span {
 		font-size: 12px;
-		color: $blue;
+		color: mc('blue', '500');
 	}
 
 	i {
@@ -57,7 +57,7 @@
 
 		&::before {
 			content: " ";
-			@include spinner($blue,0.5s,24px);
+			@include spinner(mc('blue', '500'),0.5s,24px);
 		}
 	}
 
@@ -143,11 +143,11 @@
 		}
 
 		&.is-active {
-			background-color: $primary;
+			background-color: mc($primary, '500');
 			color: #FFF;
 
 			> img {
-				border-color: darken($primary, 10%);
+				border-color: darken(mc($primary, '500'), 10%);
 			}
 
 			> span > strong {
@@ -157,11 +157,11 @@
 		}
 
 		&.is-contextopen {
-			background-color: $warning;
+			background-color: mc('orange', '500');
 			color: #FFF;
 
 			> img {
-				border-color: darken($warning, 10%);
+				border-color: darken(mc('orange', '500'), 10%);
 			}
 
 			> span > strong {
@@ -205,7 +205,7 @@
 	border-left: none;
 	border-right: none;
 	padding-top: 52px;
-	font-family: $family-monospace;
+	font-family: $core-font-monospace;
 }
 
 .CodeMirror .CodeMirror-code .cm-url {
@@ -256,7 +256,7 @@
 	top: 100px;
 	width: 100%;
 	background-color: rgba(255,255,255,0.95);
-	border-bottom: 1px solid $grey-light;
+	border-bottom: 1px solid mc('grey', '500');
 	z-index: 6;
 	padding: 20px;
 	border-bottom: 1px solid #CCC;
@@ -264,7 +264,7 @@
 	display: none;
 
 	> h3, .column > h3 {
-		color: $grey-dark;
+		color: mc('grey', '700');
 		font-size: 24px;
 		font-weight: 300;
 	}

client/scss/layout/_header.scss

@@ -33,19 +33,4 @@
 #search-input {
 	max-width: 300px;
 	width: 33vw;
-}
-
-.searchresults {
-	position: fixed;
-	top: 45px;
-	left: 0;
-	right: 0;
-	margin: 0 auto;
-	width: 500px;
-	z-index: 1;
-
-	&.slideInDown {
-		@include prefix(animation-duration, .6s);
-	}
-
 }

gulpfile.js

@@ -12,6 +12,8 @@ var gzip = require('gulp-gzip');
 var sass = require('gulp-sass');
 var cleanCSS = require('gulp-clean-css');
 var include = require("gulp-include");
+var run = require('run-sequence');
+var _ = require('lodash');
 
 /**
  * Paths
@@ -57,8 +59,7 @@ var paths = {
 			'./client/scss/*.scss'
 		],
 		includes: [
-			//'../core',
-			'./node_modules/requarks-core'
+			'./node_modules/requarks-core' //! MUST BE LAST
 		],
 		watch: [
 			'./client/scss/**/*.scss',
@@ -68,8 +69,7 @@ var paths = {
 	fonts: [
 		'./node_modules/font-awesome/fonts/*-webfont.*',
 		'!./node_modules/font-awesome/fonts/*-webfont.svg',
-		'../node_modules/requarks-core/core-client/fonts/**/*'
-		//'../core/core-client/fonts/**/*'
+		'../node_modules/requarks-core/core-client/fonts/**/*' //! MUST BE LAST
 	],
 	deploy: [
 		'./**/*',
@@ -189,6 +189,18 @@ gulp.task('watch', function() {
  */
 gulp.task('default', ['watch', 'server']);
 
+gulp.task('dev', function() {
+
+	paths.css.includes.pop();
+	paths.css.includes.push('../core');
+
+	paths.fonts.pop();
+	paths.fonts.push('../core/core-client/fonts/**/*');
+
+	return run('default');
+
+})
+
 /**
  * TASK - Creates deployment packages
  */

package.json

@@ -5,7 +5,7 @@
   "main": "server.js",
   "scripts": {
     "start": "node server",
-    "dev": "gulp",
+    "dev": "gulp dev",
     "test": "snyk test && istanbul cover ./node_modules/mocha/bin/_mocha --report lcovonly -- -R spec ./tests/index.js && cat ./coverage/lcov.info | ./node_modules/.bin/codacy-coverage && rm -rf ./coverage",
     "snyk-protect": "snyk protect",
     "__prepublish": "npm run snyk-protect"
@@ -53,24 +53,24 @@
     "filesize.js": "^1.0.2",
     "fs-extra": "^0.30.0",
     "git-wrapper2-promise": "^0.2.9",
-    "highlight.js": "^9.7.0",
-    "i18next": "^3.4.3",
+    "highlight.js": "^9.8.0",
+    "i18next": "^3.5.2",
     "i18next-express-middleware": "^1.0.2",
-    "i18next-node-fs-backend": "^0.1.2",
-    "js-yaml": "^3.6.1",
-    "lodash": "^4.16.5",
-    "markdown-it": "^8.0.0",
+    "i18next-node-fs-backend": "^0.1.3",
+    "js-yaml": "^3.7.0",
+    "lodash": "^4.17.2",
+    "markdown-it": "^8.1.0",
     "markdown-it-abbr": "^1.0.4",
-    "markdown-it-anchor": "^2.5.0",
+    "markdown-it-anchor": "^2.5.1",
     "markdown-it-attrs": "^0.8.0",
     "markdown-it-emoji": "^1.3.0",
     "markdown-it-expand-tabs": "^1.0.11",
     "markdown-it-external-links": "0.0.6",
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-task-lists": "^1.4.1",
-    "moment": "^2.15.1",
-    "moment-timezone": "^0.5.6",
-    "mongoose": "^4.6.3",
+    "moment": "^2.17.0",
+    "moment-timezone": "^0.5.9",
+    "mongoose": "^4.6.8",
     "multer": "^1.2.0",
     "passport": "^0.3.2",
     "passport-facebook": "^2.1.1",
@@ -82,17 +82,17 @@
     "read-chunk": "^2.0.0",
     "remove-markdown": "^0.1.0",
     "requarks-core": "github:requarks/core",
-    "request": "^2.75.0",
+    "request": "^2.79.0",
     "search-index": "^0.9.6",
-    "serve-favicon": "^2.3.0",
+    "serve-favicon": "^2.3.2",
     "sharp": "^0.16.1",
     "simplemde": "^1.11.2",
     "snyk": "^1.19.1",
-    "socket.io": "^1.5.0",
+    "socket.io": "^1.6.0",
     "sticky-js": "^1.0.7",
     "validator": "^6.0.0",
     "validator-as-promised": "^1.0.2",
-    "winston": "^2.2.0"
+    "winston": "^2.3.0"
   },
   "devDependencies": {
     "ace-builds": "^1.2.5",
@@ -105,7 +105,7 @@
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-clean-css": "^2.0.13",
-    "gulp-concat": "^2.6.0",
+    "gulp-concat": "^2.6.1",
     "gulp-gzip": "^1.4.0",
     "gulp-include": "^2.3.1",
     "gulp-nodemon": "^2.2.1",
@@ -124,9 +124,11 @@
     "mocha": "^3.1.2",
     "mocha-lcov-reporter": "^1.2.0",
     "nodemon": "^1.11.0",
-    "sticky-js": "^1.1.4",
+    "run-sequence": "^1.2.2",
+    "snyk": "^1.20.0",
+    "sticky-js": "^1.1.5",
     "twemoji-awesome": "^1.0.4",
-    "vue": "^2.0.3"
+    "vue": "^2.1.0"
   },
   "snyk": true
 }

server.js

@@ -7,9 +7,12 @@
 
 global.PROCNAME = 'SERVER';
 global.ROOTPATH = __dirname;
-global.CORE_PATH = ROOTPATH + './node_modules/requarks-core/';
-//global.CORE_PATH = ROOTPATH + '/../core/';
 global.IS_DEBUG = process.env.NODE_ENV === 'development';
+if(IS_DEBUG) {
+  global.CORE_PATH = ROOTPATH + '/../core/';
+} else {
+  global.CORE_PATH = ROOTPATH + './node_modules/requarks-core/';
+}
 
 // ----------------------------------------
 // Load Winston

views/common/header.pug

@@ -24,18 +24,15 @@
 
 	transition(name="searchresults-anim", enter-active-class="slideInDown", leave-active-class="fadeOutUp")
 		.searchresults.animated(v-show='searchactive', v-cloak, style={'display':'none'})
-			.menu
-				p.menu-label
-					| Search Results
-				ul.menu-list
-					li(v-if="searchres.length === 0")
-						a: em No results matching your query
-					li(v-for='sres in searchres')
-						a(v-bind:href="'/' + sres._id", v-bind:class="{ 'is-active': searchmovekey === 'res.' + sres._id }") {{ sres.title }}
-				p.menu-label(v-if='searchsuggest.length > 0')
-					| Did you mean...?
-				ul.menu-list(v-if='searchsuggest.length > 0')
-					li(v-for='sug in searchsuggest')
-						a(v-on:click="useSuggestion(sug)", v-bind:class="{ 'is-active': searchmovekey === 'sug.' + sug }") {{ sug }}
+			p.searchresults-label Search Results
+			ul.searchresults-list
+				li(v-if="searchres.length === 0")
+					a: em No results matching your query
+				li(v-for='sres in searchres', v-bind:class="{ 'is-active': searchmovekey === 'res.' + sres._id }")
+					a(v-bind:href="'/' + sres._id") {{ sres.title }}
+			p.searchresults-label(v-if='searchsuggest.length > 0') Did you mean...?
+			ul.searchresults-list(v-if='searchsuggest.length > 0')
+				li(v-for='sug in searchsuggest', v-bind:class="{ 'is-active': searchmovekey === 'sug.' + sug }")
+					a(v-on:click="useSuggestion(sug)") {{ sug }}
 
 

views/pages/admin/_layout.pug

@@ -1,30 +1,58 @@
 extends ../../layout.pug
 
 block rootNavCenter
-
+	h2.nav-item Account
 
 block rootNavRight
 	i.nav-item#notifload
 	.nav-item
 		a.button.btn-edit-discard(href='/')
-			span.icon
-				i.fa.fa-home
+			i.fa.fa-home
 			span Home
 
 block content
 
 	#page-type-account
-		section.hero.is-dark
-			.hero-body
-				.container
-					h1.title Account
-					h2.subtitle Manage your settings and site configuration
-		nav.nav.has-shadow
-			.container
-				.nav-left
-					a.nav-item.is-tab(href='/admin/profile', class={'is-active': adminTab === 'profile'}) My Profile
-					a.nav-item.is-tab(href='/admin/stats', class={'is-active': adminTab === 'stats'}) Stats
-					a.nav-item.is-tab(href='/admin/users', class={'is-active': adminTab === 'users'}) Users
-					a.nav-item.is-tab(href='/admin/settings', class={'is-active': adminTab === 'settings'}) Site Settings
-					a.nav-item.is-tab(href='/logout') Logout
-		block adminContent
+		.container.is-fluid
+			.columns.is-gapless
+
+				.column.is-narrow.is-hidden-touch.sidebar
+
+					aside
+						.sidebar-label
+							i.icon-th-small
+							span Navigation
+						ul.sidebar-menu
+							li
+								a(href='/')
+									i.icon-home
+									span Home
+
+					aside
+						.sidebar-label
+							i.icon-head
+							span Account
+						ul.sidebar-menu
+							li
+								a(href='/admin/profile')
+									i.icon-user
+									span My Profile
+							li
+								a(href='/admin/stats')
+									i.icon-bar-graph-2
+									span Stats
+							li
+								a(href='/admin/users')
+									i.icon-users
+									span Users
+							li
+								a(href='/admin/settings')
+									i.icon-cog
+									span Site Settings
+							li
+								a(href='/logout')
+									i.icon-delete2
+									span Logout
+
+				.column
+					block adminContent

views/pages/admin/profile.pug

@@ -1,28 +1,35 @@
 extends ./_layout.pug
 
 block adminContent
-	section.section
-		.container
-			.columns
-				.column.is-two-thirds
+	.hero
+		h1.title#title My Profile
+		h2.subtitle Profile and authentication info
+	.form-sections
+		.columns.is-gapless
+			.column.is-two-thirds
+				section
 					label.label Email
-					p.control.has-icon.has-icon-right
-						input.input(type='email', placeholder='Email', value=user.email, disabled=(user.provider !== 'local'))
-						i.fa.fa-envelope
-					if user.provider == 'local'
+					p.control.is-fullwidth
+						input.input(type='text', placeholder='Email', value=user.email, disabled=(user.provider !== 'local'))
+				if user.provider == 'local'
+					section
 						label.label Password
-						p.control.has-icon.has-icon-right
+						p.control.is-fullwidth
 							input.input(type='password', placeholder='Password', value='********')
-							i.fa.fa-lock
+					section
 						label.label Verify Password
-						p.control.has-icon.has-icon-right
+						p.control.is-fullwidth
 							input.input(type='password', placeholder='Password', value='********')
-							i.fa.fa-lock
+				section
 					label.label Display Name
-					p.control.has-icon.has-icon-right
+					p.control.is-fullwidth
 						input.input(type='text', placeholder='John Smith', value=user.name)
-						i.fa.fa-user
-				.column
+				section
+					button.button.is-green
+						i.icon-check
+						span Save Changes
+			.column
+				.panel
 					label.label Provider
 					p.control.account-profile-provider
 						case user.provider
@@ -35,9 +42,4 @@ block adminContent
 					label.label Member since
 					p.control= userMoment(user.createdAt).format('LL')
 					label.label Last Profile Update
-					p.control= userMoment(user.updatedAt).format('LL')
-	section.section
-		.container
-			p.control
-				button.button.is-success
-					| Save Changes
+					p.control= userMoment(user.updatedAt).format('LL')

views/pages/admin/settings.pug

@@ -1,6 +1,9 @@
 extends ./_layout.pug
 
 block adminContent
-	section.section
-		.container
-			label.label Coming soon
+	.hero
+		h1.title#title Site Settings
+		h2.subtitle Manage site configuration
+	.form-sections
+		section
+			| Coming soon

views/pages/admin/stats.pug

@@ -1,11 +1,14 @@
 extends ./_layout.pug
 
 block adminContent
-	section.section
-		.container
-			label.label Entries
-			p.control= totalEntries
-			label.label Uploads
-			p.control= totalUploads
-			label.label Users
-			p.control= totalUsers
+	.hero
+		h1.title#title Stats
+		h2.subtitle General site-wide statistics
+	.form-sections
+		section
+				label.label Entries
+				p.control= totalEntries
+				label.label Uploads
+				p.control= totalUploads
+				label.label Users
+				p.control= totalUsers

views/pages/admin/users.pug

@@ -1,15 +1,18 @@
 extends ./_layout.pug
 
 block adminContent
-	section.section
-		.container
-			.columns
-				.column.is-three-quarters
-					label.label Coming soon
-				.column
-					p.control
-						button.button.is-info
-							| Create Local User
-					p.control
-						button.button.is-info
-							| Authorize Social User
+	.hero
+		h1.title#title Users
+		h2.subtitle Manage users and rights
+		ul.hero-menu
+				li
+					a.is-blue(href='/')
+						i.icon-plus
+						span Create Local User
+				li
+					a.is-indigo(href='/')
+						i.icon-globe
+						span Authorize Social User
+	.form-sections
+		section
+			| Coming soon

views/pages/create.pug

@@ -6,13 +6,11 @@ block rootNavCenter
 block rootNavRight
 	i.nav-item#notifload
 	span.nav-item
-		a.button.is-warning.btn-create-discard
-			span.icon
-				i.fa.fa-times
+		a.button.is-outlined.btn-create-discard
+			i.icon-cross
 			span Discard
-		a.button.is-success.btn-create-save
-			span.icon
-				i.fa.fa-check
+		a.button.btn-create-save
+			i.icon-check
 			span Save Document
 
 block content

views/pages/source.pug

@@ -5,11 +5,13 @@ block rootNavCenter
 
 block rootNavRight
 	i.nav-item#notifload
-	a.nav-item.btn-move-prompt.is-hidden
-		| Move
-	a.nav-item(href='/' + pageData.meta.path)
-		| Normal View
 	span.nav-item
+		a.button.is-outlined.btn-move-prompt.is-hidden
+			i.icon-shuffle
+			span Move
+		a.button.is-outlined(href='/' + pageData.meta.path)
+			i.icon-loader
+			span Normal View
 		a.button.is-orange(href='/edit/' + pageData.meta.path)
 			i.fa.fa-edit
 			span Edit