From 2317100a819297625e63d5d282ec3d8a9e45b286 Mon Sep 17 00:00:00 2001
From: Diego Najar <dignajar@gmail.com>
Date: Tue, 30 Oct 2018 16:12:44 +0100
Subject: [PATCH] Improve UI when create or edit content

---
 .gitignore                                  |   1 +
 bl-kernel/admin/themes/booty/css/bludit.css |  65 ++-
 bl-kernel/admin/themes/booty/index.php      |   3 +
 bl-kernel/admin/themes/booty/init.php       |  36 +-
 bl-kernel/admin/views/edit-content.php      | 456 +++++++++-----------
 bl-kernel/admin/views/new-content.php       | 415 ++++++++----------
 bl-languages/en.json                        |   2 +-
 7 files changed, 453 insertions(+), 525 deletions(-)

diff --git a/.gitignore b/.gitignore
index c593b486..180be1db 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ bl-themes/editorial
 bl-themes/mediumish
 bl-themes/clean-blog
 bl-themes/grayscale
+bl-themes/massively
diff --git a/bl-kernel/admin/themes/booty/css/bludit.css b/bl-kernel/admin/themes/booty/css/bludit.css
index e5f32e29..5e9fd404 100644
--- a/bl-kernel/admin/themes/booty/css/bludit.css
+++ b/bl-kernel/admin/themes/booty/css/bludit.css
@@ -84,6 +84,7 @@ code {
 /*
 	LOGIN
 */
+
 body.login {
 	background: rgb(255,255,255);
 	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 53%);
@@ -140,7 +141,6 @@ body.login {
 	/* Create a dashed line with a pattern */
 }
 
-/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
 .ct-series-a .ct-point {
 	/* Colour of your points */
 	stroke: #4a90e2;
@@ -151,6 +151,7 @@ body.login {
 /*
 	ALERT
 */
+
 #alert {
 	display: none;
 	position: fixed;
@@ -176,6 +177,7 @@ body.login {
 /*
 	SIDEBAR
 */
+
 div.sidebar .nav-item a {
 	padding-left:0;
 	padding-right:0;
@@ -204,6 +206,7 @@ div.sidebar .nav-item span.oi {
 /*
 	PLUGINS
 */
+
 .plugin-form label {
 	display: block;
 	margin-top: 1rem !important;
@@ -256,3 +259,63 @@ td.child {
 	line-height: 1.5em;
 
 }
+
+#jseditorSidebar {
+	display: none;
+	height: calc(100% - 45px);
+	width: 50%;
+	max-width: 350px;
+	position: absolute;
+	z-index: 50;
+	top: 45px;
+	right: 15px;
+	background-color: #fff;
+	overflow-x: hidden;
+	transition: 0.5s;
+	border-left: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+	border-top: 1px solid #ccc;
+}
+
+@media (max-width: 575.98px) {
+	#jseditorSidebar {
+		width: 100%;
+		max-width: 100%;
+		right: 0;
+	}
+	#jseditorToolbarRight button {
+		font-size: 0px !important;
+	}
+	#jseditorToolbarRight button span {
+		font-size: 16px !important;
+	}
+}
+
+#jseditorSidebar nav {
+	background: #f3f3f3;
+}
+
+#jseditorSidebar nav a {
+	color: #000;
+}
+
+#jseditorSidebar .nav-tabs .nav-link {
+	border: none;
+}
+
+#jseditorSidebar .nav-link.active {
+	background: none;
+	border: none;
+	border-bottom: 3px solid #ccc;
+}
+
+#jsshadow {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(255,255,255,0.7);
+	z-index: 10;
+	display: none;
+}
\ No newline at end of file
diff --git a/bl-kernel/admin/themes/booty/index.php b/bl-kernel/admin/themes/booty/index.php
index 18da30e4..1f1b48d9 100644
--- a/bl-kernel/admin/themes/booty/index.php
+++ b/bl-kernel/admin/themes/booty/index.php
@@ -51,6 +51,9 @@
 	echo '</script>'.PHP_EOL;
 ?>
 
+<!-- Overlay background -->
+<div id="jsshadow"></div>
+
 <!-- Alert -->
 <?php include('html/alert.php'); ?>
 
diff --git a/bl-kernel/admin/themes/booty/init.php b/bl-kernel/admin/themes/booty/init.php
index e62be777..4798180f 100644
--- a/bl-kernel/admin/themes/booty/init.php
+++ b/bl-kernel/admin/themes/booty/init.php
@@ -96,7 +96,7 @@ EOF;
 	{
 		$title = $args['title'];
 return <<<EOF
-<h4 class="mt-4 mb-3 font-weight-normal">$title</h4>
+<h6 class="mt-4 mb-2 pb-2 border-bottom text-uppercase">$title</h6>
 EOF;
 	}
 
@@ -112,13 +112,15 @@ EOF;
 			$class = $class.' '.$args['class'];
 		}
 
-		$html = '<div class="form-group">';
+		$disabled = empty($args['disabled'])?'':'disabled';
+
+		$html = '<div class="form-group m-0">';
 
 		if (isset($args['label'])) {
-			$html .= '<label for="'.$id.'">'.$args['label'].'</label>';
+			$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100"  for="'.$id.'">'.$args['label'].'</label>';
 		}
 
-		$html .= '<input type="text" value="'.$args['value'].'" class="'.$class.'" id="'.$id.'" name="'.$args['name'].'" placeholder="'.$args['placeholder'].'">';
+		$html .= '<input type="text" value="'.$args['value'].'" class="'.$class.'" id="'.$id.'" name="'.$args['name'].'" placeholder="'.$args['placeholder'].'" '.$disabled.'>';
 
 		if (isset($args['tip'])) {
 			$html .= '<small class="form-text text-muted">'.$args['tip'].'</small>';
@@ -190,9 +192,9 @@ EOF;
 			$class = $class.' '.$args['class'];
 		}
 
-		$html = '<div class="form-group">';
+		$html = '<div class="form-group m-0">';
 		if (!empty($args['label'])) {
-			$html .= '<label for="'.$id.'">'.$args['label'].'</label>';
+			$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100" for="'.$id.'">'.$args['label'].'</label>';
 		}
 
 		$html .= '<textarea class="'.$class.'" id="'.$id.'" name="'.$args['name'].'" rows="'.$args['rows'].'" placeholder="'.$args['placeholder'].'">'.$args['value'].'</textarea>';
@@ -267,7 +269,6 @@ EOF;
 
 	public static function formCheckbox($args)
 	{
-		$label = isset($args['label'])?$args['label']:'';
 		$labelForCheckbox = isset($args['labelForCheckbox'])?$args['labelForCheckbox']:'';
 		$placeholder = isset($args['placeholder'])?$args['placeholder']:'';
 		$tip = isset($args['tip'])?$args['tip']:'&nbsp;';
@@ -279,7 +280,7 @@ EOF;
 		}
 		$disabled = isset($args['disabled'])?'disabled':'';
 
-		$class = 'form-group row';
+		$class = 'form-group';
 		if (isset($args['class'])) {
 			$class = $class.' '.$args['class'];
 		}
@@ -289,17 +290,20 @@ EOF;
 			$type = $args['type'];
 		}
 
+		$label = '';
+		if (!empty($args['label'])) {
+			$label = '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100">'.$args['label'].'</label>';
+		}
+
 		$checked = $args['checked']?'checked':'';
 
 return <<<EOF
 <div class="$class">
-	<label for="$id" class="col-sm-2">$label</label>
-	<div class="col-sm-10">
-		<div class="form-check">
-			<input name="$name" class="form-check-input" type="checkbox" id="$id" $checked>
-			<label class="form-check-label" for="$id">$labelForCheckbox</label>
-			<small class="form-text text-muted">$tip</small>
-		</div>
+	$label
+	<div class="form-check">
+		<input name="$name" class="form-check-input" type="checkbox" id="$id" $checked>
+		<label class="form-check-label" for="$id">$labelForCheckbox</label>
+		<small class="form-text text-muted">$tip</small>
 	</div>
 </div>
 EOF;
@@ -353,7 +357,7 @@ EOF;
 		$html = '<div class="form-group m-0">';
 
 		if (!empty($args['label'])) {
-			$html .= '<label for="'.$id.'">'.$args['label'].'</label>';
+			$html .= '<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100" for="'.$id.'">'.$args['label'].'</label>';
 		}
 
 		$html .= '<select id="'.$id.'" name="'.$args['name'].'" class="'.$class.'">';
diff --git a/bl-kernel/admin/views/edit-content.php b/bl-kernel/admin/views/edit-content.php
index 21683ccf..992c6443 100644
--- a/bl-kernel/admin/views/edit-content.php
+++ b/bl-kernel/admin/views/edit-content.php
@@ -53,16 +53,13 @@ echo Bootstrap::formOpen(array(
 ?>
 
 <!-- TOOLBAR -->
-<div>
-	<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
-		<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><?php $L->p('Images') ?></button>
-		<button type="button" class="btn btn-light" id="jscoverImageOpenModal" data-toggle="modal" data-target="#jscoverImageModal"><?php $L->p('Cover image') ?></button>
-		<button type="button" class="btn btn-light" id="jscategoryOpenModal" data-toggle="modal" data-target="#jscategoryModal"><?php $L->p('Category') ?><span class="option"></span></button>
-		<button type="button" class="btn btn-light" id="jsdescriptionOpenModal" data-toggle="modal" data-target="#jsdescriptionModal"><?php $L->p('Description') ?><span class="option"></span></button>
-		<button type="button" class="btn btn-light" id="jsoptionsOpenModal" data-toggle="modal" data-target="#jsoptionsModal"><?php $L->p('More options') ?></button>
+<div id="jseditorToolbar">
+	<div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
+		<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="oi oi-image"></span> <?php $L->p('Images') ?></button>
+		<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="oi oi-cog"></span> <?php $L->p('Options') ?></button>
 	</div>
 
-	<div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
+	<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
 		<button type="button" class="btn btn-primary" id="jsbuttonSave"><?php echo ($page->draft()?$L->g('Publish'):$L->g('Save')) ?></button>
 		<?php if(!$page->draft()): ?>
 		<button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
@@ -72,195 +69,95 @@ echo Bootstrap::formOpen(array(
 		<?php endif; ?>
 		<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a>
 	</div>
+
 </div>
-
-<!-- Title -->
-<div class="form-group mt-1 mb-1">
-	<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="<?php echo $page->title() ?>" placeholder="<?php $L->p('Enter title') ?>">
-</div>
-
-<!-- Editor -->
-<div id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(false) ?></div>
-
-<!-- Modal for Cover Image -->
-<div id="jscoverImageModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('Cover Image') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-					$coverImage = $page->coverImage(false);
-					$externalCoverImage = '';
-					if (filter_var($coverImage, FILTER_VALIDATE_URL)) {
-						$coverImage = '';
-						$externalCoverImage = $page->coverImage(false);
-					}
-				?>
-
-				<div>
-					<img id="jscoverImagePreview" style="width: 350px; height: 200px;" class="mx-auto d-block" alt="Cover image preview" src="<?php echo (empty($coverImage) ? HTML_PATH_ADMIN_THEME_IMG.'default.svg' : $page->coverImage() ) ?>" />
-				</div>
-				<div class="mt-2 text-center">
-					<button type="button" id="jsbuttonSelectCoverImage" class="btn btn-primary btn-sm"><?php echo $L->g('Select cover image') ?></button>
-					<button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
-				</div>
-
-				<hr>
-
-				<?php
-					echo Bootstrap::formTitle(array('title'=>$L->g('External Cover Image')));
-
-					echo Bootstrap::formInputTextBlock(array(
-						'name'=>'externalCoverImage',
-						'placeholder'=>"https://",
-						'value'=>$externalCoverImage,
-						'tip'=>$L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
-					));
-				?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
-		</div>
-	</div>
-	<script>
+<script>
 	$(document).ready(function() {
-		$("#jsexternalCoverImage").change(function() {
-			$("#jscoverImage").val( $(this).val() );
+		$("#jsoptionsSidebar").on("click", function() {
+			$("#jseditorSidebar").toggle();
+			$("#jsshadow").toggle();
 		});
 
-		$("#jscoverImagePreview").on("click", function() {
-			openMediaManager();
-		});
-
-		$("#jsbuttonSelectCoverImage").on("click", function() {
-			openMediaManager();
-		});
-
-		$("#jsbuttonRemoveCoverImage").on("click", function() {
-			$("#jscoverImage").val('');
-			$("#jscoverImagePreview").attr('src', HTML_PATH_ADMIN_THEME_IMG+'default.svg');
+		$("#jsshadow").on("click", function() {
+			$("#jseditorSidebar").toggle();
+			$("#jsshadow").toggle();
 		});
 	});
-	</script>
-</div>
+</script>
 
-<!-- Modal for Categories -->
-<div id="jscategoryModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('Category') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-					echo Bootstrap::formSelectBlock(array(
-						'name'=>'category',
-						'label'=>'',
-						'selected'=>$page->categoryKey(),
-						'class'=>'',
-						'emptyOption'=>'- '.$L->g('Uncategorized').' -',
-						'options'=>$categories->getKeyNameArray()
-					));
-				?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
+<!-- SIDEBAR OPTIONS -->
+<div id="jseditorSidebar">
+	<nav>
+		<div class="nav nav-tabs" id="nav-tab" role="tablist">
+			<a class="nav-link active show" id="nav-general-tab"  data-toggle="tab" href="#nav-general"  role="tab" aria-controls="general"><?php $L->p('General') ?></a>
+			<a class="nav-link" id="nav-advanced-tab" data-toggle="tab" href="#nav-advanced" role="tab" aria-controls="advanced"><?php $L->p('Advanced') ?></a>
+			<a class="nav-link" id="nav-seo-tab" data-toggle="tab" href="#nav-seo" role="tab" aria-controls="seo"><?php $L->p('SEO') ?></a>
 		</div>
-	</div>
-	<script>
-	$(document).ready(function() {
-		function setCategoryBox(value) {
-			var selected = $("#jscategory option:selected");
-			var value = selected.val().trim();
-			if (value) {
-				$("#jscategoryOpenModal").find("span.option").html(": "+selected.text());
-			} else {
-				$("#jscategoryOpenModal").find("span.option").html("");
-			}
-		}
+	</nav>
 
-		// Set the current category selected
-		setCategoryBox();
-
-		// When the user select the category update the category button
-		$("#jscategory").on("change", function() {
-			setCategoryBox();
-		});
-	});
-	</script>
-</div>
-
-<!-- Modal for Description -->
-<div id="jsdescriptionModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('Description') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-					echo Bootstrap::formTextareaBlock(array(
-						'name'=>'description',
-						'label'=>'',
-						'selected'=>'',
-						'class'=>'',
-						'value'=>$page->description(),
-						'rows'=>3,
-						'placeholder'=>$L->get('this-field-can-help-describe-the-content')
-					));
-				?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
-		</div>
-	</div>
-	<script>
-	$(document).ready(function() {
-		function setDescriptionBox(value) {
-			var value = $("#jsdescription").val();
-			if (value) {
-				value = ": "+$.trim(value).substring(0, 30).split(" ").slice(0, -1).join(" ") + "...";
-			}
-			$("#jsdescriptionOpenModal").find("span.option").html(value);
-		}
-
-		// Set the current description
-		setDescriptionBox();
-
-		// When the user write the description update the description button
-		$("#jsdescription").on("change", function() {
-			setDescriptionBox();
-		});
-	});
-	</script>
-</div>
-
-<!-- Modal for More options -->
-<div id="jsoptionsModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog modal-lg">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('More options') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-				// Username
-				echo Bootstrap::formInputText(array(
-					'name'=>'',
-					'label'=>$L->g('Author'),
-					'placeholder'=>'',
-					'value'=>$page->username(),
-					'tip'=>'',
-					'disabled'=>true
+	<div class="tab-content pr-3 pl-3">
+		<div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab">
+			<?php
+				// Category
+				echo Bootstrap::formSelectBlock(array(
+					'name'=>'category',
+					'label'=>$L->g('Category'),
+					'selected'=>$page->categoryKey(),
+					'class'=>'',
+					'emptyOption'=>'- '.$L->g('Uncategorized').' -',
+					'options'=>$categories->getKeyNameArray()
 				));
 
+				// Description
+				echo Bootstrap::formTextareaBlock(array(
+					'name'=>'description',
+					'label'=>$L->g('Description'),
+					'selected'=>'',
+					'class'=>'',
+					'value'=>$page->description(),
+					'rows'=>3,
+					'placeholder'=>$L->get('this-field-can-help-describe-the-content')
+				));
+			?>
+
+			<!-- Cover Image -->
+			<?php
+				$coverImage = $page->coverImage(false);
+				$externalCoverImage = '';
+				if (filter_var($coverImage, FILTER_VALIDATE_URL)) {
+					$coverImage = '';
+					$externalCoverImage = $page->coverImage(false);
+				}
+			?>
+			<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100"><?php $L->p('Cover Image') ?></label>
+			<div>
+			<img id="jscoverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo (empty($coverImage) ? HTML_PATH_ADMIN_THEME_IMG.'default.svg' : $page->coverImage() ) ?>" />
+			</div>
+			<div class="mt-2 text-center">
+				<button type="button" id="jsbuttonSelectCoverImage" class="btn btn-primary btn-sm"><?php echo $L->g('Select cover image') ?></button>
+				<button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
+			</div>
+			<script>
+				$(document).ready(function() {
+					$("#jscoverImagePreview").on("click", function() {
+						openMediaManager();
+					});
+
+					$("#jsbuttonSelectCoverImage").on("click", function() {
+						openMediaManager();
+					});
+
+					$("#jsbuttonRemoveCoverImage").on("click", function() {
+						$("#jscoverImage").val('');
+						$("#jscoverImagePreview").attr('src', HTML_PATH_ADMIN_THEME_IMG+'default.svg');
+					});
+				});
+			</script>
+		</div>
+		<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
+			<?php
 				// Date
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'date',
 					'label'=>$L->g('Date'),
 					'placeholder'=>'',
@@ -269,7 +166,7 @@ echo Bootstrap::formOpen(array(
 				));
 
 				// Type
-				echo Bootstrap::formSelect(array(
+				echo Bootstrap::formSelectBlock(array(
 					'name'=>'typeTMP',
 					'label'=>$L->g('Type'),
 					'selected'=>$page->type(),
@@ -281,6 +178,23 @@ echo Bootstrap::formOpen(array(
 					'tip'=>''
 				));
 
+				// Position
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'position',
+					'label'=>$L->g('Position'),
+					'tip'=>$L->g('Field used when ordering content by position'),
+					'value'=>$page->position()
+				));
+
+				// Tags
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'tags',
+					'label'=>$L->g('Tags'),
+					'placeholder'=>'',
+					'tip'=>$L->g('Write the tags separated by comma'),
+					'value'=>$page->tags()
+				));
+
 				// Parent
 				try {
 					$parentKey = $page->parent();
@@ -289,7 +203,7 @@ echo Bootstrap::formOpen(array(
 				} catch (Exception $e) {
 					$parentValue = '';
 				}
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'parentTMP',
 					'label'=>$L->g('Parent'),
 					'placeholder'=>'',
@@ -297,36 +211,95 @@ echo Bootstrap::formOpen(array(
 					'value'=>$parentValue
 				));
 
-				// Position
-				echo Bootstrap::formInputText(array(
-					'name'=>'position',
-					'label'=>$L->g('Position'),
-					'tip'=>$L->g('Field used when ordering content by position'),
-					'value'=>$page->position()
-				));
-
 				// Template
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'template',
 					'label'=>$L->g('Template'),
 					'placeholder'=>'',
-					'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.'),
-					'value'=>$page->template()
+					'value'=>$page->template(),
+					'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.')
 				));
 
-				// Tags
-				echo Bootstrap::formInputText(array(
-					'name'=>'tags',
-					'label'=>$L->g('Tags'),
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'externalCoverImage',
+					'label'=>$L->g('External cover image'),
+					'placeholder'=>"https://",
+					'value'=>$externalCoverImage,
+					'tip'=>$L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
+				));
+
+				// Username
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'',
+					'label'=>$L->g('Author'),
 					'placeholder'=>'',
-					'tip'=>$L->g('Write the tags separated by comma'),
-					'value'=>$page->tags()
+					'value'=>$login->username(),
+					'tip'=>'',
+					'disabled'=>true
 				));
+			?>
+			<script>
+			$(document).ready(function() {
+				// Changes in External cover image input
+				$("#jsexternalCoverImage").change(function() {
+					$("#jscoverImage").val( $(this).val() );
+				});
 
-				echo Bootstrap::formTitle(array('title'=>$L->g('SEO')));
+				// Parent
+				$("#jsparentTMP").change(function() {
+					var parent = $("#jsparentTMP").val();
+					if (parent.length===0) {
+						$("#jsparent").val("");
+					}
+				});
 
+				// Generate slug when the user type the title
+				$("#jstitle").keyup(function() {
+					var text = $(this).val();
+					var parent = $("#jsparent").val();
+					var currentKey = "";
+					var ajax = new bluditAjax();
+					var callBack = $("#jsslug");
+					ajax.generateSlug(text, parent, currentKey, callBack);
+				});
+
+				// Datepicker
+				$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
+
+				// Parent autocomplete
+				var parentsXHR;
+				var parentsList; // Keep the parent list returned to get the key by the title page
+				$("#jsparentTMP").autoComplete({
+					minChars: 1,
+					source: function(term, response) {
+						// Prevent call inmediatly another ajax request
+						try { parentsXHR.abort(); } catch(e){}
+						// Get the list of parent pages by title (term)
+						parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
+							function(data) {
+								parentsList = data;
+								term = term.toLowerCase();
+								var matches = [];
+								for (var title in data) {
+									if (~title.toLowerCase().indexOf(term))
+										matches.push(title);
+								}
+								response(matches);
+						});
+					},
+					onSelect: function(event, term, item) {
+						// parentsList = array( pageTitle => pageKey )
+						var parentKey = parentsList[term];
+						$("#jsparent").attr("value", parentKey);
+					}
+				});
+			});
+			</script>
+		</div>
+		<div id="nav-seo" class="tab-pane fade" role="tabpanel" aria-labelledby="seo-tab">
+			<?php
 				// Friendly URL
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'slug',
 					'tip'=>$L->g('URL associated with the content'),
 					'label'=>$L->g('Friendly URL'),
@@ -334,16 +307,17 @@ echo Bootstrap::formOpen(array(
 					'value'=>$page->slug()
 				));
 
+				// Robots
 				echo Bootstrap::formCheckbox(array(
 					'name'=>'noindex',
 					'label'=>'Robots',
 					'labelForCheckbox'=>$L->g('apply-code-noindex-code-to-this-page'),
 					'placeholder'=>'',
-					'class'=>'mt-4',
 					'checked'=>$page->noindex(),
 					'tip'=>$L->g('This tells search engines not to show this page in their search results.')
 				));
 
+				// Robots
 				echo Bootstrap::formCheckbox(array(
 					'name'=>'nofollow',
 					'label'=>'',
@@ -353,6 +327,7 @@ echo Bootstrap::formOpen(array(
 					'tip'=>$L->g('This tells search engines not to follow links on this page.')
 				));
 
+				// Robots
 				echo Bootstrap::formCheckbox(array(
 					'name'=>'noarchive',
 					'label'=>'',
@@ -362,58 +337,18 @@ echo Bootstrap::formOpen(array(
 					'tip'=>$L->g('This tells search engines not to save a cached copy of this page.')
 				));
 			?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
 		</div>
 	</div>
-	<script>
-	$(document).ready(function() {
-		// Generate slug when the user type the title
-		$("#jstitle").keyup(function() {
-			var text = $(this).val();
-			var parent = $("#jsparent").val();
-			var currentKey = "";
-			var ajax = new bluditAjax();
-			var callBack = $("#jsslug");
-			ajax.generateSlug(text, parent, currentKey, callBack);
-		});
-
-		// Datepicker
-		$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
-
-		// Parent autocomplete
-		var parentsXHR;
-		var parentsList; // Keep the parent list returned to get the key by the title page
-		$("#jsparentTMP").autoComplete({
-			minChars: 1,
-			source: function(term, response) {
-				// Prevent call inmediatly another ajax request
-				try { parentsXHR.abort(); } catch(e){}
-				// Get the list of parent pages by title (term)
-				parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
-					function(data) {
-						parentsList = data;
-						term = term.toLowerCase();
-						var matches = [];
-						for (var title in data) {
-							if (~title.toLowerCase().indexOf(term))
-								matches.push(title);
-						}
-						response(matches);
-				});
-			},
-			onSelect: function(event, term, item) {
-				// parentsList = array( pageTitle => pageKey )
-				var parentKey = parentsList[term];
-				$("#jsparent").attr("value", parentKey);
-			}
-		});
-	});
-	</script>
 </div>
 
+<!-- Title -->
+<div class="form-group mt-1 mb-1">
+	<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="<?php echo $page->title() ?>" placeholder="<?php $L->p('Enter title') ?>">
+</div>
+
+<!-- Editor -->
+<div id="jseditor" class="editable h-100" style=""><?php echo $page->contentRaw(false) ?></div>
+
 </form>
 
 <!-- Modal for Delete page -->
@@ -476,18 +411,13 @@ $(document).ready(function() {
 
 	// Autosave
 	// Autosave works when the content of the page is bigger than 100 characters
-	var currentContent = editorGetContent();
 	setInterval(function() {
 			var uuid = $("#jsuuid").val();
 			var title = $("#jstitle").val();
 			var content = editorGetContent();
-			// Call autosave only when the user change the content
-			if (currentContent!=content) {
-				currentContent = content;
-				var ajax = new bluditAjax();
-				// showAlert is the function to display an alert defined in alert.php
-				ajax.autosave(uuid, title, content, showAlert);
-			}
+			var ajax = new bluditAjax();
+			// showAlert is the function to display an alert defined in alert.php
+			ajax.autosave(uuid, title, content, showAlert);
 	},1000*60*AUTOSAVE_INTERVAL);
 
 });
diff --git a/bl-kernel/admin/views/new-content.php b/bl-kernel/admin/views/new-content.php
index 428fa04a..e6ba67ac 100644
--- a/bl-kernel/admin/views/new-content.php
+++ b/bl-kernel/admin/views/new-content.php
@@ -47,200 +47,97 @@ echo Bootstrap::formOpen(array(
 ?>
 
 <!-- TOOLBAR -->
-<div>
-	<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
-		<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><?php $L->p('Images') ?></button>
-		<button type="button" class="btn btn-light" id="jscoverImageOpenModal" data-toggle="modal" data-target="#jscoverImageModal"><?php $L->p('Cover image') ?></button>
-		<button type="button" class="btn btn-light" id="jscategoryOpenModal" data-toggle="modal" data-target="#jscategoryModal"><?php $L->p('Category') ?><span class="option"></span></button>
-		<button type="button" class="btn btn-light" id="jsdescriptionOpenModal" data-toggle="modal" data-target="#jsdescriptionModal"><?php $L->p('Description') ?><span class="option"></span></button>
-		<button type="button" class="btn btn-light" id="jsoptionsOpenModal" data-toggle="modal" data-target="#jsoptionsModal"><?php $L->p('More options') ?></button>
+<div id="jseditorToolbar">
+	<div id="jseditorToolbarRight" class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
+		<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="oi oi-image"></span> <?php $L->p('Images') ?></button>
+		<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="oi oi-cog"></span> <?php $L->p('Options') ?></button>
 	</div>
 
-	<div class="btn-group btn-group-sm float-right" role="group" aria-label="Basic example">
+	<div id="jseditorToolbarLeft" class="btn-group btn-group-sm" role="group" aria-label="Basic example">
 		<button type="button" class="btn btn-primary" id="jsbuttonSave"><?php $L->p('Publish') ?></button>
 		<button type="button" class="btn btn-secondary" id="jsbuttonDraft"><?php $L->p('Save as draft') ?></button>
 		<a href="<?php echo HTML_PATH_ADMIN_ROOT ?>dashboard" class="btn btn-secondary"><?php $L->p('Cancel') ?></a>
 	</div>
 </div>
-
-<!-- Title -->
-<div class="form-group mt-1 mb-1">
-	<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="" placeholder="<?php $L->p('Enter title') ?>">
-</div>
-
-<!-- Editor -->
-<div id="jseditor" class="editable h-100 mb-1"></div>
-
-<!-- Modal for Cover Image -->
-<div id="jscoverImageModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('Cover Image') ?></h5>
-			</div>
-			<div class="modal-body">
-				<div>
-					<img id="jscoverImagePreview" style="width: 350px; height: 200px;" class="mx-auto d-block" alt="Cover image preview" src="<?php echo HTML_PATH_ADMIN_THEME_IMG ?>default.svg" />
-				</div>
-				<div class="mt-2 text-center">
-					<button type="button" id="jsbuttonSelectCoverImage" class="btn btn-primary btn-sm"><?php echo $L->g('Select cover image') ?></button>
-					<button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
-				</div>
-
-				<hr>
-
-				<?php
-					echo Bootstrap::formTitle(array('title'=>$L->g('External Cover Image')));
-
-					echo Bootstrap::formInputTextBlock(array(
-						'name'=>'externalCoverImage',
-						'placeholder'=>"https://",
-						'value'=>'',
-						'tip'=>$L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
-					));
-				?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
-		</div>
-	</div>
-	<script>
+<script>
 	$(document).ready(function() {
-		$("#jsexternalCoverImage").change(function() {
-			$("#jscoverImage").val( $(this).val() );
+		$("#jsoptionsSidebar").on("click", function() {
+			$("#jseditorSidebar").toggle();
+			$("#jsshadow").toggle();
 		});
 
-		$("#jscoverImagePreview").on("click", function() {
-			openMediaManager();
-		});
-
-		$("#jsbuttonSelectCoverImage").on("click", function() {
-			openMediaManager();
-		});
-
-		$("#jsbuttonRemoveCoverImage").on("click", function() {
-			$("#jscoverImage").val('');
-			$("#jscoverImagePreview").attr('src', HTML_PATH_ADMIN_THEME_IMG+'default.svg');
+		$("#jsshadow").on("click", function() {
+			$("#jseditorSidebar").toggle();
+			$("#jsshadow").toggle();
 		});
 	});
-	</script>
-</div>
+</script>
 
-<!-- Modal for Categories -->
-<div id="jscategoryModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('Category') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-					echo Bootstrap::formSelectBlock(array(
-						'name'=>'category',
-						'label'=>'',
-						'selected'=>'',
-						'class'=>'',
-						'emptyOption'=>'- '.$L->g('Uncategorized').' -',
-						'options'=>$categories->getKeyNameArray()
-					));
-				?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
+<!-- SIDEBAR OPTIONS -->
+<div id="jseditorSidebar">
+	<nav>
+		<div class="nav nav-tabs" id="nav-tab" role="tablist">
+			<a class="nav-link active show" id="nav-general-tab"  data-toggle="tab" href="#nav-general"  role="tab" aria-controls="general"><?php $L->p('General') ?></a>
+			<a class="nav-link" id="nav-advanced-tab" data-toggle="tab" href="#nav-advanced" role="tab" aria-controls="advanced"><?php $L->p('Advanced') ?></a>
+			<a class="nav-link" id="nav-seo-tab" data-toggle="tab" href="#nav-seo" role="tab" aria-controls="seo"><?php $L->p('SEO') ?></a>
 		</div>
-	</div>
-	<script>
-	$(document).ready(function() {
-		function setCategoryBox(value) {
-			var selected = $("#jscategory option:selected");
-			var value = selected.val().trim();
-			if (value) {
-				$("#jscategoryOpenModal").find("span.option").html(": "+selected.text());
-			} else {
-				$("#jscategoryOpenModal").find("span.option").html("");
-			}
-		}
+	</nav>
 
-		// Set the current category selected
-		setCategoryBox();
-
-		// When the user select the category update the category button
-		$("#jscategory").on("change", function() {
-			setCategoryBox();
-		});
-	});
-	</script>
-</div>
-
-<!-- Modal for Description -->
-<div id="jsdescriptionModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('Description') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-					echo Bootstrap::formTextareaBlock(array(
-						'name'=>'description',
-						'label'=>'',
-						'selected'=>'',
-						'class'=>'',
-						'value'=>'',
-						'rows'=>3,
-						'placeholder'=>$L->get('this-field-can-help-describe-the-content')
-					));
-				?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
-		</div>
-	</div>
-	<script>
-	$(document).ready(function() {
-		function setDescriptionBox(value) {
-			var value = $("#jsdescription").val();
-			if (value) {
-				value = ": "+$.trim(value).substring(0, 30).split(" ").slice(0, -1).join(" ") + "...";
-			}
-			$("#jsdescriptionOpenModal").find("span.option").html(value);
-		}
-
-		// Set the current description
-		setDescriptionBox();
-
-		// When the user write the description update the description button
-		$("#jsdescription").on("change", function() {
-			setDescriptionBox();
-		});
-	});
-	</script>
-</div>
-
-<!-- Modal for More options -->
-<div id="jsoptionsModal" class="modal" tabindex="-1" role="dialog">
-	<div class="modal-dialog modal-lg">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title"><?php $L->p('More options') ?></h5>
-			</div>
-			<div class="modal-body">
-				<?php
-				// Username
-				echo Bootstrap::formInputText(array(
-					'name'=>'',
-					'label'=>$L->g('Author'),
-					'placeholder'=>'',
-					'value'=>$login->username(),
-					'tip'=>'',
-					'disabled'=>true
+	<div class="tab-content pr-3 pl-3">
+		<div id="nav-general" class="tab-pane fade show active" role="tabpanel" aria-labelledby="general-tab">
+			<?php
+				// Category
+				echo Bootstrap::formSelectBlock(array(
+					'name'=>'category',
+					'label'=>$L->g('Category'),
+					'selected'=>'',
+					'class'=>'',
+					'emptyOption'=>'- '.$L->g('Uncategorized').' -',
+					'options'=>$categories->getKeyNameArray()
 				));
 
+				// Description
+				echo Bootstrap::formTextareaBlock(array(
+					'name'=>'description',
+					'label'=>$L->g('Description'),
+					'selected'=>'',
+					'class'=>'',
+					'value'=>'',
+					'rows'=>3,
+					'placeholder'=>$L->get('this-field-can-help-describe-the-content')
+				));
+			?>
+
+			<!-- Cover Image -->
+			<label class="mt-4 mb-2 pb-2 border-bottom text-uppercase w-100"><?php $L->p('Cover Image') ?></label>
+			<div>
+				<img id="jscoverImagePreview" class="mx-auto d-block w-100" alt="Cover image preview" src="<?php echo HTML_PATH_ADMIN_THEME_IMG ?>default.svg" />
+			</div>
+			<div class="mt-2 text-center">
+				<button type="button" id="jsbuttonSelectCoverImage" class="btn btn-primary btn-sm"><?php echo $L->g('Select cover image') ?></button>
+				<button type="button" id="jsbuttonRemoveCoverImage" class="btn btn-secondary btn-sm"><?php echo $L->g('Remove cover image') ?></button>
+			</div>
+			<script>
+				$(document).ready(function() {
+					$("#jscoverImagePreview").on("click", function() {
+						openMediaManager();
+					});
+
+					$("#jsbuttonSelectCoverImage").on("click", function() {
+						openMediaManager();
+					});
+
+					$("#jsbuttonRemoveCoverImage").on("click", function() {
+						$("#jscoverImage").val('');
+						$("#jscoverImagePreview").attr('src', HTML_PATH_ADMIN_THEME_IMG+'default.svg');
+					});
+				});
+			</script>
+		</div>
+		<div id="nav-advanced" class="tab-pane fade" role="tabpanel" aria-labelledby="advanced-tab">
+			<?php
 				// Date
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'date',
 					'label'=>$L->g('Date'),
 					'placeholder'=>'',
@@ -249,7 +146,7 @@ echo Bootstrap::formOpen(array(
 				));
 
 				// Type
-				echo Bootstrap::formSelect(array(
+				echo Bootstrap::formSelectBlock(array(
 					'name'=>'typeTMP',
 					'label'=>$L->g('Type'),
 					'selected'=>'',
@@ -261,8 +158,24 @@ echo Bootstrap::formOpen(array(
 					'tip'=>''
 				));
 
+				// Position
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'position',
+					'label'=>$L->g('Position'),
+					'tip'=>$L->g('Field used when ordering content by position'),
+					'value'=>$pages->nextPositionNumber()
+				));
+
+				// Tags
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'tags',
+					'label'=>$L->g('Tags'),
+					'placeholder'=>'',
+					'tip'=>$L->g('Write the tags separated by comma')
+				));
+
 				// Parent
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'parentTMP',
 					'label'=>$L->g('Parent'),
 					'placeholder'=>'',
@@ -270,16 +183,8 @@ echo Bootstrap::formOpen(array(
 					'value'=>''
 				));
 
-				// Position
-				echo Bootstrap::formInputText(array(
-					'name'=>'position',
-					'label'=>$L->g('Position'),
-					'tip'=>$L->g('Field used when ordering content by position'),
-					'value'=>$pages->nextPositionNumber()
-				));
-
 				// Template
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'template',
 					'label'=>$L->g('Template'),
 					'placeholder'=>'',
@@ -287,34 +192,95 @@ echo Bootstrap::formOpen(array(
 					'tip'=>$L->g('Write a template name to filter the page in the theme and change the style of the page.')
 				));
 
-				// Tags
-				echo Bootstrap::formInputText(array(
-					'name'=>'tags',
-					'label'=>$L->g('Tags'),
-					'placeholder'=>'',
-					'tip'=>$L->g('Write the tags separated by comma')
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'externalCoverImage',
+					'label'=>$L->g('External cover image'),
+					'placeholder'=>"https://",
+					'value'=>'',
+					'tip'=>$L->g('Set a cover image from external URL, such as a CDN or some server dedicated for images.')
 				));
 
-				echo Bootstrap::formTitle(array('title'=>$L->g('SEO')));
+				// Username
+				echo Bootstrap::formInputTextBlock(array(
+					'name'=>'',
+					'label'=>$L->g('Author'),
+					'placeholder'=>'',
+					'value'=>$login->username(),
+					'tip'=>'',
+					'disabled'=>true
+				));
+			?>
+			<script>
+			$(document).ready(function() {
+				// Changes in External cover image input
+				$("#jsexternalCoverImage").change(function() {
+					$("#jscoverImage").val( $(this).val() );
+				});
 
+				// Generate slug when the user type the title
+				$("#jstitle").keyup(function() {
+					var text = $(this).val();
+					var parent = $("#jsparent").val();
+					var currentKey = "";
+					var ajax = new bluditAjax();
+					var callBack = $("#jsslug");
+					ajax.generateSlug(text, parent, currentKey, callBack);
+				});
+
+				// Datepicker
+				$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
+
+				// Parent autocomplete
+				var parentsXHR;
+				var parentsList; // Keep the parent list returned to get the key by the title page
+				$("#jsparentTMP").autoComplete({
+					minChars: 1,
+					source: function(term, response) {
+						// Prevent call inmediatly another ajax request
+						try { parentsXHR.abort(); } catch(e){}
+						// Get the list of parent pages by title (term)
+						parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
+							function(data) {
+								parentsList = data;
+								term = term.toLowerCase();
+								var matches = [];
+								for (var title in data) {
+									if (~title.toLowerCase().indexOf(term))
+										matches.push(title);
+								}
+								response(matches);
+						});
+					},
+					onSelect: function(event, term, item) {
+						// parentsList = array( pageTitle => pageKey )
+						var parentKey = parentsList[term];
+						$("#jsparent").attr("value", parentKey);
+					}
+				});
+			});
+			</script>
+		</div>
+		<div id="nav-seo" class="tab-pane fade" role="tabpanel" aria-labelledby="seo-tab">
+			<?php
 				// Friendly URL
-				echo Bootstrap::formInputText(array(
+				echo Bootstrap::formInputTextBlock(array(
 					'name'=>'slug',
 					'tip'=>$L->g('URL associated with the content'),
 					'label'=>$L->g('Friendly URL'),
 					'placeholder'=>$L->g('Leave empty for autocomplete by Bludit.')
 				));
 
+				// Robots
 				echo Bootstrap::formCheckbox(array(
 					'name'=>'noindex',
 					'label'=>'Robots',
 					'labelForCheckbox'=>$L->g('apply-code-noindex-code-to-this-page'),
 					'placeholder'=>'',
-					'class'=>'mt-4',
 					'checked'=>false,
 					'tip'=>$L->g('This tells search engines not to show this page in their search results.')
 				));
 
+				// Robots
 				echo Bootstrap::formCheckbox(array(
 					'name'=>'nofollow',
 					'label'=>'',
@@ -324,6 +290,7 @@ echo Bootstrap::formOpen(array(
 					'tip'=>$L->g('This tells search engines not to follow links on this page.')
 				));
 
+				// Robots
 				echo Bootstrap::formCheckbox(array(
 					'name'=>'noarchive',
 					'label'=>'',
@@ -333,58 +300,18 @@ echo Bootstrap::formOpen(array(
 					'tip'=>$L->g('This tells search engines not to save a cached copy of this page.')
 				));
 			?>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-primary" data-dismiss="modal"><?php $L->p('Done') ?></button>
-			</div>
 		</div>
 	</div>
-	<script>
-	$(document).ready(function() {
-		// Generate slug when the user type the title
-		$("#jstitle").keyup(function() {
-			var text = $(this).val();
-			var parent = $("#jsparent").val();
-			var currentKey = "";
-			var ajax = new bluditAjax();
-			var callBack = $("#jsslug");
-			ajax.generateSlug(text, parent, currentKey, callBack);
-		});
-
-		// Datepicker
-		$("#jsdate").datetimepicker({format:DB_DATE_FORMAT});
-
-		// Parent autocomplete
-		var parentsXHR;
-		var parentsList; // Keep the parent list returned to get the key by the title page
-		$("#jsparentTMP").autoComplete({
-			minChars: 1,
-			source: function(term, response) {
-				// Prevent call inmediatly another ajax request
-				try { parentsXHR.abort(); } catch(e){}
-				// Get the list of parent pages by title (term)
-				parentsXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-parents", {query: term},
-					function(data) {
-						parentsList = data;
-						term = term.toLowerCase();
-						var matches = [];
-						for (var title in data) {
-							if (~title.toLowerCase().indexOf(term))
-								matches.push(title);
-						}
-						response(matches);
-				});
-			},
-			onSelect: function(event, term, item) {
-				// parentsList = array( pageTitle => pageKey )
-				var parentKey = parentsList[term];
-				$("#jsparent").attr("value", parentKey);
-			}
-		});
-	});
-	</script>
 </div>
 
+<!-- Title -->
+<div id="jseditorTitle" class="form-group mt-1 mb-1">
+	<input id="jstitle" name="title" type="text" class="form-control form-control-lg rounded-0" value="" placeholder="<?php $L->p('Enter title') ?>">
+</div>
+
+<!-- Editor -->
+<div id="jseditor" class="editable h-100 mb-1"></div>
+
 </form>
 
 <!-- Modal for Media Manager -->
diff --git a/bl-languages/en.json b/bl-languages/en.json
index 6d078dab..945f8dc6 100644
--- a/bl-languages/en.json
+++ b/bl-languages/en.json
@@ -318,7 +318,7 @@
     "user": "User",
     "date-format-format": "Date format: <code>YYYY-MM-DD Hours:Minutes:Seconds<\/code>",
     "start-typing-a-page-title-to-see-a-list-of-suggestions": "Start typing a page title to see a list of suggestions.",
-    "field-used-when-ordering-content-by-position": "Field used when ordering content by position",
+    "field-used-when-ordering-content-by-position": "Field used when ordering content by position.",
     "write-a-template-name-to-filter-the-page-in-the-theme-and-change-the-style-of-the-page": "Write a template name to filter the page in the theme and change the style of the page.",
     "write-the-tags-separated-by-comma": "Write the tags separated by comma.",
     "apply-code-noindex-code-to-this-page": "Apply <code>noindex<\/code> to this page.",