opn graph meta edits, log out made public, improved notifications

brain/data/Render.js

@@ -103,9 +103,12 @@ export default class Render {
 							}
 							buffed = new StringUtils().decodeHTML(buffed);
 							let html = md.render(buffed, { html: true, xhtmlOut: true });
+							//add open graph meta variables
 							let file = pug.renderFile(template, {
 								title: page.metadata.title,
 								default_bg: page.metadata.feature,
+								image: page.metadata.feature,
+								keywords: page.metadata.tags,
 								content: html,
 								tags: tags,
 								menu: config.menu,

brain/routes/dash/index.js

@@ -54,10 +54,9 @@ router.get('/', function (req, res) {
 //--------------------------
 // Logout
 //--------------------------
-router.post('/logout', function (req, res) {
-	req.logout();
-	return res.json({
-		message: 'LOGGED OUT'
-	});
+router.get('/logout', (req, res) => {
+	//req.logout();
+	req.session.destroy();
+	res.redirect('/@/dashboard');
 });
 module.exports = router;

brain/views/frame.pug

@@ -12,11 +12,17 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png")
         link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
     body
-      #notifications.notifications
+      #notifications.notifications.notify-close
         #notifyMessage.notifyMessage
-          .notify-icon
+          .notify-icon#notify-good
             svg(viewBox="0 0 20 20" class="icons")
-              use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-bell') 
+              use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')
+          .notify-icon#notify-lame
+            svg(viewBox="0 0 20 20" class="icons")
+              use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-sad') 
+          .notify-icon#notify-working
+            svg(viewBox="0 0 20 20" class="icons")
+              use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-cog') 
           p#message-text This is a message
       .main-container#main-content
         section#dash-index-content

brain/views/partials/dash-nav.pug

@@ -2,3 +2,6 @@
   a#settings(href="/@/dashboard/settings") Settings
   |  . 
   a#navigation(href="/@/dashboard/navigation") Navigation
+  |  .  
+
+  a#navigation(href="/@/dashboard/logout") Log Out

src/com/Base.js

@@ -50,11 +50,13 @@ export default class Base {
 		e.stopPropagation();
 		e.preventDefault();
 		let authForm = data.formDataToJSON(document.getElementById('login'));
+		notify.alert('Looking, hold up', null);
 		api.login(authForm)
 			.then(response => {
 				if (response.type === DataEvent.REQUEST_LAME) {
 					notify.alert(response.message, false);
 				} else {
+					notify.alert(response.message, true);
 					e.target.innerHTML = response.message;
 					setTimeout(() => {
 						window.location = '/@/dashboard';

src/com/controllers/NavIndex.js

@@ -19,6 +19,7 @@ export default class NavIndex {
 		Sortable.create(document.getElementById('nav-pages'), {
 			onUpdate: () => {
 				new NavActions().syncMenu().then(data => {
+					notify.alert('Updating Menu', null);
 					admin.syncNav(data).then(r => {
 						if (r.type == DataEvent.MENU_UPDATED) {
 							notify.alert(r.message, true);
@@ -45,6 +46,7 @@ export default class NavIndex {
 				new NavActions().removeItem(id);
 				new NavActions().syncMenu().then(data => {
 					data.remove = e.target.getAttribute('data-uuid');
+					notify.alert('Editing Menu', null);
 					admin.syncNav(data).then(r => {
 						if (r.type == DataEvent.MENU_UPDATED) {
 							notify.alert(r.message, true);

src/com/controllers/PageEditor.js

@@ -134,6 +134,7 @@ export default class PostEditor {
 				new PageActions()
 					.collectInfo(document.getElementById('featured-image-upload').files[0])
 					.then(page => {
+						notify.alert('Writing down changes', null);
 						admin
 							.pageActions(task, page)
 							.then(r => {

src/com/controllers/SettingsIndex.js

@@ -23,6 +23,7 @@ export default class SettingsIndex {
 			new SettingsActions()
 				.getInfo()
 				.then(data => {
+					notify.alert('Saving Settings', null);
 					admin.syncSettings(data).then(r => {
 						if (r.type == DataEvent.SETTINGS_UPDATED) {
 							notify.alert(r.message, true);
@@ -155,6 +156,7 @@ export default class SettingsIndex {
 		}
 	}
 	handleImageUpload(type, files) {
+		notify.alert('Uploading Image... ', null);
 		admin
 			.imageUpload(type, files)
 			.then(r => {
@@ -174,6 +176,7 @@ export default class SettingsIndex {
 		e.preventDefault();
 		e.stopPropagation();
 		let task = { task: 'publish all pages' };
+		notify.alert('Publishing site...', null);
 		admin
 			.publishSite(task)
 			.then(r => {
@@ -186,6 +189,7 @@ export default class SettingsIndex {
 	handleBackup(e) {
 		e.preventDefault();
 		e.stopPropagation();
+		notify.alert('Creating backup', null);
 		admin
 			.handleBackup(e.target.id, e.target.files)
 			.then(r => {

src/com/ui/Notifications.js

@@ -1,7 +1,10 @@
 import anime from 'animejs/lib/anime.es.js';
 const notifcation = document.getElementById('notifications');
-const message = document.getElementById('notifyMessage');
 const messageText = document.getElementById('message-text');
+const iconGood = document.getElementById('notify-good');
+const iconLame = document.getElementById('notify-lame');
+const iconWorking = document.getElementById('notify-working');
+
 export default class Notfications {
 	//--------------------------
 	// constructor
@@ -12,26 +15,44 @@ export default class Notfications {
 	//--------------------------
 
 	alert(text, status) {
-		messageText.innerHTML = text;
-		notifcation.style.display = 'flex';
+		//notifcation.style.display = 'flex';
+		iconWorking.style.display = 'none';
+		iconGood.style.display = 'none';
+		iconLame.style.display = 'none';
 		var color = '';
-		status ? (color = '#32cd32') : (color = '#F64747');
+		if (status !== null) {
+			if (status) {
+				color = '#32cd32';
+				iconWorking.style.display = 'none';
+				iconGood.style.display = 'block';
+			} else {
+				color = '#F64747';
+				iconWorking.style.display = 'none';
+				iconLame.style.display = 'block';
+			}
+		} else {
+			color = '#200317';
+			iconWorking.style.display = 'block';
+		}
+
+		notifcation.classList.remove('notify-close');
+		notifcation.classList.add('notify-open');
+		messageText.innerHTML = text;
 		anime({
 			targets: messageText,
 			backgroundColor: color,
 			easing: 'easeInOutQuint',
-			duration: 500,
+			duration: 700,
 			complete: () => {
+				if (status !== null) {
 					setTimeout(() => {
-					anime({
-						targets: messageText,
-						backgroundColor: '#374857',
-						easing: 'easeOutQuint',
-						duration: 500
-					});
+						notifcation.classList.add('notify-close');
+						notifcation.classList.remove('notify-open');
 					}, 1000);
 				}
+			}
 		});
+		/*
 		anime({
 			targets: message,
 			marginTop: '-20px',
@@ -53,6 +74,7 @@ export default class Notfications {
 				}, 1000);
 			}
 		});
+		*/
 	}
 
 	//--------------------------

src/styles/main/_structure.styl

@@ -2,6 +2,7 @@ html, body
   background-color $primary - 60%
   font 400 1em $baseType
   height 100%
+  perspective: 1000px
 
 a
   font 300 1em $baseType
@@ -21,20 +22,24 @@ svg.icons
   z-index 2000
   height 10%
   width 100%
-  display none
+  display block
   align-items center
   justify-content center
   padding 0 
   margin 0
+  transform-origin: 50% 0;
+  transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
   #notifyMessage
-    margin-top: 0px;
-    padding-top -125px
+    margin 0 auto
+    //padding-top -125px
     height 50px;
     width 500px
     display: flex;
     align-items center
     justify-content center
-    opacity: 0
+    opacity: 1
+    #notify-good, #notify-lame, #notify-working
+      display: none
     .notify-icon
       background $black
       padding 8px 5px 5px 5px
@@ -45,7 +50,7 @@ svg.icons
       border 2px solid $white
     p
       color $white
-      background $highlight
+      background $primary - 60%
       width 400px
       height 28px
       padding 15px 0 0 5px
@@ -56,6 +61,15 @@ svg.icons
     .icons
       fill $white
 
+.notify-close
+  transform-style preserve-3d
+  
+  transform: rotateX(-120deg)
+
+.notify-open
+  transform-style preserve-3d
+  //-origin: 50% 0;
+  transform: rotateX(0deg)
 .blog-container
   width 100%