cleaned up JS and made modal handler.

16 files changed, 398 insertions, 227 deletions

diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index cce0e0f..d8a6a03 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -148,6 +148,10 @@ table {
 }
 .btn-inline {
     display: inline;
+    width: auto;
+}
+.note-save {
+    float: right;
 }
 .form-narrow {
     margin: 0 auto;
@@ -171,7 +175,14 @@ select {
     background: white;
     border-radius: 4px;
 }
-#id_tags {
+.note-detail #id_tags {
     @include fontsize(13);
     padding: 8px;
 }
+#fs-notebook{
+    label {
+        top: -1.5rem;
+        left: .25rem;
+    }
+    margin: 3rem 0 1.5rem;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 9ef2e99..b858866 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -90,7 +90,7 @@ blockquote:before {
     @include fontsize(68);
     content: '\201C';
     position: absolute;
-    top: -1rem;
+    top: -1.35rem;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 3rem;
@@ -152,7 +152,7 @@ h3 {
     }
 }
 .wrapper {
-    @include constrain(1440px);
+    @include constrain(1280px);
     //margin-top: 5rem;
 }
 //**************  Universals ************************
@@ -189,6 +189,12 @@ h3 {
 .right-padding-0 {
     padding-right: 0 !important;
 }
+.top-margin-0 {
+    margin-top: 0 !important;
+}
+.bottom-margin-0 {
+    margin-bottom: 0 !important;
+}
 .center {
     text-align: center;
     margin-right: auto;
@@ -201,9 +207,15 @@ h3 {
 .vertical li {
     display: block;
 }
+.block {
+    display: block;
+}
+.inline-block {
+    display: inline-block;
+}
 .single-col {
     display: block;
-    @include constrain_narrow;
+    @include constrain(66%);
 }
 .wide{
     display: block;
@@ -212,6 +224,12 @@ h3 {
 .small > * {
     @include fontsize(14);
 }
+.hed-small {
+    @include fontsize(22);
+    @include fancy_sans;
+    margin-bottom: .5rem;
+    margin-top: 2rem;
+}
 //**************  other global classes ************************
 .sans {
     @include generic_sans;
diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss
index 57a7e51..dd21816 100644
--- a/design/sass/_modal.scss
+++ b/design/sass/_modal.scss
@@ -1,112 +1,103 @@
-/**
- * Component: Overlay
- */
-/* BACKDROP */
-.novi-backdrop {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 7000;
-  position: fixed;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: rgba(0, 0, 0, 0.75);
-  opacity: 0;
-  animation-name: fadeIn;
-  animation-duration: .4s;
-  animation-fill-mode: forwards;
+#overlay{
+    font-family:Lato;
+    position:fixed;
+    width:100vw;
+    height:100vh;
+    overflow:hidden;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    animation:overlay .3s forwards ease;
+    background-color:rgba(0,0,0,.8);
+    transform:scale(1);
+    transform-origin:center center;
+    z-index: 2000;
+    display: block;  
+    > div {
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform:translate(-50%,-50%);
+    }
+    header{
+        @include fancy_sans;
+        @include fontsize(18);
+        padding: 1rem 1rem 1rem 0;
+        margin-left: 0;
+    }
 }
-/* OVERLAY */
-.novi-overlay {
-  text-align: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
+.top {
+    z-index: 10000;
 }
-.novi-overlay:before {
-  content: '';
-  display: inline-block;
-  height: 10%;
-  vertical-align: middle;
-}
-.novi-overlay__container {
-  width: 100%;
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 auto;
-  text-align: left;
-  z-index: 8000;
-  padding: 0 15px;
-}
-.novi-overlay__content {
-  position: relative;
-  background: #FFF;
-  padding: 40px;
-  width: auto;
-  margin: 15px auto;
-  width: 100%;
-  max-width: 700px;
-  animation-name: fadeZoomIn;
-  animation-duration: .4s;
-  opacity: 0;
-  animation-fill-mode: forwards;
-  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-  border-radius: 8px;
-}
-.novi-overlay__content--video {
-  padding: 0;
-  height: 360px;
-}
-.novi-overlay__content--video .novi-overlay-close {
-  top: -25px;
-  right: 0;
-}
-/* CLOSE BUTTON */
-.novi-overlay-close {
-  padding: 0;
-  background: none;
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  display: block;
-  width: 15px;
-  height: 15px;
-  z-index: 1;
-  border: 0;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: 100% 0;
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIxLjkgMjEuOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjEuOSAyMS45IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8cGF0aCBkPSJNMTQuMSwxMS4zYy0wLjItMC4yLTAuMi0wLjUsMC0wLjdsNy41LTcuNWMwLjItMC4yLDAuMy0wLjUsMC4zLTAuN3MtMC4xLTAuNS0wLjMtMC43bC0xLjQtMS40QzIwLDAuMSwxOS43LDAsMTkuNSwwICBjLTAuMywwLTAuNSwwLjEtMC43LDAuM2wtNy41LDcuNWMtMC4yLDAuMi0wLjUsMC4yLTAuNywwTDMuMSwwLjNDMi45LDAuMSwyLjYsMCwyLjQsMFMxLjksMC4xLDEuNywwLjNMMC4zLDEuN0MwLjEsMS45LDAsMi4yLDAsMi40ICBzMC4xLDAuNSwwLjMsMC43bDcuNSw3LjVjMC4yLDAuMiwwLjIsMC41LDAsMC43bC03LjUsNy41QzAuMSwxOSwwLDE5LjMsMCwxOS41czAuMSwwLjUsMC4zLDAuN2wxLjQsMS40YzAuMiwwLjIsMC41LDAuMywwLjcsMC4zICBzMC41LTAuMSwwLjctMC4zbDcuNS03LjVjMC4yLTAuMiwwLjUtMC4yLDAuNywwbDcuNSw3LjVjMC4yLDAuMiwwLjUsMC4zLDAuNywwLjNzMC41LTAuMSwwLjctMC4zbDEuNC0xLjRjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjcgIHMtMC4xLTAuNS0wLjMtMC43TDE0LjEsMTEuM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==);
+@keyframes modal{
+  from{
+	-webkit-transform: scale(0.5);
+	-moz-transform: scale(0.5);
+	-ms-transform: scale(0.5);
+	transform: scale(0.5);
+	opacity: 0;
+	-webkit-transition: all 0.4s;
+	-moz-transition: all 0.4s;
+	transition: all 0.4s;
+  };
+  to{
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+	opacity: 1;
+  }
 }
-.novi-overlay-close:hover,
-.novi-overlay-close:focus,
-.novi-overlay-close:active {
-  outline: none;
-  cursor: pointer;
+@keyframes overlay{
+  from{
+    background-color:rgba(0,0,0,0);
+  };
+  to{
+    background-color:rgba(0,0,0,.8);
+  }
 }
-/* HELPER CLASSES */
-.no-scroll {
-  overflow: hidden;
+#overlay-wrapper {
+    max-width: 52%;
+    width: 90%;
 }
-@keyframes fadeZoomIn {
-  from {
-    opacity: 0;
-    transform: scale(0.5) translateY(300px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+#modal {
+    min-height: 330px;
+    padding: 0 1rem 1rem 1rem;
+    background-color: white;
+    border-radius: 4px;
+    overflow:hidden;
+    animation:modal .2s forwards ease;
+    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5);
+    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5);
+    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5);
+
+
+    & > div {
+        color: #424242;
+        background-color: white;
+    }
+    // specific fixes for notebook create form
+    #nb-create-form { width: 99%;}
+    .flex-wrapper {
+        display: block;
+        margin-top: .5rem;
+        #color-picker {
+            margin-top: 3rem; 
+            margin-left: .25rem; 
+        }
+        .nb-name { width: 100%;}
+    }
+    input[type="submit"] {
+        float: right;
+    }
+
 }
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+#hed-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & > * {
+        width: auto;
+    }
 }
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index cde15a5..4ab42b4 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -85,7 +85,7 @@ main {
         font-weight: normal;
         overflow: hidden;
         white-space: nowrap;
-        color: $body_font_color;
+        color: darken($body_font_color, 10);
     }
     .notebook {
         padding-right: 8px;
@@ -176,18 +176,20 @@ main {
         input {
             width: 200%;
         }
+        a { margin-right: .25rem;}
     }
 }
 .notebook {
     display: block;
 }
 .note-container {
-    max-width: 60%;
+    max-width: 70%;
     position: relative;
     flex:1;
     order: 2;
     background: #fff;
     z-index: 4;
+    margin: 0 auto;
 }
 #note-body {
     @include fancy-sans;
@@ -211,14 +213,16 @@ main {
         font-size:inherit;
     }
 }
-#user-menu, #notebooks-menu {
+#user-menu, #notebooks-menu, #notebook-drop-menu, #tags-drop-menu {
     display: none;
 }
 .active {
     display: block !important;
 }
 .notebook-colored {
-    border-left: 3px solid #fff;
+    -webkit-background-clip: padding-box; /* for Safari */
+    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+    border-left: 3px solid rgba(255, 255, 255, .5);
 }
 .notebook-title {
     @include fontsize(24);
@@ -249,6 +253,115 @@ main {
         cursor: pointer;
     }
 }
+#nb-create-form {
+    .color-picker-fieldset {
+        width: 30px;
+        height: 30px;
+        label { 
+            top: -25px;   
+            width: 140px;
+            left: -5px;
+        }
+    }
+    .nb-name {
+    margin: 1rem 2rem 1rem 0;
+    width: 90%;
+}
+}
+.small-circle {
+    width: 18px;
+    height: 18px;
+    margin-left: 6px;
+}
+.small-circle.plus:before {
+    width: 2px;
+    margin: 5px auto;
+}
+.small-circle.plus:after{
+    margin: auto 5px;
+    width: 8px;
+}
+
+
+.url-field {
+    input {
+        @include fontsize(16);
+        color: $body_font_color;
+    }
+}
+.note-hed-wrapper {
+    margin-bottom: 1.5rem;
+}
+.note-hed {
+    @include fontsize(22);
+    margin-bottom: 0;
+}
+.note-subhed {
+    @include fontsize(16);
+    margin-top: 0;
+}
+
+.nb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 0;
+}
+.nb-list-item {
+    list-style-type: none;
+    padding: 2rem;
+    margin: 1rem;
+    flex-grow: 1; 
+    border: 1px #e7e2ee solid;
+    border-radius: 4px;
+    min-width: 160px;
+}
+.color-picker-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.dropmenu-search {
+    margin: 0;
+    padding: 0;
+    .dropmenu-search-wrapper {
+        border-top: 1px solid #e9e9e9;
+        border-bottom: 1px solid #e9e9e9;
+        padding: 5px;
+    }
+    input {
+        @include fontsize(16);
+        padding: 4px;
+        width: auto;
+        border: none;
+    }
+    .dropmenu-list {
+        padding: 3px;
+        margin-top: 0;
+        max-height: 300px;
+        overflow-x: auto;
+    }
+    a {
+        display: block;
+        text-decoration: none;
+        padding: 4px 6px;
+        &:hover {
+            background: $link_color;
+        }
+    }
+}
+
+.ql-snow .ql-editor blockquote {
+    border-left: none !important;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: none !important;
+    padding: 1rem .5rem;
+}
+.ql-container {
+    min-height: 300px;
+}
+
 /*
 
 Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
index d54027e..f3df73e 100644
--- a/design/sass/screenv1.scss
+++ b/design/sass/screenv1.scss
@@ -1,10 +1,10 @@
 @import "_fonts.scss";
 @import "_mixins.scss";
 @import "_queries.scss";
+@import "_awesomeplete.scss";
 @import "_global.scss";
 @import "_header.scss";
 @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 50749cb..fc369ae 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -15,6 +15,7 @@
     <link rel="icon" type="image/png" href="">
     <!--<link rel="manifest" href="/webmanifest.json">-->
     <link rel="apple-touch-icon" sizes="256x256" href="">
+    {% block jsinclude %}{%endblock%}
     <script async src="/media/js/main.min.js?{%now "u"%}"></script>
 </head>
 <body class="{% block bodyclass %}{% endblock %}">
@@ -22,7 +23,7 @@
     <header>
     <nav class="left">
         <ul>{% if not request.user.is_anonymous %}
-            <li><a class="circle plus" href="{%url 'notes:create'  %}" title="Add a new note">New</a></li>
+            <li><a class="circle plus" href="{% url 'notes:create'  %}" title="Add a new note">New</a></li>
             <li><a href="{%url 'notes:list' %}" title="View all your notes">Notes</a></li>
             <li><a id="notebook-menu-link" href="{%url 'notebooks:list' %}" title="view your notebooks">Notebooks</a>
                 <div id="notebooks-menu" class="dropmenu">
@@ -41,7 +42,7 @@
     <div class="logo"></div>
     <nav class="right {% if request.user.is_anonymous %}nologin{% endif %}">
         <ul>
-            <li><a href="{% url 'forum:topic-list' %}" title="View the TKNote Forum">Forum</a></li>
+            <li><a href="{% url 'forum:topic-list' %}" title="View the TKNote Forum">Community</a></li>
             <li><a href="{% url 'pages' slug='tour' %}" title="">Tour</a></li>
             <li><a href="{% url 'pages' slug='howto' %}" title="">How to</a></li>{% if not request.user.is_anonymous %}
             <li><a id="account-menu" href="{% url 'settings' %}" title="">Account</a>
@@ -91,7 +92,6 @@
     </footer>
     {% block extra %}
     {%endblock%}
-{% block jsinclude %}{%endblock%}
 <script>
 
 
diff --git a/design/templates/notes/notebook_create.html b/design/templates/notes/notebook_create.html
deleted file mode 100644
index 1386946..0000000
--- a/design/templates/notes/notebook_create.html
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends 'base.html' %}
-
-{% block extrastyles %}
-<link rel="stylesheet" href="/media/quill.snow.css" />
-<script async src="/media/js/vanilla-picker.min.js"></script>
-{% endblock %}
-{% block content %}
-<main>
-    <article class="note-container">
-    <form id="new-notebook-form" action="{% url 'notebook-api-list' %}" method="post">
-{% csrf_token %}
-{{ form.non_field_errors }}
-{% for field in form %}
-<fieldset class="{% if field.errors %}error {%endif%}{% if field.name == 'color_hex' %}hide {%endif%}" id="fs-{{field.name}}" >
-{{field.label_tag}}
-{{field}}
-{% if field.errors %}{{field.errors}}{% endif %}
-</fieldset>
-{% endfor %}
-<p id="color-picker"><a href="#">Pick color</a></p>
-<p><input class="btn btn-inline" value="create" type="submit" /></p>
-</form>
-    <ul>{% for object in notebook_list %}
-        <li>
-            <a href="{% url 'notebooks:detail' object.slug %}"><i class="icon-notebook"> </i>{{object.name}}</a>
-        </li>
-        {%endfor%}</ul>
-    </article>
-    <aside class="note-list-container">
-        {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
-    </aside>
-    <div class="balance-container">
-    </div>
-</main>
-{% endblock %}
-
diff --git a/design/templates/notes/notebook_detail.html b/design/templates/notes/notebook_detail.html
index a0b06a3..73c13ab 100644
--- a/design/templates/notes/notebook_detail.html
+++ b/design/templates/notes/notebook_detail.html
@@ -47,11 +47,11 @@
                 {% include "notes/partials/note_list.html" with object=object hidecolor=True hidenotebook=True %}
             {% endfor %}</ul>
     </article>
-    <aside class="note-list-container">
+    {%comment%}<aside class="note-list-container">
         {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
     </aside>
     <div class="balance-container">
-    </div>
+    </div>{%endcomment%}
 </main>
 {% endblock %}
 {% block jsdomready %}
diff --git a/design/templates/notes/notebook_list.html b/design/templates/notes/notebook_list.html
new file mode 100644
index 0000000..6f25f62
--- /dev/null
+++ b/design/templates/notes/notebook_list.html
@@ -0,0 +1,55 @@
+{% extends 'base.html' %}
+
+{% block extrastyles %}
+<link rel="stylesheet" href="/media/quill.snow.css" />
+<script async src="/media/js/vanilla-picker.min.js"></script>
+{% endblock %}
+{% block content %}
+<main>
+    <article class="note-container">
+        <h2 class="hed-small top-margin-0">Add a Notebook</h2>
+        {% include 'notes/partials/notebook_form.html' with form=form %}
+    <h1 class="hed-small">Notebooks</h1>
+
+    <ul class="nb-list">{% for form in notebook_form_list %}
+        <li class="nb-list-item">
+            <form action="{% url 'notebook-api-detail'  form.instance.id %}" method="PUT">{% for field in form %}{% if field.name == 'color_rgb' %}
+                <fieldset class="color-picker-fieldset" id="color-picker-{{forloop.parentloop.counter0}}" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
+                    <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb">
+                    {% if field.errors %}{{field.errors}}{% endif %}
+                </fieldset>
+                href="{% url 'notebooks:detail' form.instance.slug %}"
+                <h2>{{form.instance.name}}</h2>
+                {% else %}
+                <fieldset>
+                    {% if field.field.widget.input_type != 'hidden' %}{{field.label_tag}}{% endif %}
+                    {{field}}
+                    {% if field.errors %}{{field.errors}}{% endif %}
+                </fieldset>{% endif %}{% endfor %}
+                <input id="i-{{forloop.counter0}}" type="submit" class="btn sm" value="Save" >
+            </form>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-trash" id="trash-btn-{{forloop.counter0}}">Trash</a></div>
+        </li>
+        {%endfor%}</ul>
+    {% comment %}
+    <ul class="nb-list">{% for object in notebook_list %}
+        <li class="nb-list-item">
+            <div class="color-picker-fieldset" id="color-picker-{{forloop.counter0}}" {% if object.color_rgb %}style="background-color: {{object.color_rgb}}; border: none;"{%endif%}>
+            </div>
+            <p><a href="{% url 'notebooks:detail' object.slug %}">{{object.name}}</a></p>
+            <p>{{object.note_count}} notes</p>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn">Edit</a></div>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-Trash" id="edit-toggle-btn">Trash</a></div>
+        </li>
+        {%endfor%}</ul>
+    {% endcomment %}
+    </article>
+    <!--<aside class="note-list-container">
+        {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
+    </aside>
+    <div class="balance-container">
+    </div>-->
+</main>
+{% endblock %}
+
diff --git a/design/templates/notes/notes_create.html b/design/templates/notes/notes_create.html
index 9ca4111..1b39632 100644
--- a/design/templates/notes/notes_create.html
+++ b/design/templates/notes/notes_create.html
@@ -22,10 +22,10 @@
 </div>
 {% endif %}
 {% endfor %}
-<p><input class="btn btn-inline" value="submit" type="submit" /></p>
+<p><input class="btn btn-inline note-save" value="Save" type="submit" /></p>
 </form>
 </article>
-    <aside class="note-list-container">
+    <!--<aside class="note-list-container">
         <div class="svg-wrapper"><svg class="svg-icon-arrow">
             <svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
             </svg></div>
@@ -41,31 +41,21 @@
         </div>
     </aside>
     <div class="balance-container">
-    </div>
+    </div>-->
 </main>
+<div class="overlay-content hide" id="js-overlay-notebook">
+    {% include 'notes/partials/notebook_form.html' with form=notebook_form %}
+</div>
 {% endblock %}
 
 {% block jsinclude %}
-<script src="/media/js/highlight.pack.js"></script>
-<script src="/media/js/quill.min.js"></script>
+<script async src="/media/js/choices.min.js"></script>
+<script async src="/media/js/vanilla-picker.min.js"></script>
+<script async src="/media/js/highlight.pack.js"></script>
+<script async 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
index b2ddbc3..26bff03 100644
--- a/design/templates/notes/notes_detail.html
+++ b/design/templates/notes/notes_detail.html
@@ -2,16 +2,18 @@
 {% block extrastyles %}
 <link rel="stylesheet" href="/media/quill.snow.css" />
 {% endblock %}
+{% block bodyclass %}note-detail{% endblock %}
 {% block content %}
 <main>
     <article class="note-container">
         <form action="" method="post" id="note-edit-form">{% csrf_token %}
         <header class="note-header">
             <div class="note-header-left">
-
                     <div class="flex-wrapper">
                         <div class="notebook">
-                            <a id="n-link" href="{% url 'notebooks:detail' object.slug %}"><span id="n-box" class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span><span id="n-name">{{object.notebook}}</span></a>
+                            {% if object.notebook %}<a id="n-link" href="{{object.notebook.get_absolute_url}}"><span id="n-box" class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span><span id="n-name">{{object.notebook}}</span></a>
+                            {%else %}<span id="n-link" href="{{object.notebook.get_absolute_url}}"><span id="n-box" class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span><span id="n-name">{{object.notebook}}</span></span>
+                            {%endif%}
                             <div id="notebook-edit" class="hide">
                                 <span class="error">{{ form.notebook.errors }}</span>
                                 {{form.notebook}}
@@ -24,7 +26,7 @@
                                     <span class="tag-wrapper" data-bg-color="#{{tag.color_color_rgb}};" >{{tag}}</span>
                                 </a>{%endfor%}
                             </div>
-                            <div id="tags-edit" class="hide">
+                            <div id="t-edit" class="hide">
                                 <span class="error">{{ form.notebook.errors }}</span>
                                 {{form.tags}}
                             </div>
@@ -40,12 +42,16 @@
             </div>
         </header>
         <div class="edit-btn-wrapper"><button class="hide btn btn-hollow" id="edit-toggle-btn">Edit</button></div>
+        <fieldset id="fs-url" class="url-field hide">
+            {{form.url.label_tag}}
+            {{form.url}}
+        </fieldset>
         <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>
         <input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
         </form>
     </article>
-    <aside class="note-list-container">
+    <!--<aside class="note-list-container">
         <div class="svg-wrapper"><svg class="svg-icon-arrow">
             <svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
             </svg></div>
@@ -59,26 +65,18 @@
                 </li>
             {% endfor %}</ul>
         </div>
-    </aside>
-    <div class="balance-container">
-    </div>
+    </aside>-->
 </main>
+<div class="overlay-content hide" id="js-overlay-notebook">
+    {% include 'notes/partials/notebook_form.html' with form=notebook_form %}
+</div>
 {% endblock %}
 
 {% block jsinclude %}
+<script async src="/media/js/vanilla-picker.min.js"></script>
 <script src="/media/js/highlight.pack.js"></script>
 <script src="/media/js/quill.min.js"></script>
-<script>
-document.addEventListener('readystatechange', event => {
-  if (event.target.readyState === "interactive") {
-    //initLoader();
-  }
-  else if (event.target.readyState === "complete") {
-    initQuill("#note-body");
-  }
-});
-</script>
 {% endblock %}
 {% block jsdomready %}
-window.url = "{% url 'notes-api-detail' object.pk %}";
+
 {%endblock%}
diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html
index 393cf89..5ef067a 100644
--- a/design/templates/notes/notes_list.html
+++ b/design/templates/notes/notes_list.html
@@ -2,33 +2,65 @@
 
 {% block content %}
 <main>
-    <article class="note-container">
-        <h1>Notes {% if tags|length == 1%} tagged {% for tag in tags%}{{tag}}{%endfor%}{%endif%}</h1>
-        {% if tags|length >= 1%}<div>Tagged with: {% for tag in tags%}<a href="{{tag|slugify}}">{{tag}}</a>{%endfor%}</div>{%endif%}
+    <div class="note-container">
+        <div class="note-hed-wrapper">
+            <h1 class="note-hed">Notes</h1>
+            {% if tags|length >= 1%}<h2 class="note-subhed">Tagged with: {% for tag in tags%}<a href="{{tag.slug}}">{{tag.name}}</a>{%endfor%}</h2>{%endif%}
+
+            <h6 class="bottom-margin-0 inline-block"><button id="notebook-drop-btn" class="btn btn-light btn-drop-menu">Notebooks</button></h6>
+            <div id="notebook-drop-menu" class="dropmenu dropmenu-search">
+                    <div class="dropmenu-search-wrapper"> 
+                    <input class="search" autocapitalize="off" autocorrect="off" type="text" autocomplete="off" tabindex="-1" spellcheck="false" placeholder="Search..." id="notebook-input" data-list="#notebook-list" >
+                        <!--<svg class="fa d-icon d-icon-search svg-icon filter-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#search"></use></svg>-->
+                    </div>
+                    <ul class="list dropmenu-list list-style-none notebook-list" id="notebook-list">{% for object in notebook_list %}
+                        <li ><a class="name" href="{{object.get_absolute_url}}">{{object.name}} - {{object.note_count}}</a></li>
+                    {%endfor%}</ul>
+            </div>
+
+            <h6 class="bottom-margin-0 inline-block"><button id="tags-drop-btn" class="btn btn-light btn-drop-menu">Tags</button></h6>
+            <div id="tags-drop-menu" class="dropmenu dropmenu-search">
+                <div class="dropmenu-search-wrapper"> 
+                    <input class="search" autocapitalize="off" autocorrect="off" type="text" autocomplete="off" tabindex="-1" spellcheck="false" placeholder="Search..." id="tags-input" data-list="#tags-list" >
+                    <!--<svg class="fa d-icon d-icon-search svg-icon filter-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#search"></use></svg>-->
+                </div>
+                <ul class="list dropmenu-list list-style-none notebook-list" id="tags-list">{% for object in tag_list %}
+                    <li><a href="{{object.get_absolute_url}}">{{object.name}} - {{object.note_count}}</a></li>
+                {%endfor%}</ul>
+            </div>
+        </div>
+        {%comment%}        <label for="choices-single-default">Default</label>
+<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
+<option placeholder>This is a placeholder</option>
+        {% for object in notebook_list %}
+        <option value="{{object.name}}" id="">{{object.name}}</option>
+        {% endfor %}
+</select>{%endcomment%}
+
             <ul class="list-note-preview">{% for object in object_list %}
                 {% include "notes/partials/note_list.html" with object=object %}
             {% endfor %}</ul>
-    </article>{% if tags|length >= 1%}
-    <aside class="note-list-container">
+    </div>{% if tags|length >= 1%}
+    {%comment%}<aside class="note-list-container">
         <div class="svg-wrapper"><svg class="svg-icon-arrow">
             <svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
             </svg></div>
         <div class="">
             <ul class="list-note-preview">{% for obj in notes_list %}
                 <li>
-                    <a href="{% url 'notes:detail' obj.slug obj.pk %}">
+                    <a href="{{obj.get_absolute_url}}">
                         <h4>{{obj.title}}</h4>
                         <div class="note-preview">{{obj.body_text|truncatewords:12}}</div>
                     </a>
                 </li>
             {% endfor %}</ul>
         </div>
-    </aside>
+    </aside>{%endcomment%}
     {%else%}
-    <div class="balance-container-left">
-    </div>
+    <!--<div class="balance-container-left">
+    </div>-->
     {%endif%}
-    <div class="balance-container">
-    </div>
+    <!--<div class="balance-container">
+    </div>-->
 </main>
 {% endblock %}
diff --git a/design/templates/notes/notes_listold.html b/design/templates/notes/notes_listold.html
deleted file mode 100644
index 8066369..0000000
--- a/design/templates/notes/notes_listold.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends 'base.html' %}
-{% block content %}
-<main>
-    <h1> Notes</h1>
-    <ul>{% for obj in object_list %}
-        <li><a href="{% url 'notes:note-detail' user.username obj.slug %}">{{obj}}</a></li>
-    {% endfor %}</ul>
-</main>
-{% endblock %}
diff --git a/design/templates/notes/partials/note_list.html b/design/templates/notes/partials/note_list.html
index 0c91b34..9ba4689 100644
--- a/design/templates/notes/partials/note_list.html
+++ b/design/templates/notes/partials/note_list.html
@@ -1,11 +1,11 @@
-<li {% if object.notebook and not hidecolor %}class="notebook-colored" style="border-left-color: {{object.notebook.color_rgb}};" {% endif %} >
-                    <a href="{% url 'notes:detail' object.slug object.pk %}">
+<li {% if object.notebook and not hidecolor %}class="notebook-colored" style="border-left-color: {{object.notebook.color_rgba}};" {% endif %} >
+                    <a href="{{object.get_absolute_url}}">
                         <h4>{{object.title}}</h4>
                         <div class="note-preview">{{object.body_text|truncatewords:36}}</div>
                     </a>
                     <div class="flex-wrapper">{% if object.notebook and not hidenotebook %}
                         <div class="notebook">
-                            <a href="{% url 'notebooks:detail' object.slug %}"><span class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span>{{object.notebook}}</a>
+                            <a href="{{object.notebook.get_absolute_url}}"><span class="color-box" style="background-color: {{object.notebook.color_rgb}}"></span>{{object.notebook}}</a>
                         </div>{% endif %}
                         <div class="tags">tags: {% for tag in object.tags.all %}
                             <a href="{% url 'notes:tags' tag.slug %}">
diff --git a/design/templates/notes/partials/notebook_form.html b/design/templates/notes/partials/notebook_form.html
new file mode 100644
index 0000000..fae6c40
--- /dev/null
+++ b/design/templates/notes/partials/notebook_form.html
@@ -0,0 +1,19 @@
+<form id="nb-create-form" action="{% url 'notebook-api-list' %}" method="POST">{% csrf_token %}
+    <div class="alert" id="non-field-errors">{{ form.non_field_errors }}</div>
+            <div class="flex-wrapper flex-inner">
+                {% for field in form %}{% if field.name == 'color_rgb' %}
+                <fieldset class="fe-color-picker color-picker-fieldset block" id="color-picker" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
+                    {{field.label_tag}}
+                    <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb">
+                    {% if field.errors %}{{field.errors}}{% endif %}
+                </fieldset>{% else %}
+                {%if field.name != 'owner' %}<fieldset class="nb-{{field.name}}">
+                    {{field.label_tag}}
+                    {{field}}
+                    {% if field.errors %}{{field.errors}}{% endif %}
+                </fieldset>{%else%}{{field}}{% endif %}{%endif%}
+                    {% endfor %}
+                    <h1 class="notebook-title" id="nb-title">{{object.name}}</h1>
+            </div>
+                <input id="notebook-form-submit" type="submit" class="btn sm" value="Save" >
+        </form>
diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html
index 9eccaff..92dcc85 100644
--- a/design/templates/pages/page.html
+++ b/design/templates/pages/page.html
@@ -14,15 +14,4 @@
 {% 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',
-    });
-  });
-{% endif %}
 {%endblock%}