From 4974eb58480f413c67f5f6e8fac430186eda2b62 Mon Sep 17 00:00:00 2001 From: luxagraf Date: Thu, 29 Nov 2018 16:57:26 -0600 Subject: uploading all recent changes ahead of sys upgrade --- design/sass/_forms.scss | 34 ++++ design/sass/_global.scss | 17 +- design/sass/_header.scss | 44 +++++ design/sass/_notes.scss | 269 ++++++++++++++++++++++++---- design/templates/base.html | 39 +++- design/templates/notes/notebook_create.html | 46 +++++ design/templates/notes/notebook_detail.html | 49 +++++ design/templates/notes/notes_detail.html | 38 +++- design/templates/notes/notes_list.html | 34 +++- design/templates/notes/notes_listold.html | 9 + design/templates/sell.html | 6 + 11 files changed, 532 insertions(+), 53 deletions(-) create mode 100644 design/templates/notes/notebook_create.html create mode 100644 design/templates/notes/notebook_detail.html create mode 100644 design/templates/notes/notes_listold.html create mode 100644 design/templates/sell.html (limited to 'design') diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index d6b0931..5923e1f 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -101,6 +101,40 @@ table { color: $link_color !important; } } +.btn-hollow { + @include fontsize(17); + padding: 6px 8px; + border: none; //1px solid $body_font_light; + color: $link_color !important; + outline: $link_color !important; + background: white; + border: 1px solid $link_color; + &:hover { + background: white; + color: $link_color !important; + } +} +.btn-link { + @include fontsize(15); + padding: 0; + border: none; //1px solid $body_font_light; + color: lighten($body_font_color, 15) !important; + background: white; + border: none; + &:hover { + background: white; + color: $body_font_color !important; + } +} +.save { + color: white !important; + background: $link_color !important; + &:hover { + background: $link_color; + color: white !important; + } + +} .btn-accent { padding: 3px 5px; border: 1px solid $text_accent; diff --git a/design/sass/_global.scss b/design/sass/_global.scss index d394042..c242ace 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -152,7 +152,7 @@ h3 { } } .wrapper { - @include constrain_wide; + @include constrain(1440px); //margin-top: 5rem; } //************** Universals ************************ @@ -186,6 +186,21 @@ h3 { .left-margin-2 { margin-left: 2px; } +.right-padding-0 { + padding-right: 0 !important; +} +.center { + text-align: center; + margin-right: auto; + margin-left: auto; +} +.list-style-none { + list-style-type: none; + padding: 0; +} +.vertical li { + display: block; +} //************** other global classes ************************ .sans { @include generic_sans; diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 7f98419..487f1fc 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -54,3 +54,47 @@ nav { } } } +.dropmenu { + outline: white; + position: absolute; + z-index: 10; + margin-top: 4px; + margin-left: 2rem; + background: #fff; + color: #60516E; + padding: 10px; + border-radius: 4px; + border: 1px solid rgba(0,0,0,0.05); + filter: drop-shadow(0 0px 4px rgba(0,0,0,0.08)); + &:after { + top: unset; + left: unset; + margin-left: unset; + border-top-color: unset; + content: ""; + position: absolute; + border: 10px solid transparent; + bottom: 100%; + left: 50%; + margin-left: -10px; + border-bottom-color: white; + } + a, a:visited { + color: lighten($body_font_color, 15); + } + a:hover { + color: $body_font_color; + } + .menu-divider { + border-top: 1px solid #e7e2ee; + padding: 8px 16px 0; + margin: 8px -10px 0; + } + li { + margin-top: 4px; + margin-bottom: 4px; + } +} +#user-menu { + margin-left: 4rem; +} diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss index 09d234a..cd10e39 100644 --- a/design/sass/_notes.scss +++ b/design/sass/_notes.scss @@ -1,25 +1,163 @@ +main { + width: 100%; + display: flex ; + align-items: stretch ; + flex-flow: row wrap ; + margin: 0; +} +.svg-icon-arrow { + display: block; + z-index: 2; + width: 18px; + height: 18px; + &:hover { + -moz-transform: scaleX(-1); + -o-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + filter: FlipH; + -ms-filter: "FlipH"; + transition: 0.5s; + } +} +.note-list-container, .balance-container { + position: relative; + order: 1; + z-index: 1; + visibility: hidden; + //background: #fbfafa; + padding: 4px; + border-left: 1px #f9f9f9 solid; + max-width: 320px; + .list-note-preview { + li { + height: 4.5rem; + } + h4 { + @include fontsize(15); + } + } + .note-preview { + overflow: hidden; + white-space: nowrap; + } +} +.balance-container { + order: 3; + min-width: 320px; +} +.list-notebook { + +} +.icon-notebook { + display: inline-block; + content: " "; + width: 24px; + height: 24px; + background: url('/media/moleskine.svg'); +} +.list-note-preview { + padding: 0; + margin: 0; + list-style-type: none; + li { + @include fontsize(13); + min-height: 4.5rem; + box-shadow: 0 -1px 0 #e7e2ee inset; + margin: 0; + padding: 6px 12px; + &:hover { + background: #f1f1f1; + } + a { + color: lighten($body_font_color, 15); + text-decoration: none; + } + } + h4 { + @include fontsize(16); + margin: 0; + padding: 8px 0 8px 6px; + font-weight: normal; + overflow: hidden; + white-space: nowrap; + } + .note-preview { + padding-left: 6px; + margin-bottom: 16px; + margin-right: 6px; + } +} .note-title { - @include fontsize(22); + @include fontsize(26); } .note-header { @extend %clearfix; } -.note-header-float { - width: 30%; - float: right; +.note-header-right { text-align: right; + float: right; + width: 50%; } .note-time, .note-url { text-align: right; + @include fancy-sans; + @include fontsize(12); + margin-bottom: 0; + text-transform: uppercase; +} +.note-url { + margin-top: 0; +} +.note-header { + margin-top: 1rem; + margin-bottom: 3rem; +} +.edit-btn-wrapper{ + text-align: right; +} +.note-header-left { @include fancy-sans; @include fontsize(13); + float: left; + width: 50%; + .label { + text-transform: uppercase; + @include fontsize(11); + color: $body_font_light; + margin-right: 4px; + } + ul { + display: inline-block; + padding: 0; + margin-bottom: 0; + } + li { + margin-right: 4px; + display: inline-block; + } + a { + text-decoration: none; + color: darken($body_font_light, 5);; + &:hover { + color: darken($body_font_light, 25); + } + } +} +.notebook { + display: block; } .note-container { - @include constrain(80%); + max-width: 60%; + position: relative; + flex:1; + order: 2; + background: #fff; + z-index: 4; } #note-body { @include fancy-sans; - @include fontsize(15); + @include fontsize(14); } .inactive { .ql-editor { @@ -39,33 +177,94 @@ 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; - } +#user-menu, #notebooks-menu { + display: none; +} +.active { + display: block !important; +} + +/* + +Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull + +*/ + +.hljs, pre.ql-syntax { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #002b36 !important; + color: #839496; +} + +.hljs-comment, +.hljs-quote { + color: #586e75; +} + +/* Solarized Green */ +.hljs-keyword, +.hljs-selector-tag, +.hljs-addition { + color: #859900; +} + +/* Solarized Cyan */ +.hljs-number, +.hljs-string, +.hljs-meta .hljs-meta-string, +.hljs-literal, +.hljs-doctag, +.hljs-regexp { + color: #2aa198; +} + +/* Solarized Blue */ +.hljs-title, +.hljs-section, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #268bd2; +} + +/* Solarized Yellow */ +.hljs-attribute, +.hljs-attr, +.hljs-variable, +.hljs-template-variable, +.hljs-class .hljs-title, +.hljs-type { + color: #b58900; +} + +/* Solarized Orange */ +.hljs-symbol, +.hljs-bullet, +.hljs-subst, +.hljs-meta, +.hljs-meta .hljs-keyword, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-link { + color: #cb4b16; +} + +/* Solarized Red */ +.hljs-built_in, +.hljs-deletion { + color: #dc322f; +} + +.hljs-formula { + background: #073642; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; } diff --git a/design/templates/base.html b/design/templates/base.html index f14e5df..bb54717 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -20,8 +20,16 @@
@@ -29,8 +37,23 @@ @@ -38,12 +61,12 @@
- {%endcomment%} {% block content %} {% endblock %}
@@ -65,9 +88,11 @@ {% block jsinclude %}{%endblock%} diff --git a/design/templates/notes/notebook_create.html b/design/templates/notes/notebook_create.html new file mode 100644 index 0000000..8ffc94a --- /dev/null +++ b/design/templates/notes/notebook_create.html @@ -0,0 +1,46 @@ +{% extends 'base.html' %} + +{% block extrastyles %} + +{% endblock %} +{% block content %} +
+
+
+{% csrf_token %} +{{ form.non_field_errors }} +{% for field in form %} +
+{{field.label_tag}} +{{field}} +{% if field.errors %}{{field.errors}}{% endif %} +
+{% endfor %} +

+
+ +
+ +
+
+
+{% endblock %} + diff --git a/design/templates/notes/notebook_detail.html b/design/templates/notes/notebook_detail.html new file mode 100644 index 0000000..36873e1 --- /dev/null +++ b/design/templates/notes/notebook_detail.html @@ -0,0 +1,49 @@ +{% extends 'base.html' %} + +{% block content %} +
+
+ {%comment%} +
+ + {% csrf_token %} + {{ form.non_field_errors }} + {% for field in form %} +
+ {{field.label_tag}} + {{field}} + {% if field.errors %}{{field.errors}}{% endif %} +
+ {% endfor %} +

+
+ {%endcomment%} +{{object}} + +
+ +
+
+
+{% endblock %} diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html index bf46ab8..95583bd 100644 --- a/design/templates/notes/notes_detail.html +++ b/design/templates/notes/notes_detail.html @@ -10,12 +10,24 @@
- -
+
+ tags: +
    {% for tag in object.tags.all %} +
  • + {{tag}} +
    • + {%endfor%}
+
+ notebook: + {{object.notebook.name}} +
+
+

{{object.date_created|date:"M d, Y"}}

- {% if object.url %}

SourceArchive

{% endif %} + {% if object.url %}

SourceArchive

{% endif %}
+

{{object.title}}

{% if object.body_html %}{{object.body_html|safe}}{%else%}{{object.body_text}}{%endif%}
{% csrf_token %} @@ -26,8 +38,11 @@
+
+
{% endblock %} {% block jsinclude %} + {% endblock %} diff --git a/design/templates/notes/notes_list.html b/design/templates/notes/notes_list.html index 8066369..b1c1700 100644 --- a/design/templates/notes/notes_list.html +++ b/design/templates/notes/notes_list.html @@ -1,9 +1,35 @@ {% extends 'base.html' %} + {% block content %}
-

Notes

- + + +
+
{% endblock %} diff --git a/design/templates/notes/notes_listold.html b/design/templates/notes/notes_listold.html new file mode 100644 index 0000000..8066369 --- /dev/null +++ b/design/templates/notes/notes_listold.html @@ -0,0 +1,9 @@ +{% extends 'base.html' %} +{% block content %} +
+

Notes

+
    {% for obj in object_list %} +
  • {{obj}}
    • + {% endfor %}
+
+{% endblock %} diff --git a/design/templates/sell.html b/design/templates/sell.html new file mode 100644 index 0000000..001823b --- /dev/null +++ b/design/templates/sell.html @@ -0,0 +1,6 @@ +{% extends 'base.html' %} +{% block content %} +
+

TK Notes

+
+{% endblock %} -- cgit v1.2.3