tableau feature added to editing page; styling improved

resources/edit.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html style="height: 100%">
+<html style="height: 100%;">
 
 <head>
   <title>NoteHub &mdash; New Page</title>
@@ -23,11 +23,14 @@
       <fieldset id="input-elems">
         <input class="ui-elem" id="plain-password" name="plain-password" placeholder="Password for editing" type="text">&nbsp;
         <input class="button ui-elem" id="publish-button" type="submit" value="Publish">
+        <span id="tableau">
+          0 words
+        </span>
         <br>
         <br>
       </fieldset>
     </form>
-    <article id="previewPane"></article>
+    <div id="previewPane"><article id="draft"></article></div>
   </div>
 </body>
 

resources/public/js/publishing.js

@@ -4,7 +4,8 @@ var $ = function(id) {
 var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)");
 var timer = null;
 var timerDelay = iosDetected ? 800 : 400;
-var $note, $action, $preview, $plain_password, updatePreview;
+var $note, $action, $preview, $plain_password, 
+  updatePreview, $tableau;
 var backendTimer;
 
 function md2html(input) {
@@ -14,13 +15,15 @@ function md2html(input) {
 function saveDraft() {
   if ($action == "UPDATE") return;
   console.log("draft autosave...");
+  $tableau.innerHTML = "Draft autosaved."
   localStorage.setItem("draft", $note.value);
 }
 
 function onLoad() {
   $note = $("note");
   $action = $("action").value;
-  $preview = $("previewPane");
+  $preview = $("draft");
+  $tableau = $("tableau");
   $plain_password = $("plain-password");
   updatePreview = function() {
     clearTimeout(timer);
@@ -28,6 +31,7 @@ function onLoad() {
     var delay = Math.min(timerDelay, timerDelay * (content.length / 400));
     timer = setTimeout(function() {
       $preview.innerHTML = md2html(content);
+      $tableau.innerHTML = content.split(/\s+/).length + " words";
     }, delay);
   };
   if ($action == "UPDATE") updatePreview();

resources/public/style.css

@@ -249,33 +249,54 @@ td {
 
 #editContainer {
 	display: flex;
-	flex-direction: row;
 	height: 100%;
 }
 
 #previewPane {
-	flex: 1 0 46%;
+	flex: 1 0 50%;
+	display: flex;
 	height: 100%;
 	overflow-y: auto;
 	margin: 0 !important;
-	padding: 1em;
 	border-left: 1px solid #444;
 }
 
+#previewPane article {
+	flex: 1 0;
+	padding: 2em;
+}
+
+#previewPane article h1 {
+	margin: 0;
+}
+
 #editPane {
-	flex: 1 0 46%;
+	display: flex;
+	flex-direction: column;
+	flex: 1 0 50%;
 	height: 100%;
-	padding: 1em;
 }
 
 textarea {
 	font-size: 1em;
 	font-family: Courier;
 	border-radius: 5px;
-	width: 100%;
-	height: 93%;
+	flex: 1 0;
+	margin: 1em;
 }
 
 textarea, fieldset {
 	border: none;
 }
+
+fieldset {
+	padding-left: 1em;
+	padding-right: 1em;
+	font-family: sans-serif;
+}
+
+#tableau {
+	font-weight: lighter;
+	color: #054;
+	float: right;
+}