crappyrules
/
notehub
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

preview added to the left

master
Christian Müller 10 years ago
parent
2357caf598
commit
15bfde9a8c
3 changed files with 45 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      resources/edit.html
  2. 13
      resources/public/js/publishing.js
  3. 62
      resources/public/style.css

11
resources/edit.html
Unescape View File

@ -12,24 +12,23 @@
</head> </head>
<body onload="onLoad()"> <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="action" name="action" value="%ACTION%" type="hidden" />
<input id="id" name="id" value="%ID%" type="hidden" /> <input id="id" name="id" value="%ID%" type="hidden" />
<input id="password" name="password" type="hidden" /> <input id="password" name="password" type="hidden" />
<input id="session" name="session" type="hidden" value="%SESSION%" /> <input id="session" name="session" type="hidden" value="%SESSION%" />
<input id="signature" name="signature" type="hidden" /> <input id="signature" name="signature" type="hidden" />
<textarea id="note" name="note">%CONTENT%</textarea> <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="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"> <input class="button ui-elem" id="publish-button" type="submit" value="Publish">
<br> <br>
<br> <br>
</fieldset> </fieldset>
</form> </form>
<article id="previewPane"></article>
</div> </div>
</body> </body>
</html> </html>

13
resources/public/js/publishing.js
Unescape View File

@ -4,10 +4,7 @@ var $ = function(id) {
var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)"); var iosDetected = navigator.userAgent.match("(iPad|iPod|iPhone)");
var timer = null; var timer = null;
var timerDelay = iosDetected ? 800 : 400; 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; var backendTimer;
function md2html(input) { function md2html(input) {
@ -15,6 +12,7 @@ function md2html(input) {
} }
function saveDraft() { function saveDraft() {
if ($action == "UPDATE") return;
console.log("draft autosave..."); console.log("draft autosave...");
localStorage.setItem("draft", $note.value); localStorage.setItem("draft", $note.value);
} }
@ -22,18 +20,13 @@ function saveDraft() {
function onLoad() { function onLoad() {
$note = $("note"); $note = $("note");
$action = $("action").value; $action = $("action").value;
$preview = $("preview"); $preview = $("previewPane");
$plain_password = $("plain-password"); $plain_password = $("plain-password");
$proposed_title = $("proposed-title");
$input_elems = $("input-elems");
$dashed_line = $("dashed-line");
updatePreview = function() { updatePreview = function() {
clearTimeout(timer); clearTimeout(timer);
var content = $note.value; var content = $note.value;
var delay = Math.min(timerDelay, timerDelay * (content.length / 400)); var delay = Math.min(timerDelay, timerDelay * (content.length / 400));
timer = setTimeout(function() { timer = setTimeout(function() {
show($dashed_line);
show($input_elems);
$preview.innerHTML = md2html(content); $preview.innerHTML = md2html(content);
}, delay); }, delay);
}; };

62
resources/public/style.css
Unescape View File

@ -11,6 +11,7 @@ html, body {
margin: 0; margin: 0;
color: #333; color: #333;
background: #fff; background: #fff;
height: 100%;
} }
#hero { #hero {
@ -57,11 +58,6 @@ a:visited {
border: 1px solid #333; border: 1px solid #333;
} }
textarea, fieldset {
border: none;
margin: 1em;
}
.landing-button { .landing-button {
line-height: 200%; line-height: 200%;
display: inline-block; display: inline-block;
@ -204,23 +200,6 @@ pre {
outline: 0px none transparent; 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 { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
@ -242,16 +221,49 @@ td {
padding: 0.5em; padding: 0.5em;
} }
/* MEDIA QUERIES */ /* MEDIA QUERIES */
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
textarea, article, .central-element { article, .central-element {
width: 800px; width: 800px;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
textarea, article, .central-element { article, .central-element {
width: 90%; 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;
}

Write Preview
Loading…
Cancel
Save