diff --git a/resources/edit.html b/resources/edit.html index 69daa43..8e77417 100644 --- a/resources/edit.html +++ b/resources/edit.html @@ -12,24 +12,23 @@ -
- -
-
+
+ -
- + \ No newline at end of file diff --git a/resources/public/js/publishing.js b/resources/public/js/publishing.js index c1377e6..9828ec5 100644 --- a/resources/public/js/publishing.js +++ b/resources/public/js/publishing.js @@ -4,10 +4,7 @@ var $ = function(id) { var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)"); var timer = null; var timerDelay = iosDetected ? 800 : 400; -var show = function(elem) { - elem.style.display = "block" -} -var $note, $action, $preview, $plain_password, $input_elems, $dashed_line, $proposed_title, updatePreview; +var $note, $action, $preview, $plain_password, updatePreview; var backendTimer; function md2html(input) { @@ -15,6 +12,7 @@ function md2html(input) { } function saveDraft() { + if ($action == "UPDATE") return; console.log("draft autosave..."); localStorage.setItem("draft", $note.value); } @@ -22,18 +20,13 @@ function saveDraft() { function onLoad() { $note = $("note"); $action = $("action").value; - $preview = $("preview"); + $preview = $("previewPane"); $plain_password = $("plain-password"); - $proposed_title = $("proposed-title"); - $input_elems = $("input-elems"); - $dashed_line = $("dashed-line"); updatePreview = function() { clearTimeout(timer); var content = $note.value; var delay = Math.min(timerDelay, timerDelay * (content.length / 400)); timer = setTimeout(function() { - show($dashed_line); - show($input_elems); $preview.innerHTML = md2html(content); }, delay); }; diff --git a/resources/public/style.css b/resources/public/style.css index 11deb0e..a403a58 100644 --- a/resources/public/style.css +++ b/resources/public/style.css @@ -11,6 +11,7 @@ html, body { margin: 0; color: #333; background: #fff; + height: 100%; } #hero { @@ -57,11 +58,6 @@ a:visited { border: 1px solid #333; } -textarea, fieldset { - border: none; - margin: 1em; -} - .landing-button { line-height: 200%; display: inline-block; @@ -204,23 +200,6 @@ pre { outline: 0px none transparent; } -textarea { - height: 500px; - font-size: 1em; - font-family: Courier; - border-radius: 5px; -} - -.hidden { - display: none; -} - -#dashed-line { - margin-bottom: 3em; - margin-top: 3em; - border-bottom: 1px dashed#888; -} - table { border-collapse: collapse; width: 100%; @@ -242,16 +221,49 @@ td { padding: 0.5em; } -/* MEDIA QUERIES */ +/* MEDIA QUERIES */ @media screen and (min-width: 1024px) { - textarea, article, .central-element { + article, .central-element { width: 800px; } } @media screen and (max-width: 1023px) { - textarea, article, .central-element { + article, .central-element { width: 90%; } } + +#editContainer { + display: flex; + flex-direction: row; + height: 100%; +} + +#previewPane { + flex: 1 0 46%; + height: 100%; + overflow-y: auto; + margin: 0 !important; + padding: 1em; + border-left: 1px solid #444; +} + +#editPane { + flex: 1 0 46%; + height: 100%; + padding: 1em; +} + +textarea { + font-size: 1em; + font-family: Courier; + border-radius: 5px; + width: 100%; + height: 93%; +} + +textarea, fieldset { + border: none; +}