preview added to the left

resources/edit.html

@@ -12,23 +12,22 @@
 </head>
 
 <body onload="onLoad()">
-  <article id="preview" style="flex: none; -webkit-flex: none"></article>
+  <div id="editContainer">
-  <div class="hidden" id="dashed-line"></div>
+    <form id="editPane" action="/note" autocomplete="off" method="POST">
-  <div class="central-element" style="margin-bottom: 3em">
-    <form action="/note" autocomplete="off" method="POST">
       <input id="action" name="action" value="%ACTION%" type="hidden" />
       <input id="id" name="id" value="%ID%" type="hidden" />
       <input id="password" name="password" type="hidden" />
       <input id="session" name="session" type="hidden" value="%SESSION%" />
       <input id="signature" name="signature" type="hidden" />
       <textarea id="note" name="note">%CONTENT%</textarea>
-      <fieldset class="hidden" id="input-elems">
+      <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">
         <br>
         <br>
       </fieldset>
     </form>
+    <article id="previewPane"></article>
   </div>
 </body>
 

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) {
+var $note, $action, $preview, $plain_password, updatePreview;
-  elem.style.display = "block"
-}
-var $note, $action, $preview, $plain_password, $input_elems, $dashed_line, $proposed_title, 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);
   };

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%;
@@ -245,13 +224,46 @@ td {
 /* 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;
+}