From b02ccfba4a99284a6c31e4cd36fd598f86e58d50 Mon Sep 17 00:00:00 2001 From: luxagraf Date: Thu, 6 Dec 2018 07:05:53 -0600 Subject: restructured scripts and styled note edit interface --- design/sass/_forms.scss | 13 ++++++ design/sass/_global.scss | 11 +++++ design/sass/_header.scss | 43 +++++++++++++++++- design/sass/_notes.scss | 80 +++++++++++++++++++++++++++++++--- design/templates/accounts/profile.html | 2 +- design/templates/base.html | 45 ++++++++++--------- 6 files changed, 164 insertions(+), 30 deletions(-) (limited to 'design') diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss index 5923e1f..cce0e0f 100644 --- a/design/sass/_forms.scss +++ b/design/sass/_forms.scss @@ -162,3 +162,16 @@ table { border-radius: 4px; padding: 6px; } +select { + display: inline; + @include fontsize(13); + color: $body_font_color; + border: 1px solid lighten($body_font_light, 15); + padding: 5px; + background: white; + border-radius: 4px; +} +#id_tags { + @include fontsize(13); + padding: 8px; +} diff --git a/design/sass/_global.scss b/design/sass/_global.scss index c242ace..9ef2e99 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -201,6 +201,17 @@ h3 { .vertical li { display: block; } +.single-col { + display: block; + @include constrain_narrow; +} +.wide{ + display: block; + @include constrain_wide; +} +.small > * { + @include fontsize(14); +} //************** other global classes ************************ .sans { @include generic_sans; diff --git a/design/sass/_header.scss b/design/sass/_header.scss index 487f1fc..29e1ef2 100644 --- a/design/sass/_header.scss +++ b/design/sass/_header.scss @@ -16,6 +16,9 @@ header { margin-top: 4px; float: right; } + .nologin { + margin-top: -2px; + } } nav { @include fancy-sans-bold; @@ -59,7 +62,7 @@ nav { position: absolute; z-index: 10; margin-top: 4px; - margin-left: 2rem; + margin-left: 4rem; background: #fff; color: #60516E; padding: 10px; @@ -96,5 +99,41 @@ nav { } } #user-menu { - margin-left: 4rem; + margin-left: 8rem; +} + +.circle{ + width: 26px; + height: 20px; + border-radius: 100%; + position: relative; + margin: -2px 8px 0 0; + display: inline-block; + vertical-align: middle; + background: $link_color; + text-indent: -3000em; +} +.circle:hover{ + background: $link_color; +} +.circle:active{ + background: $link_color; +} +.circle:before, +.circle:after{ + content:'';position:absolute;top:0;left:0;right:0;bottom:0; +} +/* PLUS */ +.circle.plus:before, +.circle.plus:after { + background: white; +} +.circle.plus:before{ + width: 2px; + margin: 10px auto; +} +.circle.plus:after{ + margin: auto 10px; + height: 2px; + box-shadow: none; } diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss index cd10e39..caec25b 100644 --- a/design/sass/_notes.scss +++ b/design/sass/_notes.scss @@ -46,6 +46,10 @@ main { order: 3; min-width: 320px; } +.balance-container-left { + order: 1; + min-width: 320px; +} .list-notebook { } @@ -62,32 +66,53 @@ main { list-style-type: none; li { @include fontsize(13); + padding: 8px 0 12px; min-height: 4.5rem; box-shadow: 0 -1px 0 #e7e2ee inset; margin: 0; padding: 6px 12px; &:hover { - background: #f1f1f1; + background: #f7f7f7; } a { - color: lighten($body_font_color, 15); + color: lighten($body_font_color, 5); text-decoration: none; } } h4 { @include fontsize(16); margin: 0; - padding: 8px 0 8px 6px; + padding-bottom: 8px; font-weight: normal; overflow: hidden; white-space: nowrap; + color: $body_font_color; + } + .notebook { + padding-right: 8px; + &:after { + display: inline-block; + position: relative; + top: 3px; + left: 3px; + content: " "; + height: 14px; + width: 1px; + background-color: $body_font_light; + } } .note-preview { - padding-left: 6px; margin-bottom: 16px; margin-right: 6px; } } + +.color-box { + display: inline-block; + width: 9px; + height: 9px; + margin-right: 4px; +} .note-title { @include fontsize(26); } @@ -104,6 +129,7 @@ main { @include fancy-sans; @include fontsize(12); margin-bottom: 0; + margin-top: 0; text-transform: uppercase; } .note-url { @@ -122,8 +148,6 @@ main { float: left; width: 50%; .label { - text-transform: uppercase; - @include fontsize(11); color: $body_font_light; margin-right: 4px; } @@ -143,6 +167,17 @@ main { color: darken($body_font_light, 25); } } + .notebook { + width: auto; + display: inline; + margin-right: 1rem; + } + .tags { + display: flex; + input { + width: 200%; + } + } } .notebook { display: block; @@ -183,7 +218,38 @@ main { .active { display: block !important; } - +.notebook-colored { + border-left: 3px solid #fff; +} +.notebook-title { + @include fontsize(24); + @include fancy-sans; +} +.flex-wrapper { + width: 100%; + display: flex; + align-items: center; + @extend %clearfix; +} +#nb-edit-form { + width: 100%; +} +.color-picker-fieldset { + display: block; + margin-right: .5rem; + width: 20px; + height: 20px; + border-radius: 4px; + border: 1px solid $body_font_light; + #id_color_rgb { + display: block; + text-indent: -1000em; + padding: 0; + border: none; + background: transparent; + cursor: pointer; + } +} /* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull diff --git a/design/templates/accounts/profile.html b/design/templates/accounts/profile.html index c47e6c6..e8ab65e 100644 --- a/design/templates/accounts/profile.html +++ b/design/templates/accounts/profile.html @@ -1,6 +1,6 @@ {% extends 'base.html' %} {% block content %} -
+

Account Settings

diff --git a/design/templates/base.html b/design/templates/base.html index bb54717..50749cb 100644 --- a/design/templates/base.html +++ b/design/templates/base.html @@ -4,49 +4,55 @@ -Note - - - - - - -{% block extrastyles %}{%endblock%} - - - + {% block pagetitle %}{% endblock %}TKNotes + + + + + + + {% block extrastyles %}{%endblock%} + + + +
-