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 @@
-
+
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