rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Styling wip

Browse Source
This commit is contained in:
Mo Bitar
2018-01-05 15:02:54 -06:00
parent 3a80d16f4b
commit a01067220c
3 changed files with 260 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/stylesheets/app/_footer.scss
View File

@@ -39,10 +39,6 @@ h2 {
} }
} }
input {
border-radius: 0px;
}
} }
#footer-bar .footer-bar-link { #footer-bar .footer-bar-link {
@@ -85,13 +81,14 @@ h2 {
background-color: white; background-color: white;
} }
.panel .close-button {
&:hover {
text-decoration: none;
}
}
#account-panel { #account-panel {
width: 400px; width: 400px;
#signout-button {
text-align: right;
display: block;
}
} }
a.disabled { a.disabled {

52
app/assets/templates/frontend/directives/account-menu.html.haml
View File

@@ -4,8 +4,8 @@
%h1.title Account %h1.title Account
%a.close-button Close %a.close-button Close
.content .content
.panel-section.hero{"ng-if" => "!user"}
.step-one{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"} .panel-section.hero{"ng-if" => "!user && !formData.showLogin && !formData.showRegister && !formData.mfa"}
%h1.title Sign in or register to enable sync and end-to-end encryption. %h1.title Sign in or register to enable sync and end-to-end encryption.
.button-group.stretch .button-group.stretch
.button.info.featured{"ng-click" => "formData.showLogin = true"} .button.info.featured{"ng-click" => "formData.showLogin = true"}
@@ -15,44 +15,45 @@
%p %p
Standard Notes is free on every platform, and comes standard with sync and encryption. Standard Notes is free on every platform, and comes standard with sync and encryption.
.step-two{"ng-if" => "formData.showLogin || formData.showRegister"} .panel-section{"ng-if" => "formData.showLogin || formData.showRegister"}
.float-group.h20 %h3.title
%h3.pull-left {{formData.showLogin ? "Sign In" : "Register (free)"}} {{formData.showLogin ? "Sign In" : "Register (free)"}}
%a.pull-right.pt-5{"ng-click" => "formData.showLogin = false; formData.showRegister = false;"} Cancel
%form.mt-5 %form.panel-form
%input.form-control.mt-10{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} %input{:placeholder => 'Email', :autofocus => 'autofocus', :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'}
%input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} %input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'}
%input.form-control{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'} %input{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'}
%a.block{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"} Advanced Options %a.panel-row{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"}
.advanced-options.mt-10{"ng-if" => "formData.showAdvanced"} Advanced Options
.notification.info{"ng-if" => "formData.showRegister"}
%h2.title No Password Reset.
.text Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.
.advanced-options.panel-row{"ng-if" => "formData.showAdvanced"}
.float-group .float-group
%label.pull-left Sync Server Domain %label.pull-left Sync Server Domain
%input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
.checkbox.mt-10 .button-group.stretch.panel-row.form-submit
%p .button.info.featured{"ng-click" => "submitAuthForm()"}
{{formData.showLogin ? "Sign In" : "Register"}}
%label
%input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"} %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"}
Stay signed in Stay signed in
.checkbox.mt-10{"ng-if" => "notesAndTagsCount() > 0"} %label
%p
%input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
Merge local data ({{notesAndTagsCount()}} notes and tags) Merge local data ({{notesAndTagsCount()}} notes and tags)
%button.ui-button.block.mt-10{"ng-click" => "submitAuthForm()"} {{formData.showLogin ? "Sign In" : "Register"}}
%form.mt-5{"ng-if" => "formData.mfa"} %form.mt-5{"ng-if" => "formData.mfa"}
%p {{formData.mfa.message}} %p {{formData.mfa.message}}
%input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'} %input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'}
%button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}} %button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}}
.mt-15{"ng-if" => "formData.showRegister"} %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"}
%h3 No Password Reset. {{formData.status}}
%p.mt-5 Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.
%em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}}
%div{"ng-if" => "!formData.showLogin && !formData.showRegister"}
.panel-section{"ng-if" => "user"} .panel-section{"ng-if" => "user"}
%h2 {{user.email}} %h2 {{user.email}}
%p {{server}} %p {{server}}
@@ -172,4 +173,7 @@
.spinner.mt-10{"ng-if" => "importData.loading"} .spinner.mt-10{"ng-if" => "importData.loading"}
.footer .footer
%a#signout-button{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }} %a.right{"ng-if" => "formData.showLogin || formData.showRegister", "ng-click" => "formData.showLogin = false; formData.showRegister = false;"}
Cancel
%a.right{"ng-if" => "!formData.showLogin && !formData.showRegister", "ng-click" => "destroyLocalData()"}
{{ user ? "Sign out and clear local data" : "Clear all local data" }}

149
vendor/assets/stylesheets/stylekit.css vendored
View File

@@ -6,12 +6,12 @@
.sn-component .panel { .sn-component .panel {
box-shadow: 0px 2px 13px #C8C8C8; box-shadow: 0px 2px 13px #C8C8C8;
border-radius: 0.7rem; border-radius: 0.7rem;
overflow: hidden; overflow: scroll;
} }
.sn-component .panel .header { .sn-component .panel .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 1.1rem 1.8rem; padding: 1.1rem 2rem;
border-bottom: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1;
background-color: #F6F6F6; background-color: #F6F6F6;
align-items: center; align-items: center;
@@ -20,11 +20,19 @@
font-weight: bold; font-weight: bold;
} }
.sn-component .panel .footer { .sn-component .panel .footer {
padding: 1rem 1.8rem; padding: 1rem 2rem;
border-top: 1px solid #F1F1F1; border-top: 1px solid #F1F1F1;
} }
.sn-component .panel .footer .left {
text-align: right;
display: block;
}
.sn-component .panel .footer .right {
text-align: right;
display: block;
}
.sn-component .panel .content { .sn-component .panel .content {
padding: 1.4rem 1.8rem; padding: 1.9rem 2rem;
padding-bottom: 0; padding-bottom: 0;
} }
.sn-component .panel .content p { .sn-component .panel .content p {
@@ -35,7 +43,7 @@
font-weight: bold; font-weight: bold;
} }
.sn-component .panel .content .panel-section { .sn-component .panel .content .panel-section {
padding-bottom: 1.4rem; padding-bottom: 1.6rem;
} }
.sn-component .panel .content .panel-section.hero { .sn-component .panel .content .panel-section.hero {
text-align: center; text-align: center;
@@ -66,6 +74,19 @@
color: #086DD6; color: #086DD6;
margin-top: -4px; margin-top: -4px;
} }
.sn-component .panel .content .panel-section .panel-row {
display: block;
padding: 0.4rem 0;
}
.sn-component .panel .content .panel-form {
width: 100%;
}
.sn-component .panel .content .panel-form.half {
width: 50%;
}
.sn-component .panel .content .panel-form .form-submit {
margin-top: 0.15rem;
}
.sn-component .red { .sn-component .red {
color: #F80324; color: #F80324;
} }
@@ -98,32 +119,72 @@
.sn-component p { .sn-component p {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
.sn-component input {
box-sizing: border-box;
padding: 0.75rem 0.8rem;
margin: 0.30rem 0;
border-radius: 3px;
border: 1px solid #e1e1e1;
font-size: 1.1rem;
width: 100%;
outline: 0;
}
.sn-component input.info {
border-color: #086DD6;
background-color: transparent;
}
.sn-component label {
margin: 0.7rem 0;
display: block;
font-size: 1.1rem;
}
.sn-component label input[type='checkbox'] {
width: auto;
margin-right: 0.5rem;
/* Space after checkbox */
}
.sn-component .checkbox-group {
padding-top: 0.5rem;
padding-bottom: 0.3rem;
}
.sn-component ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #c4c4c4;
}
.sn-component :-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #c4c4c4;
}
.sn-component ::-ms-input-placeholder {
/* Microsoft Edge */
color: #c4c4c4;
}
.sn-component .button-group.stretch { .sn-component .button-group.stretch {
display: flex; display: flex;
} }
.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box { .sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box, .sn-component .button-group.stretch .notification {
display: block; display: block;
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
} }
.sn-component .button-group .button, .sn-component .button-group .box { .sn-component .button-group .button, .sn-component .button-group .box, .sn-component .button-group .notification {
display: inline-block; display: inline-block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child) { .sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child), .sn-component .button-group .notification:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured { .sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured, .sn-component .button-group .notification:not(:last-child).featured {
margin-right: 8px; margin-right: 8px;
} }
.sn-component .box-group .box { .sn-component .box-group .box, .sn-component .box-group .notification {
display: inline-block; display: inline-block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.sn-component .box-group .box:not(:last-child) { .sn-component .box-group .box:not(:last-child), .sn-component .box-group .notification:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
.sn-component .button, .sn-component .box { .sn-component .button, .sn-component .box, .sn-component .notification {
display: table; display: table;
border-radius: 3px; border-radius: 3px;
padding: 0.5rem 0.7rem; padding: 0.5rem 0.7rem;
@@ -132,70 +193,86 @@
text-align: center; text-align: center;
border: 1px solid; border: 1px solid;
} }
.sn-component .button .label, .sn-component .box .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle { .sn-component .button .label, .sn-component .box .label, .sn-component .notification .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle, .sn-component .notification .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .notification .subtitle {
font-weight: bold; font-weight: bold;
display: block; display: block;
text-align: center; text-align: center;
} }
.sn-component .box { .sn-component .box, .sn-component .notification {
padding: 2.5rem 1.5rem; padding: 2.5rem 1.5rem;
} }
.sn-component .info { .sn-component .button.info, .sn-component .info.box, .sn-component .info.notification, .sn-component .box.info, .sn-component .info.notification, .sn-component .notification.info {
background-color: rgba(8, 109, 214, 0.1); background-color: rgba(8, 109, 214, 0.1);
border-color: #086DD6; border-color: #086DD6;
color: #086DD6; color: #086DD6;
} }
.sn-component .info:hover { .sn-component .button.info:hover, .sn-component .info.box:hover, .sn-component .info.notification:hover, .sn-component .box.info:hover, .sn-component .info.notification:hover, .sn-component .notification.info:hover {
background-color: #d5e9fd; background-color: #d5e9fd;
color: #0975e5; color: #0975e5;
} }
.sn-component .info.featured { .sn-component .button.info.featured, .sn-component .info.featured.box, .sn-component .info.featured.notification, .sn-component .box.info.featured, .sn-component .info.featured.notification, .sn-component .notification.info.featured {
background-color: #086DD6; background-color: #086DD6;
border: none; border: none;
color: white; color: white;
padding: 0.75rem 0; padding: 0.75rem 1.25rem;
font-size: 1.1rem; font-size: 1.1rem;
} }
.sn-component .info.featured:hover { .sn-component .button.info.featured:hover, .sn-component .info.featured.box:hover, .sn-component .info.featured.notification:hover, .sn-component .box.info.featured:hover, .sn-component .info.featured.notification:hover, .sn-component .notification.info.featured:hover {
background-color: #1181f6; background-color: #1181f6;
} }
.sn-component .warning { .sn-component .button.warning, .sn-component .warning.box, .sn-component .warning.notification, .sn-component .box.warning, .sn-component .warning.notification, .sn-component .notification.warning {
background-color: rgba(214, 173, 8, 0.1); background-color: rgba(246, 162, 0, 0.1);
border-color: #D6AD08; border-color: #f6a200;
color: #D6AD08; color: #f6a200;
} }
.sn-component .warning:hover { .sn-component .button.warning:hover, .sn-component .warning.box:hover, .sn-component .warning.notification:hover, .sn-component .box.warning:hover, .sn-component .warning.notification:hover, .sn-component .notification.warning:hover {
background-color: #fdf5d5; background-color: #fff8ec;
color: #e5b909; color: #ffaa06;
} }
.sn-component .warning.featured { .sn-component .button.warning.featured, .sn-component .warning.featured.box, .sn-component .warning.featured.notification, .sn-component .box.warning.featured, .sn-component .warning.featured.notification, .sn-component .notification.warning.featured {
background-color: #D6AD08; background-color: #f6a200;
border: none; border: none;
color: white; color: white;
padding: 0.75rem 0; padding: 0.75rem 1.25rem;
font-size: 1.1rem; font-size: 1.1rem;
} }
.sn-component .warning.featured:hover { .sn-component .button.warning.featured:hover, .sn-component .warning.featured.box:hover, .sn-component .warning.featured.notification:hover, .sn-component .box.warning.featured:hover, .sn-component .warning.featured.notification:hover, .sn-component .notification.warning.featured:hover {
background-color: #f6c811; background-color: #ffb320;
} }
.sn-component .danger { .sn-component .button.danger, .sn-component .danger.box, .sn-component .danger.notification, .sn-component .box.danger, .sn-component .danger.notification, .sn-component .notification.danger {
background-color: rgba(248, 3, 36, 0.1); background-color: rgba(248, 3, 36, 0.1);
border-color: #F80324; border-color: #F80324;
color: #F80324; color: #F80324;
} }
.sn-component .danger:hover { .sn-component .button.danger:hover, .sn-component .danger.box:hover, .sn-component .danger.notification:hover, .sn-component .box.danger:hover, .sn-component .danger.notification:hover, .sn-component .notification.danger:hover {
background-color: #fff1f3; background-color: #fff1f3;
color: #fc0e2e; color: #fc0e2e;
} }
.sn-component .danger.featured { .sn-component .button.danger.featured, .sn-component .danger.featured.box, .sn-component .danger.featured.notification, .sn-component .box.danger.featured, .sn-component .danger.featured.notification, .sn-component .notification.danger.featured {
background-color: #F80324; background-color: #F80324;
border: none; border: none;
color: white; color: white;
padding: 0.75rem 0; padding: 0.75rem 1.25rem;
font-size: 1.1rem; font-size: 1.1rem;
} }
.sn-component .danger.featured:hover { .sn-component .button.danger.featured:hover, .sn-component .danger.featured.box:hover, .sn-component .danger.featured.notification:hover, .sn-component .box.danger.featured:hover, .sn-component .danger.featured.notification:hover, .sn-component .notification.danger.featured:hover {
background-color: #fc2744; background-color: #fc2744;
} }
.sn-component .notification {
padding: 1.1rem 1rem;
margin: 1.4rem 0;
text-align: left;
border-radius: 0.2rem;
cursor: default;
}
.sn-component .notification.stretch {
width: 100%;
}
.sn-component .notification .text {
line-height: 1.5rem;
font-size: 1.05rem;
text-align: left;
font-weight: normal;
}
/*# sourceMappingURL=stylekit.css.map */ /*# sourceMappingURL=stylekit.css.map */