Travis GCC option + UI enhancements

.travis.yml

@@ -3,9 +3,14 @@ node_js:
 - '6'
 - '5'
 - '4.4'
-services:
-- redis-server
-- mongodb
+env:
+  - CXX=g++-6.2
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-6.2
 env:
   global:
   - secure: VCgscCCKhvHu0tW8e3jo6wydckE6jDkEfC2Zd5aSZytYAex05qahU45cmksqMIT1uBCcC4CKRK4caoKac/+818EyKBTV+vAL74cMMc8NeLNVY2m50+ohu8GYu+ByIffttK7cnXN7xIzyuK4csI7qz84jxLW0KYgYQ+6SPbUG3Hy6gr0P0CztNmAFfyhTam4OKSIiXyvQZW0fZoSruOpUYS5pxvCBi4AxpRY8+6IxCL8xYqF49P0l28nn0C/NYUklwag6l4JF32PrcLAU5S+NIXXgJX499cZO4C2m2GljJeolbvGue3ZEtadv5NkmQuFQ1WGb5aURHPkll0hXsWKxT0bH9P1a4Gt1h/J885acWG4U6QZA1Zds/Z4ymNeLA0MzzoAaDK1q8sRglhDJnZYb4Zm5jy7ZA3vFwb+zcGaOT//pCVpcsZINRnd0Qu9LC5NKPrfmyFAAMAXDdo78BEnwryUviWP5976JZmQAfDIWvmGGTs5i1yjiTRi+NVgH0YpfxtI9MTEJo++r5/zNH/jewxj1D8esaamphp6mQvxvpl388veQDw3REUZQ49muzrdK2YYmVRkzLfH2uMsHInN3WqEl3/mTpH76u0nlxMF6HlrVdgB2UNPjlXbSooWXLfdAw98NpCZ7BAFcCcT8Oa9cYw+40rJrdfem5J2EimG5ltw=

client/js/app.js

@@ -2,7 +2,9 @@
 
 jQuery( document ).ready(function( $ ) {
 
+	// ====================================
 	// Scroll
+	// ====================================
 
 	$('a').smoothScroll({
 		speed: 400,
@@ -11,7 +13,18 @@ jQuery( document ).ready(function( $ ) {
 
 	var sticky = new Sticky('.stickyscroll');
 
-	// Alerts
+	// ====================================
+	// Notifications
+	// ====================================
+
+	$(window).bind('beforeunload', () => {
+		$('#notifload').addClass('active');
+	});
+	$(document).ajaxSend(() => {
+		$('#notifload').addClass('active');
+	}).ajaxComplete(() => {
+		$('#notifload').removeClass('active');
+	});
 
 	var alerts = new Alerts();
 	if(alertsData) {
@@ -20,20 +33,29 @@ jQuery( document ).ready(function( $ ) {
 		});
 	}
 
-	// Editor
+	// ====================================
+	// Markdown Editor
+	// ====================================
 
 	if($('#mk-editor').length === 1) {
 
 		let mde = new SimpleMDE({
 			autofocus: true,
-			element: $("#mk-editor").get(0),
 			autoDownloadFontAwesome: false,
-			placeholder: 'Enter Markdown formatted content here...',
+			element: $("#mk-editor").get(0),
 			hideIcons: ['heading', 'quote'],
+			placeholder: 'Enter Markdown formatted content here...',
 			showIcons: ['strikethrough', 'heading-1', 'heading-2', 'heading-3', 'code', 'table', 'horizontal-rule'],
-			spellChecker: false
+			spellChecker: false,
+			status: false
 		});
 
 	}
 
+	// ====================================
+	// Pages logic
+	// ====================================
+
+	//=include pages/edit.js
+
 });

client/js/pages/edit.js

@@ -0,0 +1,18 @@
+
+if($('#page-type-edit').length) {
+
+	//-> Discard
+
+	$('.btn-edit-discard').on('click', (ev) => {
+		$('#modal-edit-discard').toggleClass('is-active');
+	});
+
+	//-> Save
+
+	$('.btn-edit-save').on('click', (ev) => {
+
+		
+
+	});
+
+}

client/scss/app.scss

@@ -1,5 +1,6 @@
 //@import './layout/_fonts';
 @import './layout/_base';
+@import './layout/_mixins';
 
 $red: #E53935;
 $orange: #FB8C00;

client/scss/layout/_content.scss

@@ -110,6 +110,15 @@ p code {
 
 .card-header {
 	background-color: $turquoise;
+
+	&.is-warning {
+		background-color: $orange;
+	}
+
+	&.is-danger {
+		background-color: $red;
+	}
+
 }
 
 .card-header-title {
@@ -121,4 +130,8 @@ p code {
 
 .modal-content .card-footer-item {
 	font-weight: 500;
+}
+
+.modal-content .card-footer-item.featured {
+	animation: flash 4s ease 0 infinite;
 }

client/scss/layout/_header.scss

@@ -2,4 +2,23 @@
 h2.nav-item {
 	font-size: 150%;
 	color: $orange;
+}
+
+#notifload {
+	width: 42px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	opacity: 0;
+	transition: opacity .5s ease;
+
+	&::before {
+		content: " ";
+		@include spinner($orange,0.5s,24px);
+	}
+
+	&.active {
+		opacity: 1;
+	}
+
 }

client/scss/layout/_mixins.scss

@@ -0,0 +1,85 @@
+/**
+ * Clearfix
+ *
+ * @return     {string}  Clearfix attribute
+ */
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+/**
+ * Placeholder attribute for inputs
+ *
+ * @return     {string}  Placeholder attributes
+ */
+@mixin placeholder {
+	&::-webkit-input-placeholder {@content};
+	&::-moz-placeholder {@content}
+	&:-ms-input-placeholder {@content}
+	&:placeholder-shown {@content};
+}
+
+/**
+ * Spinner element
+ *
+ * @param      {string}  $color             - Color
+ * @param      {string}  $dur               - Animation Duration
+ * @param      {int}     $width             - Width
+ * @param      {int}     $height  [$width]  - height
+ *
+ * @return     {string}  Spinner element
+ */
+@mixin spinner($color,$dur,$width,$height:$width) {
+	width: $width;
+	height: $height;
+	border-radius: 50%;
+	box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
+	@include prefix(animation, spin $dur linear infinite);
+	@include keyframes(spin) {
+		100%{
+		 @include prefix(transform, rotate(360deg));
+		}
+	};
+}
+
+/**
+ * Prefixes for keyframes
+ *
+ * @param      {string}  $animation-name          - The animation name
+ *
+ * @return     {string}  Prefixed keyframes attributes
+ */
+@mixin keyframes($animation-name) {
+    @-webkit-keyframes #{$animation-name} {
+        @content;
+    }
+    @-moz-keyframes #{$animation-name} {
+        @content;
+    }
+    @-o-keyframes #{$animation-name} {
+        @content;
+    }  
+    @keyframes #{$animation-name} {
+        @content;
+    }
+}
+
+/**
+ * Prefix function for browser compatibility
+ *
+ * @param      {string}  $property          - Property name
+ * @param      {any}     $value             - Property value
+ *
+ * @return     {string}  Prefixed attributes
+ */
+@mixin prefix($property, $value) {
+  -webkit-#{$property}: #{$value};
+     -moz-#{$property}: #{$value};
+      -ms-#{$property}: #{$value};
+       -o-#{$property}: #{$value};
+          #{$property}: #{$value};
+}

gulpfile.js

@@ -101,6 +101,7 @@ gulp.task("scripts-app", function () {
 	return gulp.src(paths.scriptapps)
 	.pipe(plumber())
 	.pipe(concat('app.js'))
+	.pipe(include({ extensions: "js" }))
 	.pipe(babel())
 	.pipe(uglify())
 	.pipe(plumber.stop())

views/common/header.pug

@@ -16,6 +16,7 @@ nav.nav.has-shadow.stickyscroll
 		span
 	.nav-right.nav-menu
 		block rootNavRight
+			i.nav-item#notifload
 			a.nav-item(href='#')
 				| History
 			a.nav-item(href='#')

views/pages/edit.pug

@@ -4,21 +4,37 @@ block rootNavCenter
 	h2.nav-item= pageData.meta.title
 
 block rootNavRight
+	i.nav-item#notifload
 	a.nav-item(href='#')
 		| History
 	a.nav-item(href='#')
 		| Source
 	span.nav-item
-		a.button.is-danger(href='/' + pageData.meta.path)
+		a.button.is-warning.btn-edit-discard
 			span.icon
 				i.fa.fa-times
 			span Discard
-		a.button.is-success(href='#', onclick='$(".modal").addClass("is-active");')
+		a.button.is-success.btn-edit-save
 			span.icon
 				i.fa.fa-check
 			span Save Changes
 
 block content
 
-	section.section.is-small
-		textarea#mk-editor= pageData.markdown
+	#page-type-edit
+		section.section.is-small
+			textarea#mk-editor= pageData.markdown
+
+	.modal#modal-edit-discard
+		.modal-background
+		.modal-container
+			.modal-content
+				.card.is-fullwidth
+					header.card-header.is-warning
+						p.card-header-title Discard?
+					.card-content
+						.content
+							| Are you sure you want to leave this page and loose any modifications?
+					footer.card-footer
+						a.card-footer-item.btn-edit-discard Stay on page
+						a.card-footer-item(href='/' + pageData.meta.path) Discard

views/pages/view.pug

@@ -9,6 +9,7 @@ mixin tocMenu(ti)
 					+tocMenu(node.nodes)
 
 block rootNavRight
+	i.nav-item#notifload
 	a.nav-item(href='#')
 		| History
 	a.nav-item(href='#')
@@ -25,39 +26,40 @@ block rootNavRight
 
 block content
 
-	section.section
-		.container.is-fluid
-			.columns
+	#page-type-view
+		section.section
+			.container.is-fluid
+				.columns
 
-				.column.is-narrow.sd-menus.is-hidden-touch
+					.column.is-narrow.sd-menus.is-hidden-touch
 
-					.box
-						aside.menu(style= { 'min-width': '200px' })
-							p.menu-label
-								| Navigation
-							ul.menu-list
-								li
-									a(href='/') Home
-								if pageData.parent
+						.box
+							aside.menu(style= { 'min-width': '200px' })
+								p.menu-label
+									| Navigation
+								ul.menu-list
 									li
-										a(href='/' + pageData.parent.path)= pageData.parent.title
-								li
-									a(href='/account') Account
-					.box.stickyscroll(data-margin-top=70)
-						aside.menu(style= { 'min-width': '200px' })
-							p.menu-label
-								| Contents
-							ul.menu-list
-								a(href='#root', title='Start') Start
-								+tocMenu(pageData.tree)
+										a(href='/') Home
+									if pageData.parent
+										li
+											a(href='/' + pageData.parent.path)= pageData.parent.title
+									li
+										a(href='/account') Account
+						.box.stickyscroll(data-margin-top=70)
+							aside.menu(style= { 'min-width': '200px' })
+								p.menu-label
+									| Contents
+								ul.menu-list
+									a(href='#root', title='Start') Start
+									+tocMenu(pageData.tree)
 
-				.column
+					.column
 
-					h1.title#title= pageData.meta.title
-					if pageData.meta.subtitle
-						h2.subtitle= pageData.meta.subtitle
-					.content.mkcontent
-						!= pageData.html
+						h1.title#title= pageData.meta.title
+						if pageData.meta.subtitle
+							h2.subtitle= pageData.meta.subtitle
+						.content.mkcontent
+							!= pageData.html
 
 	.modal
 		.modal-background
@@ -73,4 +75,4 @@ block content
 								input.input(type='text', placeholder='/path', value='/storage/new-page')
 					footer.card-footer
 						a.card-footer-item(onclick='$(".modal").removeClass("is-active");') Discard
-						a.card-footer-item Create
+						a.card-footer-item.featured Create