1 files changed, 78 insertions, 0 deletions
diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html
new file mode 100644
index 0000000..bf46ab8
--- /dev/null
+++ b/design/templates/notes/notes_detail.html
@@ -0,0 +1,78 @@
+{% extends 'base.html' %}
+{% block extrastyles %}
+<link rel="stylesheet" href="/media/quill.snow.css" />
+{% endblock %}
+{% block breadcrumbs %}
+<li><a href="{%url 'notes:note-list' user.username %}">Notes</a></li>
+{% endblock %}
+
+{% block content %}
+<main>
+    <article class="note-container">
+        <header class="note-header">
+            <button class="hide btn btn-accent" id="edit-toggle-btn">Edit</button>
+            <div class="note-header-float">
+                <h2 class="note-time">{{object.date_created|date:"M d, Y"}}</h2>
+                {% if object.url %}<h3 class="note-url"><a class="btn btn-small btn-subtle" href="{{object.url}}">Source</a><a class="btn btn-small btn-subtle left-margin-2" href="object.cache">Archive</a></h3>{% endif %}
+            </div>
+        </header>
+        <h1 id="note-title" class="note-title">{{object.title}}</h1>
+        <div id="q-container" class="inactive"><div id="note-body">{% if object.body_html %}{{object.body_html|safe}}{%else%}{{object.body_text}}{%endif%}</div></div>
+        <form action="" method="post" id="note-edit-form">{% csrf_token %}
+            {% for field in form %}{% if field.name in "title body_text" %}
+            <div class="hide">{{field}}</div>
+            {% endif%}{% endfor %}
+        <input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
+        </form>
+    </article>
+    <aside class="note-list-container">
+        <div class="">
+            <ul>{% for obj in notes_list %}
+                <li>
+                    <a href="{% url 'notes:note-detail' user.username  obj.slug %}">
+                        <h4>{{obj.title}}</h4>
+                        <div class="note-preview">{{obj.body_text|truncatewords:12}}</div>
+                    </a>
+                </li>
+            {% endfor %}</ul>
+        </div>
+    </aside>
+</main>
+{% endblock %}
+
+{% block jsinclude %}
+<script src="/media/js/highlight.pack.js"></script>
+<script src="/media/js/quill.min.js"></script>
+{% endblock %}
+    <script>
+{% block jsdomready %}
+    var btn = document.getElementById("edit-toggle-btn"),
+        qcontainer = document.getElementById('q-container'),
+        title = document.getElementById('note-title'),
+        form = document.getElementById('note-edit-form'),
+        note_html = document.createElement('textarea'),
+        note_qjson = document.createElement('textarea');
+
+    window.editing = false;
+    window.quillchange = false;
+
+    btn.classList.remove('hide');
+    initQuill("#note-body");
+    note_html.setAttribute('name', 'body_html');
+    note_html.setAttribute('class', 'hide');
+    note_html.setAttribute('id', 'id_body_html');
+    note_qjson.setAttribute('name', 'body_qjson');
+    note_qjson.setAttribute('id', 'id_body_qjson');
+    note_qjson.setAttribute('class', 'hide');
+    form.appendChild(note_html);
+    form.appendChild(note_qjson);
+    document.getElementById("btn-js-hide").classList.add("hide");
+    btn.addEventListener('click', function(){edit_note(this, title, qcontainer, window.quill, "{% url 'notes-api-detail' object.pk %}" )}, false)
+
+{%endblock%}
+    </script>
+
+'indent
+'align
+'direction
+'code-block