updates

_embed/public/css/styles.css

@@ -60,7 +60,7 @@ button:hover {
 .container {
     width: 95%;
     max-width: 960px;
-    margin: 0 auto;
+    margin: 1em auto 0;
 }
 
 i.spin {
@@ -68,155 +68,73 @@ i.spin {
 }
 
 
-/* EDITOR */
+/* * * * * * * * * * * * * * * *
+ *            EDITOR           *
+ * * * * * * * * * * * * * * * */
 
-#editor .frontmatter {
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
-    column-count: 2;
-    -webkit-column-gap: 1em;
-    -moz-column-gap: 1em;
-    column-gap: 1em;
-    margin-bottom: 1em;
-}
+#editor {}
 
-#editor .group,
-#editor #editor-source {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    display: block;
-    border-radius: .2em;
-    padding: .5em;
-    margin-bottom: 1em;
-    -webkit-column-break-inside: avoid;
-    page-break-inside: avoid;
-    break-inside: avoid;
-    background-color: #fff;
-    display: inline-block;
-    width: 100%;
-    break-inside: avoid-column;
-}
-
-#editor .block {
-    border-bottom: 1px solid #eee;
-    margin-bottom: .5em;
-    padding-bottom: .5em;
-}
-
-#editor .block:last-child {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-#editor .block label {
-    display: block;
-    color: #212121;
-    font-weight: 500;
-}
-
-#editor h3 {
-    margin: 0 0 .5em;
-    display: inline-block;
-    vertical-align: middle;
-    width: calc(100% - 2.5em);
-}
-
-#editor .block input,
-#editor .block .actions {
-    display: inline-block;
-}
-
-#editor .block input,
-#editor .block textarea,
-#editor fieldset input,
-#editor fieldset textarea {
-    border: 0;
-    background-color: transparent;
-    overflow: hidden;
-    color: #9E9E9E;
-    resize: none;
-    width: calc(100% - 1.5em);
-}
-
-#editor .action {
-    border: 0;
-    background-color: transparent;
-    font-size: .8em;
-    margin: 0;
-}
-
-#editor .delete,
-#editor .add {
-    color: #ddd;
-}
-
-#editor i {
-    padding: 0;
-}
-
-#editor .add:hover i {
-    color: #8BC34A;
-}
-
-#editor .delete:hover i {
-    color: #E53935;
-}
-
-#editor .add:hover i,
-#editor .delete:hover i {
-    background-color: transparent;
-}
-
-#editor fieldset>.action {
-    opacity: 0;
-}
-
-#editor fieldset:hover>.action {
-    opacity: 1;
-}
-
-#editor textarea[name="content"] {
+#editor .source {
     display: none;
 }
 
-#editor fieldset fieldset {
-    margin-left: 1em;
+#editor .content {
+    background: #fff;
+    padding: 1em 0;
 }
 
-#editor button span {
-    vertical-align: middle;
-    transition: 0.2s ease-in-out all;
+#editor #ace,
+#editor h2,
+#editor .frontmatter {
+    width: 95%;
+    max-width: 960px;
+    margin: 1em auto 0;
 }
 
-#editor button span i {
-    vertical-align: sub;
-    font-size: 1.3rem;
-    margin-right: .2em;
+#editor h2 {
+    margin: 1.5em auto 1em;
+    color: rgba(0, 0, 0, 0.3);
+    font-weight: 500;
 }
 
-#editor #publish {
-    background-color: #167169;
+#editor .ace_gutter {
+    background-color: #fff;
 }
 
-#editor .group.temp {
-    background-color: #f5f5f5;
+
+/* * * * * * * * * * * * * * * *
+ *       EDITOR - MARKDOWN     *
+ * * * * * * * * * * * * * * * */
+
+.frontmatter {
+    -moz-column-count: 2;
+    -webkit-column-count: 2;
+    column-count: 2;
 }
 
-#editor .group.temp label {
-    font-weight: lighter;
-    font-size: .8em;
-    margin-bottom: 1em;
-    color: #7d7d7d;
+.frontmatter label {
+    display: block;
 }
 
-#editor .group.temp input {
-    color: #212121;
+.frontmatter label,
+.frontmatter h3 {
+    font-weight: 500;
+    margin: .2em auto;
 }
 
-#editor .right {
-    display: inline-block;
-    text-align: right;
-    float: right;
+fieldset {
+    border: 0;
+    padding: 0;
+}
+
+.frontmatter>fieldset h3,
+.frontmatter>.group h3 {
+    font-size: 1.5em;
+}
+
+fieldset h3,
+.group h3 {
+    font-size: 0.9em;
 }
 
 
@@ -762,9 +680,10 @@ header .actions {
 
 #listing.list {
     flex-direction: column;
-    margin-top: 3.25em;
+    padding-top: 3.25em;
     width: 100%;
     max-width: 100%;
+    margin: 0;
 }
 
 #listing.list .item {

_embed/public/js/editor.js

@@ -1,6 +1,8 @@
 'use strict';
 
-function textareaAutoGrow() {
+var editor = {};
+
+editor.textareaAutoGrow = function() {
     let autogrow = function() {
         this.style.height = '5px';
         this.style.height = this.scrollHeight + 'px';
@@ -157,35 +159,40 @@ function addFrontMatterItem(event) {
 }
 
 document.addEventListener("DOMContentLoaded", (event) => {
-    textareaAutoGrow();
+    if (!document.getElementById('editor')) return;
 
+    editor.textareaAutoGrow();
     templates.arrayItem = document.getElementById("array-item-template");
     templates.base = document.getElementById('base-template');
     templates.objectItem = document.getElementById("object-item-template");
     templates.temporary = document.getElementById('temporary-template');
+    buttons.save = document.querySelector('#save');
 
     let container = document.getElementById('editor'),
-        button = document.querySelector('#save'),
         kind = container.dataset.kind;
 
     if (kind != 'frontmatter-only') {
-        let editor = document.getElementById('editor-source'),
+        let editor = document.querySelector('.content #ace'),
             mode = editor.dataset.mode,
             textarea = document.querySelector('textarea[name="content"]'),
-            aceEditor = ace.edit('editor-source');
-        aceEditor.getSession().setMode("ace/mode/" + mode);
-        aceEditor.getSession().setValue(textarea.value);
-        aceEditor.getSession().on('change', function() {
-            textarea.value = aceEditor.getSession().getValue();
-        });
-        aceEditor.setOptions({
+            aceEditor = ace.edit('ace'),
+            options = {
                 wrap: true,
                 maxLines: Infinity,
                 theme: "ace/theme/github",
                 showPrintMargin: false,
                 fontSize: "1em",
                 minLines: 20
+            };
+
+        aceEditor.getSession().setMode("ace/mode/" + mode);
+        aceEditor.getSession().setValue(textarea.value);
+        aceEditor.getSession().on('change', function() {
+            textarea.value = aceEditor.getSession().getValue();
         });
+
+        if (mode == "markdown") options.showGutter = false;
+        aceEditor.setOptions(options);
     }
 
     let deleteFrontMatterItemButtons = document.getElementsByClassName('delete');
@@ -209,7 +216,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
             data.content = data.content.toString();
         }
 
-        let html = button.querySelector('i').changeToLoading(),
+        let html = buttons.save.querySelector('i').changeToLoading(),
             request = new XMLHttpRequest();
 
         request.open("PUT", toWebDavURL(window.location.pathname));
@@ -217,7 +224,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
         request.send(JSON.stringify(data));
         request.onreadystatechange = function() {
             if (request.readyState == 4) {
-                button.querySelector('i').changeToDone((request.status != 201), html);
+                buttons.save.querySelector('i').changeToDone((request.status != 201), html);
             }
         }
     }

_embed/templates/editor.tmpl

@@ -1,8 +1,10 @@
 {{ define "content" }}
-{{ with .Data }}
-<div id="editor" class="container" data-kind="{{ .Class }}">
-    <form method="POST" action="./">
+{{- with .Data }}
+<form id="editor" {{ if eq .Mode "markdown" }}class="markdown"{{ end }} data-kind="{{ .Class }}">
     {{- if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
+    {{- if (eq .Class "complete")}}
+    <h2>Metadata</h2>
+    {{- end }}
     <div class="frontmatter" data-type="parent">
         {{- template "blocks" .FrontMatter }}
         <div class="button add">Add field</div>
@@ -11,16 +13,15 @@
 
     {{ if or (eq .Class "content-only") (eq .Class "complete") }}
         {{ if (eq .Class "complete")}}
-            <h3>Body</h3>
+        <h2>Body</h2>
         {{ end }}
         <div class="content">
-                <div id="editor-source" data-mode="{{ .Mode }}"></div>
-                <textarea name="content">{{ .Content }}</textarea>
+            <div id="ace" data-mode="{{ .Mode }}"></div>
+            <textarea class="source" name="content">{{ .Content }}</textarea>
         </div>
     {{ end }}
-    </form>
-</div>
-{{ end }}
+</form>
+{{- end }}
 
 <template id="base-template">
     <fieldset id="" data-type="">

_embed/templates/listing.tmpl

@@ -33,7 +33,7 @@
     </div>
     
     {{ if and (eq .NumDirs 0) (eq .NumFiles 0) }}
-    <h2 class="message">It feels lonely here.</h2>
+    <h2 class="message">It feels lonely here :'(</h2>
     {{ end }}
     
     {{- if not (eq .NumDirs 0)}}