Modals styling + Fix for gapless first <p>

libs/markdown.js

@@ -152,9 +152,17 @@ const parseContent = (content)  => {
 	let output = mkdown.render(content);
 	let cr = cheerio.load(output);
 
-	//-> Style table headers
-
-	//cr('table').addClass('table is-bordered is-striped is-narrow');
+	//-> Check for empty first element
+
+	let firstElm = cr.root().children().first()[0];
+	if(firstElm.type === 'tag' && firstElm.name === 'p') {
+		let firstElmChildren = firstElm.children;
+		if(firstElmChildren.length < 1) {
+			firstElm.remove();
+		} else if(firstElmChildren.length === 1 && firstElmChildren[0].type === 'tag' && firstElmChildren[0].name === 'img') {
+			cr(firstElm).addClass('is-gapless');
+		}
+	}
 
 	//-> Remove links in headers
 

views/modals/create-discard.pug

@@ -2,12 +2,9 @@
 	.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 anything you wrote so far?
-				footer.card-footer
-					a.card-footer-item.btn-create-discard Stay on page
-					a.card-footer-item(href='/') Discard
+				header.is-orange Discard?
+				section
+					span Are you sure you want to leave this page and loose anything you wrote so far?
+				footer
+					a.button.is-grey.is-outlined.btn-create-discard Stay on page
+					a.button.is-orange(href='/') Discard

views/modals/create.pug

@@ -3,15 +3,12 @@
 	.modal-background
 	.modal-container
 		.modal-content
-			.card.is-fullwidth
-				header.card-header
-					p.card-header-title Create New Page
-				.card-content
-					.content
+				header.is-light-blue Create New Document
+				section
 					label.label Enter the new document path:
-						p.control
+					p.control.is-fullwidth
 						input.input(type='text', placeholder='page-name')#txt-create-prompt
 						span.help.is-danger.is-hidden This document path is invalid!
-				footer.card-footer
-					a.card-footer-item.btn-create-prompt Discard
-					a.card-footer-item.btn-create-go Create
+				footer
+					a.button.is-grey.is-outlined.btn-create-prompt Discard
+					a.button.is-light-blue.btn-create-go Create

views/modals/edit-discard.pug

@@ -3,12 +3,9 @@
 	.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
+				header.is-orange Discard?
+				section
+					span Are you sure you want to leave this page and loose any modifications?
+				footer
+					a.button.is-grey.is-outlined.btn-edit-discard Stay on page
+					a.button.is-orange(href='/' + pageData.meta.path) Discard

views/modals/move.pug

@@ -3,16 +3,13 @@
 	.modal-background
 	.modal-container
 		.modal-content
-			.card.is-fullwidth
-				header.card-header.is-info
-					p.card-header-title Move document
-				.card-content
-					.content
+			header.is-indigo Move document
+			section
 				label.label Enter the new document path:
-						p.control
+				p.control.is-fullwidth
 					input.input(type='text', placeholder='page-name')#txt-move-prompt
-							span.help.is-danger.is-hidden This document path is invalid or not allowed!
-						span Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
-				footer.card-footer
-					a.card-footer-item.btn-move-prompt Discard
-					a.card-footer-item.btn-move-go Move
+					span.help.is-red.is-hidden This document path is invalid or not allowed!
+				span.note Note that moving or renaming documents can lead to broken links. Make sure to edit any page that links to this document afterwards!
+			footer
+				a.button.is-grey.is-outlined.btn-move-prompt Discard
+				a.button.is-indigo.btn-move-go Move