diff options
author | luxagraf <sng@luxagraf.net> | 2018-11-24 22:29:02 -0600 |
---|---|---|
committer | luxagraf <sng@luxagraf.net> | 2018-11-24 22:29:02 -0600 |
commit | 0c2a092e8d8ad33a1c306ee9efca0da96eb56415 (patch) | |
tree | 0aaf48f20771c97ec30e005ef818ef6ce4856097 /design/templates | |
parent | 7a284139f6b97bb06548e69d47eef188bc99099d (diff) |
way to much for a single commit
Diffstat (limited to 'design/templates')
-rw-r--r-- | design/templates/base.html | 29 | ||||
-rw-r--r-- | design/templates/notes/create.html | 18 | ||||
-rw-r--r-- | design/templates/notes/notes_create.html | 52 | ||||
-rw-r--r-- | design/templates/notes/notes_detail.html | 78 | ||||
-rw-r--r-- | design/templates/notes/notes_list.html | 2 | ||||
-rw-r--r-- | design/templates/pages/page.html | 16 |
6 files changed, 160 insertions, 35 deletions
diff --git a/design/templates/base.html b/design/templates/base.html index 6b6ef8c..f14e5df 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -1,4 +1,4 @@ -<!DOCTYPE html> +{% load static %}<!DOCTYPE html> <!--[if lt IE 8]> <html class="lte8"> <![endif]--> <!--[if IE 8]> <html class="ie8 lte8"> <![endif]--> <!--[if IE 9]> <html class="ie9"> <![endif]--> @@ -10,9 +10,10 @@ <meta property="og:description" content="Note taking for writers"> <meta property="og:site_name" content="Notes"> <meta property="og:image" content=""> -<link rel="stylesheet" href="/media/screenv1.css?{{now}}" type="text/css"> +<link rel="stylesheet" href="/media/screenv1.css?{%now "u"%}" type="text/css"> +{% block extrastyles %}{%endblock%} <link rel="icon" type="image/png" href=""> -<link rel="manifest" href="/webmanifest.json"> +<!--<link rel="manifest" href="/webmanifest.json">--> <link rel="apple-touch-icon" sizes="256x256" href=""> </head> <body class="{% block bodyclass %}{% endblock %}"> @@ -37,11 +38,17 @@ </header> </div> <div class="wrapper"> + <ul class="breadcrumb" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> + <li> + <a href="/" title="home" itemprop="url"><span itemprop="title">Home</span></a> + </li> + {% block breadcrumbs %}{% endblock %} + </ul> {% block content %} {% endblock %} </div> <footer> - <p>© Luxagraf Software. Problems or questions? Contact <a href="{% url 'pages' slug='terms-of-service' %}" title="">support@notes.tld</a>.</p> + <p>© Arkhangelsk Software. Problems or questions? Contact <a href="{% url 'pages' slug='terms-of-service' %}" title="">support@notes.tld</a>.</p> <nav> <ul> <li><a href="{% url 'pages' slug='terms-of-service' %}" title="">Terms of Service</a></li> @@ -56,21 +63,11 @@ {% block extra %} {%endblock%} <script async src="/media/js/package.min.js"></script> +{% block jsinclude %}{%endblock%} <script> // Waiting for the DOM to load document.addEventListener("DOMContentLoaded", function () { - // Select your overlay trigger - var trigger = document.querySelector('#overlay-trigger'); - trigger.addEventListener('click', function(e){ - e.preventDefault(); - novicell.overlay.create({ - 'selector': trigger.getAttribute('data-element'), - 'class': 'selector-overlay', - "onCreate": function() { console.log('created'); }, - "onLoaded": function() { console.log('loaded'); }, - "onDestroy": function() { console.log('Destroyed'); } - }); - }); + {% block jsdomready %}{%endblock%} }); </script> </body> diff --git a/design/templates/notes/create.html b/design/templates/notes/create.html deleted file mode 100644 index 3bd765d..0000000 --- a/design/templates/notes/create.html +++ /dev/null @@ -1,18 +0,0 @@ -{% extends 'base.html' %} -{% block content %} -<main> - <h1>Create a new note</h1> -<form action="" method="post"> -{% csrf_token %} -{{ form.non_field_errors }} -{% for field in form %} -<fieldset {% if field.errors %}class="error"{%endif%}> -{{field.label_tag}} -{{field}} -{% if field.errors %}{{field.errors}}{% endif %} -</fieldset> -{% endfor %} -<p><input class="btn" value="submit" type="submit" /></p> -</form> -</main> -{% endblock %} diff --git a/design/templates/notes/notes_create.html b/design/templates/notes/notes_create.html new file mode 100644 index 0000000..9bbdb26 --- /dev/null +++ b/design/templates/notes/notes_create.html @@ -0,0 +1,52 @@ +{% extends 'base.html' %} + +{% block extrastyles %} +<link rel="stylesheet" href="/media/quill.snow.css" /> +{% endblock %} +{% block content %} +<main> + <h1>Create a new note</h1> + <form id="new-note-form" action="{% url 'notes:note-create' %}" method="post"> +{% csrf_token %} +{{ form.non_field_errors }} +{% for field in form %} +<fieldset class="{% if field.errors %}error {%endif%}{% if field.name == 'body_qjson' or field.name == 'body_html' %}hide {%endif%}" id="fs-{{field.name}}" > +{{field.label_tag}} +{{field}} +{% if field.errors %}{{field.errors}}{% endif %} +</fieldset> +{% if field.name == 'body_qjson' %} +<div id="q-container"> + <div id="note-body"></div> +</div> +{% endif %} +{% endfor %} +<p><input class="btn btn-inline" value="submit" type="submit" /></p> +</form> +</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 note_text = document.getElementById('id_body_text'); + note_text.innerHTML = "q"; + var plaintext = document.getElementById("fs-body_text"); + plaintext.classList.add('hide') + initQuill("#note-body"); + var form = document.getElementById('new-note-form'); + console.log(form); + form.onsubmit = function() { + var note_qjson = document.getElementById('id_body_qjson'); + note_qjson.innerHTML= JSON.stringify(window.quill.getContents()); + var note_html = document.getElementById('id_body_html'); + note_html.innerHTML = window.quill.root.innerHTML; + var note_text = document.getElementById('id_body_text'); + note_text.innerHTML = window.quill.getText(); + }; +{% endblock %} +</script> 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 diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html index 4451588..8066369 100644 --- a/design/templates/notes/notes_list.html +++ b/design/templates/notes/notes_list.html @@ -3,7 +3,7 @@ <main> <h1> Notes</h1> <ul>{% for obj in object_list %} - <li><a href="{{obj.get_absolute_url}}">{{obj}}</a></li> + <li><a href="{% url 'notes:note-detail' user.username obj.slug %}">{{obj}}</a></li> {% endfor %}</ul> </main> {% endblock %} diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html index 91d4732..3feff75 100644 --- a/design/templates/pages/page.html +++ b/design/templates/pages/page.html @@ -13,3 +13,19 @@ </div> {% endif %} {%endblock%} +{% block jsdomready %} +{% if login_form %} + // Select your overlay trigger + var trigger = document.querySelector('#overlay-trigger'); + trigger.addEventListener('click', function(e){ + e.preventDefault(); + novicell.overlay.create({ + 'selector': trigger.getAttribute('data-element'), + 'class': 'selector-overlay', + "onCreate": function() { console.log('created'); }, + "onLoaded": function() { console.log('loaded'); }, + "onDestroy": function() { console.log('Destroyed'); } + }); + }); +{% endif %} +{%endblock%} |