aboutsummaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/sass/_fonts.scss11
-rw-r--r--design/sass/_global.scss3
-rw-r--r--design/sass/_header.scss14
-rw-r--r--design/sass/_mixins.scss2
-rw-r--r--design/sass/_modal.scss72
-rw-r--r--design/sass/_notes.scss28
-rw-r--r--design/sass/screenv1.scss2
-rw-r--r--design/templates/base.html12
-rw-r--r--design/templates/django_registration/activation_complete.html5
-rw-r--r--design/templates/django_registration/registration_complete.html2
-rw-r--r--design/templates/notes/notebook_detail.html5
-rw-r--r--design/templates/notes/notes_detail.html2
-rw-r--r--design/templates/notes/notes_list.html9
-rw-r--r--design/templates/pages/page.html2
14 files changed, 143 insertions, 26 deletions
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
index dfe632a..5ea0e6e 100644
--- a/design/sass/_fonts.scss
+++ b/design/sass/_fonts.scss
@@ -1,10 +1,7 @@
@font-face {
- font-family: 'carrois_gothicregular';
- src: url('carroisgothic-regular-webfont.eot');
- src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('carroisgothic-regular-webfont.woff') format('woff'),
- url('carroisgothic-regular-webfont.ttf') format('truetype');
- font-weight: normal;
+ font-family: 'proxima_novabold';
+ src: url('/media/fonts/proximanova-bold-webfont.woff2') format('woff2'),
+ url('/media/fonts/proximanova-bold-webfont.woff') format('woff');
+ font-weight: 600;
font-style: normal;
-
}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index b858866..41a1682 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -230,6 +230,9 @@ h3 {
margin-bottom: .5rem;
margin-top: 2rem;
}
+.float-right {
+ float: right;
+}
//************** other global classes ************************
.sans {
@include generic_sans;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 29e1ef2..8df6667 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -21,7 +21,6 @@ header {
}
}
nav {
- @include fancy-sans-bold;
letter-spacing: 1px;
margin: 0 0 10px;
ul {
@@ -32,13 +31,14 @@ nav {
}
}
a {
- @include fontsize(14);
+ @include fancy-sans-bold;
+ @include fontsize(16);
text-decoration: none;
- color: #444;
- font-weight: normal;
+ color: lighten(#444, 15);
+ font-weight: 600;
padding: 6px;
&:visited {
- color: #444;
+ color: lighten(#444, 15);
}
&:hover {
color: $link_color;
@@ -83,6 +83,8 @@ nav {
border-bottom-color: white;
}
a, a:visited {
+ @include fancy-sans;
+ font-weight: 400;
color: lighten($body_font_color, 15);
}
a:hover {
@@ -107,7 +109,7 @@ nav {
height: 20px;
border-radius: 100%;
position: relative;
- margin: -2px 8px 0 0;
+ margin: -4px 8px 0 0;
display: inline-block;
vertical-align: middle;
background: $link_color;
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index bfccc17..b7da0f6 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -44,7 +44,7 @@ $max_width: 1280px;
font-family: "proxima-nova",helvetica,arial,sans-serif;
}
@mixin fancy-sans-bold {
- font-family: "proxima-nova",helvetica,arial,sans-serif;
+ font-family: "proxima_novabold",helvetica,arial,sans-serif;
font-weight: 600;
}
@mixin fancy-serif {
diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss
index f333fd2..8c9bf46 100644
--- a/design/sass/_modal.scss
+++ b/design/sass/_modal.scss
@@ -1,4 +1,4 @@
-#overlay{
+#overlay, #loading {
position:fixed;
width:100vw;
height:100vh;
@@ -60,6 +60,9 @@
max-width: 52%;
width: 90%;
}
+#loading #overlay-wrapper {
+ max-width: 10%;
+}
#modal {
min-height: 330px;
padding: 0 1rem 1rem 1rem;
@@ -92,6 +95,9 @@
}
}
+#loading #modal {
+ min-height: auto;
+}
#hed-wrapper {
display: flex;
align-items: center;
@@ -100,3 +106,67 @@
width: auto;
}
}
+
+.loader {
+ font-size: 10px;
+ margin: 50px auto;
+ text-indent: -9999em;
+ width: 11em;
+ height: 11em;
+ border-radius: 50%;
+ background: $link_color;
+ background: -moz-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+ background: -webkit-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+ background: -o-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+ background: -ms-linear-gradient(left, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+ background: linear-gradient(to right, $link_color 10%, rgba(255, 255, 255, 0) 42%);
+ position: relative;
+ -webkit-animation: load3 1.4s infinite linear;
+ animation: load3 1.4s infinite linear;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+}
+.loader:before {
+ width: 50%;
+ height: 50%;
+ background: $link_color;
+ border-radius: 100% 0 0 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: '';
+}
+.loader:after {
+ background: #fff;
+ width: 75%;
+ height: 75%;
+ border-radius: 50%;
+ content: '';
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+@-webkit-keyframes load3 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes load3 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index 4ab42b4..59e76ce 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -112,6 +112,11 @@ main {
height: 9px;
margin-right: 4px;
}
+.dropmenu .color-box {
+ margin-right: 5px;
+ position: relative;
+ top: -1px;
+}
.note-title {
@include fontsize(26);
}
@@ -351,6 +356,29 @@ main {
}
}
+.messages {
+ @include fancy-sans-bold;
+ @include fontsize(16);
+ list-style-type: none;
+ color: $link_color;
+ font-weight: 600;
+}
+.trash {
+ text-indent: -9999em;
+ width: 30px;
+ color: $link_color;
+ border: none;
+ background: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' viewBox='0 -256 1792 1792' id='svg3741' version='1.1' inkscape:version='0.48.3.1 r9886' width='100%25' height='100%25' sodipodi:docname='trash_font_awesome.svg'%3E%3Cmetadata id='metadata3751'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3749' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='640' inkscape:window-height='480' id='namedview3747' showgrid='false' inkscape:zoom='0.13169643' inkscape:cx='896' inkscape:cy='896' inkscape:window-x='0' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='svg3741' /%3E%3Cg transform='matrix(1,0,0,-1,197.42373,1255.0508)' id='g3743'%3E%3Cpath d='M 512,800 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z M 1152,76 v 948 H 256 V 76 Q 256,54 263,35.5 270,17 277.5,8.5 285,0 288,0 h 832 q 3,0 10.5,8.5 7.5,8.5 14.5,27 7,18.5 7,40.5 z M 480,1152 h 448 l -48,117 q -7,9 -17,11 H 546 q -10,-2 -17,-11 z m 928,-32 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 h -96 V 76 q 0,-83 -47,-143.5 -47,-60.5 -113,-60.5 H 288 q -66,0 -113,58.5 Q 128,-11 128,72 v 952 H 32 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 309 l 70,167 q 15,37 54,63 39,26 79,26 h 320 q 40,0 79,-26 39,-26 54,-63 l 70,-167 h 309 q 14,0 23,-9 9,-9 9,-23 z' id='path3745' inkscape:connector-curvature='0' style='fill:%23FC5D2B' /%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
+ &:hover {
+ background: url("data:image/svg+xml,%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' viewBox='0 -256 1792 1792' id='svg3741' version='1.1' inkscape:version='0.48.3.1 r9886' width='100%25' height='100%25' sodipodi:docname='trash_font_awesome.svg'%3E%3Cmetadata id='metadata3751'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs3749' /%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='640' inkscape:window-height='480' id='namedview3747' showgrid='false' inkscape:zoom='0.13169643' inkscape:cx='896' inkscape:cy='896' inkscape:window-x='0' inkscape:window-y='25' inkscape:window-maximized='0' inkscape:current-layer='svg3741' /%3E%3Cg transform='matrix(1,0,0,-1,197.42373,1255.0508)' id='g3743'%3E%3Cpath d='M 512,800 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 256,0 V 224 q 0,-14 -9,-23 -9,-9 -23,-9 h -64 q -14,0 -23,9 -9,9 -9,23 v 576 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z M 1152,76 v 948 H 256 V 76 Q 256,54 263,35.5 270,17 277.5,8.5 285,0 288,0 h 832 q 3,0 10.5,8.5 7.5,8.5 14.5,27 7,18.5 7,40.5 z M 480,1152 h 448 l -48,117 q -7,9 -17,11 H 546 q -10,-2 -17,-11 z m 928,-32 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 h -96 V 76 q 0,-83 -47,-143.5 -47,-60.5 -113,-60.5 H 288 q -66,0 -113,58.5 Q 128,-11 128,72 v 952 H 32 q -14,0 -23,9 -9,9 -9,23 v 64 q 0,14 9,23 9,9 23,9 h 309 l 70,167 q 15,37 54,63 39,26 79,26 h 320 q 40,0 79,-26 39,-26 54,-63 l 70,-167 h 309 q 14,0 23,-9 9,-9 9,-23 z' id='path3745' inkscape:connector-curvature='0' style='fill:%23FC5D2B' /%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
+ }
+}
+
+.loading {
+ #close-btn {
+ display: none;
+ }
+}
.ql-snow .ql-editor blockquote {
border-left: none !important;
margin-bottom: 5px;
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
index f3df73e..de2593e 100644
--- a/design/sass/screenv1.scss
+++ b/design/sass/screenv1.scss
@@ -1,8 +1,8 @@
@import "_fonts.scss";
@import "_mixins.scss";
@import "_queries.scss";
-@import "_awesomeplete.scss";
@import "_global.scss";
+@import "_icons.scss";
@import "_header.scss";
@import "_footer.scss";
@import "_forms.scss";
diff --git a/design/templates/base.html b/design/templates/base.html
index fc369ae..adcf599 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -29,11 +29,17 @@
<div id="notebooks-menu" class="dropmenu">
<ul id="notebooks-menu-list" class="list-style-none vertical">
{% for object in user.profile.get_notebook_list %}
- <li><a href="{{object.get_absolute_url}}" title="view all notes in the notebook {{object.name}}"><span class="color-box" style="background-color: {{object.color_rgb}}"></span>{{object}}</a>
+ <li><a href="{{object.get_absolute_url}}" title="view all notes in the notebook {{object.name}}"><span class="color-box" style="background-color: {{object.color_rgb}}"></span>{{object}} {{object.note_count}}</a>
{% endfor %}
- <li class="menu-divider">
+ <ul class="menu-divider">
+ <li>
+ <a href="{% url 'notebooks:list' %}/trash">Trash</a>
+ </li>
+ <li>
<a href="{% url 'notebooks:list' %}">Edit/Add Notebook</a>
- </li></ul>
+ </li>
+ </ul>
+ </ul>
</div>
</li>{%else%}
<li><a href="/" title="">Home</a></li>{%endif%}
diff --git a/design/templates/django_registration/activation_complete.html b/design/templates/django_registration/activation_complete.html
index 914be51..d83317a 100644
--- a/design/templates/django_registration/activation_complete.html
+++ b/design/templates/django_registration/activation_complete.html
@@ -1,8 +1,7 @@
-
{% extends 'base.html' %}
{% block content %}
-<main>
+<main class="single-col">
<h1>Your account is now active.</h1>
-<p><a href="{% url 'login' %}">Login</a> and get started! <?p>
+<p><a href="{% url 'login' %}">Login</a> and get started!</p>
</main>
{% endblock %}
diff --git a/design/templates/django_registration/registration_complete.html b/design/templates/django_registration/registration_complete.html
index e9d0610..59677ce 100644
--- a/design/templates/django_registration/registration_complete.html
+++ b/design/templates/django_registration/registration_complete.html
@@ -1,6 +1,6 @@
{% extends 'base.html' %}
{% block content %}
-<main>
+<main class="single-col">
<h1>Thanks for signing up.</h1>
<p>Please check your email for a link to confirm you new account.<?p>
</main>
diff --git a/design/templates/notes/notebook_detail.html b/design/templates/notes/notebook_detail.html
index 73c13ab..37c8f8a 100644
--- a/design/templates/notes/notebook_detail.html
+++ b/design/templates/notes/notebook_detail.html
@@ -8,9 +8,9 @@
<main>
<article class="note-container single-col">
<div class="flex-wrapper">
+ {% if object.name != 'Trash'%}
<form id="nb-edit-form" action="{% url 'notebook-api-detail' object.pk %}" method="PATCH">{% csrf_token %}
{{ form.non_field_errors }}
-
<div class="flex-wrapper flex-inner">
{% for field in form %}{% if field.name == 'color_rgb' %}
<fieldset class="color-picker-fieldset" id="color-picker" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
@@ -28,6 +28,9 @@
<input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
</form>
<div class="edit-btn-wrapper"><a class="hide btn btn-hollow" id="edit-toggle-btn">Edit</a></div>
+ {%else%}
+ <h1 class="notebook-title" id="nb-title">{{object.name}}</h1>
+ {%endif%}
</div>
<form id="new-note-form" action="{% url 'notebook-api-list' %}" method="post" class="hide">
diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html
index edf45e7..cce13b7 100644
--- a/design/templates/notes/notes_detail.html
+++ b/design/templates/notes/notes_detail.html
@@ -49,8 +49,8 @@
<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" >
+ <button type="submit" value="trash" class="btn-hollow trash float-right" name="trash">Move to Trash</button>
</form>
- <button type="submit" value="trash" class="btn btn-hollow">Move to Trash</button>
</article>
<!--<aside class="note-list-container">
<div class="svg-wrapper"><svg class="svg-icon-arrow">
diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html
index 5ef067a..94e82ec 100644
--- a/design/templates/notes/notes_list.html
+++ b/design/templates/notes/notes_list.html
@@ -5,6 +5,15 @@
<div class="note-container">
<div class="note-hed-wrapper">
<h1 class="note-hed">Notes</h1>
+ {% if messages %}
+ <ul class="messages">
+ {% for message in messages %}
+ <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
+ {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
{% 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>
diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html
index 92dcc85..6703d5d 100644
--- a/design/templates/pages/page.html
+++ b/design/templates/pages/page.html
@@ -8,7 +8,7 @@
{% block extra %}
{% if login_form %}
-<div class="overlay-content" id="js-overlay-content" style="display: none;">
+<div class="overlay-content hide" id="js-overlay-login">
{% include 'lib/login.html' with form=login_form %}
</div>
{% endif %}