cleaned up meta ui, made editor display contextual

there were some nagging space issues in the new meta ui layout, so those
were addressed. it'll will probably change a billion more times, but
it's starting from a solid place

the text editor ui now only display when text is selected and goes away
after an operation has been completed or when text is deselected, making
the overall page editing experience streamlined

public/assets/css/dash/page-editor.css

@@ -13,7 +13,8 @@ section.meta {
   z-index: 500;
   border-radius: 3px;
   transition: all 0.2s linear;
-  /* JUST FOR TESTING, ADD FINAL TO ATOMIC */
+  font-size: 0.8em;
+  color: var(--primary);
 }
 
 /* FILE MANAGER */
@@ -34,13 +35,13 @@ main > section > div.file-manager > div.file-drop {
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 100px;
+  min-height: 108px;
   color: var(--white);
   background: var(--primary);
   vertical-align: middle;
-  border-radius: 5px;
+  border-radius: 3px;
   max-width: 900px;
-  margin: 10px auto;
+  margin: 0 auto;
 }
 
 main > section > div.file-manager > div.page-images-list,
@@ -69,19 +70,19 @@ main > section > div.file-manager > div.page-images-list > div > div.item-progre
   background: var(--primary);
 }
 
-main > section.text-editor > div.text-editor-control button {
+main > div.text-editor-control button {
   border-radius: 0;
 }
 
-main > section.text-editor > div.text-editor-control button > i {
+main > div.text-editor-control button > i {
   font-size: 1.6em;
 }
 
-main > section.text-editor > div.text-editor-control > button:nth-child(1) {
+main > div.text-editor-control > button:nth-child(1) {
   border-radius: 3px 0 0 3px;
 }
 
-main > section.text-editor > div.text-editor-control > button:nth-child(10) {
+main > div.text-editor-control > button:nth-child(10) {
   border-radius: 0 3px 3px 0;
 }
 
@@ -131,9 +132,7 @@ main > section > div.file-manager > div.page-files-list > div.audio-item > audio
 /* PAGE META */
 
 main > section > div.page-meta {
-  padding: 10px;
+  padding: 0 10px;
-  font-size: 0.8em;
-  color: var(--primary);
 }
 
 main div.page-meta textarea#post-title-text {
@@ -211,9 +210,14 @@ main section.text-editor .icon-hide {
   visibility: hidden;
 }
 
-main > section.text-editor > div.text-editor-control {
+main > div.text-editor-control {
   display: grid;
-  grid-template-columns: repeat(10, 1fr);
+  grid-template-columns: repeat(8, 1fr);
+  position: absolute;
+  z-index: 400;
+  left: 35px;
+  top: 105px;
+  transition: all 0.2s linear;
 }
 
 .control-freeze {

public/assets/scripts/dash/app/controllers/PageEditor.js

@@ -18,7 +18,8 @@ export default class PostEditor {
 	//--------------------------
 	constructor() {
 		this.processing = false;
-		let self = 'this';
+		this.textSelected = false;
+		let self = this;
 		this.cr = new ContentRequest(null, document.getElementById('notify-progress'));
 		this.mr = new Maintenance(null, null);
 		this.urlPieces = document.URL.split('/');
@@ -38,6 +39,33 @@ export default class PostEditor {
 				.querySelector('.file-manager')
 				.getAttribute('data-layout');
 		}
+
+		let textEdit = document.getElementById('edit');
+		let control = document.querySelector('.text-editor-control');
+		textEdit.addEventListener('select', e => {
+			if (!self.textSelected) {
+				self.textSelected = true;
+				control.classList.remove('hide-el');
+				control.classList.add('show-grid');
+			}
+		});
+
+		textEdit.addEventListener('click', e => {
+			if (self.textSelected) {
+				self.textSelected = false;
+				control.classList.add('hide-el');
+				control.classList.remove('show-grid');
+			}
+		});
+
+		textEdit.addEventListener('blur', e => {
+			if (self.textSelected) {
+				self.textSelected = false;
+				control.classList.add('hide-el');
+				control.classList.remove('show-grid');
+			}
+		});
+
 		if (document.getElementById('edit')) {
 			this.editor = new TextEditor(
 				document.getElementById('edit'),

public/assets/scripts/dash/app/ui/TextEditor.js

@@ -25,6 +25,7 @@ class TextEditor extends EventEmitter {
 		document.body.addEventListener('scroll', e => {
 			var fixLimit = scrollLimit;
 			//console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
+			/**
 			if (document.body.scrollTop + 5 >= fixLimit) {
 				document
 					.querySelector('.text-editor-control')
@@ -34,6 +35,7 @@ class TextEditor extends EventEmitter {
 					.querySelector('.text-editor-control')
 					.classList.remove('control-freeze');
 			}
+            **/
 		});
 		document.getElementById('edit').addEventListener('input', e => {
 			let result_element = document.querySelector('#highlight-content');

resources/views/back/page.blade.php

@@ -2,8 +2,10 @@
 @section('title', 'The Dash | Editing '. $editTitle)
 
     @section('main-content')
+        @include('includes.editor') 
         <section class="meta hide-el">
             <div data-index="{{$id}}" data-uuid="{{$uuid}}" data-slug="{{$slug}}" data-layout="{{$layout}}" class="file-manager">
+                ADD ATTACHMENTS
                 @if($feature == '')
                     <div class="file-drop">
                         <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
@@ -48,13 +50,13 @@
                     @include('includes.options') 
                 </div>
                 <div class="page-updated">
-                    UPDATED
+                    <strong>UPDATED</strong><br />
                     <span id="post-date" type="text">
                         {{$updated}}
                     </span>
                 </div>
                 <div class="page-created">
-                    CREATED
+                    <strong>CREATED</strong><br />
                     <span id="post-date" type="text">
                         {{$date}}
                     </span>
@@ -68,7 +70,6 @@
             <div class="page-title">
                 <textarea id="post-title-text" class="input-dark" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{$editTitle}}</textarea>
             </div>
-            @include('includes.editor') 
             <div class="edit-post-wrapper">
                 <textarea id="edit" spellcheck="false" class="language-md">{{$content}}</textarea>
                 <pre id="highlight"><code id="highlight-content" class="language-md"></code></pre>

resources/views/includes/editor.blade.php

@@ -1,4 +1,4 @@
-<div class="text-editor-control">
+<div class="text-editor-control hide-el">
     <button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
         <svg id="edit-bold" class="icon">
             <use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold" />