From 0c2a092e8d8ad33a1c306ee9efca0da96eb56415 Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Sat, 24 Nov 2018 22:29:02 -0600
Subject: way to much for a single commit

---
 design/sass/_forms.scss                  | 34 ++++++++++++++
 design/sass/_global.scss                 |  7 ++-
 design/sass/_header.scss                 |  1 +
 design/sass/_mixins.scss                 |  1 +
 design/sass/_notes.scss                  | 71 +++++++++++++++++++++++++++++
 design/sass/screenv1.scss                |  2 +
 design/templates/base.html               | 29 ++++++------
 design/templates/notes/create.html       | 18 --------
 design/templates/notes/notes_create.html | 52 +++++++++++++++++++++
 design/templates/notes/notes_detail.html | 78 ++++++++++++++++++++++++++++++++
 design/templates/notes/notes_list.html   |  2 +-
 design/templates/pages/page.html         | 16 +++++++
 12 files changed, 274 insertions(+), 37 deletions(-)
 create mode 100644 design/sass/_notes.scss
 delete mode 100644 design/templates/notes/create.html
 create mode 100644 design/templates/notes/notes_create.html
 create mode 100644 design/templates/notes/notes_detail.html

(limited to 'design')

diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index cac2442..d6b0931 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -86,6 +86,35 @@ table {
         border: 1px solid $link_hover_color;
     }
 }
+.btn-small {
+    @include fontsize(10);
+    @include smcaps;
+}
+.btn-subtle {
+    padding: 3px 5px;
+    border: none; //1px solid $body_font_light;
+    color: $body_font_light !important;
+    background: white;
+    &:hover {
+        background: white;
+        border: none; //1px solid;
+        color: $link_color !important;
+    }
+}
+.btn-accent {
+    padding: 3px 5px;
+    border: 1px solid $text_accent;
+    background: $text_accent;
+    color: white !important;
+    outline: $text_accent;
+    &:hover {
+        background: $text_accent;
+        border: 1px solid $text_accent;
+    }
+}
+.btn-inline {
+    display: inline;
+}
 .form-narrow {
     margin: 0 auto;
     max-width: 60%;
@@ -94,3 +123,8 @@ table {
     @include fontsize(24);
     @include fancy-serif;
 }
+.highlight {
+    border: 1px solid lighten($body_font_light, 20);
+    border-radius: 4px;
+    padding: 6px;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index e852855..d394042 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -153,11 +153,11 @@ h3 {
 }
 .wrapper {
     @include constrain_wide;
-    margin-top: 5rem;
+    //margin-top: 5rem;
 }
 //**************  Universals ************************
 .hide {
-    display: none;
+    display: none !important;
 }
 
 .strike {
@@ -183,6 +183,9 @@ h3 {
 .sm {
     max-width: 80px;
 }
+.left-margin-2 {
+    margin-left: 2px;
+}
 //**************  other global classes ************************
 .sans {
     @include generic_sans;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 8b8c3da..7f98419 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -13,6 +13,7 @@ header {
         }
     }
     .right {
+        margin-top: 4px;
         float: right;
     }
 }
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 1aeeb83..bfccc17 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -9,6 +9,7 @@ $headline_font_serif: Georgia, 'Times New Roman', serif;
 $body_p_font: normal 100% / 1.5 "proxima-nova",helvetica,arial,sans-serif;
 $body_font_color: #6a6a6a;
 $body_font_light: #b3aeae;
+$text_accent: #1be223;
 
 $archive_p_line_height: 1.6;
 //$light;
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
new file mode 100644
index 0000000..09d234a
--- /dev/null
+++ b/design/sass/_notes.scss
@@ -0,0 +1,71 @@
+.note-title {
+    @include fontsize(22);
+}
+.note-header {
+    @extend %clearfix;
+}
+.note-header-float {
+    width: 30%;
+    float: right;
+    text-align: right;
+}
+.note-time, .note-url {
+    text-align: right;
+    @include fancy-sans;
+    @include fontsize(13);
+}
+.note-container {
+    @include constrain(80%);
+}
+#note-body {
+    @include fancy-sans;
+    @include fontsize(15);
+}
+.inactive {
+    .ql-editor {
+        padding:0;
+        line-height:inherit;
+        p {
+            padding:inherit;
+            margin-bottom:10px;
+        }
+    }
+    .ql-toolbar {
+        display:none;
+    }
+    .ql-container.ql-snow {
+        border:none;
+        font-family:inherit;
+        font-size:inherit;
+    }
+}
+.note-list-container {
+    max-width: 300px;
+    ul {
+        padding: 0;
+        list-style-type: none;
+    }
+    li {
+        @include fontsize(13);
+        height: 4.5rem;
+        box-shadow: 0 -1px 0 #e7e2ee inset;
+        margin: 0;
+        a {
+            color: lighten($body_font_color, 15);
+            text-decoration: none;
+        }
+    }
+    h4 {
+        @include fontsize(15);
+        margin: 0;
+        padding: 8px 0 8px 6px;
+        font-weight: normal;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    .note-preview {
+        padding-left: 6px;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
index 73a1fd1..d54027e 100644
--- a/design/sass/screenv1.scss
+++ b/design/sass/screenv1.scss
@@ -6,3 +6,5 @@
 @import "_footer.scss";
 @import "_forms.scss";
 @import "_modal.scss";
+@import "_breadcrumbs.scss";
+@import "_notes.scss";
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>&copy; Luxagraf Software. Problems or questions? Contact <a href="{% url 'pages' slug='terms-of-service' %}" title="">support@notes.tld</a>.</p> 
+        <p>&copy; 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%}
-- 
cgit v1.2.3-70-g09d2