tableau feature added to editing page; styling improved

10 years ago · 2dee4a9d1d
3 changed files with 39 additions and 11 deletions
--- a/resources/edit.html
+++ b/resources/edit.html
@ -1,5 +1,5 @@
				@@ -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 @@
				@@ -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>

--- a/resources/public/js/publishing.js
+++ b/resources/public/js/publishing.js
@ -4,7 +4,8 @@ var $ = function(id) {
				@@ -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) {
				@@ -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() {
				@@ -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();
--- a/resources/public/style.css
+++ b/resources/public/style.css
@ -249,33 +249,54 @@ td {
				@@ -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;
+}