diff --git a/app/assets/stylesheets/app/_common.scss b/app/assets/stylesheets/app/_common.scss index 1d218d445..6933e90fc 100644 --- a/app/assets/stylesheets/app/_common.scss +++ b/app/assets/stylesheets/app/_common.scss @@ -30,8 +30,8 @@ } .nt-dropdown-menu.dark { - background-color: $dark-gray; - color: white; + background-color: $selection-color; + color: $selected-text-color; li { &:hover { @@ -42,12 +42,12 @@ } } a { - color: white !important; + color: $selected-text-color !important; height: 100%; font-weight: bold !important; } .text { - color: white; + color: $selected-text-color; } } } diff --git a/app/assets/stylesheets/app/_editor.scss b/app/assets/stylesheets/app/_editor.scss index 77d10a499..0c7ec35bf 100644 --- a/app/assets/stylesheets/app/_editor.scss +++ b/app/assets/stylesheets/app/_editor.scss @@ -14,7 +14,7 @@ border-bottom: none !important; } - $heading-height: 100px; + $heading-height: 90px; .editor-heading { @@ -24,7 +24,7 @@ padding-top: 0px; background-color: white; - min-height: 100px; + min-height: $heading-height; width: 100%; padding-right: 10px; @@ -138,17 +138,17 @@ left: 0; right: 0; bottom: 0px; - background-color: $dark-gray; - color: white; - padding-top: 8px; - height: 36px; + background-color: #f1f1f1; + color: $selected-text-color; + padding-top: 5px; + height: 28px; cursor: default; ul { li { text-align: left; a { - font-size: 14px; + font-size: 13px; font-weight: bold; padding: 0 0; } diff --git a/app/assets/stylesheets/app/_header.scss b/app/assets/stylesheets/app/_header.scss index 0ef275772..cbb1ea55c 100644 --- a/app/assets/stylesheets/app/_header.scss +++ b/app/assets/stylesheets/app/_header.scss @@ -1,14 +1,13 @@ .header { position: relative; width: 100%; - background-color: $bg-color; + background-color: #f1f1f1; height: $header-height; max-height: $header-height; z-index: 100; - font-size: 14px; + font-size: 10px; color: $dark-gray; - // padding-top: 5px; - margin-top: 4px; + border-bottom: 1px solid #dddddd; a { color: $dark-gray; @@ -22,26 +21,6 @@ left: 0px; right: 0px; - - .header-name { - display: inline-block; - vertical-align: middle; - font-weight: bold; - font-size: 20px; - padding-top: 12px; - } - - .tagline { - display: inline-block; - vertical-align: middle; - font-size: 14px; - font-weight: normal; - padding-left: 11px; - margin-left: 0px; - height: 22px; - margin-top: 2px; - - } } .panel-status-text { @@ -51,14 +30,14 @@ } .menu { - - float: right; - padding-top: 5px; - margin-top: 10px; + // float: right; + margin-left: 15px; + padding-top: 9px; + margin-top: 0px; color: black; z-index: 1000; margin-bottom: 0px; - font-size: 18px; + font-size: 12px; .login-panel .login-input { border-radius: 0px; @@ -66,37 +45,13 @@ .items { - .advanced-brand { - font-size: 18px; - - &.btn { - border-radius: 3px; - font-size: 14px; - } - - font-weight: bold; - .n { - font-style: italic; - } - - .advanced { - margin-left: -4px; - text-transform: uppercase; - font-style: normal; - } - - .beta { - font-size: 7px; - font-style: normal; - } - } - .item { display: inline-block; margin-right: 7px; position: relative; cursor: pointer; + font-weight: bold; a { color: $dark-gray; @@ -114,6 +69,7 @@ max-height: 85vh; overflow: scroll; background-color: white; + font-weight: normal; .storage-text { @@ -141,7 +97,6 @@ .item.account { - .link-item { margin-bottom: 8px; a { @@ -181,17 +136,18 @@ > .meta-container { display: block; + font-size: 10px; } > .action-container { - font-size: 14px; + font-size: 12px; margin-top: 6px; .status-title { font-weight: bold; } .subtext { - font-size: 12px; + font-size: 10px; margin-top: 2px; } } @@ -222,14 +178,14 @@ .meta-container { > .title { - font-size: 16px; + font-size: 13px; font-weight: bold; } > .desc { - font-size: 14px; + font-size: 12px; margin-top: 3px; - line-height: 18px; + // line-height: 18px; } } } @@ -262,31 +218,3 @@ .account-menu { width: 200px; } - -.faq-panel { - width: 350px; - font-size: 16px; - z-index: 1000; - - p { - font-size: 16px; - } - - .faq-item { - margin-bottom: 22px; - } - - .question { - margin-bottom: 12px; - } - - .answer { - margin-top: 8px; - } - - ul { - li { - margin-bottom: 10px; - } - } -} diff --git a/app/assets/stylesheets/app/_main.scss b/app/assets/stylesheets/app/_main.scss index 7c9703b97..200005d36 100644 --- a/app/assets/stylesheets/app/_main.scss +++ b/app/assets/stylesheets/app/_main.scss @@ -1,6 +1,8 @@ $main-text-color: black; $secondary-text-color: rgba($main-text-color, 0.8); $bg-color: #e3e3e3; +$selection-color: $bg-color; +$selected-text-color: black; @mixin MQ-Small() { @media (max-width: $screen-xs-max) { @@ -99,14 +101,13 @@ p { min-width: 900px; } -$header-height: 50px; +$header-height: 35px; .app-container { display: table; background-color: $bg-color; width: 100%; height: calc(100% - #{$header-height}); - padding: 15px; padding-top: 0px; font-size: 0; margin-top: 0; @@ -136,7 +137,6 @@ $section-header-height: 70px; } .section { - padding: 8px; padding-bottom: 0px; display: block; @@ -159,22 +159,30 @@ $section-header-height: 70px; padding: 20px; height: $section-header-height; font-weight: bold; - border-bottom: 1px solid $bg-color; + font-size: 14px; > .title { float: left; - text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; - width: 85%; + width: 80%; overflow: hidden; } > .add-button { float: right; - font-size: 30px; - margin-top: -10px; + font-size: 22px; + width: 30px; + height: 30px; cursor: pointer; + background-color: #e9e9e9; + border-radius: 4px; + font-weight: normal; + text-align: center; + + &:hover { + background-color: rgba(#e9e9e9, 0.8); + } } } } diff --git a/app/assets/stylesheets/app/_mostrap.scss b/app/assets/stylesheets/app/_mostrap.scss index c85c9f517..7b540f5b0 100644 --- a/app/assets/stylesheets/app/_mostrap.scss +++ b/app/assets/stylesheets/app/_mostrap.scss @@ -101,7 +101,7 @@ $screen-md-max: ($screen-lg-min - 1) !default; @media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { - margin-left: -15px; + // margin-left: -15px; } } @@ -115,14 +115,14 @@ $screen-md-max: ($screen-lg-min - 1) !default; @media (min-width: 768px) { .container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse { - margin-right: 0; - margin-left: 0; + // margin-right: 0; + // margin-left: 0; } } .container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; + // margin-right: -15px; + // margin-left: -15px; } @media (min-width: 768px) { @@ -157,7 +157,7 @@ $screen-md-max: ($screen-lg-min - 1) !default; @media (min-width: 768px) { .navbar-right { float: right !important; - margin-right: -15px; + // margin-right: -15px; } } @media (min-width: 768px) { @@ -298,6 +298,10 @@ button:focus {outline:0;} left: -50px; } +.panel-right { + left: 0px; +} + .panel-centered { position: relative; width: 400px; diff --git a/app/assets/stylesheets/app/_notes.scss b/app/assets/stylesheets/app/_notes.scss index 8b0a24717..17adec1c7 100644 --- a/app/assets/stylesheets/app/_notes.scss +++ b/app/assets/stylesheets/app/_notes.scss @@ -1,9 +1,14 @@ .notes { - width: 28%; + width: 30%; + border-left: 1px solid #dddddd; + border-right: 1px solid #dddddd; .notes-title-bar { - color: #ff6551; - height: 136px !important; + color: rgba(black, 0.40); + padding-top: 16px !important; + height: 130px !important; + font-weight: normal !important; + font-size: 18px !important; } .tag-menu-bar { @@ -16,7 +21,7 @@ .filter-section { clear: left; height: 32px; - margin-top: 14px; + margin-top: 20px; .filter-bar { background-color: $bg-color; @@ -47,6 +52,8 @@ } } + $note-selection-color: #2960ec; + .note { width: 100%; padding: 15px; @@ -66,12 +73,12 @@ } &.selected { - background-color: #ff6551; + background-color: $note-selection-color; color: white; } &:hover:not(.selected) { - background-color: rgba(#ff6551, 0.8); + background-color: $note-selection-color; color: white; } } diff --git a/app/assets/stylesheets/app/_tags.scss b/app/assets/stylesheets/app/_tags.scss index 06a4fee47..2b38bd327 100644 --- a/app/assets/stylesheets/app/_tags.scss +++ b/app/assets/stylesheets/app/_tags.scss @@ -1,18 +1,37 @@ + .tags { - width: 22%; + width: 20%; + background-color: #ebebeb; .tags-title-bar { - color: #0707ff; + color: black; + height: 55px !important; + padding-left: 12px !important; + padding-right: 12px !important; + font-size: 12px !important; + color: rgba(black, 0.8); + } + + .content { + background-color: #ebebeb !important; + } + + .tag-add-button { + margin-top: -6px; + background-color: #d7d7d7 !important; + + &:hover { + background-color: rgba(#d7d7d7, 0.8) !important; + } } .tag { - height: 50px; - border-bottom: 1px solid $bg-color; - padding: 12px; + height: 30px; + padding: 5px 12px; cursor: pointer; - background-color: white; transition: height .1s ease-in-out; position: relative; + font-size: 14px; > .icon { float: left; @@ -35,33 +54,36 @@ > .count { position: absolute; right: 17px; - padding-top: 3px; + padding-top: 1px; + font-weight: bold; } + $tags-selected-color: #bdbdbd; + &.selected { - background-color: #5151ff; - color: white; + background-color: $tags-selected-color; + color: $selected-text-color; > .title { - color: white; + color: $selected-text-color; cursor: text; } } /* When a note is dragged over tag */ &.over { - background-color: rgba(#5151ff, 0.8); - color: white; + background-color: $tags-selected-color; + color: $selected-text-color; border: 2px dashed white; > .title { - color: white; + color: $selected-text-color; } } &:hover:not(.selected) { - background-color: rgba(#5151ff, 0.8); - color: white; + background-color: $tags-selected-color; + color: $selected-text-color; > .title { - color: white; + color: $selected-text-color; } } } diff --git a/app/assets/stylesheets/frontend.css.scss b/app/assets/stylesheets/frontend.css.scss index 89d299d4d..c9279a9b9 100644 --- a/app/assets/stylesheets/frontend.css.scss +++ b/app/assets/stylesheets/frontend.css.scss @@ -1,8 +1,8 @@ $dark-gray: #2e2e2e; @import "app/mostrap"; -@import "app/common"; @import "app/main"; +@import "app/common"; @import "app/header"; @import "app/tags"; @import "app/notes"; diff --git a/app/assets/templates/frontend/header.html.haml b/app/assets/templates/frontend/header.html.haml index 1324079b4..59b4d0d9b 100644 --- a/app/assets/templates/frontend/header.html.haml +++ b/app/assets/templates/frontend/header.html.haml @@ -1,99 +1,90 @@ .header .header-content - %nav.animated-fast.fadeInDown - %a.navbar-brand{"ui-sref" => "home"} - .header-name - Standard Notes + .menu + .items + .item.account + %div{"ng-click" => "ctrl.accountMenuPressed()"} + %div{"ng-if" => "ctrl.user.email"} Account + %div{"ng-if" => "!ctrl.user.email"} Sign in or Register + .panel.panel-default.account-panel.panel-right{"ng-if" => "ctrl.showAccountMenu"} + .panel-body + .account-items + .account-item.registration-login{"ng-if" => "!ctrl.user.email"} + .meta-container + .title Sign in or Register + .desc + %form.account-form{'name' => "loginForm"} + .form-tag.has-feedback + %input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.loginData.email'} + .form-tag.has-feedback + %input.form-control.login-input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.loginData.user_password'} + .checkbox{"ng-if" => "ctrl.hasLocalData()"} + %label + %input{"type" => "checkbox", "ng-model" => "ctrl.user.shouldMerge", "ng-bind" => "true", "ng-change" => "ctrl.mergeLocalChanged()"} + Merge local notes + %button.btn.dark-button.half-button{"ng-click" => "ctrl.loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} + %span Sign In + %button.btn.dark-button.half-button{"ng-click" => "ctrl.submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} + %span Register + %br + .login-forgot + %a.btn.btn-link{"ng-click" => "ctrl.showResetForm = !ctrl.showResetForm"} I forgot my password + .panel-status-text{"ng-if" => "ctrl.loginData.status", "style" => "font-size: 14px;"} {{ctrl.loginData.status}} - .menu.navbar-text.navbar-right - .items - .item.account - %button.btn.dark-button.advanced-brand{"ng-click" => "ctrl.accountMenuPressed()"} - %div{"ng-if" => "ctrl.user.email"} {{ctrl.user.email}} - %div{"ng-if" => "!ctrl.user.email"} Sign in or Register - .panel.panel-default.account-panel{"ng-if" => "ctrl.showAccountMenu"} - .panel-body - .account-items - .account-item.registration-login{"ng-if" => "!ctrl.user.email"} - .meta-container - .title Sign in or Register - .desc - %form.account-form{'name' => "loginForm"} - .form-tag.has-feedback - %input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.loginData.email'} - .form-tag.has-feedback - %input.form-control.login-input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.loginData.user_password'} - .checkbox{"ng-if" => "ctrl.hasLocalData()"} - %label - %input{"type" => "checkbox", "ng-model" => "ctrl.user.shouldMerge", "ng-bind" => "true", "ng-change" => "ctrl.mergeLocalChanged()"} - Merge local notes - %button.btn.dark-button.half-button{"ng-click" => "ctrl.loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} - %span Sign In - %button.btn.dark-button.half-button{"ng-click" => "ctrl.submitRegistrationForm()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} - %span Register - %br - .login-forgot - %a.btn.btn-link{"ng-click" => "ctrl.showResetForm = !ctrl.showResetForm"} I forgot my password - .panel-status-text{"ng-if" => "ctrl.loginData.status", "style" => "font-size: 14px;"} {{ctrl.loginData.status}} + %form{"style" => "margin-top: 20px;", "ng-if" => "ctrl.showResetForm", "ng-init" => "ctrl.resetData = {}", 'ng-submit' => 'ctrl.forgotPasswordSubmit()', 'name' => "resetForm"} + .form-tag.has-feedback + %input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.resetData.email'} + %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} + %span Send Reset Email + .panel-status-text{"ng-if" => "ctrl.resetData.response", "style" => "font-size: 14px;"} + {{ctrl.resetData.response}} - %form{"style" => "margin-top: 20px;", "ng-if" => "ctrl.showResetForm", "ng-init" => "ctrl.resetData = {}", 'ng-submit' => 'ctrl.forgotPasswordSubmit()', 'name' => "resetForm"} + .account-item{"ng-if" => "ctrl.user.email"} + .meta-container + .title Local Encryption + .desc Encrypt notes locally before sending to server. Neither the server owner nor an intruder can decrypt your locally encrypted notes. + .action-container + %span.status-title Status: enabled. + {{ctrl.encryptionStatusForNotes()}} (shared notes not encrypted) + .account-item{"ng-if" => "ctrl.user.email"} + .meta-container + .title Data Archives + .desc Note: data archives that you download using the link below are decrypted before save. You should take care to store them in a safe location. + .action-container + %a#download-archive{"ng-click" => "ctrl.downloadDataArchive()"} Download Latest Data Archive + %label#import-archive + %input{"type" => "file", "style" => "display: none;", "file-change" => "", "handler" => "ctrl.importFileSelected(files)"} + %span + Import Data from Archive + + .account-item + .meta-container + .title Server + .desc Use a custom Standard Notes server to store and retrieve your account data. + .action-container + %form.account-form{'ng-submit' => 'ctrl.changeServer()', 'name' => "serverChangeForm"} .form-tag.has-feedback - %input.form-control.login-input{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'ctrl.resetData.email'} + %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'ctrl.serverData.url'} %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} - %span Send Reset Email - .panel-status-text{"ng-if" => "ctrl.resetData.response", "style" => "font-size: 14px;"} - {{ctrl.resetData.response}} + %span.ladda-label Change Server - .account-item{"ng-if" => "ctrl.user.email"} - .icon-container - %img.icon{"lazy-img" => "assets/encryption.png"} - .meta-container - .title Local Encryption - .desc Encrypt notes locally before sending to server. Neither the server owner nor an intruder can decrypt your locally encrypted notes. - .action-container - %span.status-title Status: enabled. - {{ctrl.encryptionStatusForNotes()}} (shared notes not encrypted) - .account-item{"ng-if" => "ctrl.user.email"} - .icon-container - %img.icon.archive{"lazy-img" => "assets/archive.png"} - .meta-container - .title Data Archives - .desc Note: data archives that you download using the link below are decrypted before save. You should take care to store them in a safe location. - .action-container - %a#download-archive{"ng-click" => "ctrl.downloadDataArchive()"} Download Latest Data Archive - %label#import-archive - %input{"type" => "file", "style" => "display: none;", "file-change" => "", "handler" => "ctrl.importFileSelected(files)"} - %span - Import Data from Archive + .links{"ng-if" => "ctrl.user.email"} + .link-item + %a{"ng-click" => "ctrl.changePasswordPressed()"} Change Password + %form.account-form{"ng-if" => "ctrl.showNewPasswordForm", 'ng-submit' => 'ctrl.submitPasswordChange()', 'name' => "passwordChangeForm"} + .form-tag.has-feedback + %input.form-control.login-input{:autofocus => 'autofocus', :name => 'current', :placeholder => 'Current password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.current_password'} + .form-tag.has-feedback + %input.form-control.login-input{:placeholder => 'New password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password', "autocomplete" => "new-password"} + .form-tag.has-feedback + %input.form-control.login-input{:placeholder => 'Confirm password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password_confirmation', "autocomplete" => "new-password"} + %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} + %span.ladda-label Change Password + .panel-status-text{"ng-if" => "ctrl.passwordChangeData.status", "style" => "font-size: 14px;"} + {{ctrl.passwordChangeData.status}} + .link-item + %a{"ng-click" => "ctrl.signOutPressed()"} Sign Out - .account-item - .meta-container - .title Server - .desc Use a custom Standard Notes server to store and retrieve your account data. - .action-container - %form.account-form{'ng-submit' => 'ctrl.changeServer()', 'name' => "serverChangeForm"} - .form-tag.has-feedback - %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'ctrl.serverData.url'} - %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} - %span.ladda-label Change Server - - .links{"ng-if" => "ctrl.user.email"} - .link-item - %a{"ng-click" => "ctrl.changePasswordPressed()"} Change Password - %form.account-form{"ng-if" => "ctrl.showNewPasswordForm", 'ng-submit' => 'ctrl.submitPasswordChange()', 'name' => "passwordChangeForm"} - .form-tag.has-feedback - %input.form-control.login-input{:autofocus => 'autofocus', :name => 'current', :placeholder => 'Current password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.current_password'} - .form-tag.has-feedback - %input.form-control.login-input{:placeholder => 'New password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password', "autocomplete" => "new-password"} - .form-tag.has-feedback - %input.form-control.login-input{:placeholder => 'Confirm password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'ctrl.passwordChangeData.new_password_confirmation', "autocomplete" => "new-password"} - %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"} - %span.ladda-label Change Password - .panel-status-text{"ng-if" => "ctrl.passwordChangeData.status", "style" => "font-size: 14px;"} - {{ctrl.passwordChangeData.status}} - .link-item - %a{"ng-click" => "ctrl.signOutPressed()"} Sign Out - - .item - %a.menuItem{"href" => "https://standardnotes.org", "target" => "_blank"} - about + .item + %a.menuItem{"href" => "https://standardnotes.org", "target" => "_blank"} + Help diff --git a/app/assets/templates/frontend/tags.html.haml b/app/assets/templates/frontend/tags.html.haml index 0149fb0a6..83ffba5e2 100644 --- a/app/assets/templates/frontend/tags.html.haml +++ b/app/assets/templates/frontend/tags.html.haml @@ -2,7 +2,7 @@ .content .section-title-bar.tags-title-bar .title Tags - .add-button{"ng-click" => "ctrl.clickedAddNewTag()"} + + .add-button.tag-add-button{"ng-click" => "ctrl.clickedAddNewTag()"} + {{ctrl.test}} .tag{"ng-if" => "ctrl.allTag", "ng-click" => "ctrl.selectTag(ctrl.allTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.allTag}", "droppable" => true, "drop" => "ctrl.handleDrop", "tag" => "ctrl.allTag"}