preview added to the left

10 years ago · 15bfde9a8c
3 changed files with 45 additions and 41 deletions
--- a/resources/edit.html
+++ b/resources/edit.html
@ -12,23 +12,22 @@
				@@ -12,23 +12,22 @@
 </head>

 <body onload="onLoad()">
-  <article id="preview" style="flex: none; -webkit-flex: none"></article>
-  <div class="hidden" id="dashed-line"></div>
-  <div class="central-element" style="margin-bottom: 3em">
-    <form action="/note" autocomplete="off" method="POST">
+  <div id="editContainer">
+    <form id="editPane" 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>

--- a/resources/public/js/publishing.js
+++ b/resources/public/js/publishing.js
@ -4,10 +4,7 @@ var $ = function(id) {
				@@ -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) {
				@@ -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() {
				@@ -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);
  };
--- a/resources/public/style.css
+++ b/resources/public/style.css
@ -11,6 +11,7 @@ html, body {
				@@ -11,6 +11,7 @@ html, body {
 	margin: 0;
 	color: #333;
 	background: #fff;
+	height: 100%;
 }

 #hero {
@ -57,11 +58,6 @@ a:visited {
				@@ -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 {
				@@ -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 {
				@@ -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;
+}