Formatted Account pages + fixed search UI

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