From 2dee4a9d1d60dfe875fa34e0437ef9ea49216ba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20M=C3=BCller?= Date: Tue, 3 Nov 2015 18:38:51 +0100 Subject: [PATCH] tableau feature added to editing page; styling improved --- resources/edit.html | 7 +++++-- resources/public/js/publishing.js | 8 +++++-- resources/public/style.css | 35 ++++++++++++++++++++++++------- 3 files changed, 39 insertions(+), 11 deletions(-) diff --git a/resources/edit.html b/resources/edit.html index a3a45ef..ea1d91e 100644 --- a/resources/edit.html +++ b/resources/edit.html @@ -1,5 +1,5 @@ - + NoteHub — New Page @@ -23,11 +23,14 @@
  + + 0 words +

-
+
diff --git a/resources/public/js/publishing.js b/resources/public/js/publishing.js index 9828ec5..ac4cf32 100644 --- a/resources/public/js/publishing.js +++ b/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(); diff --git a/resources/public/style.css b/resources/public/style.css index a6422df..c63cd98 100644 --- a/resources/public/style.css +++ b/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; +} \ No newline at end of file