From 6c37dcaa2c6d202e75b11a61877f8ac203fea55d Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 20 Aug 2018 11:26:44 +0900
Subject: [PATCH] Update guideline template

---
 app/server/templates/admin/guideline.html | 137 ++++++++--------------
 1 file changed, 52 insertions(+), 85 deletions(-)

diff --git a/app/server/templates/admin/guideline.html b/app/server/templates/admin/guideline.html
index 9dedfb4d..b23c7f32 100644
--- a/app/server/templates/admin/guideline.html
+++ b/app/server/templates/admin/guideline.html
@@ -1,94 +1,61 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
-{% block content-area %}
-
-<div class="card">
-  <header class="card-header">
-    <p class="card-header-title">
-      Label editor
-    </p>
-    <a href="#" class="card-header-icon" aria-label="more options">
-      <span class="icon">
-        <i class="fas fa-angle-down" aria-hidden="true"></i>
-      </span>
-    </a>
-  </header>
-
-  <div class="card-content">
-    <div class="has-text-right">
-
-      <div class="field is-grouped is-grouped-multiline has-text-weight-bold" style="padding-bottom:.75rem;">
-        <div class="control" v-for="label in labels">
-          <div class="tags has-addons">
-            <span class="tag is-medium" v-bind:style="{ color: label.text_color, 'background-color': label.background_color }">
-              <button class="delete is-small" style="margin-right:.25rem;margin-left:-.375rem;" @click="removeLabel(label)"></button>
-              [[ label.text ]]
-            </span>
-            <span class="tag is-medium">[[ label.shortcut ]]</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Preview</label>
-        <div class="control column is-6">
-          <div class="tags has-addons" style="font-weight:700;">
-            <a class="tag is-medium" v-bind:style="{ color: textColor, backgroundColor: backgroundColor }">
-              [[ labelText ]]
-            </a>
-            <span class="tag is-medium">[[ selectedShortkey ]]</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Label Name</label>
-        <div class="control column is-6">
-          <input class="input" type="text" placeholder="Text input" v-model="labelText">
-        </div>
-      </div>
-
-      <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Shortcut Key</label>
-        <div class="control column is-6">
-          <div class="select">
-            <select v-model="selectedShortkey">
-              <option disabled value="">Please select one</option>
-              {% for ch in 'abcdefghijklmnopqrstuvwxyz' %}
-              <option>{{ ch }}</option>
-              {% endfor %}
-            </select>
-          </div>
-        </div>
-      </div>
+{% block header %}
 
-      <div class="field is-horizontal bordered-row">
-
-        <label class="label column is-3" style="margin-bottom:0;">Background Color</label>
-        <div class="control column is-6">
-          <input class="input" type="color" v-model="backgroundColor">
-        </div>
-      </div>
-
-      <div class="field is-horizontal bordered-row">
-        <label class="label column is-3" style="margin-bottom:0;">Text Color</label>
-        <div class="control column is-6">
-          <input class="input" type="color" v-model="textColor">
-        </div>
-      </div>
-
-      <div class="field is-grouped">
-        <div class="control">
-          <button class="button is-primary" @click="addLabel()">Add label</button>
-        </div>
-        <div class="control">
-          <button class="button is-text" @click="reset()">Reset</button>
-        </div>
-      </div>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
+<link rel="stylesheet" href="{% static 'css/admin.css' %}">
+{% endblock %}
+{% block content-area %}
+<style>
+  #editor {
+    line-height: 100%;
+  }
+  .editorMarkdown_textarea {
+    width: 100%;
+    height: 100%;
+    resize: none;
+    /*border: none;*/
+    /*border-right: 1px solid #ccc;*/
+    border: 1px solid #dbdbdb;
+    outline: none;
+    /*background-color: #fff;*/
+    font-size: 14px;
+    font-family: 'Monaco', courier, monospace;
+    padding: 20px;
+  }
+</style>
+<div id="editor" class="columns is-gapless">
+  <div class="column is-6">
+    <textarea class="editorMarkdown_textarea" :value="input" @input="update"></textarea>
+  </div>
+  <div class="column is-6 has-background-white" style="border-right: 1px solid #dbdbdb;border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb">
+    <div class="content" style="line-height: 150%;padding: 20px;">
+      <div v-html="compiledMarkdown"></div>
     </div>
   </div>
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/label.js' %}"></script>
+<script src="https://unpkg.com/marked@0.3.6"></script>
+<script src="https://unpkg.com/lodash@4.16.0"></script>
+<script>
+new Vue({
+  el: '#editor',
+  data: {
+    input: '# hello'
+  },
+  computed: {
+    compiledMarkdown: function () {
+      return marked(this.input, { sanitize: true })
+    }
+  },
+  methods: {
+    update: _.debounce(function (e) {
+      this.input = e.target.value
+    }, 300)
+  }
+})
+</script>
+
+<!--<script src="{% static 'bundle/label.js' %}"></script>-->
 {% endblock %}
\ No newline at end of file