From 10685e6aebdd3f04d15c73f173e2be24d39442b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20L=C3=BCder?= Date: Thu, 9 Feb 2017 20:14:28 -0800 Subject: [PATCH] Use BEM for styles --- .ember-cli | 1 + app/components/categories-list.js | 2 +- app/components/drag-zone.js | 2 +- app/components/image-drop.js | 8 +- app/components/navigation-menu.js | 3 +- app/components/organization-menu.js | 2 +- app/components/project-details.js | 3 +- app/components/project-menu.js | 4 +- app/components/site-footer.js | 3 +- app/components/user-dropdown.js | 2 +- app/routes/project/donate.js | 2 +- app/routes/project/index.js | 1 - app/styles/_alerts.scss | 10 +- app/styles/_buttons.scss | 57 ++- app/styles/_code.scss | 368 ++++++++++++++---- app/styles/_colors.scss | 26 +- app/styles/_fonts.scss | 16 - app/styles/_header.scss | 10 - app/styles/_icons.scss | 46 ++- app/styles/_inputs.scss | 4 +- app/styles/_misc.scss | 32 -- app/styles/_retina.scss | 14 - app/styles/_shame.scss | 122 ++++++ app/styles/app.scss | 168 +++++--- app/styles/{ => base}/_animations.scss | 0 app/styles/base/_base.scss | 38 ++ app/styles/base/_colors.scss | 117 ++++++ app/styles/base/_fonts.scss | 77 ++++ app/styles/base/_helpers.scss | 27 ++ app/styles/base/_mixins.scss | 57 +++ app/styles/components/categories-list.scss | 7 +- app/styles/components/category-item.scss | 6 +- app/styles/components/comment-item.scss | 6 +- app/styles/components/donation-goal.scss | 12 +- app/styles/components/donation-payment.scss | 8 +- app/styles/components/donation/card-item.scss | 6 +- .../donations/donation-progress.scss | 8 +- .../components/donations/donation-status.scss | 2 +- app/styles/components/drag-zone.scss | 3 - .../{ => components}/dropdown-menu.scss | 102 +++-- .../components/editor-with-preview.scss | 9 + app/styles/components/image-drop.scss | 28 +- app/styles/components/loading-bar.scss | 2 +- app/styles/components/login-form.scss | 1 - app/styles/components/member-list-item.scss | 89 +++-- app/styles/components/navigation-menu.scss | 60 --- .../components/organization-members.scss | 2 +- app/styles/components/pager-control.scss | 20 +- .../components/payments/account-setup.scss | 2 +- .../funds-recipient/details-form.scss | 4 +- .../components/project-card-members.scss | 2 +- .../components/project-card-skills.scss | 4 +- app/styles/components/project-card.scss | 8 +- app/styles/components/project-details.scss | 34 +- app/styles/components/project-header.scss | 2 +- app/styles/components/project-list.scss | 6 +- .../components/project-long-description.scss | 2 +- app/styles/components/project-menu.scss | 99 ++--- app/styles/components/role-item.scss | 4 - app/styles/components/settings-menu.scss | 15 +- app/styles/components/signup-form.scss | 1 - app/styles/components/skill-list-item.scss | 8 +- app/styles/components/skills-list.scss | 2 +- app/styles/components/skills-typeahead.scss | 8 +- app/styles/components/task-card.scss | 8 +- app/styles/components/task-comment-list.scss | 3 +- app/styles/components/task-new-form.scss | 4 +- app/styles/components/task-status.scss | 2 +- app/styles/components/task-title.scss | 2 +- app/styles/components/user-details.scss | 3 + app/styles/components/user-menu.scss | 51 ++- .../components/user-organizations-list.scss | 14 +- app/styles/components/user-sidebar.scss | 12 +- app/styles/layout/_content.scss | 19 + .../site-footer.scss => layout/_footer.scss} | 4 +- app/styles/{ => layout}/_forms.scss | 15 +- app/styles/layout/_header.scss | 71 ++++ app/styles/main.scss | 205 ---------- app/styles/start.scss | 37 -- app/styles/templates/about.scss | 6 +- app/styles/{ => templates}/index.scss | 4 +- app/styles/templates/project/index.scss | 10 +- .../project/settings/contributors.scss | 15 +- .../project/settings/settings.scss} | 0 .../project/tasks}/task-new.scss | 0 .../{ => templates/project/tasks}/task.scss | 5 + app/styles/templates/project/thank-you.scss | 2 +- app/styles/templates/start/expertise.scss | 70 +++- app/styles/templates/start/hello.scss | 61 ++- app/styles/templates/start/skills.scss | 31 +- app/styles/templates/start/start.scss | 29 ++ app/styles/templates/team.scss | 4 +- app/templates/application.hbs | 18 +- app/templates/components/categories-list.hbs | 2 - app/templates/components/category-item.hbs | 12 +- app/templates/components/flash-messages.hbs | 2 +- app/templates/components/login-form.hbs | 5 +- app/templates/components/member-list-item.hbs | 54 ++- app/templates/components/navigation-menu.hbs | 51 +-- .../components/organization-members.hbs | 2 +- app/templates/components/project-details.hbs | 50 +-- app/templates/components/project-header.hbs | 2 + .../components/project-long-description.hbs | 19 +- app/templates/components/project-menu.hbs | 52 ++- app/templates/components/role-item.hbs | 12 +- app/templates/components/signup-form.hbs | 10 +- app/templates/components/site-footer.hbs | 146 ++++--- .../slugged-route-model-details.hbs | 1 - app/templates/components/user-dropdown.hbs | 12 +- app/templates/components/user-menu.hbs | 11 +- .../components/user-organizations-list.hbs | 8 +- app/templates/components/user-sidebar.hbs | 4 +- app/templates/index.hbs | 7 + app/templates/project/index.hbs | 54 +-- app/templates/project/settings.hbs | 5 +- .../project/settings/contributors.hbs | 107 ++--- app/templates/project/tasks/task.hbs | 27 +- app/templates/projects-list.hbs | 20 +- app/templates/settings.hbs | 2 +- app/templates/settings/profile.hbs | 2 +- app/templates/start/expertise.hbs | 19 +- app/templates/start/hello.hbs | 51 +-- app/templates/start/interests.hbs | 6 +- app/templates/start/skills.hbs | 28 +- bower.json | 4 +- package.json | 5 +- tests/acceptance/code-theme-test.js | 2 +- tests/acceptance/login-test.js | 6 +- tests/acceptance/logout-test.js | 9 +- tests/acceptance/navigation-test.js | 2 +- tests/acceptance/onboarding-test.js | 29 +- .../organization-settings-profile-test.js | 4 +- tests/acceptance/organization-test.js | 10 +- tests/acceptance/profile-test.js | 2 +- tests/acceptance/project-about-test.js | 2 +- tests/acceptance/project-test.js | 6 +- tests/acceptance/slugged-route-test.js | 12 +- tests/acceptance/task-creation-test.js | 2 +- .../components/category-item-test.js | 12 +- .../components/editor-with-preview-test.js | 12 +- .../integration/components/image-drop-test.js | 20 +- .../components/member-list-item-test.js | 20 +- .../components/navigation-menu-test.js | 38 +- .../components/project-details-test.js | 35 +- .../components/project-menu-test.js | 66 +--- .../integration/components/role-item-test.js | 8 +- .../components/select-dropdown-test.js | 2 +- .../components/signup-email-input-test.js | 28 +- .../components/signup-password-input-test.js | 4 +- .../components/signup-username-input-test.js | 28 +- .../components/skill-button-test.js | 8 +- .../skills-typeahead-result-test.js | 2 +- .../components/skills-typeahead-test.js | 32 +- .../components/task-status-test.js | 4 +- .../integration/components/user-menu-test.js | 21 +- tests/pages/components/categories-list.js | 4 +- tests/pages/components/navigation-menu.js | 26 +- tests/pages/components/project-details.js | 6 +- tests/pages/components/project-menu.js | 3 +- tests/pages/components/user-menu.js | 25 +- .../components/user-organizations-list.js | 4 +- tests/pages/components/user-sidebar.js | 4 +- tests/pages/contributors.js | 8 +- tests/pages/index.js | 2 +- tests/pages/onboarding.js | 33 +- tests/pages/project/tasks/index.js | 4 +- tests/pages/user.js | 2 +- tests/unit/mixins/contains-code-test.js | 4 +- tests/unit/models/comment-test.js | 4 +- tests/unit/models/organization-test.js | 2 +- tests/unit/models/project-test.js | 4 +- tests/unit/models/task-test.js | 4 +- tests/unit/services/code-theme-test.js | 8 +- tests/unit/services/drag-state-test.js | 6 +- 174 files changed, 2236 insertions(+), 1634 deletions(-) delete mode 100644 app/styles/_fonts.scss delete mode 100644 app/styles/_header.scss delete mode 100644 app/styles/_misc.scss delete mode 100644 app/styles/_retina.scss create mode 100644 app/styles/_shame.scss rename app/styles/{ => base}/_animations.scss (100%) create mode 100644 app/styles/base/_base.scss create mode 100644 app/styles/base/_colors.scss create mode 100644 app/styles/base/_fonts.scss create mode 100644 app/styles/base/_helpers.scss create mode 100644 app/styles/base/_mixins.scss delete mode 100644 app/styles/components/drag-zone.scss rename app/styles/{ => components}/dropdown-menu.scss (53%) delete mode 100644 app/styles/components/navigation-menu.scss delete mode 100644 app/styles/components/role-item.scss create mode 100644 app/styles/layout/_content.scss rename app/styles/{components/site-footer.scss => layout/_footer.scss} (94%) rename app/styles/{ => layout}/_forms.scss (93%) create mode 100644 app/styles/layout/_header.scss delete mode 100644 app/styles/main.scss delete mode 100644 app/styles/start.scss rename app/styles/{ => templates}/index.scss (97%) rename app/styles/{_settings.scss => templates/project/settings/settings.scss} (100%) rename app/styles/{ => templates/project/tasks}/task-new.scss (100%) rename app/styles/{ => templates/project/tasks}/task.scss (63%) create mode 100644 app/styles/templates/start/start.scss diff --git a/.ember-cli b/.ember-cli index ee64cfed2..2d960fd1f 100644 --- a/.ember-cli +++ b/.ember-cli @@ -5,5 +5,6 @@ Setting `disableAnalytics` to true will prevent any data from being sent. */ + "disableAnalytics": false } diff --git a/app/components/categories-list.js b/app/components/categories-list.js index ff3769d1c..1c42d5e75 100644 --- a/app/components/categories-list.js +++ b/app/components/categories-list.js @@ -19,7 +19,7 @@ const { * @extends Ember.Component */ export default Component.extend({ - classNames: ['categories-list'], + classNames: ['start__interests'], /** * An array of properties used to sort the list of categories. diff --git a/app/components/drag-zone.js b/app/components/drag-zone.js index 516fd5340..2153debef 100644 --- a/app/components/drag-zone.js +++ b/app/components/drag-zone.js @@ -7,7 +7,7 @@ const { } = Ember; export default Component.extend({ - classNames: ['drag-zone'], + classNames: ['drag-zone', 'flexbox-container'], dragState: service(), diff --git a/app/components/image-drop.js b/app/components/image-drop.js index bbb2f8304..1ab5efd9b 100644 --- a/app/components/image-drop.js +++ b/app/components/image-drop.js @@ -25,15 +25,15 @@ export default Component.extend({ attributeBindings: ['style'], classNames: ['image-drop'], classNameBindings: [ - 'active', - 'circle:is-circular', + 'active:image-drop--active', + 'circle:image-drop--circle', + 'isDraggingOnApp:image-drop--drag', 'hasImage', - 'isDraggingOnApp:is-dragging', 'large:is-large' ], droppedImage: null, files: null, - helpText: 'Drop your image here.', + helpText: 'Click to add your photo.', originalImage: null, multiple: false, url: `https://api.cloudinary.com/v1_1/${ENV.cloudinary.cloud}/image/upload`, diff --git a/app/components/navigation-menu.js b/app/components/navigation-menu.js index 6c241bf8e..e6c4cc221 100644 --- a/app/components/navigation-menu.js +++ b/app/components/navigation-menu.js @@ -19,7 +19,8 @@ const { @extends Ember.Component */ export default Component.extend({ - classNames: ['menu', 'container'], + tagName: 'header', + classNames: ['site-header', 'container'], /** @property currentUser diff --git a/app/components/organization-menu.js b/app/components/organization-menu.js index 417446354..4216b0511 100644 --- a/app/components/organization-menu.js +++ b/app/components/organization-menu.js @@ -5,5 +5,5 @@ const { } = Ember; export default Component.extend({ - classNames: ['organization-menu', 'horizontal-menu'] + classNames: ['organization-menu', 'organization-menu--horizontal'] }); diff --git a/app/components/project-details.js b/app/components/project-details.js index 474713d5c..84724e68f 100644 --- a/app/components/project-details.js +++ b/app/components/project-details.js @@ -19,9 +19,10 @@ const { */ export default Component.extend({ - classNames: ['project-details'], + classNames: ['project__header'], classNameBindings: ['expanded'], expanded: false, + tagName: 'header', /** @property store diff --git a/app/components/project-menu.js b/app/components/project-menu.js index 7f33cafc9..bd72755a2 100644 --- a/app/components/project-menu.js +++ b/app/components/project-menu.js @@ -20,8 +20,8 @@ const { @class project-menu */ export default Component.extend({ - classNames: ['project-menu', 'horizontal-menu'], - tagName: 'ul', + classNames: ['project__menu', 'project__menu--horizontal'], + tagName: 'nav', /** Retreives user credentials to show more content for project managers. diff --git a/app/components/site-footer.js b/app/components/site-footer.js index 4b13650f3..537c5b294 100644 --- a/app/components/site-footer.js +++ b/app/components/site-footer.js @@ -3,5 +3,6 @@ import Ember from 'ember'; const { Component } = Ember; export default Component.extend({ - classNames: ['site-footer'] + tagName: 'footer', + classNames: ['site-footer', 'container'] }); diff --git a/app/components/user-dropdown.js b/app/components/user-dropdown.js index 3d7242642..4a4748cc1 100644 --- a/app/components/user-dropdown.js +++ b/app/components/user-dropdown.js @@ -17,7 +17,7 @@ const { @extends Ember.Component */ export default Component.extend({ - classNames: ['user-dropdown', 'dropdown-menu', 'right'], + classNames: ['dropdown-menu', 'dropdown-menu--right'], /** @property session @type Ember.Service diff --git a/app/routes/project/donate.js b/app/routes/project/donate.js index 71aca8071..8410a7df7 100644 --- a/app/routes/project/donate.js +++ b/app/routes/project/donate.js @@ -16,7 +16,7 @@ export default Route.extend(AuthenticatedRouteMixin, { model() { return this.modelFor('project').reload().then((project) => { - let subscription = this.get('userSubscriptions').fetchForProject(project); + let subscription = get(this, 'userSubscriptions').fetchForProject(project); return RSVP.hash({ project, subscription }); }); }, diff --git a/app/routes/project/index.js b/app/routes/project/index.js index e454d9b84..497f1e429 100644 --- a/app/routes/project/index.js +++ b/app/routes/project/index.js @@ -15,7 +15,6 @@ export default Route.extend({ return RSVP.hash({ project, subscription }); }); }, - setupController(controller, { project, subscription }) { controller.setProperties({ project, subscription }); } diff --git a/app/styles/_alerts.scss b/app/styles/_alerts.scss index d4da0b098..2ad70d02a 100644 --- a/app/styles/_alerts.scss +++ b/app/styles/_alerts.scss @@ -3,6 +3,8 @@ } .alert { + z-index: 99999; + .container { position: relative; } @@ -43,7 +45,7 @@ .alert-success { .full-width-container, .fixed-flash-inner { - background: $dark-blue; + background: $blue; color: white; } } @@ -56,8 +58,10 @@ } } -.close { +.alert__close { + color: white; left: -20px; + padding: none; position: absolute; - top: -3px; + top: 0; } diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss index 6fdb03110..5491c3628 100644 --- a/app/styles/_buttons.scss +++ b/app/styles/_buttons.scss @@ -1,3 +1,15 @@ +// +// BUTTONS +// + +// GUIDELINES +// In order to make the styles more readable nesting should be used only for pseudo classes +// e.g. :active, :disabled, :hover, :visited + +// +// MIXINS +// + @mixin taskTypeButtonColors($type) { $background: map-get($taskTypeColors, $type); $text: map-get($taskTypeTextOnBackgroundColors, $type); @@ -16,15 +28,15 @@ @mixin primary-active { &.primary-active { &.active { - background: $primary-color; - border-color: $primary-color; + background: $blue; + border-color: $blue; color: white; } } } @mixin focus($color) { - box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px $color; + box-shadow: 0 0 0 1px white, 0 0 0 3px $color; } @mixin colorButton($color) { @@ -40,16 +52,16 @@ } #{$all-buttons}, .button { - color: white; border-radius: 4px; border-style: solid; border-width: 1px; - padding: 11px 14px; + color: white; + display: inline-block; font-family: $body-font-family; font-size: $body-font-size-normal; font-weight: 500; + padding: 11px 14px; text-decoration: none; - display: inline-block; &:focus { outline: none; @@ -69,6 +81,25 @@ &.large { font-size: $body-font-size-large; padding: 15px 40px; + } + + &.on-solid { + background: transparent; + border-color: white; + &:hover { + background: white; + } + } + + &.default { + background: $default-color; + border: 1px solid $default-color; + &.on-solid { + background: transparent; + &:hover { + color: $blue; + } + } &.skill { padding: 11px 14px; @@ -77,13 +108,13 @@ &.clear { background: white; - border: 1px solid $border-default; - color: $dark-text; - font-weight: 300; + border: 1px solid $gray; + color: $text--dark; + font-weight: 400; &:focus { background: $clear-focus; - border-color: darken($border-default, 2%); + border-color: darken($gray, 2%); } @include primary-active; @@ -144,9 +175,9 @@ &.button-spinner { display: inline-block; + height: 22px; margin: -4px 8px -2px -2px; vertical-align: middle; - height: 22px; width: 22px; @include fadeIn(0.6s); @@ -202,7 +233,7 @@ &.clear { background: $clear-hover; background-image: linear-gradient(white, $clear-hover); - border-color: $border-default; + border-color: $gray; &:disabled { background: white; @@ -250,9 +281,9 @@ .button-group { @include clearfix; - position: relative; display: inline-block; font-size: 0; + position: relative; vertical-align: middle; #{$all-buttons}, .button { diff --git a/app/styles/_code.scss b/app/styles/_code.scss index 2d61b7f88..a049e9ce8 100644 --- a/app/styles/_code.scss +++ b/app/styles/_code.scss @@ -1,93 +1,309 @@ -pre, code { - background: $code-background; +// +// CODE DARK THEME +// +$code-theme--dark--black: #222; +$code-theme--dark--blue: #6E9CBE; +$code-theme--dark--brown: #BC9458; +$code-theme--dark--green: #A5C261; +$code-theme--dark--orange: #CC7833; +$code-theme--dark--purple: #D0D0FF; +$code-theme--dark--red: #DA4939; +$code-theme--dark--white: #F8F8F2; +$code-theme--dark--yellow: #FFC66D; +$code-theme--dark--yellow--dark: #E8BF6A; +// +// CODE LIGHT THEME +// +$code-theme--light--black: #222; +$code-theme--light--gray: #FBFBFB; +$code-theme--light--green: #229151; +$code-theme--light--orange: #B75F25; + +code, +pre { + background : $code-theme--light--gray; border-radius: 4px; - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: $body-font-size-small; + font-family : Consolas, 'Liberation Mono', Menlo, Courier, monospace; + font-size : $body-font-size-small; } pre { overflow: auto; - padding: 10px; + padding : 10px; code { border-radius: 0; - padding: 0; + padding : 0; } } code { - padding: 4px 4px 2px 4px; + padding: 4px 4px 2px; } .code-theme--dark { - pre, code { - background: $code-background-dark; - color: $code-dark-white; + code, + pre { + background: $code-theme--dark--black; + color : $code-theme--dark--white; } - .highlight .bp { color: $code-dark-light-purple; } /* Name.Builtin.Pseudo */ - .highlight .c1 { color: $code-dark-brown; } /* Comment.Single */ - .highlight .c { color: $code-dark-brown; } /* Comment */ - .highlight .cm { color: $code-dark-brown; } /* Comment.Multiline */ - .highlight .cp { color: $code-dark-brown; } /* Comment.Preproc */ - .highlight .cs { color: $code-dark-brown; } /* Comment.Special */ - .highlight .err { color: #a61717; background-color: #FFF0F0; padding: 1px; } /* Error */ - .highlight .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted */ - .highlight .ge { font-style: italic; } /* Generic.Emph */ - .highlight .gh { color: #999999; } /* Generic.Heading */ - .highlight .gi { color: $code-dark-white; background-color: $code-dark-green; } /* Generic.Inserted */ - .highlight .go { color: #888888; } /* Generic.Output */ - .highlight .gp { color: #555555; } /* Generic.Prompt */ - .highlight .gr { color: #aa0000; } /* Generic.Error */ - .highlight .gs { font-weight: bold; } /* Generic.Strong */ - .highlight .gt { color: #aa0000; } /* Generic.Traceback */ - .highlight .gu { color: #aaaaaa; } /* Generic.Subheading */ - .highlight .hll { background-color: #ffffcc; } /* Unknown */ - .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */ - .highlight .k { color: $code-dark-orange; } /* Keyword */ - .highlight .kc { color: $code-dark-blue; } /* Keyword.Constant */ - .highlight .kd { color: $code-dark-red; } /* Keyword.Declaration */ - .highlight .kn { color: $code-dark-orange; } /* Keyword.Namespace */ - .highlight .kp { color: $code-dark-orange; } /* Keyword.Pseudo */ - .highlight .kr { color: $code-dark-green; } /* Keyword.Reserved */ - .highlight .kt { color: $code-dark-blue; } /* Keyword.Type */ - .highlight .m { color: $code-dark-green; } /* Literal.Number */ - .highlight .mf { color: $code-dark-green; } /* Literal.Number.Float */ - .highlight .mh { color: #009999; } /* Literal.Number.Hex */ - .highlight .mi { color: $code-dark-green; } /* Literal.Number.Integer */ - .highlight .mo { color: $code-dark-green; } /* Literal.Number.Oct */ - .highlight .n { color: $code-dark-green; } /* Unknown */ - .highlight .na { color: $code-dark-light-yellow; } /* Name.Attribute */ - .highlight .nb { color: $code-dark-light-purple; } /* Name.Builtin */ - .highlight .nc { color: $code-dark-dark-yellow; } /* Name.Class */ - .highlight .nd { color: $code-dark-dark-yellow; } /* Name.Decorator */ - .highlight .ne { color: $code-dark-dark-yellow; } /* Name.Exception */ - .highlight .nf { color: $code-dark-dark-yellow; } /* Name.Function */ - .highlight .nl { color: $code-dark-white; } /* Name.Entity */ - .highlight .nn { color: $code-dark-white; } /* Name.Label */ - .highlight .no { color: $code-dark-red; } /* Name.Namespace */ - .highlight .nt { color: $code-dark-light-yellow; } /* Name.Constant */ - .highlight .nv { color: $code-dark-white; } /* Name.Tag */ - .highlight .nx { color: $code-dark-white; } /* Name.Variable */ - .highlight .o { color: $code-dark-orange; } /* Operator */ - .highlight .ow { color: $code-dark-orange; } /* Operator.Word */ - .highlight .p { color: $code-dark-white; } /* Unknown */ - .highlight .s1 { color: $code-dark-green; } /* Literal.String.Single */ - .highlight .s2 { color: $code-dark-green; } /* Literal.String.Double */ - .highlight .s { color: $code-dark-green; } /* Literal.String */ - .highlight .sb { color: $code-dark-green; } /* Literal.String.Backtick */ - .highlight .sc { color: $code-dark-green; } /* Literal.String.Char */ - .highlight .sd { color: $code-dark-green; } /* Literal.String.Doc */ - .highlight .se { color: $code-dark-blue; } /* Literal.String.Escape */ - .highlight .sh { color: $code-dark-green; } /* Literal.String.Heredoc */ - .highlight .si { color: $code-dark-green; } /* Literal.String.Interpol */ - .highlight .sr { color: $code-dark-green; } /* Literal.String.Regex */ - .highlight .ss { color: $code-dark-blue; } /* Literal.String.Symbol */ - .highlight .sx { color: $code-dark-green; } /* Literal.String.Other */ - .highlight .vc { color: $code-dark-light-purple; } /* Name.Variable.Class */ - .highlight .vg { color: $code-dark-light-purple; } /* Name.Variable.Global */ - .highlight .vi { color: $code-dark-light-purple; } /* Name.Variable.Instance */ - .highlight .w { color: #bbbbbb; } /* Text.Whitespace */ + .highlight .bp { + color: $code-theme--dark--purple; + } + /* Name.Builtin.Pseudo */ + .highlight .c1 { + color: $code-theme--dark--brown; + } + /* Comment.Single */ + .highlight .c { + color: $code-theme--dark--brown; + } + /* Comment */ + .highlight .cm { + color: $code-theme--dark--brown; + } + /* Comment.Multiline */ + .highlight .cp { + color: $code-theme--dark--brown; + } + /* Comment.Preproc */ + .highlight .cs { + color: $code-theme--dark--brown; + } + /* Comment.Special */ + .highlight .err { + color : #a61717; + background-color: #FFF0F0; + padding : 1px; + } + /* Error */ + .highlight .gd { + color : #000000; + background-color: #ffdddd; + } + /* Generic.Deleted */ + .highlight .ge { + font-style: italic; + } + /* Generic.Emph */ + .highlight .gh { + color: #999999; + } + /* Generic.Heading */ + .highlight .gi { + color : $code-theme--dark--white; + background-color: $code-theme--dark--green; + } + /* Generic.Inserted */ + .highlight .go { + color: #888888; + } + /* Generic.Output */ + .highlight .gp { + color: #555555; + } + /* Generic.Prompt */ + .highlight .gr { + color: #aa0000; + } + /* Generic.Error */ + .highlight .gs { + font-weight: bold; + } + /* Generic.Strong */ + .highlight .gt { + color: #aa0000; + } + /* Generic.Traceback */ + .highlight .gu { + color: #aaaaaa; + } + /* Generic.Subheading */ + .highlight .hll { + background-color: #ffffcc; + } + /* Unknown */ + .highlight .il { + color: #009999; + } + /* Literal.Number.Integer.Long */ + .highlight .k { + color: $code-theme--dark--orange; + } + /* Keyword */ + .highlight .kc { + color: $code-theme--dark--blue; + } + /* Keyword.Constant */ + .highlight .kd { + color: $code-theme--dark--red; + } + /* Keyword.Declaration */ + .highlight .kn { + color: $code-theme--dark--orange; + } + /* Keyword.Namespace */ + .highlight .kp { + color: $code-theme--dark--orange; + } + /* Keyword.Pseudo */ + .highlight .kr { + color: $code-theme--dark--green; + } + /* Keyword.Reserved */ + .highlight .kt { + color: $code-theme--dark--blue; + } + /* Keyword.Type */ + .highlight .m { + color: $code-theme--dark--green; + } + /* Literal.Number */ + .highlight .mf { + color: $code-theme--dark--green; + } + /* Literal.Number.Float */ + .highlight .mh { + color: #009999; + } + /* Literal.Number.Hex */ + .highlight .mi { + color: $code-theme--dark--green; + } + /* Literal.Number.Integer */ + .highlight .mo { + color: $code-theme--dark--green; + } + /* Literal.Number.Oct */ + .highlight .n { + color: $code-theme--dark--green; + } + /* Unknown */ + .highlight .na { + color: $code-theme--dark--yellow; + } + /* Name.Attribute */ + .highlight .nb { + color: $code-theme--dark--purple; + } + /* Name.Builtin */ + .highlight .nc { + color: $code-theme--dark--yellow--dark; + } + /* Name.Class */ + .highlight .nd { + color: $code-theme--dark--yellow--dark; + } + /* Name.Decorator */ + .highlight .ne { + color: $code-theme--dark--yellow--dark; + } + /* Name.Exception */ + .highlight .nf { + color: $code-theme--dark--yellow--dark; + } + /* Name.Function */ + .highlight .nl { + color: $code-theme--dark--white; + } + /* Name.Entity */ + .highlight .nn { + color: $code-theme--dark--white; + } + /* Name.Label */ + .highlight .no { + color: $code-theme--dark--red; + } + /* Name.Namespace */ + .highlight .nt { + color: $code-theme--dark--yellow; + } + /* Name.Constant */ + .highlight .nv { + color: $code-theme--dark--white; + } + /* Name.Tag */ + .highlight .nx { + color: $code-theme--dark--white; + } + /* Name.Variable */ + .highlight .o { + color: $code-theme--dark--orange; + } + /* Operator */ + .highlight .ow { + color: $code-theme--dark--orange; + } + /* Operator.Word */ + .highlight .p { + color: $code-theme--dark--white; + } + /* Unknown */ + .highlight .s1 { + color: $code-theme--dark--green; + } + /* Literal.String.Single */ + .highlight .s2 { + color: $code-theme--dark--green; + } + /* Literal.String.Double */ + .highlight .s { + color: $code-theme--dark--green; + } + /* Literal.String */ + .highlight .sb { + color: $code-theme--dark--green; + } + /* Literal.String.Backtick */ + .highlight .sc { + color: $code-theme--dark--green; + } + /* Literal.String.Char */ + .highlight .sd { + color: $code-theme--dark--green; + } + /* Literal.String.Doc */ + .highlight .se { + color: $code-theme--dark--blue; + } + /* Literal.String.Escape */ + .highlight .sh { + color: $code-theme--dark--green; + } + /* Literal.String.Heredoc */ + .highlight .si { + color: $code-theme--dark--green; + } + /* Literal.String.Interpol */ + .highlight .sr { + color: $code-theme--dark--green; + } + /* Literal.String.Regex */ + .highlight .ss { + color: $code-theme--dark--blue; + } + /* Literal.String.Symbol */ + .highlight .sx { + color: $code-theme--dark--green; + } + /* Literal.String.Other */ + .highlight .vc { + color: $code-theme--dark--purple; + } + /* Name.Variable.Class */ + .highlight .vg { + color: $code-theme--dark--purple; + } + /* Name.Variable.Global */ + .highlight .vi { + color: $code-theme--dark--purple; + } + /* Name.Variable.Instance */ + .highlight .w { + color: #bbbbbb; + } + /* Text.Whitespace */ } .code-theme--light { @@ -122,7 +338,7 @@ code { .highlight .mh { color: #009999; } /* Literal.Number.Hex */ .highlight .mi { color: #009999; } /* Literal.Number.Integer */ .highlight .mo { color: #009999; } /* Literal.Number.Oct */ - .highlight .n { color: $code-light-black; } /* Unknown */ + .highlight .n { color: $code-theme--light--black; } /* Unknown */ .highlight .na { color: #3F7BA7; } /* Name.Attribute */ .highlight .nb { color: #0086B3; } /* Name.Builtin */ .highlight .nc { color: #3F7BA7; } /* Name.Class */ @@ -135,10 +351,10 @@ code { .highlight .no { color: $red; } /* Name.Constant */ .highlight .nt { color: #3F7BA7; } /* Name.Tag */ .highlight .nv { color: #226699; } /* Name.Variable */ - .highlight .nx { color: $code-light-black; } /* Name.Variable */ + .highlight .nx { color: $code-theme--light--black; } /* Name.Variable */ .highlight .o { color: $red; } /* Operator */ .highlight .ow { color: $red; } /* Operator.Word */ - .highlight .p { color: $code-light-black; } /* Unknown */ + .highlight .p { color: $code-theme--light--black; } /* Unknown */ .highlight .s1 { color: #229151; } /* Literal.String.Single */ .highlight .s2 { color: #229151; } /* Literal.String.Double */ .highlight .s { color: #229151; } /* Literal.String */ diff --git a/app/styles/_colors.scss b/app/styles/_colors.scss index 5ebae6b24..dbdd92ead 100644 --- a/app/styles/_colors.scss +++ b/app/styles/_colors.scss @@ -3,22 +3,22 @@ $gray: #CCC; $red: #c0392b; $green: #23871E; $dark-yellow: #f39c12; -$dark-blue: #08A8FC; +$blue--dark: #08A8FC; $light-green: #DFF0D8; $light-blue: #F6FCFF; // Defaults -$primary-color: $dark-blue; +$primary-color: $blue--dark; // Text -$extra-light-text: #AAAAAA; -$light-text: #666; -$dark-text: #333; +$text--lighter: #AAAAAA; +$text--light: #666; +$text--dark: #333; // Links -$link-color: $dark-blue; -$hidden-link-color: $dark-text; -$link-hover-color: darken($dark-blue, 5%); +$link-color: $blue--dark; +$hidden-link-color: $text--dark; +$link-hover-color: darken($blue--dark, 5%); // Buttons $clear-hover: #E5E5E5; @@ -27,10 +27,10 @@ $clear-active: $clear-hover; $primary-active: darken($primary-color, 5%); // Borders -$border-default: $gray; -$border-light: #EEE; +$gray: $gray; +$gray--lightest: #EEE; $border-focus: #51A7E8; -$border-light-blue: #3ABAFC; +$gray--lightest-blue: #3ABAFC; // Backgrounds $background-gray: #F3F3F3; @@ -53,7 +53,7 @@ $success-background: $green; $idea-color: $dark-yellow; $issue-color: $red; $progress-color: $green; -$task-color: $dark-blue; +$task-color: $blue--dark; $taskTypeColors: ( "idea": $idea-color, @@ -63,7 +63,7 @@ $taskTypeColors: ( ); $taskTypeTextOnBackgroundColors: ( - "idea": $dark-text, + "idea": $text--dark, "issue": white, "progress": white, "task": white, diff --git a/app/styles/_fonts.scss b/app/styles/_fonts.scss deleted file mode 100644 index db0d2f422..000000000 --- a/app/styles/_fonts.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic); - -$body-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - -$body-font-size-x-large: 18px; -$body-font-size-large: 16px; -$body-font-size-normal: 14px; -$body-font-size-small: 12px; -$body-font-size-tiny: 11px; - -$header-font-size-x-large: 36px; -$header-font-size-large: 26px; -$header-font-size-medium: 22px; -$header-font-size-small: 18px; - -$close-icon-font-size: 20px; diff --git a/app/styles/_header.scss b/app/styles/_header.scss deleted file mode 100644 index fff60b45a..000000000 --- a/app/styles/_header.scss +++ /dev/null @@ -1,10 +0,0 @@ -.site-logo { - margin: 0; - line-height: 50px; -} - -.logo { - @include sprite($logo); - display: inline-block; - text-indent: -9999px; -} diff --git a/app/styles/_icons.scss b/app/styles/_icons.scss index 84ea16e48..3d94ab3bf 100644 --- a/app/styles/_icons.scss +++ b/app/styles/_icons.scss @@ -1,3 +1,7 @@ +// +// GENERAL SPRITES +// + @mixin sprite( $spriteVals ) { width: nth( $spriteVals, 1 ); height: nth( $spriteVals, 2 ); @@ -137,6 +141,10 @@ $taskTypeIconHovers: ( } } +// +// INTERESTS ICONS +// + $interestsPath: '/assets/images/icons/interests'; $interestsURL: $interestsPath + '.png'; $interestsx2URL: $interestsPath + '@2x.png'; @@ -275,6 +283,10 @@ $transportation-hover: 35px 35px $interestsURL -35px -245px $interestsx2URL; } } +// +// CATEGORIES ICONS +// + @mixin categoryIconSprite( $spriteVals ) { width: nth( $spriteVals, 1 ); height: nth( $spriteVals, 2 ); @@ -325,99 +337,86 @@ $transportation: 70px 70px $categoriesURL -70px -140px $categoriesx2URL; .category-icon { display: block; height: 70px; + margin: 10px auto; width: 70px; - &.arts { @include categoryIconSprite($arts); &.selected { @include categoryIconSprite($arts-hover); } } - &.economy { @include categoryIconSprite($economy); &.selected { @include categoryIconSprite($economy-hover); } } - &.education { @include categoryIconSprite($education); &.selected { @include categoryIconSprite($education-hover); } } - &.environment { @include categoryIconSprite($environment); &.selected { @include categoryIconSprite($environment-hover); } } - &.government { @include categoryIconSprite($government); &.selected { @include categoryIconSprite($government-hover); } } - &.health { @include categoryIconSprite($health); &.selected { @include categoryIconSprite($health-hover); } } - &.justice { @include categoryIconSprite($justice); &.selected { @include categoryIconSprite($justice-hover); } } - &.politics { @include categoryIconSprite($politics); &.selected { @include categoryIconSprite($politics-hover); } } - &.public-safety { @include categoryIconSprite($public-safety); &.selected { @include categoryIconSprite($public-safety-hover); } } - &.science { @include categoryIconSprite($science); &.selected { @include categoryIconSprite($science-hover); } } - &.security { @include categoryIconSprite($security); &.selected { @include categoryIconSprite($security-hover); } } - &.society { @include categoryIconSprite($society); &.selected { @include categoryIconSprite($society-hover); } } - &.technology { @include categoryIconSprite($technology); &.selected { @include categoryIconSprite($technology-hover); } } - &.transportation { @include categoryIconSprite($transportation); &.selected { @@ -426,14 +425,17 @@ $transportation: 70px 70px $categoriesURL -70px -140px $categoriesx2URL; } } +// +// ROLES SPRITES +// + @mixin rolesSprite($spriteVals) { - width: nth($spriteVals, 1); - height: nth($spriteVals, 2); - background-repeat: no-repeat; $url: nth($spriteVals,3); background-image: url($url); - background-position: nth($spriteVals, 4) nth($spriteVals, 5); - @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { + background-position: center nth($spriteVals, 5); + background-repeat: no-repeat; + @media only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min-device-pixel-ratio: 2) { $retinaUrl: nth($spriteVals,6); background-image: url($retinaUrl); background-size: $roles-bgiSizeW $roles-bgiSizeH; @@ -442,12 +444,18 @@ $transportation: 70px 70px $categoriesURL -70px -140px $categoriesx2URL; $roles-spritePath: '/assets/images/icons/roles-sprite'; $roles-spriteURL: $roles-spritePath + '.png'; $roles-spritex2URL: $roles-spritePath + '@2x.png'; + $roles-bgiSizeW: 181px; $roles-bgiSizeH: 210px; + $technology: 181px 70px $roles-spriteURL 0px 0px $roles-spritex2URL; $creative: 181px 70px $roles-spriteURL 0px -70px $roles-spritex2URL; $support: 181px 70px $roles-spriteURL 0px -140px $roles-spritex2URL; +// +// ABOUT SPRITES +// + @mixin aboutSprite($spriteVals) { width: nth($spriteVals, 1); height: nth($spriteVals, 2); diff --git a/app/styles/_inputs.scss b/app/styles/_inputs.scss index d95b11953..6dd83994f 100644 --- a/app/styles/_inputs.scss +++ b/app/styles/_inputs.scss @@ -3,7 +3,7 @@ font-size: $body-font-size-normal; margin: 0; outline: none; - border: 1px solid $border-default; + border: 1px solid $gray; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); background-color: #FAFAFA; @@ -14,7 +14,7 @@ } #{$all-text-inputs-focus} { - border-color: $border-focus; + border-color: $blue--light; background-color: #FFFFFF; box-shadow: inset 0 2px 2px rgba(0,0,0,0.075), 0 0 5px rgba(81,167,232,0.5); } diff --git a/app/styles/_misc.scss b/app/styles/_misc.scss deleted file mode 100644 index 8b72fff50..000000000 --- a/app/styles/_misc.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin arrow-down { - content: ""; - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 6px solid $dark-text; - border-bottom: none; -} - -@mixin arrow-up { - content: ""; - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-bottom: 6px solid $dark-text; - border-top: none; -} - -.css-truncate-target { - display: inline-block; - max-width: 125px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: top; -} diff --git a/app/styles/_retina.scss b/app/styles/_retina.scss deleted file mode 100644 index ae73f5155..000000000 --- a/app/styles/_retina.scss +++ /dev/null @@ -1,14 +0,0 @@ -$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)"; - -@mixin background-image-retina($file, $type, $width, $height, $positionX: left, $positionY: top, $background-repeat: no-repeat) { - background-image: url($file + '.' + $type); - width: $width; - height: $height; - background-position: $positionX $positionY; - background-repeat: $background-repeat; - - @media #{$retina} { - background-image: url($file + '@2x.' + $type); - background-size: $width $height; - } -} \ No newline at end of file diff --git a/app/styles/_shame.scss b/app/styles/_shame.scss new file mode 100644 index 000000000..eaecedbfd --- /dev/null +++ b/app/styles/_shame.scss @@ -0,0 +1,122 @@ +// +// shame.css +// http://csswizardry.com/2013/04/shame-css/ +// + +.left { + float: left; +} + +.right { + float: right; +} + +// TODO: Remove when we add more projects +.temporary-projects-notice { + @include span-columns(4); + + border: 1px dashed $gray--lightest; + border-radius: 4px; + color: $text--light; + min-height: 390px; + padding: 20px; + + p { + font-size: $body-font-size-small; + } + + .curved-arrow-icon { + @include sprite($curved-arrow); + + margin-top: 90px; + } +} + +.page-header { + margin-bottom: 20px; + border-bottom: 1px solid $gray--lightest; + + h2 { + font-weight: 500; + margin: 10px 0; + } +} + + + +// styles below are probably not necessary after refactoring +.header-section { + margin: 20px 0; + + h2 { + font-weight: 700; + } + + p { + color: $text--light; + line-height: 2em; + } +} + +html { + &.danger { + background: $danger-color; + } + &.warning { + background: $warning-color; + } +} + +.menu { + padding: 10px 0; + ul { + list-style-type: none; + @include clearfix; + } + a.active { + font-weight: 600; + } +} + +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.subtext { + font-size: $body-font-size-small; +} + +// this seems to have been inherited from http://primercss.io/utilities/#truncation +// originally used in the "Signed in as [username]" dropdown message +.css-truncate-target { + display: inline-block; + max-width: 125px; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; +} + +// this is not good, I'd like .slugged-route-model-details to be added to +// site-container and not its own div element and add the property below to +// .user-details instead +.slugged-route-model-details { + width: 100%; +} + +.legal { + margin: auto; + max-width: 600px; +} + +h4 span { + color: #08A8FC; + float: right; +} diff --git a/app/styles/app.scss b/app/styles/app.scss index 158587143..da4bffb32 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,99 +1,171 @@ +// +// VENDORS +// + +// Normalize.css +// A modern, HTML5-ready alternative to CSS resets +// https://necolas.github.io/normalize.css/ +@import "normalize"; + +// Bourbon +// A simple and lightweight mixin library for Sass +// http://bourbon.io/ @import "bourbon"; + +// Neat +// Neat is a semantic grid framework built with Sass +// http://neat.bourbon.io/ @import "neat"; -@import "fonts"; -@import "colors"; -@import "retina"; +// +// HELPERS +// +@import "base/animations"; +@import "base/colors"; +@import "base/fonts"; +@import "base/mixins"; -@import "misc"; +@import "base/base"; +@import "base/helpers"; -@import "animations"; +// +// +// @import "icons"; +@import "alerts"; @import "buttons"; +@import "code"; @import "images"; @import "inputs"; -@import "forms"; -@import "alerts"; - -@import "main"; - -@import "header"; -@import "settings"; -@import "code"; - -@import "dropdown-menu"; -@import "index"; -@import "task"; -@import "task-new"; -@import "start"; +// +// LAYOUT +// +@import "layout/content"; +@import "layout/footer"; +@import "layout/forms"; +@import "layout/header"; +// +// COMPONENTS +// @import "components/animated-high-five"; @import "components/categories-list"; @import "components/category-item"; @import "components/code-theme-selector"; @import "components/comment-item"; @import "components/create-comment-form"; -@import "components/donation/card-item"; -@import "components/donations/donation-progress"; -@import "components/donations/donation-status"; -@import "components/donation-goal"; -@import "components/donation-goal-edit"; -@import "components/donation-payment"; -@import "components/drag-zone"; @import "components/editor-with-preview"; @import "components/error-wrapper"; @import "components/image-drop"; @import "components/loading-bar"; @import "components/login-form"; @import "components/member-list-item"; -@import "components/navigation-menu"; +@import "components/pager-control"; +@import "components/progress-bar"; +@import "components/settings-menu"; +@import "components/signup-form"; + +// +// COMPONENTS - DONATIONS +// +@import "components/donation-goal-edit"; +@import "components/donation-goal"; +@import "components/donation-payment"; +@import "components/donation/card-item"; +@import "components/donations/donation-progress"; +@import "components/donations/donation-status"; + +// +// COMPONENTS - ORGANIZATION +// @import "components/organization-header"; @import "components/organization-members"; @import "components/organization-profile"; + +// +// COMPONENTS - PAYMENTS +// @import "components/payments/account-setup"; @import "components/payments/funds-recipient/details-form"; @import "components/payments/bank-account"; -@import "components/pager-control"; + +// +// COMPONENTS - PROJECTS +// +@import "components/project-card-members"; +@import "components/project-card-skills"; +@import "components/project-card"; +@import "components/project-details"; +@import "components/project-header"; +@import "components/project-item"; +@import "components/project-list"; +@import "components/project-long-description"; +@import "components/project-menu"; + +// +// COMPONENTS - SKILLS +// +@import "components/skill-list-item"; +@import "components/skills-list"; +@import "components/skills-typeahead"; + +// +// COMPONENTS - TASKS +// @import "components/task-card"; @import "components/task-comment-list"; @import "components/task-details"; @import "components/task-header"; @import "components/task-board"; @import "components/task-list-cards"; -@import "components/task-status"; @import "components/task-new-form"; -@import "components/task-title"; +@import "components/task-status"; @import "components/task-status-button"; -@import "components/progress-bar"; -@import "components/project-details"; -@import "components/project-card"; -@import "components/project-card-skills"; -@import "components/project-card-members"; -@import "components/project-header"; -@import "components/project-item"; -@import "components/project-list"; -@import "components/project-long-description"; -@import "components/project-menu"; -@import "components/role-item"; +@import "components/task-title"; + +// +// COMPONENTS - USER +// @import "components/settings-menu"; @import "components/signup-form"; -@import "components/site-footer"; -@import "components/skill-list-item"; -@import "components/skills-list"; @import "components/user-details"; + @import "components/user-menu"; +// dropdown-menu has to come after user-menu for styles to work correctly +@import "components/dropdown-menu"; + @import "components/user-organizations-list"; @import "components/user-sidebar"; -@import "components/skills-typeahead"; +// +// TEMPLATES +// +@import "templates/index"; // index is the stylesheet for the homepage @import "templates/about"; +@import "templates/team"; + +// +// TEMPLATES - PROJECTS +// +@import "templates/project/settings/profile"; +@import "templates/project/settings/settings"; +@import "templates/project/settings/contributors"; +@import "templates/project/tasks/task"; +@import "templates/project/tasks/task-new"; @import "templates/project/index"; @import "templates/project/tasks/index"; @import "templates/project/thank-you"; -@import "templates/project/settings/contributors"; -@import "templates/project/settings/profile"; + +// +// TEMPLATES - ONBOARDING +// +@import "templates/start/start"; @import "templates/start/expertise"; @import "templates/start/hello"; @import "templates/start/skills"; -@import "templates/team"; + +// +// SHAME.CSS +// +@import "shame"; diff --git a/app/styles/_animations.scss b/app/styles/base/_animations.scss similarity index 100% rename from app/styles/_animations.scss rename to app/styles/base/_animations.scss diff --git a/app/styles/base/_base.scss b/app/styles/base/_base.scss new file mode 100644 index 000000000..e6f886ced --- /dev/null +++ b/app/styles/base/_base.scss @@ -0,0 +1,38 @@ +@charset 'utf-8'; + +a { + color: $link-color; + text-decoration: none; + transition: color ease 0.3s; + + &:hover { + color: $link-hover-color; + cursor: pointer; + } +} + +body { + height: 100%; + margin: 0; + padding: 0 10px; + + > .ember-view:first-of-type { + height: 100%; + position: relative; + } +} + +html { + font-family: $body-font-family; + font-size: $body-font-size-normal; + height: 100%; +} + +li { + list-style-type: none; +} + +ul { + margin: 0; + padding: 0; +} diff --git a/app/styles/base/_colors.scss b/app/styles/base/_colors.scss new file mode 100644 index 000000000..ce603f71e --- /dev/null +++ b/app/styles/base/_colors.scss @@ -0,0 +1,117 @@ +// COLORS +// +// color variables should follow the same modular naming convention used when styling components +// the root of the variable name is the name of the color (e.g. blue) followed by a modifier +// --light --lighter, --lightest, --dark, --darker, --darkest +// +// modifiers should only be used if a base color has already been set +// e.g. $red--darker only makes sense if $red already exists +// +// hex codes should only be used in the base color variables +// whenever a color is needed it should use either an existing variable +// or a variation of it using Sass color functions (e.g. darken($green, 5%)) +// +// This is a great guide about hex colors +// https://www.smashingmagazine.com/2012/10/the-code-side-of-color/ +// +// we should perhaps consider switching from hex to rgba or hsla as they're easier to +// understand and build varations of +// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value +// +// Styleguide 1.0 + +// +// BASE COLORS +// + +$blue: #08A8FC; +$blue--light: #51A7E8; +$blue--lighter: #EDF9FF; +$blue--lightest: #F6FCFF; +$blue--dark: #1B9BE5; +// #3ABAFC, #51A7E8 + +$gray: #AAA; +$gray--light: #BBB; +$gray--lighter: #CCC; +$gray--lightest: #DDD; +$gray--dark: #999; +$gray--darker: #666; +$gray--darkest: #333; + +// these colors were used previously and removed for the sake of consistency +// I'll add these back using sass color functions +// #E5E5E5, #FCFCFC, #F3F3F3, #FBFBFB + +$green: #23871E; +$green--light: #DFF0D8; +$green--lighter: #EFFFEE; + +$red: #C0392B; +$red--light: #FFE5E1; + +$yellow: #F39C12; +$yellow--light: #FFF9DE; + +// +// LINKS +// +$link-color: $blue; +$hidden-link-color: $gray--darkest; +$link-hover-color: $blue--dark; + +// +// BUTTONS +// +$clear-hover: #E5E5E5; +$clear-focus: #FCFCFC; +$clear-active: #E5E5E5; +$primary-active: $blue--dark; + +// +// BACKGROUNDS +// +$background-gray: #F3F3F3; + +// +// COLOR TYPES +// +$danger-color: $red; +$default-color: $blue; +$success-color: $green; +$warning-color: $yellow; + +// +// TASK TYPES +// + +$idea-color: $yellow; +$issue-color: $red; +$progress-color: $green; +$task-color: $blue; + +$idea-background: $yellow--light; +$issue-background: $red--light; +$progress-background: $green--light; +$task-background: $blue--lighter; + +$taskTypeColors: ( + "idea": $idea-color, + "issue": $issue-color, + "progress": $progress-color, + "task": $task-color, +); + +$taskTypeTextOnBackgroundColors: ( + "idea": $gray--darkest, + "issue": white, + "progress": white, + "task": white, +); + +$taskTypeBackgrounds: ( + "idea": $idea-background, + "issue": $issue-background, + "progress": $progress-background, + "task": $task-background, +); diff --git a/app/styles/base/_fonts.scss b/app/styles/base/_fonts.scss new file mode 100644 index 000000000..a2ea09be9 --- /dev/null +++ b/app/styles/base/_fonts.scss @@ -0,0 +1,77 @@ + +@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700); + +$body-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + +// +// TYPOGRAPHY +// Open Sans: light (300), regular (400), italic (400i), semi-bold (600), bold (700) +// + +$body-font-size-x-large: 18px; +$body-font-size-large: 16px; +$body-font-size-normal: 14px; +$body-font-size-small: 12px; +$body-font-size-tiny: 11px; + +$header-font-size-x-large: 36px; +$header-font-size-large: 26px; +$header-font-size-medium: 22px; +$header-font-size-small: 18px; + +$close-icon-font-size: 20px; + +// +// HEADERS +// Type Scale: Major Third - 1.250 +// + +body { + font-weight: 400; + line-height: 1.45; +} + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin-bottom: 0.5em; +} + +h1 { + font-size: 2.441em; + font-weight: 700; + margin-top: 0; +} + +h2 { + font-size: 1.953em; + font-weight: 700; +} + +h3 { + font-size: 1.563em; + font-weight: 600; +} + +h4, h5, h6 { + font-size: 1.2em; + font-weight: 600; +} + +// +// TEXT +// + +p { + margin-bottom: 1.3em; +} + +small, .font_small { + font-size: 0.8em; +} + +//$text +$text--dark: $gray--darkest; +// below is the most common text color in the project +// it bothers me a bit that text--light uses gray--darker as its color +$text--light: $gray--darker; +$text--lighter: $gray; diff --git a/app/styles/base/_helpers.scss b/app/styles/base/_helpers.scss new file mode 100644 index 000000000..4d29b33ff --- /dev/null +++ b/app/styles/base/_helpers.scss @@ -0,0 +1,27 @@ +.container { + @include outer-container(980px); + min-width: 980px; +} + +.flexbox-container { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100vh; +} + +.flexbox-spacer { + flex: auto; +} + +.hidden { + visibility: hidden; +} + +.overflow-hidden { + overflow: hidden; +} + +.visible { + visibility: visible; +} diff --git a/app/styles/base/_mixins.scss b/app/styles/base/_mixins.scss new file mode 100644 index 000000000..4aa968d13 --- /dev/null +++ b/app/styles/base/_mixins.scss @@ -0,0 +1,57 @@ +@mixin border-top-radius($radius) { + border-top-left-radius: $radius; + border-top-right-radius: $radius; +} + +@mixin border-bottom-radius($radius) { + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; +} + +@mixin arrow-base($border-color: #333 transparent, $border-width: 6px 4px) { + border-color: $border-color; + border-style: solid; + border-width: $border-width; + content: ""; + display: inline-block; + height: 0; + vertical-align: middle; + width: 0; +} + +@mixin arrow-down { + @include arrow-base; + border-bottom: none; +} + +@mixin arrow-up { + @include arrow-base; + border-top: none; +} + +$retina: + "only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min--moz-device-pixel-ratio: 2), + only screen and (-o-min-device-pixel-ratio: 2/1), + only screen and (min-device-pixel-ratio: 2), + only screen and (min-resolution: 192dpi), + only screen and (min-resolution: 2dppx)"; + +@mixin background-image-retina( + $file, + $type, + $width, + $height, + $positionX: left, + $positionY: top, + $background-repeat: no-repeat) { + background-image: url($file + '.' + $type); + background-position: $positionX $positionY; + background-repeat: $background-repeat; + height: $height; + width: $width; + @media #{$retina} { + background-image: url($file + '@2x.' + $type); + background-size: $width $height; + } +} diff --git a/app/styles/components/categories-list.scss b/app/styles/components/categories-list.scss index ceec9b72e..3f601b306 100644 --- a/app/styles/components/categories-list.scss +++ b/app/styles/components/categories-list.scss @@ -1,4 +1,9 @@ .categories-list { - @include span-columns(12); + flex: 1; + margin-bottom: 2em; + width: 100%; } +.start__interests { + @extend .categories-list; +} diff --git a/app/styles/components/category-item.scss b/app/styles/components/category-item.scss index 670c7cabc..560e95834 100644 --- a/app/styles/components/category-item.scss +++ b/app/styles/components/category-item.scss @@ -4,12 +4,12 @@ text-align: center; - .category-icon { - margin: 10px auto; + button { + text-align: left; } p { - color: $light-text; + color: $text--light; font-size: $body-font-size-small; margin: 10px 0; diff --git a/app/styles/components/comment-item.scss b/app/styles/components/comment-item.scss index 18d7773b8..26058758f 100644 --- a/app/styles/components/comment-item.scss +++ b/app/styles/components/comment-item.scss @@ -30,12 +30,12 @@ .comment-info { position: relative; font-size: $body-font-size-small; - color: $light-text; + color: $text--light; line-height: 20px; a { &.username { - color: $light-text; + color: $text--light; font-weight: 600; } @@ -75,7 +75,7 @@ } a.username { - color: $dark-text; + color: $text--dark; font-weight: 600; &:hover { color: $link-color; diff --git a/app/styles/components/donation-goal.scss b/app/styles/components/donation-goal.scss index f9a8adf4b..ff7cf44cb 100644 --- a/app/styles/components/donation-goal.scss +++ b/app/styles/components/donation-goal.scss @@ -1,5 +1,5 @@ @mixin donation-goal-shared-style { - border: 1px solid $border-light; + border: 1px solid $gray--lightest; border-radius: 4px; margin: 10px 0; padding: 15px 20px; @@ -12,8 +12,8 @@ &:hover { &.can-edit { - background: $light-blue-background; - border-color: $border-light-blue; + background: $blue--lighter; + border-color: $blue--light; cursor: pointer; } } @@ -25,7 +25,7 @@ } .description { - color: $light-text; + color: $text--light; font-size: $body-font-size-normal; margin: 7px 0; } @@ -42,12 +42,12 @@ } .current { - color: $light-text; + color: $text--light; margin-bottom: 5px; strong { font-weight: 700; - color: $dark-text; + color: $text--dark; } } diff --git a/app/styles/components/donation-payment.scss b/app/styles/components/donation-payment.scss index a9fd01e60..24e17af16 100644 --- a/app/styles/components/donation-payment.scss +++ b/app/styles/components/donation-payment.scss @@ -10,15 +10,15 @@ width: 100%; } footer { - color: $light-text; + color: $text--light; font-size: $body-font-size-small; margin-top: 1em; } } .donation-container__amount { - background-color: $light-blue; - border: 2px solid $border-light-blue; + background-color: $blue--lighter; + border: 2px solid $blue--light; border-radius: 5px; margin: 20px 0; padding: 15px; @@ -26,7 +26,7 @@ margin: 0; } footer { - color: $light-text; + color: $text--light; font-size: $body-font-size-small; margin: 0; } diff --git a/app/styles/components/donation/card-item.scss b/app/styles/components/donation/card-item.scss index 6dc962454..3936bdaac 100644 --- a/app/styles/components/donation/card-item.scss +++ b/app/styles/components/donation/card-item.scss @@ -1,7 +1,7 @@ .card-item { align-items: center; - background-color: $light-blue; - border: 1px solid $dark-blue; + background-color: $blue--lighter; + border: 1px solid $blue; border-radius: .25em; display: flex; height: 2.5em; @@ -68,7 +68,7 @@ background-color: white; border: 1px solid $gray; border-radius: .3em; - color: $dark-text; + color: $text--dark; font-size: $body-font-size-small; height: 2.5em; padding: 0; diff --git a/app/styles/components/donations/donation-progress.scss b/app/styles/components/donations/donation-progress.scss index ac911d144..44ff55215 100644 --- a/app/styles/components/donations/donation-progress.scss +++ b/app/styles/components/donations/donation-progress.scss @@ -10,7 +10,7 @@ } .description { - color: $light-text; + color: $text--light; font-size: $body-font-size-small; } @@ -26,16 +26,16 @@ } &__description-header { - color: $light-text; + color: $text--light; font-size: $body-font-size-small; font-weight: 600; text-transform: uppercase; } &__description { - border: 1px solid $border-light; + border: 1px solid $gray--lightest; border-radius: 4px; - color: $light-text; + color: $text--light; font-size: $body-font-size-normal; line-height: 22px; margin: 10px 0; diff --git a/app/styles/components/donations/donation-status.scss b/app/styles/components/donations/donation-status.scss index 4df804db2..ab9812b26 100644 --- a/app/styles/components/donations/donation-status.scss +++ b/app/styles/components/donations/donation-status.scss @@ -38,7 +38,7 @@ } .show-donation { - background: $light-blue-background; + background: $blue--lighter; border-radius: 4px; padding: 10px 15px; diff --git a/app/styles/components/drag-zone.scss b/app/styles/components/drag-zone.scss deleted file mode 100644 index 32800099c..000000000 --- a/app/styles/components/drag-zone.scss +++ /dev/null @@ -1,3 +0,0 @@ -.drag-zone { - height: 100%; -} diff --git a/app/styles/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss similarity index 53% rename from app/styles/dropdown-menu.scss rename to app/styles/components/dropdown-menu.scss index ddd799720..d439e7cdd 100644 --- a/app/styles/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -1,12 +1,29 @@ +.dropdown-menu { + background: white; + border: 1px solid $gray; + border-radius: 4px; + box-shadow: 0px 10px 41px -16px rgba(0,0,0,0.75); + float: left; + margin-top: 5px; + min-width: 15em; + padding: 5px 0; + position: absolute; + text-align: left; + top: 100%; + z-index: 99999; + &--right { + float: none; + right: 0; + } +} + .dropdown { position: relative; - &.menu-hidden { .dropdown-menu { display: none; } } - &.menu-visible { .dropdown-menu { display: block; @@ -14,77 +31,58 @@ } } -.dropdown-menu { - position: absolute; - z-index: 99999; - top: 100%; - float: left; - background: white; - border: 1px solid $gray; - border-radius: 4px; - padding: 5px 0; - margin-top: 5px; - -webkit-box-shadow: 0px 10px 41px -16px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 10px 41px -16px rgba(0,0,0,0.75); - box-shadow: 0px 10px 41px -16px rgba(0,0,0,0.75); - - li { - display: block; - padding: 3px 0; +.close { + color: $text--light; + line-height: 14px; + padding: 10px 14px; + vertical-align: middle; + &:hover { + color: $blue; } - &.right { - float: none; + position: absolute; right: 0; - } - - .close { - color: $light-text; - line-height: 14px; - padding: 10px 14px; - vertical-align: middle; - &:hover { - color: $primary-color; - } - &.right { - right: 0; - position: absolute; - top: 0; - } + top: 0; } } -@mixin border-top-radius($radius) { - border-top-left-radius: $radius; - border-top-right-radius: $radius; -} - -@mixin border-bottom-radius($radius) { - border-bottom-left-radius: $radius; - border-bottom-right-radius: $radius; -} - -.dropdown-header, .dropdown-footer { +.dropdown__header, .dropdown__footer { background: $background-gray; - color: $light-text; + color: $text--light; padding: 10px 14px; - p { font-size: $body-font-size-small; margin: 0; } } -.dropdown-header { +.dropdown__header { @include border-top-radius(4px); margin: -5px 0 5px 0; } -.dropdown-footer { +.dropdown__footer { @include border-bottom-radius(4px); + font-size: $body-font-size-small; margin: 5px 0 -5px 0; } -.dropdown-body { +.dropdown__body { padding: 10px 15px; } + +.dropdown__options { + li { + display: block; + float: none; + padding: 3px 0; + } + a { + // having problems with "navigation__options a" + // overwriting the properties below + border: 0; + color: #08A8FC; + font-weight: normal; + padding: 0; + } +} diff --git a/app/styles/components/editor-with-preview.scss b/app/styles/components/editor-with-preview.scss index a2c6402df..7d0edc574 100644 --- a/app/styles/components/editor-with-preview.scss +++ b/app/styles/components/editor-with-preview.scss @@ -21,3 +21,12 @@ bottom: 0; right: 0; top: 0; } } + +.spinner { + &.small { + $file: "/assets/images/icons/spinner-small"; + @include background-image-retina($file, "gif", 24px, 24px); + height: 24px; + width: 24px; + } +} diff --git a/app/styles/components/image-drop.scss b/app/styles/components/image-drop.scss index 0316fee5b..d28a28eef 100644 --- a/app/styles/components/image-drop.scss +++ b/app/styles/components/image-drop.scss @@ -15,7 +15,7 @@ z-index: -1; } - &.is-circular { + &--circle { &:before { border-radius: $border-radius; } @@ -41,7 +41,7 @@ width: $size; } - &.is-circular { + &--circle { border-radius: $border-radius; .hover { @@ -53,11 +53,11 @@ } } - &.is-dragging { - @include outside-border(2px, dashed, $border-default); + &--drag { + @include outside-border(2px, dashed, $gray--lightest); - &.is-circular { - @include outside-border(2px, default, $border-default, $border-radius); + &--circle { + @include outside-border(2px, default, $gray--lightest, $border-radius); } background: transparent !important; @@ -67,15 +67,15 @@ } } - &.active { - background: $light-blue-background !important; + &--active { + background: $blue--lighter !important; &:before { - border-color: $dark-blue; + border-color: $blue--dark; } p { - color: $dark-blue; + color: $blue--dark; } } @@ -109,11 +109,11 @@ } } - &:hover:not(.is-dragging) { - @include outside-border(2px, solid, $dark-blue); + &:hover:not(&--drag) { + @include outside-border(2px, solid, $blue--dark); - &.is-circular { - @include outside-border(2px, solid, $dark-blue, $border-radius); + &--circle { + @include outside-border(2px, solid, $blue--dark, $border-radius); } .hover { diff --git a/app/styles/components/loading-bar.scss b/app/styles/components/loading-bar.scss index 29131964a..a2e040095 100644 --- a/app/styles/components/loading-bar.scss +++ b/app/styles/components/loading-bar.scss @@ -1,5 +1,5 @@ .loading-bar { - background: $dark-blue; + background: $blue--dark; display: none; height: 2px; position: fixed; diff --git a/app/styles/components/login-form.scss b/app/styles/components/login-form.scss index f6dceddb3..f08aedeca 100644 --- a/app/styles/components/login-form.scss +++ b/app/styles/components/login-form.scss @@ -2,7 +2,6 @@ @include span-columns(5); @include shift(3.5); padding-top: 10vh; - button { width: 100%; } diff --git a/app/styles/components/member-list-item.scss b/app/styles/components/member-list-item.scss index 39930f917..a24f618ff 100644 --- a/app/styles/components/member-list-item.scss +++ b/app/styles/components/member-list-item.scss @@ -1,59 +1,62 @@ .member-list-item { - @include span-columns(12); - - border-top: 1px solid $border-light; - padding: 10px 0; + @include outer-container; + align-items: center; + border-top: 1px solid $gray--lightest; + display: flex; + padding: .7em 1em; position: relative; - - &:last-child { - border-bottom: 1px solid $border-light; + &:hover { + background-color: #F9F9F9; } - - .actions { - position: absolute; - right: 0; - top: 10px; + &:last-child { + border-bottom: 1px solid $gray--lightest; } +} - .avatar { - float: left; - margin-left: -60px; +.project-member { + &__actions { + @include span-columns(2); + text-align: right; } - - .content { - margin-left: 60px; - margin-right: 150px; - position: relative; + &__avatar { + @include span-columns(1); } - - p { - margin: 3px 0; - - &.name { + &__name { + @include span-columns(3); + strong { font-weight: 700; } - - &.interests, &.skills { - color: $extra-light-text; - font-size: $body-font-size-small; - margin: 5px 0; - } } - - li { - display: inline-block; - - &:after { - content: ", "; + &__skills { + color: $text--lighter; + font-size: $body-font-size-small; + @include span-columns(6); + ul { + margin-top: 6px; } - - &:last-child { - &:not(:first-child):before { - content: "and "; - } + li { + display: inline-block; &:after { - content: "."; + content: ", "; + } + &:last-child { + // confused by the selector below + &:not(:first-child):before { + content: "and "; + } + &:after { + content: "."; + } } } } } + +.member-list-item { + h4 { + color: $text--dark; + font-size: $body-font-size-normal; + font-weight: 700; + margin: 0; + } +} diff --git a/app/styles/components/navigation-menu.scss b/app/styles/components/navigation-menu.scss deleted file mode 100644 index 159037db3..000000000 --- a/app/styles/components/navigation-menu.scss +++ /dev/null @@ -1,60 +0,0 @@ -.menu { - padding: 10px 0; - - ul { - list-style-type: none; - @include clearfix; - } - - a.active { - font-weight: 600; - } - - ul.header-nav { - > li { - display: inline-block; - float: left; - font-size: $body-font-size-normal; - } - - > li > a, .user-menu-select { - font-weight: 600; - border-bottom: 3px solid transparent; - - &.active { - color: $link-color; - border-bottom-color: $dark-blue; - } - - &:hover { - color: $link-color; - border-bottom-color: $dark-blue; - transition: border-bottom-color ease 0.3s; - } - } - } -} - -.main-nav, .auth-nav { - font-family: $body-font-family; - font-style: normal; - font-size: $body-font-size-small; - font-weight: 500; - padding: 0 30px; - - li a { - display: block; - padding: 15px 10px; - color: $dark-text; - } -} - -.onboarding-progress { - float: right; - padding: 23px 0 22px 0; - width: 180px; -} - -.onboarding-steps { - padding: 0 30px; -} diff --git a/app/styles/components/organization-members.scss b/app/styles/components/organization-members.scss index aa07ec647..aa736180e 100644 --- a/app/styles/components/organization-members.scss +++ b/app/styles/components/organization-members.scss @@ -4,7 +4,7 @@ justify-content: space-between; span { - color: $dark-blue; + color: $blue; font-weight: 300; } } diff --git a/app/styles/components/pager-control.scss b/app/styles/components/pager-control.scss index 15bbf502e..52c84a284 100644 --- a/app/styles/components/pager-control.scss +++ b/app/styles/components/pager-control.scss @@ -1,5 +1,5 @@ .pager-control { - color: $dark-text; + color: $text--dark; margin: 20px 0; text-align: center; @@ -27,9 +27,9 @@ } a, .first, .last { - border: 1px solid $border-default; + border: 1px solid $gray; border-radius: 0; - color: $dark-text; + color: $text--dark; float: left; margin-left: -1px; padding: 6px 12px; @@ -37,29 +37,29 @@ transition: none; &.active { - background: $primary-color; - border-color: $primary-color; + background: $blue; + border-color: $blue; color: white; z-index: 3; &:hover { - background: $primary-color; - border-color: $primary-color; + background: $blue; + border-color: $blue; } } &:hover { - background: $border-default; + background: $gray; color: white; } } .disabled { background-color: $clear-hover; - color: $extra-light-text; + color: $text--lighter; cursor: default; &:hover { background-color: $clear-hover; - color: $extra-light-text; + color: $text--lighter; } } } diff --git a/app/styles/components/payments/account-setup.scss b/app/styles/components/payments/account-setup.scss index 308948a3a..3b8a0aa1f 100644 --- a/app/styles/components/payments/account-setup.scss +++ b/app/styles/components/payments/account-setup.scss @@ -41,7 +41,7 @@ } .account-setup__section--verified { - background-color: $light-green-background; + background-color: $green--lighter; border-color: $green; p { diff --git a/app/styles/components/payments/funds-recipient/details-form.scss b/app/styles/components/payments/funds-recipient/details-form.scss index fafe5898a..650d600a3 100644 --- a/app/styles/components/payments/funds-recipient/details-form.scss +++ b/app/styles/components/payments/funds-recipient/details-form.scss @@ -13,8 +13,8 @@ padding: 1em; &.checked { - background: $light-blue-background; - border-color: $dark-blue; + background: $blue--lighter; + border-color: $blue--dark; } } } diff --git a/app/styles/components/project-card-members.scss b/app/styles/components/project-card-members.scss index 714833f8d..28c0cf54f 100644 --- a/app/styles/components/project-card-members.scss +++ b/app/styles/components/project-card-members.scss @@ -5,7 +5,7 @@ $height: 25px; margin: 10px 0 0 0; li { - color: $light-text; + color: $text--light; display: inline-block; font-size: $body-font-size-small; height: $height; diff --git a/app/styles/components/project-card-skills.scss b/app/styles/components/project-card-skills.scss index 277a793ec..b5f6254d7 100644 --- a/app/styles/components/project-card-skills.scss +++ b/app/styles/components/project-card-skills.scss @@ -11,7 +11,7 @@ &::before, &::after { content: ""; flex-grow: 1; - background: $border-light; + background: $gray--lightest; height: 1px; font-size: 0px; line-height: 0px; @@ -26,7 +26,7 @@ } a { - color: $extra-light-text; + color: $text--lighter; &:hover { color: $link-color; } diff --git a/app/styles/components/project-card.scss b/app/styles/components/project-card.scss index b297317c3..944e87109 100644 --- a/app/styles/components/project-card.scss +++ b/app/styles/components/project-card.scss @@ -1,7 +1,7 @@ .project-card { @include omega(3n); @include span-columns(4); - border: 1px solid $border-light; + border: 1px solid $gray--lightest; border-radius: 4px; padding: 20px; margin-bottom: 20px; @@ -17,15 +17,15 @@ text-align: center; a { - color: $dark-text; + color: $text--dark; &:hover { - color: $dark-blue; + color: $blue; } } } p { - color: $light-text; + color: $text--light; font-size: $body-font-size-small; } diff --git a/app/styles/components/project-details.scss b/app/styles/components/project-details.scss index 757072916..cd762611d 100644 --- a/app/styles/components/project-details.scss +++ b/app/styles/components/project-details.scss @@ -1,19 +1,30 @@ -.project-details { +.project__header { margin: 0 0 10px 0; + width: 100%; @include clearfix; - .basic-details { + &__icon { + float: left; + } + + &__main { + display: flex; @include span-columns(8); } - .more-details { - @include span-columns(4); + &__details { + margin-left: 10px; } - .join-project { - font-size: $body-font-size-small; - margin: 7px 0; + &__side { + @include span-columns(4); + p { + text-align: right; + } + span { + color: $blue; + } } h2 { @@ -29,18 +40,9 @@ } p { - margin: 3px 0; font-size: $body-font-size-small; } - .icon-container { - float: left; - } - - .details-container { - padding-left: 70px; - } - .organization { margin-top: 8px; font-size: $body-font-size-small; diff --git a/app/styles/components/project-header.scss b/app/styles/components/project-header.scss index 78bcefb63..c56c5f2af 100644 --- a/app/styles/components/project-header.scss +++ b/app/styles/components/project-header.scss @@ -7,7 +7,7 @@ } p { - color: $light-text; + color: $text--light; margin: 5px 0; } } diff --git a/app/styles/components/project-list.scss b/app/styles/components/project-list.scss index ce02ad084..fa4248023 100644 --- a/app/styles/components/project-list.scss +++ b/app/styles/components/project-list.scss @@ -1,3 +1,7 @@ .project-list { @include span-columns(8); -} \ No newline at end of file +} + +.project-task-list { + width: 100%; +} diff --git a/app/styles/components/project-long-description.scss b/app/styles/components/project-long-description.scss index 61c84b8c6..30adad528 100644 --- a/app/styles/components/project-long-description.scss +++ b/app/styles/components/project-long-description.scss @@ -1,5 +1,5 @@ .project-long-description { - @include span-columns(12); + @include span-columns(8); } .long-description { diff --git a/app/styles/components/project-menu.scss b/app/styles/components/project-menu.scss index 23dd33ddd..ad4b7e224 100644 --- a/app/styles/components/project-menu.scss +++ b/app/styles/components/project-menu.scss @@ -1,58 +1,59 @@ -.horizontal-menu { - @include clearfix; - - border-bottom: 1px solid $border-default; - list-style-type: none; - margin: 0 0 10px 0; - padding: 0; - width: 100%; - - li { - float: left; - font-size: $body-font-size-normal; - } - - a { - border-bottom: 3px solid transparent; - color: $extra-light-text; - display: block; - font-weight: 500; - margin-bottom: -1px; - padding: 6px 10px; - text-decoration: none; - - &.active { - border-bottom-color: $primary-color; - color: $primary-color; - font-weight: 700; +.project__menu, .organization-menu { + &--horizontal { + @include clearfix; + border-bottom: 1px solid $gray--light; + height: 2.5em; + list-style-type: none; + margin-bottom: .7em; + padding: 0; + width: 100%; + + li { + float: left; + font-size: $body-font-size-normal; + height: 100%; + } - span.info { - background: $dark-blue; + a { + border-bottom: 3px solid transparent; + color: $text--lighter; + display: block; + font-weight: 500; + height: 100%; + padding: 6px 10px; + text-decoration: none; + + &.active, &:hover { + border-bottom-color: $blue; + color: $blue; + + span.info { + background: $blue--light; + } } - } - &:hover { - border-bottom-color: $primary-color; - color: $primary-color; - transition: border-bottom-color ease 0.3s; + &.active { + font-weight: 700; + } - span.info { - background: $dark-blue; + &:hover { + transition: border-bottom-color ease 0.3s; } - } - span.info { - background: $extra-light-text; - border-radius: 4px; - color: white; - font-size: $body-font-size-small; - font-weight: 300; - padding: 2px 7px 3px 7px; - margin-left: 5px; - vertical-align: 1px; - - strong { - font-weight: 700; + span.info { + background: $gray--light; + border-radius: 4px; + color: white; + display: inline-block; + font-size: $body-font-size-small; + font-weight: 300; + margin-left: 5px; + padding: 1px 7px 2px 7px; + vertical-align: 1px; + + strong { + font-weight: 700; + } } } } diff --git a/app/styles/components/role-item.scss b/app/styles/components/role-item.scss deleted file mode 100644 index 9a121c236..000000000 --- a/app/styles/components/role-item.scss +++ /dev/null @@ -1,4 +0,0 @@ -.role-item { - margin: 10px 0; - text-align: center; -} diff --git a/app/styles/components/settings-menu.scss b/app/styles/components/settings-menu.scss index c27f2b40f..1b210f0c3 100644 --- a/app/styles/components/settings-menu.scss +++ b/app/styles/components/settings-menu.scss @@ -1,20 +1,23 @@ +// is this a generic component? it seems to be used for projects +// so project-settings__menu would be a better class name + .settings-menu { li { a { border-left: 1px solid transparent; - color: $extra-light-text; + color: $text--lighter; display: block; padding: 10px 15px; &:hover { - background: $light-blue-background; - border-color: $border-default; - color: $dark-blue; + background: $blue--lighter; + border-color: $gray; + color: $blue; } &.active { - border-color: $dark-blue; - color: $dark-blue; + border-color: $blue; + color: $blue; } } } diff --git a/app/styles/components/signup-form.scss b/app/styles/components/signup-form.scss index 3750bda07..c706a4f09 100644 --- a/app/styles/components/signup-form.scss +++ b/app/styles/components/signup-form.scss @@ -2,7 +2,6 @@ @include span-columns(5); @include shift(3.5); padding-top: 10vh; - input[type="submit"] { width: 100%; } diff --git a/app/styles/components/skill-list-item.scss b/app/styles/components/skill-list-item.scss index 625324378..4027d6745 100644 --- a/app/styles/components/skill-list-item.scss +++ b/app/styles/components/skill-list-item.scss @@ -5,7 +5,7 @@ .skill-list-item { a { - color: $dark-text; + color: $text--dark; cursor: pointer; position: relative; @@ -17,11 +17,11 @@ } &.just-removed { - color: $dark-blue; + color: $blue--dark; } &.matched { - color: $dark-blue; + color: $blue--dark; &:not(.just-removed) { font-weight: 600; @@ -32,7 +32,7 @@ } &:hover:not(.matched) { - color: $dark-blue; + color: $blue--dark; } &:hover.matched { diff --git a/app/styles/components/skills-list.scss b/app/styles/components/skills-list.scss index 21329715b..df3330bc0 100644 --- a/app/styles/components/skills-list.scss +++ b/app/styles/components/skills-list.scss @@ -4,7 +4,7 @@ margin-right: 5px; &.matched { - color: $dark-blue; + color: $blue--dark; font-weight: 700; } } diff --git a/app/styles/components/skills-typeahead.scss b/app/styles/components/skills-typeahead.scss index f75daaa8c..e4139ca4a 100644 --- a/app/styles/components/skills-typeahead.scss +++ b/app/styles/components/skills-typeahead.scss @@ -32,7 +32,7 @@ li.skill-dropdown-item { &.has-skill { &.selected { - background: $light-red-background; + background: $red--light; a { color: $danger-color; @@ -45,12 +45,12 @@ li.skill-dropdown-item { } a { - color: $dark-blue; + color: $blue; } } &.selected { - background: $light-blue-background; + background: $blue--lighter; a { &:after { @@ -60,7 +60,7 @@ li.skill-dropdown-item { } a { - color: $dark-text; + color: $text--dark; display: block; padding: 10px 10px; transition-property: none; diff --git a/app/styles/components/task-card.scss b/app/styles/components/task-card.scss index 8184cbbfa..3dc4fa1ba 100644 --- a/app/styles/components/task-card.scss +++ b/app/styles/components/task-card.scss @@ -1,6 +1,6 @@ .task-card { background: white; - border: 1px solid $border-light; + border: 1px solid $gray--lightest; border-radius: 0 0 4px 4px; display: flex; flex-direction: column; @@ -24,11 +24,11 @@ } &__number { - color: $extra-light-text; + color: $text--lighter; } &__time { - color: $extra-light-text; + color: $text--lighter; font-size: $body-font-size-small; } @@ -93,7 +93,7 @@ } a { - color: $dark-text; + color: $text--dark; font-weight: 700; &:hover { diff --git a/app/styles/components/task-comment-list.scss b/app/styles/components/task-comment-list.scss index 114545a36..09c551fb4 100644 --- a/app/styles/components/task-comment-list.scss +++ b/app/styles/components/task-comment-list.scss @@ -1,5 +1,4 @@ .task-comment-list { @include span-columns(12); - - border-bottom: 3px solid $background-gray; + border-bottom: 1px solid $background-gray; } diff --git a/app/styles/components/task-new-form.scss b/app/styles/components/task-new-form.scss index ff4e572f3..2e7d07b06 100644 --- a/app/styles/components/task-new-form.scss +++ b/app/styles/components/task-new-form.scss @@ -21,11 +21,11 @@ } &.issue .task-new-form-body { - border-color: $issue-background; + border-color: $red--light; } &.idea .task-new-form-body { - border-color: $idea-background; + border-color: $yellow--light; } .task-type.input-group { diff --git a/app/styles/components/task-status.scss b/app/styles/components/task-status.scss index b57ad08de..23f890e1c 100644 --- a/app/styles/components/task-status.scss +++ b/app/styles/components/task-status.scss @@ -27,7 +27,7 @@ } &.open { - background: $dark-blue; + background: $blue; &:before { @include sprite($open-white); diff --git a/app/styles/components/task-title.scss b/app/styles/components/task-title.scss index 16b5d8dc7..7469bdf28 100644 --- a/app/styles/components/task-title.scss +++ b/app/styles/components/task-title.scss @@ -15,7 +15,7 @@ } .task-number { - color: $extra-light-text; + color: $text--lighter; font-weight: 300; margin-left: 10px; } diff --git a/app/styles/components/user-details.scss b/app/styles/components/user-details.scss index e69de29bb..0f73e55ca 100644 --- a/app/styles/components/user-details.scss +++ b/app/styles/components/user-details.scss @@ -0,0 +1,3 @@ +.user-details { + width: 100%; +} diff --git a/app/styles/components/user-menu.scss b/app/styles/components/user-menu.scss index 160dc45b7..ea6f90351 100644 --- a/app/styles/components/user-menu.scss +++ b/app/styles/components/user-menu.scss @@ -1,38 +1,37 @@ .user-menu { - .avatar { - background: $gray; - width: 40px; - height: 40px; - border-radius: 20px; - line-height: 1; - vertical-align: middle; - } - - .dropdown-menu { - min-width: 220px; - } + position: relative; - &.menu-hidden { - .dropdown-arrow { - @include arrow-down; + &:hover { + .user-menu__arrow { + border-color: $link-color transparent; } } +} - &.menu-visible { - .dropdown-arrow { - @include arrow-up; - } +// classes below should be .user-menu--hidden and .user-menu--visible +// to follow BEM but it was causing problems with the dropdown toggle + +.menu-hidden { + .user-menu__arrow { + @include arrow-down; } +} - a:hover { - .dropdown-arrow { - border-top-color: $link-hover-color; - border-bottom-color: $link-hover-color; - } +.menu-visible { + .user-menu__arrow { + @include arrow-up; } } -.user-menu-select { +.user-menu a { padding: 5px; - display: block; +} + +.user-menu__avatar { + background: $gray; + border-radius: 20px; + height: 40px; + line-height: 1; + vertical-align: middle; + width: 40px; } diff --git a/app/styles/components/user-organizations-list.scss b/app/styles/components/user-organizations-list.scss index 432707507..87cef7b88 100644 --- a/app/styles/components/user-organizations-list.scss +++ b/app/styles/components/user-organizations-list.scss @@ -6,13 +6,15 @@ @include span-columns(12); margin: 5px 0; - h3 { - margin: 3px 0; + h4 { + font-size: $header-font-size-small; + font-weight: 700; + margin: 7px 0; } p { margin: 3px 0; - color: $light-text; + color: $text--light; } img { @@ -28,4 +30,8 @@ .content { margin-left: 70px; } -} \ No newline at end of file +} + +.empty-state { + color: $text--light; +} diff --git a/app/styles/components/user-sidebar.scss b/app/styles/components/user-sidebar.scss index 35be8e390..2bdbda278 100644 --- a/app/styles/components/user-sidebar.scss +++ b/app/styles/components/user-sidebar.scss @@ -12,14 +12,14 @@ .username { font-size: $body-font-size-normal; font-weight: 500; - color: $light-text; + color: $text--light; } .details { margin: 10px 0; padding: 10px 0; font-size: $body-font-size-small; - color: $light-text; + color: $text--light; li { padding: 4px 0; @@ -34,3 +34,11 @@ } } } + +.border-top { + border-top: 1px solid; +} + +.border-gray-light { + border-color: $gray--lightest; +} diff --git a/app/styles/layout/_content.scss b/app/styles/layout/_content.scss new file mode 100644 index 000000000..befa87be7 --- /dev/null +++ b/app/styles/layout/_content.scss @@ -0,0 +1,19 @@ +.site-content { + &.for-project-tasks { + display: flex; + flex-direction: column; + flex-grow: 1; + } + // align-items: center; + // display: flex; + // flex: 1; + // flex-direction: column; + // justify-content: center; +} + +// .site-content--start { +// display: flex; +// flex-direction: column; +// min-height: calc(100vh - 5em); +// justify-content: center; +// } diff --git a/app/styles/components/site-footer.scss b/app/styles/layout/_footer.scss similarity index 94% rename from app/styles/components/site-footer.scss rename to app/styles/layout/_footer.scss index 99c8379b5..6931f1339 100644 --- a/app/styles/components/site-footer.scss +++ b/app/styles/layout/_footer.scss @@ -1,7 +1,5 @@ .site-footer { - margin: 50px -10px 0; - padding: 20px 0 30px; - + padding: 1.4em 0; h4 { margin: 7px 0; } diff --git a/app/styles/_forms.scss b/app/styles/layout/_forms.scss similarity index 93% rename from app/styles/_forms.scss rename to app/styles/layout/_forms.scss index 5f99a3bb9..51f673bcc 100644 --- a/app/styles/_forms.scss +++ b/app/styles/layout/_forms.scss @@ -78,7 +78,7 @@ $outer-border-radius: 4px; color: #333; text-align: center; background-color: $background-gray; - border: 1px solid $border-default; + border: 1px solid $gray; border-radius: $outer-border-radius; display: table-cell; line-height: 6px; @@ -119,6 +119,7 @@ form { } .error { + color: $red; margin: 5px; } @@ -169,7 +170,7 @@ form { li { margin-bottom: 2px; &.highlight { - color: $dark-blue; + color: $blue; } } } @@ -187,7 +188,7 @@ form { } select { - border: 1px solid $border-default; + border: 1px solid $gray; font-family: $body-font-family; font-size: $body-font-size-normal; height: 41px; @@ -206,18 +207,18 @@ select { } &.issue { - background: $issue-color; + background: $red; color: white; } &.task { - background: $task-color; + background: $blue; color: white; } &.idea { - background: $idea-color; - color: $dark-text; + background: $yellow; + color: $text--dark; } } } diff --git a/app/styles/layout/_header.scss b/app/styles/layout/_header.scss new file mode 100644 index 000000000..8b74ce443 --- /dev/null +++ b/app/styles/layout/_header.scss @@ -0,0 +1,71 @@ +// pace (automatic page loader progress bar) +// http://github.hubspot.com/pace/ +.pace-progress { + background: $blue; +} + +.drag-zone { + height: 100%; +} + +.site-header { + display: flex; + height: 5em; + padding: .7em 0; +} + +.header__logo { + line-height: 50px; + margin: 0; + a { + @include sprite($logo); + display: inline-block; + text-indent: -9999px; + } +} + +.header-navigation { + &--main, &--auth { + padding: 0 2em; + } +} + +.header-navigation--auth { + margin-left: auto; +} + +.header-navigation__options { + li { + display: inline-block; + float: left; + font-size: $body-font-size-normal; + } + a { + border-bottom: 3px solid transparent; + color: $text--dark; + display: block; + font-weight: 600; + padding: 15px 10px; + &.active, &:hover { + border-bottom-color: $blue; + color: $link-color; + } + &:hover { + transition: border-bottom-color ease 0.3s; + } + } +} + +.header-navigation--onboarding { + display: flex; + margin-left: auto; +} + +.onboarding__progress { + padding: 23px 0 22px 0; + width: 180px; +} + +.onboarding__steps { + padding: 0 30px; +} diff --git a/app/styles/main.scss b/app/styles/main.scss deleted file mode 100644 index 988505a92..000000000 --- a/app/styles/main.scss +++ /dev/null @@ -1,205 +0,0 @@ -html { - font-family: $body-font-family; - font-size: $body-font-size-normal; - - &.danger { - background: $danger-color; - } - &.warning { - background: $warning-color; - } -} - -body { - margin: 0; - padding: 0 10px; - - > .ember-view:first-of-type { - height: 100%; - position: relative - } -} - -html, body { - height: 100%; -} - -.flexbox-container { - display: flex; - flex-direction: column; - justify-content: space-between; - min-height: 100vh; -} - -.flexbox-spacer { - flex: auto; -} - -p { - font-size: $body-font-size-normal; -} - -a { - color: $link-color; - text-decoration: none; - transition: color ease 0.3s; - - &:hover { - color: $link-hover-color; - cursor: pointer; - } -} - -.container { - @include outer-container(980px); - min-width: 980px; -} - -.main.container { - &.for-project-tasks { - display: flex; - flex-direction: column; - flex-grow: 1; - } -} - -.error { - color: $error-text-color; -} - -.left { - float: left; -} - -.right { - float: right; -} - -ul { - margin: 0; - padding: 0; - list-style-type: none; - - &.bulleted { - list-style-type: disc; - margin-left: 30px; - - li { - margin-bottom: 0.5em; - } - } -} - -.border-top { - border-top: 1px solid; -} - -.border-gray-light { - border-color: $border-light; -} - -.empty-state { - color: $light-text; -} - -.overflow-hidden { - overflow: hidden; -} - -.visible { - visibility: visible; -} - -.hidden { - visibility: hidden; -} - -.close { - font-size: $body-font-size-large; - font-weight: 900; - margin-right: 2px; -} - -.spinner { - &.small { - $file: "/assets/images/icons/spinner-small"; - @include background-image-retina($file, "gif", 24px, 24px); - height: 24px; - width: 24px; - } -} - -p.subtext { - font-size: $body-font-size-small; -} - -.empty { - background: $background-gray; - border-radius: 6px; - padding: 20px; - text-align: center; - - .empty-icon { - margin: 0 auto; - } -} - -// TODO: Remove when we add more projects -.temporary-projects-notice { - @include span-columns(4); - - border: 1px dashed $border-light; - border-radius: 4px; - color: $light-text; - min-height: 390px; - padding: 20px; - - p { - font-size: $body-font-size-small; - } - - .curved-arrow-icon { - @include sprite($curved-arrow); - - margin-top: 90px; - } -} - -.visually-hidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.page-header { - margin-bottom: 20px; - border-bottom: 1px solid $border-light; - - h2 { - font-weight: 500; - margin: 10px 0; - } -} - -.header-section { - margin: 20px 0; - - h2 { - font-weight: 700; - } - - p { - color: $light-text; - line-height: 2em; - } -} - -.legal { - margin: auto; - max-width: 600px; -} diff --git a/app/styles/start.scss b/app/styles/start.scss deleted file mode 100644 index eeb14dfe5..000000000 --- a/app/styles/start.scss +++ /dev/null @@ -1,37 +0,0 @@ -.start-header { - text-align: center; - - h2 { - color: $dark-text; - font-size: $header-font-size-medium; - font-weight: 500; - margin: 10px 0; - } - - h3 { - color: $extra-light-text; - font-size: $header-font-size-small; - font-weight: 300; - margin: 10px 0; - } -} - -.start-actions { - @include span-columns(12); - - border-top: 3px solid $border-light; - margin: 20px 0; - padding: 10px 0; - text-align: center; - - p { - font-size: $body-font-size-normal; - color: $extra-light-text; - } - - button { - font-size: $body-font-size-normal; - padding-left: 50px; - padding-right: 50px; - } -} diff --git a/app/styles/templates/about.scss b/app/styles/templates/about.scss index d7f725f8e..acfb0d7d3 100644 --- a/app/styles/templates/about.scss +++ b/app/styles/templates/about.scss @@ -4,21 +4,21 @@ } h2 { - color: $dark-text; + color: $text--dark; font-size: $header-font-size-large; font-weight: 500; margin: 30px 0; } h3 { - color: $dark-text; + color: $text--dark; font-size: $header-font-size-medium; font-weight: 300; margin: 10px 0; } h4 { - color: $dark-text; + color: $text--dark; font-size: $header-font-size-small; font-weight: 300; margin: 10px 0; diff --git a/app/styles/index.scss b/app/styles/templates/index.scss similarity index 97% rename from app/styles/index.scss rename to app/styles/templates/index.scss index d4c9d4d0d..f3e1c20a1 100644 --- a/app/styles/index.scss +++ b/app/styles/templates/index.scss @@ -148,7 +148,7 @@ @include span-columns(12); &__header { - border-top: 1px solid $border-default; + border-top: 1px solid $gray; margin: 20px 0; text-align: center; @@ -157,7 +157,7 @@ } p { - color: $light-text; + color: $text--light; } } } diff --git a/app/styles/templates/project/index.scss b/app/styles/templates/project/index.scss index f13dd6655..6cfaeb261 100644 --- a/app/styles/templates/project/index.scss +++ b/app/styles/templates/project/index.scss @@ -1,19 +1,21 @@ +.project-wrapper { + min-height: 50vh; + width: 100%; +} + .project-main { @include span-columns(8); } .project-sidebar { @include span-columns(4); - .project-sidebar__section { margin: 40px 0; - &:first-child { margin-top: 0px; } } - - h3 { + h4 { margin: 20px 0 10px 0; } } diff --git a/app/styles/templates/project/settings/contributors.scss b/app/styles/templates/project/settings/contributors.scss index 3c4ec9884..ae01f2c0d 100644 --- a/app/styles/templates/project/settings/contributors.scss +++ b/app/styles/templates/project/settings/contributors.scss @@ -1,26 +1,19 @@ .contributors-list { @include span-columns(12); - - margin-bottom: 40px; - &:last-child { margin-bottom: 0; } } -.contributors-list-header { - margin: 10px 0 10px 60px; - - h3 { - margin: 0 0 5px 0; - } - +.contributors-list__header { + margin-bottom: 1em; p { + font-size: $body-font-size-normal; margin: 5px 0; } } -.contributors-list-empty { +.contributors-list--empty { background: $background-gray; border-radius: 4px; padding: 20px 60px; diff --git a/app/styles/_settings.scss b/app/styles/templates/project/settings/settings.scss similarity index 100% rename from app/styles/_settings.scss rename to app/styles/templates/project/settings/settings.scss diff --git a/app/styles/task-new.scss b/app/styles/templates/project/tasks/task-new.scss similarity index 100% rename from app/styles/task-new.scss rename to app/styles/templates/project/tasks/task-new.scss diff --git a/app/styles/task.scss b/app/styles/templates/project/tasks/task.scss similarity index 63% rename from app/styles/task.scss rename to app/styles/templates/project/tasks/task.scss index 1d8ecec0f..1c43bf256 100644 --- a/app/styles/task.scss +++ b/app/styles/templates/project/tasks/task.scss @@ -1,3 +1,8 @@ +.task-wrapper { + min-height: 50vh; + width: 100%; +} + .task-timeline { @include span-columns(9); } diff --git a/app/styles/templates/project/thank-you.scss b/app/styles/templates/project/thank-you.scss index f35c0ae6b..8c1ad068f 100644 --- a/app/styles/templates/project/thank-you.scss +++ b/app/styles/templates/project/thank-you.scss @@ -20,6 +20,6 @@ } &__message { - color: $light-text; + color: $text--light; } } diff --git a/app/styles/templates/start/expertise.scss b/app/styles/templates/start/expertise.scss index 9554f65e2..2e49a2ab4 100644 --- a/app/styles/templates/start/expertise.scss +++ b/app/styles/templates/start/expertise.scss @@ -1,32 +1,60 @@ -.start-roles { - margin: 30px 0; -} - -.roles-column { - @include span-columns(4); +.start__expertise { + display: flex; + flex: 1; + margin-bottom: 2em; + justify-content: space-around; text-align: center; + width: 100%; +} - h3 { - color: $dark-text; - font-size: $header-font-size-medium; - font-weight: 300; - margin: 20px 0; +.start__expertise { + button, button.clear { + margin-bottom: .7em; + padding: .8em; + text-align: center; } } -.roles-column-header { - display: inline-block; +.expertise__column { + width: 33.3%; - &.creative { - @include rolesSprite($creative); - margin-left: 5px; + &--creative { + &::before { + @include rolesSprite($creative); + content: ""; + float: left; + height: 5em; + margin-bottom: .5em; + width: 100%; + } } - - &.technology { - @include rolesSprite($technology); + &--technology { + &::before { + @include rolesSprite($technology); + content: ""; + float: left; + height: 5em; + margin-bottom: .5em; + top: 0; + width: 100%; + } + } + &--support { + &::before { + @include rolesSprite($support); + content: ""; + float: left; + height: 5em; + margin-bottom: .5em; + top: 0; + width: 100%; + } } - &.support { - @include rolesSprite($support); + h3 { + color: $text--dark; + font-size: $header-font-size-medium; + font-weight: 300; + margin: 20px 0; } } diff --git a/app/styles/templates/start/hello.scss b/app/styles/templates/start/hello.scss index 70a2e166d..efeb182c1 100644 --- a/app/styles/templates/start/hello.scss +++ b/app/styles/templates/start/hello.scss @@ -1,54 +1,49 @@ -.form-area { - @include span-columns(6); - - margin: 30px 0; +.start__hello { + $file: "/assets/images/people-signup"; + @include background-image-retina($file, "png", 410px, 396px); + background-position: right center; + display: flex; + flex: 1; + flex-flow: row wrap; + padding-right: 50%; + width: 100%; +} +.hello__column { + width: 30%; + &:first-of-type { + display: flex; + flex-flow: column; + justify-content: flex-end; + padding-bottom: 2em; + width: 100%; + } + &:last-of-type { + padding-left: 5%; + width: 70%; + } h2 { - color: $dark-text; + color: $text--dark; font-size: $header-font-size-large; font-weight: 500; margin: 30px 0; } - p { - color: $extra-light-text; + color: $text--lighter; font-size: $body-font-size-normal; font-weight: 300; line-height: 24px; margin: 10px 0; } -} - -.form { - margin-top: 30px; - - .photo { - float: left; - text-align: center; - width: 150px; - } - .name { - float: left; - padding: 0 20px; - width: 328px; - } +} +.hello__column { .input-group input { width: 50%; - &:first-child { + border-radius: 4px 0 0 4px; border-right: none; } } } - -.image-area { - @include span-columns(6); -} - -.people-signup { - $file: "/assets/images/people-signup"; - @include background-image-retina($file, "png", 410px, 396px); - float: right; -} diff --git a/app/styles/templates/start/skills.scss b/app/styles/templates/start/skills.scss index b9c89e8f8..23ae6b8dd 100644 --- a/app/styles/templates/start/skills.scss +++ b/app/styles/templates/start/skills.scss @@ -1,28 +1,21 @@ -.start-skills { - @include span-columns(12); +.start__skills { + display: flex; + flex: 1; + flex-direction: column; + //justify-content: center; + margin-bottom: 2em; } -.user-skills-list { - @include span-columns(8); - @include shift(2); - - margin-top: 30px; - margin-bottom: 10px; - min-height: 44px; +.skills__list { text-align: center; - - > div { - display: inline-block; - } - button { - margin: 5px 0; + margin: 0 .5em 1em 0; + } + div { + display: inline-block; } - p { - color: $extra-light-text; + color: $text--lighter; font-style: italic; - line-height: 44px; - margin: 5px 0; } } diff --git a/app/styles/templates/start/start.scss b/app/styles/templates/start/start.scss new file mode 100644 index 000000000..aa07f6edb --- /dev/null +++ b/app/styles/templates/start/start.scss @@ -0,0 +1,29 @@ +.start__header { + align-self: flex-start; + margin-bottom: 2em; + text-align: center; + width: 100%; + + h2 { + color: $text--dark; + font-size: $header-font-size-medium; + font-weight: 500; + } + + h3 { + color: $text--lighter; + font-size: $header-font-size-small; + font-weight: 300; + } +} + +.start__footer { + align-self: flex-end; + border-top: 1px solid $gray--lightest; + margin-bottom: 2em; + text-align: center; + width: 100%; + p { + color: $text--lighter; + } +} diff --git a/app/styles/templates/team.scss b/app/styles/templates/team.scss index 5f402c0b5..239e11653 100644 --- a/app/styles/templates/team.scss +++ b/app/styles/templates/team.scss @@ -4,14 +4,14 @@ text-align: center; h2 { - color: $dark-text; + color: $text--dark; font-size: $header-font-size-large; font-weight: 500; margin: 10px 0; } h3 { - color: $extra-light-text; + color: $text--lighter; font-size: $header-font-size-small; font-weight: 300; margin: 10px 0; diff --git a/app/templates/application.hbs b/app/templates/application.hbs index bd76f2d24..0a62d9c6c 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -1,13 +1,25 @@ {{title "Code Corps"}} +{{! do we have to wrap the whole app with #drag-zone? +isn't this here mainly for updating a user's image? }} {{#drag-zone}}
{{loading-bar}} + {{! it'd be nice for the sake of consistency to rename + 'navigation-menu' to 'site-header' }} {{navigation-menu}} {{flash-messages}} -
- {{outlet}} -
+ {{#if isOnboarding}} +
+ {{outlet}} +
+ {{else}} + {{! is codeTheme.className needed this early in the DOM tree? }} + {{! add flex-direction: column to site-content when looking at tasks }} +
+ {{outlet}} +
+ {{/if}} {{#if shouldShowSpacer}}
{{/if}} diff --git a/app/templates/components/categories-list.hbs b/app/templates/components/categories-list.hbs index f57869c37..448651155 100644 --- a/app/templates/components/categories-list.hbs +++ b/app/templates/components/categories-list.hbs @@ -1,5 +1,3 @@ -
{{#each sortedCategories as |category|}} {{category-item category=category}} {{/each}} -
\ No newline at end of file diff --git a/app/templates/components/category-item.hbs b/app/templates/components/category-item.hbs index 918576343..ef7aedae8 100644 --- a/app/templates/components/category-item.hbs +++ b/app/templates/components/category-item.hbs @@ -1,9 +1,15 @@
{{#if selected}} - + {{else}} - + {{/if}} -

{{category.description}}

\ No newline at end of file +

{{category.description}}

diff --git a/app/templates/components/flash-messages.hbs b/app/templates/components/flash-messages.hbs index 1985879f0..c8f688153 100644 --- a/app/templates/components/flash-messages.hbs +++ b/app/templates/components/flash-messages.hbs @@ -10,7 +10,7 @@

{{flash.message}}

- × + ×
{{/if}} diff --git a/app/templates/components/login-form.hbs b/app/templates/components/login-form.hbs index 9c3349b95..4dd9a6fc7 100644 --- a/app/templates/components/login-form.hbs +++ b/app/templates/components/login-form.hbs @@ -1,13 +1,15 @@
-

Sign in to your account

+

Sign in

{{#auto-focus}} {{input id="identification" autofocus=true tabindex=0 placeholder="Email" value=identification}} {{/auto-focus}}
+
{{input id="password" placeholder="Password" type="password" value=password}}
+
diff --git a/app/templates/components/navigation-menu.hbs b/app/templates/components/navigation-menu.hbs index 241b3dd56..dd2d70dad 100644 --- a/app/templates/components/navigation-menu.hbs +++ b/app/templates/components/navigation-menu.hbs @@ -1,33 +1,34 @@ -

- {{#link-to 'index' class='logo'}}Code Corps{{/link-to}} +

+ {{#link-to 'index' }}Code Corps{{/link-to}}

+ {{#if navigationMenu.isDefault}} -
    -
  • {{#link-to 'projects-list'}}Projects{{/link-to}}
    • -
  • Blog
    • -
- {{#if session.isAuthenticated}} -
    -
  • - {{user-menu user=currentUser.user}} -
    • + + + {{#if session.isAuthenticated}} + {{else}} -
      -
    • - {{#link-to 'signup' class="signup"}}Sign up{{/link-to}} -
      • -
    • - {{#link-to 'login' class="login"}}Sign in{{/link-to}} -
      • -
    + {{/if}} {{/if}} + {{#if navigationMenu.isOnboarding}} -
    -

    Step {{onboarding.currentStepNumber}} of {{onboarding.totalSteps}}

    +
    +
    + {{progress-bar-container percentage=onboarding.progressPercentage}} +
    +

    Step {{onboarding.currentStepNumber}} of {{onboarding.totalSteps}}

    -
    - {{progress-bar-container percentage=onboarding.progressPercentage}} -
    -{{/if}} \ No newline at end of file +{{/if}} diff --git a/app/templates/components/organization-members.hbs b/app/templates/components/organization-members.hbs index fa802ee54..5e9a0ff1a 100644 --- a/app/templates/components/organization-members.hbs +++ b/app/templates/components/organization-members.hbs @@ -1,4 +1,4 @@ -

    Contributors{{count}}

    +

    Contributors{{count}}

      {{#each (slice 0 15 members) as |user|}}
    • diff --git a/app/templates/components/project-details.hbs b/app/templates/components/project-details.hbs index 68628128d..573122121 100644 --- a/app/templates/components/project-details.hbs +++ b/app/templates/components/project-details.hbs @@ -1,27 +1,29 @@ -
      -
      - {{#link-to 'project.index' project}}{{/link-to}} +
      +
      + {{#link-to 'project.index' project}} + + {{/link-to}}
      -
      -

      {{#link-to 'project.index' project}}{{project.title}}{{/link-to}}

      - {{#if expanded}} -

      {{project.description}}

      - {{/if}} + +
      + +

      + {{#link-to 'project.index' project}} + {{project.title}} + {{/link-to}} +

      -
      -
      -
      -

      - {{#if session.isAuthenticated}} - {{#if (can "join organization" project.organization)}} - - {{/if}} - {{#if credentials.userMembershipIsPending}} - - {{/if}} - {{else}} - {{link-to "Sign up" "signup" class="button default small"}} to join this project. +

      + +
      -
      + {{#if credentials.userMembershipIsPending}} + + {{/if}} + {{else}} + {{link-to "Sign up" "signup" class="button default small"}} to join this project. + {{/if}} + diff --git a/app/templates/components/project-header.hbs b/app/templates/components/project-header.hbs index 41790c676..74857757a 100644 --- a/app/templates/components/project-header.hbs +++ b/app/templates/components/project-header.hbs @@ -1,3 +1,5 @@ +{{! is this template used at all? }} + {{project.title}}

      {{project.title}} diff --git a/app/templates/components/project-long-description.hbs b/app/templates/components/project-long-description.hbs index 44d29b380..86c3b085e 100644 --- a/app/templates/components/project-long-description.hbs +++ b/app/templates/components/project-long-description.hbs @@ -1,7 +1,16 @@ +{{! too many nested DIV elements }} + {{#if descriptionIsBlank}} + + {{! are empty -inner and user-can-add added just as JS hooks? better to + use classes instead of adding extra DIV element with no semantic value }} +
      +
      + {{#if (can "manage organization" project.organization)}} +

      Add your project description.

      @@ -13,16 +22,20 @@
    • What risks and challenges will you face?

    + {{else}} +

    Nothing to see here!

    Looks like this project is still getting set up!

    + {{/if}}
{{else}} +
{{#unless inEditMode}}
@@ -34,13 +47,15 @@ {{{project.longDescriptionBody}}} {{/unless}}
-{{/if}} +{{/if}} {{#if (can "manage organization" project.organization)}} {{#if shouldDisplayEditor}} +
{{editor-with-preview input=project.longDescriptionMarkdown isLoading=project.isSaving modifiedSubmit="save"}}
+ {{/if}} -{{/if}} \ No newline at end of file +{{/if}} diff --git a/app/templates/components/project-menu.hbs b/app/templates/components/project-menu.hbs index 0411eac5d..fb8551a53 100644 --- a/app/templates/components/project-menu.hbs +++ b/app/templates/components/project-menu.hbs @@ -1,18 +1,36 @@ -
  • {{link-to 'About' 'project.index' project}}
    • -
  • {{#link-to 'project.tasks' project}}Tasks {{#if project.hasOpenTasks}}{{project.openTasksCount}}{{/if}}{{/link-to}}
    • -{{#if session.isAuthenticated}} - {{#if (can "manage organization" project.organization)}} -
  • - {{#link-to 'project.settings.contributors' project}}Contributors {{#if project.hasPendingMembers}}{{project.pendingMembersCount}} pending{{/if}}{{/link-to}} -
    • -
  • - {{link-to 'Donations' 'project.settings.donations.goals' project}} -
    • -
  • - {{link-to 'Payments' 'project.settings.donations.payments' project}} -
    • -
  • - {{link-to 'Settings' 'project.settings.profile' project}} -
    • + diff --git a/app/templates/components/role-item.hbs b/app/templates/components/role-item.hbs index 61fadf3c0..34db89287 100644 --- a/app/templates/components/role-item.hbs +++ b/app/templates/components/role-item.hbs @@ -1,5 +1,11 @@ {{#if selected}} - + {{else}} - -{{/if}} \ No newline at end of file + +{{/if}} diff --git a/app/templates/components/signup-form.hbs b/app/templates/components/signup-form.hbs index 08798acbe..ca6f7d3b0 100644 --- a/app/templates/components/signup-form.hbs +++ b/app/templates/components/signup-form.hbs @@ -1,13 +1,21 @@
    +

    Join Code Corps today.

    - {{signup-username-input user=user usernameValidated="usernameValidated"}} + {{#auto-focus}} + {{signup-username-input autofocus=true user=user usernameValidated="usernameValidated"}} + {{/auto-focus}} + {{signup-email-input user=user emailValidated="emailValidated"}} + {{signup-password-input user=user}} +
    + {{#if error}} {{error-formatter error=error}} {{/if}} +
    diff --git a/app/templates/components/site-footer.hbs b/app/templates/components/site-footer.hbs index 30a09c37d..0124e859d 100644 --- a/app/templates/components/site-footer.hbs +++ b/app/templates/components/site-footer.hbs @@ -1,75 +1,71 @@ -
    -
      -
    • - {{#scroll-top}} - {{#link-to 'index' class='footer-logo'}}Code Corps{{/link-to}} - {{/scroll-top}} -
      • -
    • -

      Code Corps

      -
        -
      • - {{#scroll-top}} - {{link-to 'About us' 'about'}} - {{/scroll-top}} -
        • -
      • - {{#scroll-top}} - {{link-to 'Team' 'team'}} - {{/scroll-top}} -
        • -
      -
      • -
    • -

      Help

      -
        -
      • - team@codecorps.org -
        • -
      • - {{#scroll-top}} - {{link-to 'Terms of Use' 'terms'}} - {{/scroll-top}} -
        • -
      • - {{#scroll-top}} - {{link-to 'Privacy Policy' 'privacy'}} - {{/scroll-top}} -
        • -
      -
      • -
    • -

      Learn

      - -
      • -
    • -

      Connect

      - -
      • -
    -
    + diff --git a/app/templates/components/slugged-route-model-details.hbs b/app/templates/components/slugged-route-model-details.hbs index 5ac72c6fd..ccb8c121f 100644 --- a/app/templates/components/slugged-route-model-details.hbs +++ b/app/templates/components/slugged-route-model-details.hbs @@ -8,6 +8,5 @@ {{else}} {{title sluggedRoute.user.username " (" sluggedRoute.user.atUsername ")"}} {{/if}} - {{user-details user=sluggedRoute.user}} {{/if}} diff --git a/app/templates/components/user-dropdown.hbs b/app/templates/components/user-dropdown.hbs index 601c109b5..79dfde315 100644 --- a/app/templates/components/user-dropdown.hbs +++ b/app/templates/components/user-dropdown.hbs @@ -1,12 +1,12 @@ -
    -
      +
      +
        + {{! all classes added to link elements below + seem to be used as hooks for testing only }}
      • {{#link-to 'slugged-route' user.username class="slugged-route"}}Your profile{{/link-to}}
      • {{#link-to 'settings.profile' class="profile"}}Settings{{/link-to}}
      • Log out
      -
      -

      - Signed in as {{user.username}} -

      +
      + Signed in as {{user.username}}
      diff --git a/app/templates/components/user-menu.hbs b/app/templates/components/user-menu.hbs index 2b56512f4..da55a0a7a 100644 --- a/app/templates/components/user-menu.hbs +++ b/app/templates/components/user-menu.hbs @@ -1,7 +1,8 @@ -{{#click-outside action=(action "hide") except-selector=".user-dropdown"}} - - {{user.atUsername}} - - +{{#click-outside action=(action "hide")}} + + {{user.atUsername}} + + {{/click-outside}} + {{user-dropdown user=user action="hide"}} diff --git a/app/templates/components/user-organizations-list.hbs b/app/templates/components/user-organizations-list.hbs index e6b186033..7f2b01c4b 100644 --- a/app/templates/components/user-organizations-list.hbs +++ b/app/templates/components/user-organizations-list.hbs @@ -1,4 +1,4 @@ -

      Organizations

      +

      Organizations

        {{#each organizations as |organization|}}
      • @@ -8,11 +8,11 @@ {{/link-to}}
      -

      +

      {{#link-to 'slugged-route' organization.slug}} {{organization.name}} {{/link-to}} -

      +

      {{organization.description}}

      @@ -23,4 +23,4 @@ {{user.username}} hasn't joined any organizations yet.

      {{/each}} -
    \ No newline at end of file + diff --git a/app/templates/components/user-sidebar.hbs b/app/templates/components/user-sidebar.hbs index 463aafd77..7b3f771a2 100644 --- a/app/templates/components/user-sidebar.hbs +++ b/app/templates/components/user-sidebar.hbs @@ -1,13 +1,13 @@ -

    +

    {{#if user.name}}
    {{user.name}}
    {{else}}
    {{user.username}}
    {{/if}}
    {{user.username}}
    -

    + {{#if user.biography}}

    diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 06da6932c..c80305266 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,22 +1,28 @@

    +

    Build a better future.

    Contribute to software projects for {{typed-string strings=typedStrings typeSpeed=70 backDelay=1500 loop=true loopCount=false}}

    {{#link-to 'signup' class="button default large"}}Start Helping{{/link-to}}
    +

    How does it work?

    Scroll to learn how you can help.

    + {{#landing-subsection title="First, you’ll say what you care about." minHeight=235 as |animated|}} {{demo-categories animated=animated}} {{/landing-subsection}} + {{#landing-subsection title="Then share the skills you know." minHeight=170 as |animated|}} {{demo-skills animated=animated}} {{/landing-subsection}} + {{#landing-subsection title="And we'll find projects you can help." minHeight=410 as |animated|}} {{demo-projects}} {{/landing-subsection}} +

    Ready to get started?

    @@ -25,5 +31,6 @@ {{#link-to 'signup' class="button default large"}}Sign up now{{/link-to}}
    +
    diff --git a/app/templates/project/index.hbs b/app/templates/project/index.hbs index dbd5f9737..24f0229d9 100644 --- a/app/templates/project/index.hbs +++ b/app/templates/project/index.hbs @@ -1,33 +1,37 @@ {{title project.title " by " project.organization.name}} {{project-details project=project expanded=true}} + {{project-menu project=project}} -
    +
    + {{project-long-description project=project}} -
    -
    - {{#if project.donationsActive}} -
    -

    Donations

    - {{donations/donation-progress - amountDonated=project.totalMonthlyDonated - donationGoal=project.currentDonationGoal - }} - {{donations/donation-status - createDonation=(action 'saveSubscription') - subscription=subscription - }} -
    - {{/if}} - -
    - {{organization-members count=project.organization.totalMembersCount members=project.organization.organizationMembers}} -
    - -
    -

    Skills

    - {{skills-list skills=projectSkills}} -
    +
    diff --git a/app/templates/project/settings.hbs b/app/templates/project/settings.hbs index 2030957db..7c3fcde56 100644 --- a/app/templates/project/settings.hbs +++ b/app/templates/project/settings.hbs @@ -1,8 +1,11 @@ +{{! this template should be renamed project-settings for consistency }} + {{title "Settings" " « " model.title " by " model.organization.name}} {{project-details project=model}} + {{project-menu project=model}} -
    +
    {{outlet}}
    diff --git a/app/templates/project/settings/contributors.hbs b/app/templates/project/settings/contributors.hbs index 501b827f8..e360f3221 100644 --- a/app/templates/project/settings/contributors.hbs +++ b/app/templates/project/settings/contributors.hbs @@ -1,60 +1,61 @@ -
    -
    -
    -

    Pending

    -

    People who want to join your project. See if their skills match up and help them get started.

    -
    -
      - {{#each (filter-by "isPending" true model.organization.organizationMemberships) as |membership|}} - {{member-list-item membership=membership user=membership.member}} - {{else}} -
      -

      No one's waiting to be approved. Good work!

      -
      - {{/each}} -
    +
    +
    +

    Pending

    +

    People who want to join your project. See if their skills match up and help them get started.

    -
    -
    -

    Owners

    -

    Have complete control over your project.

    +
      + {{#each (filter-by "isPending" true model.organization.organizationMemberships) as |membership|}} + {{member-list-item membership=membership user=membership.member}} + {{else}} +
      +

      No one's waiting to be approved. Good work!

      -
        - {{#each (filter-by "isOwner" true model.organization.organizationMemberships) as |membership|}} - {{member-list-item membership=membership user=membership.member}} - {{/each}} -
      + {{/each}} +
    +
    + +
    +
    +

    Owners

    +

    Have complete control over your project.

    -
    -
    -

    Admins

    -

    Can approve other contributors and help with administrative tasks.

    -
    -
      - {{#each (filter-by "isAdmin" true model.organization.organizationMemberships) as |membership|}} - {{member-list-item membership=membership user=membership.member}} - {{else}} -
      -

      You don't have any admins in your project.

      -

      They can help lighten your load, so consider promoting someone you trust.

      -
      - {{/each}} -
    +
      + {{#each (filter-by "isOwner" true model.organization.organizationMemberships) as |membership|}} + {{member-list-item membership=membership user=membership.member}} + {{/each}} +
    +
    + +
    +
    +

    Admins

    +

    Can approve other contributors and help with administrative tasks.

    -
    -
    -

    Everyone else

    -

    Can task and assign tasks in your project and contribute more fully to the project's goals.

    +
      + {{#each (filter-by "isAdmin" true model.organization.organizationMemberships) as |membership|}} + {{member-list-item membership=membership user=membership.member}} + {{else}} +
      +

      You don't have any admins in your project.

      +

      They can help lighten your load, so consider promoting someone you trust.

      -
        - {{#each (filter-by "isContributor" true model.organization.organizationMemberships) as |membership|}} - {{member-list-item membership=membership user=membership.member}} - {{else}} -
        -

        You don't have any other contributors yet.

        -

        Share the link to your project and encourage friends and colleagues to join.

        -
        - {{/each}} -
      + {{/each}} +
    +
    + +
    +
    +

    Everyone else

    +

    Can task and assign tasks in your project and contribute more fully to the project's goals.

    +
      + {{#each (filter-by "isContributor" true model.organization.organizationMemberships) as |membership|}} + {{member-list-item membership=membership user=membership.member}} + {{else}} +
      +

      You don't have any other contributors yet.

      +

      Share the link to your project and encourage friends and colleagues to join.

      +
      + {{/each}} +
    diff --git a/app/templates/project/tasks/task.hbs b/app/templates/project/tasks/task.hbs index d7122dbcc..5d9591e23 100644 --- a/app/templates/project/tasks/task.hbs +++ b/app/templates/project/tasks/task.hbs @@ -1,14 +1,19 @@ {{task-header task=task saveTask=(action 'saveTask')}} {{task-status task=task}} -
    - {{task-details task=task saveTask=(action 'saveTask')}} - {{task-comment-list comments=comments onSaveError=(action 'onSaveError')}} - {{#create-comment-form comment=newComment save=(action 'saveComment')}} - {{#if (can "edit task" task)}}{{task-status-button task=task}}{{/if}} - {{/create-comment-form}} - {{#if error}} - {{error-formatter error=error}} - {{/if}} -
    -
    + +
    +
    + {{task-details task=task saveTask=(action 'saveTask')}} + {{task-comment-list comments=comments onSaveError=(action 'onSaveError')}} +
    + {{#create-comment-form comment=newComment save=(action 'saveComment')}} + {{#if (can "edit task" task)}}{{task-status-button task=task}}{{/if}} + {{/create-comment-form}} + {{#if error}} + {{error-formatter error=error}} + {{/if}} +
    +
    +
    +
    diff --git a/app/templates/projects-list.hbs b/app/templates/projects-list.hbs index 3839ec0c7..178998794 100644 --- a/app/templates/projects-list.hbs +++ b/app/templates/projects-list.hbs @@ -1,12 +1,14 @@ {{title "Projects"}} -{{#each projects as |project|}} - {{project-card project=project}} -{{/each}} -
    -
    -

    Hey! Code Corps is the only project as we learn what's working.

    -

    We'd love your help getting ready for more ambitious projects.

    -

    Have a project idea when we’re ready?

    -

    Submit your idea

    +
    + {{#each projects as |project|}} + {{project-card project=project}} + {{/each}} +
    +
    +

    Hey! Code Corps is the only project as we learn what's working.

    +

    We'd love your help getting ready for more ambitious projects.

    +

    Have a project idea when we’re ready?

    +

    Submit your idea

    +
    diff --git a/app/templates/settings.hbs b/app/templates/settings.hbs index c5eea22a3..c80ed1d0e 100644 --- a/app/templates/settings.hbs +++ b/app/templates/settings.hbs @@ -1,3 +1,3 @@
    {{outlet}} -
    \ No newline at end of file +
    diff --git a/app/templates/settings/profile.hbs b/app/templates/settings/profile.hbs index d7dd0c614..f585e730e 100644 --- a/app/templates/settings/profile.hbs +++ b/app/templates/settings/profile.hbs @@ -1,7 +1,7 @@ {{title "Settings"}}
    -

    Public profile

    +

    Public profile

    diff --git a/app/templates/start/expertise.hbs b/app/templates/start/expertise.hbs index 1dd31e73d..cbe46cf14 100644 --- a/app/templates/start/expertise.hbs +++ b/app/templates/start/expertise.hbs @@ -1,27 +1,22 @@ -
    +

    How can you help?

    We'll match you to projects that need your experience.

    -
    -
    -
    +
    +

    Technology

    {{#each (filter-by "isTechnology" true model) as |role|}} {{role-item role=role}} {{/each}}
    - -
    -
    +

    Creative

    {{#each (filter-by "isCreative" true model) as |role|}} {{role-item role=role}} {{/each}}
    - -
    -
    +

    Support

    {{#each (filter-by "isSupport" true model) as |role|}} {{role-item role=role}} @@ -29,7 +24,7 @@
    -
    +

    Finished adding your experience?

    -
    \ No newline at end of file +
    diff --git a/app/templates/start/hello.hbs b/app/templates/start/hello.hbs index f19768bb5..13b749ed2 100644 --- a/app/templates/start/hello.hbs +++ b/app/templates/start/hello.hbs @@ -1,32 +1,35 @@ -
    -

    Hey, thanks for joining!

    -

    Code Corps is a community of people like you. Developers and designers, builders and dreamers, all working together to make software that makes the world a better place.

    -
    -
    - {{image-drop - circle=true - hoverText="Change your profile photo." - onDone=(action uploadDone) - onError=(action uploadErrored) - onStart=(action uploadStarted) - originalImage=model.photoLargeUrl - }} -

    Click to add photo

    -
    -
    -

    Let’s get to know you by putting a face to a name.

    -
    +
    + +
    +

    Hey, thanks for joining!

    +

    Code Corps is a community of people like you. Developers and designers, builders and dreamers, all working together to make software that makes the world a better place.

    +
    + +
    + {{image-drop + circle=true + hoverText="Change your profile photo." + onDone=(action uploadDone) + onError=(action uploadErrored) + onStart=(action uploadStarted) + originalImage=model.photoLargeUrl + }} +

    Click to add photo

    +
    + +
    +

    Let’s get to know you by putting a face to a name.

    +
    + {{#auto-focus}} {{input type="text" name="firstName" value=model.firstName placeholder="First name" autofocus=true enter='attemptToContinue' }} - {{input type="text" name="lastName" value=model.lastName placeholder="Last name" enter='attemptToContinue' }} -
    + {{/auto-focus}} + {{input type="text" name="lastName" value=model.lastName placeholder="Last name" enter='attemptToContinue' }}
    -
    -
    - +
    -
    +

    Nice to finally meet you.

    diff --git a/app/templates/start/interests.hbs b/app/templates/start/interests.hbs index 24ac0d947..5f50bb237 100644 --- a/app/templates/start/interests.hbs +++ b/app/templates/start/interests.hbs @@ -1,11 +1,11 @@ -
    +

    What are you interested in?

    We'll help you find projects you'll care about.

    {{categories-list categories=model}} -
    +

    Finished adding your interests?

    -
    \ No newline at end of file +
    diff --git a/app/templates/start/skills.hbs b/app/templates/start/skills.hbs index 45b42ca95..f29cca3ce 100644 --- a/app/templates/start/skills.hbs +++ b/app/templates/start/skills.hbs @@ -1,20 +1,20 @@ -
    +

    What skills can you share?

    We'll help you find projects that need your exact skills.

    -
    -
    - {{#each userSkills as |userSkill|}} - {{skill-button - hasCheck=true - isLoading=userSkill.isLoading - remove=(action removeUserSkill userSkill) - skill=userSkill.skill - }} - {{else}} -

    Add your skills and they'll show up here.

    - {{/each}} +
    +
    + {{#each userSkills as |userSkill|}} + {{skill-button + hasCheck=true + isLoading=userSkill.isLoading + remove=(action removeUserSkill userSkill) + skill=userSkill.skill + }} + {{else}} +

    Add your skills and they'll show up here.

    + {{/each}}
    @@ -26,7 +26,7 @@
    -
    +

    Finished adding your skills?

    diff --git a/bower.json b/bower.json index ee2e5bde3..d85958720 100644 --- a/bower.json +++ b/bower.json @@ -3,9 +3,9 @@ "dependencies": { "dom-ruler": "0.2.4", "Faker": "^3.1.0", - "zxcvbn": "^4.3.0", + "zxcvbn": "^4.4.2", "typed.js": "^1.1.1", - "bourbon": "^4.2.7", + "bourbon": "^4.3.1", "neat": "^1.8.0", "raven-js": "~3.3", "dragula": "^3.5.4" diff --git a/package.json b/package.json index 3f1545014..4a7ad01c3 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "doc": "doc", "test": "tests" }, - "repository": "", "scripts": { "build": "ember build", "start": "ember server", @@ -75,6 +74,7 @@ "ember-metrics": "0.8.1", "ember-modal-dialog": "0.9.0", "ember-moment": "7.3.0", + "ember-normalize": "1.0.0", "ember-page-title": "^3.1.2", "ember-radio-button": "^1.0.7", "ember-resolver": "^2.0.3", @@ -92,7 +92,8 @@ "ember-watson": "0.8.5", "emberx-select": "3.0.0", "eslint-plugin-ember-suave": "^1.0.0", - "loader.js": "^4.0.10" + "loader.js": "^4.0.10", + "normalize.css": "^4.1.1" }, "dependencies": { "node-sass": "latest" diff --git a/tests/acceptance/code-theme-test.js b/tests/acceptance/code-theme-test.js index c9f32b2f4..c15fe34de 100644 --- a/tests/acceptance/code-theme-test.js +++ b/tests/acceptance/code-theme-test.js @@ -10,6 +10,6 @@ test('Code theme class exists on the main container', function(assert) { indexPage.visit(); andThen(function() { - assert.ok(indexPage.isLightTheme, 'light class added to .main.container'); + assert.ok(indexPage.isLightTheme); }); }); diff --git a/tests/acceptance/login-test.js b/tests/acceptance/login-test.js index 1c12b24ea..28e2480ba 100644 --- a/tests/acceptance/login-test.js +++ b/tests/acceptance/login-test.js @@ -21,7 +21,11 @@ test('Logging in', function(assert) { }); andThen(() => { - assert.equal(loginPage.navMenu.userMenu.logOut.text, 'Log out', 'Page contains logout link'); + loginPage.navMenu.userMenu.toggle(); + }); + + andThen(() => { + assert.ok(loginPage.navMenu.userMenu.logoutLinkVisible, 'Page contains logout link'); assert.equal(currentURL(), '/projects'); }); }); diff --git a/tests/acceptance/logout-test.js b/tests/acceptance/logout-test.js index d52a85f24..aef210648 100644 --- a/tests/acceptance/logout-test.js +++ b/tests/acceptance/logout-test.js @@ -11,10 +11,13 @@ test('Logging out', function(assert) { authenticateSession(this.application, { user_id: user.id }); indexPage.visit(); andThen(function() { - assert.equal(indexPage.navMenu.userMenu.logOut.text, 'Log out', 'Page contains logout link'); - indexPage.navMenu.userMenu.logOut.click(); + indexPage.navMenu.userMenu.toggle(); }); andThen(function() { - assert.equal(indexPage.navMenu.logIn.text, 'Sign in', 'Page contains login link'); + assert.ok(indexPage.navMenu.userMenu.logoutLinkVisible, 'Page contains logout link'); + indexPage.navMenu.userMenu.logOut(); + }); + andThen(function() { + assert.ok(indexPage.navMenu.loginLinkVisible, 'Page contains login link'); }); }); diff --git a/tests/acceptance/navigation-test.js b/tests/acceptance/navigation-test.js index ce101d675..f4399a745 100644 --- a/tests/acceptance/navigation-test.js +++ b/tests/acceptance/navigation-test.js @@ -82,7 +82,7 @@ test('Logged in, from user menu can log out', function(assert) { indexPage.navMenu.userMenu.open(); }); andThen(function() { - indexPage.navMenu.userMenu.logOut.click(); + indexPage.navMenu.userMenu.logOut(); }); andThen(function() { assert.equal(indexPage.navMenu.logIn.text, 'Sign in', 'Page contains sign in link'); diff --git a/tests/acceptance/onboarding-test.js b/tests/acceptance/onboarding-test.js index 189768a9b..cac40faa6 100644 --- a/tests/acceptance/onboarding-test.js +++ b/tests/acceptance/onboarding-test.js @@ -66,28 +66,31 @@ test('A user can onboard as expected', function(assert) { andThen(() => { assert.equal(currentURL(), '/start/expertise'); - assert.equal(onboardingPage.roles(0).title, 'Technology'); - assert.ok(onboardingPage.roles(0).header.hasClass('technology')); - assert.equal(onboardingPage.roles(0).button.text, 'Backend Development'); - assert.equal(onboardingPage.roles(1).title, 'Creative'); - assert.ok(onboardingPage.roles(1).header.hasClass('creative')); - assert.equal(onboardingPage.roles(1).button.text, 'Marketing'); - assert.equal(onboardingPage.roles(2).title, 'Support'); - assert.ok(onboardingPage.roles(2).header.hasClass('support')); - assert.equal(onboardingPage.roles(2).button.text, 'Donations'); - assert.ok(onboardingPage.startButton.isDisabled, 'start button is disabled'); - onboardingPage.roles(0).button.click(); + assert.equal(onboardingPage.roleColumns(0).header.title, 'Technology'); + assert.ok(onboardingPage.roleColumns(0).hasClass('expertise__column--technology')); + assert.equal(onboardingPage.roleColumns(0).roles(0).button.text, 'Backend Development'); + + assert.equal(onboardingPage.roleColumns(1).header.title, 'Creative'); + assert.ok(onboardingPage.roleColumns(1).hasClass('expertise__column--creative')); + assert.equal(onboardingPage.roleColumns(1).roles(0).button.text, 'Marketing'); + + assert.equal(onboardingPage.roleColumns(2).header.title, 'Support'); + assert.ok(onboardingPage.roleColumns(2).hasClass('expertise__column--support')); + assert.equal(onboardingPage.roleColumns(2).roles(0).button.text, 'Donations'); + + assert.ok(onboardingPage.startButton.isDisabled, 'start button is disabled'); + onboardingPage.roleColumns(0).roles(0).button.click(); }); andThen(() => { assert.notOk(onboardingPage.startButton.isDisabled, 'start button is enabled'); - onboardingPage.roles(0).button.click(); + onboardingPage.roleColumns(0).roles(0).button.click(); }); andThen(() => { assert.ok(onboardingPage.startButton.isDisabled, 'start button is disabled'); - onboardingPage.roles(0).button.click(); + onboardingPage.roleColumns(0).roles(0).button.click(); }); andThen(() => { diff --git a/tests/acceptance/organization-settings-profile-test.js b/tests/acceptance/organization-settings-profile-test.js index fb56ec126..c5a1b4af9 100644 --- a/tests/acceptance/organization-settings-profile-test.js +++ b/tests/acceptance/organization-settings-profile-test.js @@ -54,7 +54,7 @@ test('it allows editing of organization profile', function(assert) { andThen(() => { assert.equal(organizationPage.successAlerts().count, 1); - assert.equal(organizationPage.successAlerts(0).contains('Organization updated successfully'), true); + assert.ok(organizationPage.successAlerts(0).contains('Organization updated successfully')); }); }); @@ -85,7 +85,7 @@ test("it allows editing of organization's image", function(assert) { andThen(() => { assert.equal(organizationPage.successAlerts().count, 1); - assert.equal(organizationPage.successAlerts(0).contains('Organization icon uploaded successfully'), true); + assert.ok(organizationPage.successAlerts(0).contains('Organization icon uploaded successfully')); let expectedStyle = `url(${droppedImageString})`; assert.equal(removeDoubleQuotes(find('.image-drop').css('background-image')), expectedStyle); done(); diff --git a/tests/acceptance/organization-test.js b/tests/acceptance/organization-test.js index f42a8eb5d..2b15f5e11 100644 --- a/tests/acceptance/organization-test.js +++ b/tests/acceptance/organization-test.js @@ -20,9 +20,9 @@ test("it displays the organization's details", function(assert) { organizationPage.visitIndex({ organization: organization.slug }); andThen(() => { - assert.equal(organizationPage.orgHeader.isVisible, true, 'The organization header component renders'); - assert.equal(organizationPage.projectList.isVisible, true, 'The projects list component renders'); - assert.equal(organizationPage.orgMembersSection.isVisible, true, 'The organization members component renders'); + assert.ok(organizationPage.orgHeader.isVisible, 'The organization header component renders'); + assert.ok(organizationPage.projectList.isVisible, 'The projects list component renders'); + assert.ok(organizationPage.orgMembersSection.isVisible, 'The organization members component renders'); assert.equal(organizationPage.orgTitle.text, organization.name, 'The organization title renders'); assert.equal(organizationPage.orgDescription.text, organization.description, 'The organization description renders'); assert.equal(organizationPage.projectListItems().count, 3, 'The projects render'); @@ -55,7 +55,7 @@ test('an admin can navigate to settings', function(assert) { andThen(() => { assert.ok(organizationPage.settingsMenuItemIsActive, 'The organization settings menu is active'); - assert.equal(organizationPage.settingsForm.isVisible, true, 'The organization settings form renders'); + assert.ok(organizationPage.settingsForm.isVisible, 'The organization settings form renders'); }); }); @@ -79,6 +79,6 @@ test('anyone can navigate to projects', function(assert) { }); andThen(() => { - assert.equal(organizationPage.projectDetails.isVisible, true, "The project's details render"); + assert.equal(currentURL(), `/${project.organization.slug}/${project.slug}`, 'Navigating to the project works'); }); }); diff --git a/tests/acceptance/profile-test.js b/tests/acceptance/profile-test.js index 6d59f5244..519e56d61 100644 --- a/tests/acceptance/profile-test.js +++ b/tests/acceptance/profile-test.js @@ -16,7 +16,7 @@ test('it displays the user-details component with user details', function(assert userProfile.visit({ username: user.username }); andThen(() => { - assert.equal(userProfile.userDetails.isVisible, true, 'The user details component renders'); + assert.ok(userProfile.userDetails.isVisible, 'The user details component renders'); assert.equal(userProfile.userDetails.twitter.text, `@${user.twitter}`, "The user's twitter renders"); assert.equal(userProfile.userDetails.twitter.link.href, `https://twitter.com/${user.twitter}`, "The user's twitter URL renders"); assert.equal(userProfile.userDetails.website.text, user.website, "The user's website renders"); diff --git a/tests/acceptance/project-about-test.js b/tests/acceptance/project-about-test.js index c5bf36a96..3bc8e5018 100644 --- a/tests/acceptance/project-about-test.js +++ b/tests/acceptance/project-about-test.js @@ -21,7 +21,7 @@ test('When unauthenticated, and project has no long description, it shows proper }); andThen(() => { - assert.equal(projectAboutPage.projectLongDescription.longDescription.isEmpty, true, 'The empty container is shown'); + assert.ok(projectAboutPage.projectLongDescription.longDescription.isEmpty, 'The empty container is shown'); assert.ok(projectAboutPage.editorWithPreview.isHidden, 'User is not logged in, so they cannot edit the description'); }); }); diff --git a/tests/acceptance/project-test.js b/tests/acceptance/project-test.js index d47e49963..51ed9bf2e 100644 --- a/tests/acceptance/project-test.js +++ b/tests/acceptance/project-test.js @@ -32,7 +32,7 @@ test('The footer and spacer are hidden, the main container is set up for project assert.equal(currentRouteName(), 'project.tasks.index'); assert.notOk(projectTasksIndexPage.flexboxSpacer.isVisible, 'The flexbox spacer is hidden'); assert.notOk(projectTasksIndexPage.footer.isVisible, 'The footer is hidden'); - assert.ok(projectTasksIndexPage.mainContainer.isVisible, 'The main container is set up for project tasks'); + assert.ok(projectTasksIndexPage.siteContentContainer.isVisible, 'The main container is set up for project tasks'); }); }); @@ -68,7 +68,7 @@ test('It renders all the required ui elements for task list', function(assert) { projectTasksIndexPage.visit({ organization: organization.slug, project: project.slug }); andThen(function() { - assert.equal(find('.project-details').length, 1, 'project-details component is rendered'); + assert.equal(find('.project__header').length, 1, 'project header component is rendered'); }); }); @@ -96,7 +96,7 @@ test('A user can join the organization of the project', function(assert) { andThen(() => { let joinButton = projectTasksIndexPage.projectDetails.joinProjectButton; - assert.equal(joinButton.text, 'Membership pending', 'The button to join has changed to pending'); + assert.equal(joinButton.text, 'Request sent', 'The button to join has changed to pending'); assert.ok(joinButton.disabled, 'Button should be disabled.'); }); }); diff --git a/tests/acceptance/slugged-route-test.js b/tests/acceptance/slugged-route-test.js index 1f628351e..2670f74be 100644 --- a/tests/acceptance/slugged-route-test.js +++ b/tests/acceptance/slugged-route-test.js @@ -14,7 +14,7 @@ test('It renders user details when the sluggedRoute model is a user', function(a sluggedRoutePage.visit({ slug: user.username }); andThen(function() { - assert.equal(sluggedRoutePage.userDetails.isVisible, true, 'user-details component is rendered'); + assert.ok(sluggedRoutePage.userDetails.isVisible, 'user-details component is rendered'); }); }); @@ -26,7 +26,7 @@ test('It renders organization profile when the sluggedRoute model is an organiza sluggedRoutePage.visit({ slug: organization.slug }); andThen(function() { - assert.equal(sluggedRoutePage.organizationProfile.isVisible, true, 'organization-profile component is rendered'); + assert.ok(sluggedRoutePage.organizationProfile.isVisible, 'organization-profile component is rendered'); }); }); @@ -47,14 +47,14 @@ test('It renders a 404 error when no slugged route exists', function(assert) { sluggedRoutePage.visit({ slug: 'no_slug' }); andThen(function() { - assert.equal(sluggedRoutePage.errorWrapper.isVisible, true, 'error-wrapper component is rendered'); + assert.ok(sluggedRoutePage.errorWrapper.isVisible, 'error-wrapper component is rendered'); assert.equal(sluggedRoutePage.errorWrapper.title.text, '404 Error', 'The 404 title is rendered'); - assert.equal($('html').hasClass('warning'), true, 'The class of the html element is correct'); + assert.ok($('html').hasClass('warning'), 'The class of the html element is correct'); sluggedRoutePage.errorWrapper.clickLink(); }); andThen(function() { - assert.equal(sluggedRoutePage.errorWrapper.isVisible, false, 'error-wrapper component is not rendered'); - assert.equal($('html').hasClass('warning'), false, 'The class of the html element is unset'); + assert.notOk(sluggedRoutePage.errorWrapper.isVisible, 'error-wrapper component is not rendered'); + assert.notOk($('html').hasClass('warning'), 'The class of the html element is unset'); }); }); diff --git a/tests/acceptance/task-creation-test.js b/tests/acceptance/task-creation-test.js index 0d331f3a9..f658f54cf 100644 --- a/tests/acceptance/task-creation-test.js +++ b/tests/acceptance/task-creation-test.js @@ -231,7 +231,7 @@ test('When task creation fails due to non-validation issues, the error is displa andThen(() => { assert.equal(projectTasksNewPage.errors().count, 1); - assert.equal(projectTasksNewPage.errors().contains('An unknown error: Something happened', 'The error is messaged'), true); + assert.ok(projectTasksNewPage.errors().contains('An unknown error: Something happened', 'The error is messaged')); }); }); diff --git a/tests/integration/components/category-item-test.js b/tests/integration/components/category-item-test.js index 2f88a9f96..bc515972c 100644 --- a/tests/integration/components/category-item-test.js +++ b/tests/integration/components/category-item-test.js @@ -91,15 +91,15 @@ test('it works for selecting unselected categories', function(assert) { this.render(hbs`{{category-item category=category}}`); assert.ok(this.$('.category-icon').hasClass('technology')); - assert.equal(this.$('.category-icon').hasClass('selected'), false); + assert.notOk(this.$('.category-icon').hasClass('selected')); assert.equal(this.$('p').text().trim(), 'You want to help technology.'); - assert.equal(this.$('p').hasClass('selected'), false); + assert.notOk(this.$('p').hasClass('selected')); assert.equal(this.$('button').text().trim(), 'Technology'); this.$('button').click(); wait().then(() => { - assert.equal(this.$('.category-item').hasClass('selected'), true); + assert.ok(this.$('.category-item').hasClass('selected')); done(); }); }); @@ -112,14 +112,14 @@ test('it works for removing selected categories', function(assert) { this.set('category', selectedCategory); this.render(hbs`{{category-item category=category}}`); - assert.equal(this.$('.category-icon').hasClass('selected'), true); - assert.equal(this.$('p').hasClass('selected'), true); + assert.ok(this.$('.category-icon').hasClass('selected')); + assert.ok(this.$('p').hasClass('selected')); assert.equal(this.$('button').text().trim(), 'Society'); this.$('button').click(); wait().then(() => { - assert.equal(this.$('.category-item').hasClass('selected'), false); + assert.notOk(this.$('.category-item').hasClass('selected')); done(); }); }); diff --git a/tests/integration/components/editor-with-preview-test.js b/tests/integration/components/editor-with-preview-test.js index c735a4806..bc4971b24 100644 --- a/tests/integration/components/editor-with-preview-test.js +++ b/tests/integration/components/editor-with-preview-test.js @@ -109,7 +109,7 @@ test('it sets the edit button class when editing', function(assert) { this.render(hbs`{{editor-with-preview}}`); this.set('editing', true); - assert.equal(this.$('.editor-with-preview button.edit').hasClass('active'), true); + assert.ok(this.$('.editor-with-preview button.edit').hasClass('active')); }); test('it has the code theme selector', function(assert) { @@ -134,7 +134,7 @@ test('it does not autofocus on first load if not provided', function(assert) { this.render(hbs`{{editor-with-preview}}`); - assert.equal(this.$('.editor-with-preview textarea').hasClass('focused'), false); + assert.notOk(this.$('.editor-with-preview textarea').hasClass('focused')); }); test('it autofocuses on second render if not provided', function(assert) { @@ -144,7 +144,7 @@ test('it autofocuses on second render if not provided', function(assert) { this.$('.preview').click(); this.$('.edit').click(); - assert.equal(this.$('.editor-with-preview textarea').hasClass('focused'), true); + assert.ok(this.$('.editor-with-preview textarea').hasClass('focused')); }); test('it autofocuses on first load if provided', function(assert) { @@ -153,7 +153,7 @@ test('it autofocuses on first load if provided', function(assert) { this.set('autofocus', true); this.render(hbs`{{editor-with-preview autofocus=autofocus}}`); - assert.equal(this.$('.editor-with-preview textarea').hasClass('focused'), true); + assert.ok(this.$('.editor-with-preview textarea').hasClass('focused')); }); test('it sets the editor min-height to the editor height when previewing and still loading', function(assert) { @@ -177,10 +177,10 @@ test('it clears the editor style when previewing and done loading', function(ass this.render(hbs`{{editor-with-preview isLoading=isLoading}}`); this.$('.preview').click(); - assert.equal(this.$('.editor-with-preview')[0].hasAttribute('style'), true); + assert.ok(this.$('.editor-with-preview')[0].hasAttribute('style')); this.set('isLoading', false); - assert.equal(this.$('.editor-with-preview')[0].hasAttribute('style'), false); + assert.notOk(this.$('.editor-with-preview')[0].hasAttribute('style')); }); test('it sends the modifiedSubmit action with ctrl+enter', function(assert) { diff --git a/tests/integration/components/image-drop-test.js b/tests/integration/components/image-drop-test.js index e5a4c90ea..00328d7d9 100644 --- a/tests/integration/components/image-drop-test.js +++ b/tests/integration/components/image-drop-test.js @@ -20,9 +20,9 @@ test('it renders default state without a photo', function(assert) { // Handle any actions with this.on('myAction', function(val) { ... });" this.render(hbs`{{image-drop}}`); - assert.equal(this.$('p.help-text').text().trim(), 'Drop your image here.'); - assert.equal(this.$('.image-drop').hasClass('active'), false); - assert.equal(this.$('.image-drop').hasClass('is-dragging'), false); + assert.equal(this.$('p.help-text').text().trim(), 'Click to add your photo.'); + assert.notOk(this.$('.image-drop').hasClass('image-drop--active')); + assert.notOk(this.$('.image-drop').hasClass('image-drop--drag')); let style = this.$('.image-drop').css('background-image'); assert.equal(style, 'none'); }); @@ -35,20 +35,20 @@ test('it reacts to dragging on the application', function(assert) { `); this.$('.drag-zone').trigger('dragover'); - assert.equal(this.$('.image-drop').hasClass('is-dragging'), true); + assert.ok(this.$('.image-drop').hasClass('image-drop--drag')); this.$('.drag-zone').trigger('dragleave'); - assert.equal(this.$('.image-drop').hasClass('is-dragging'), false); + assert.notOk(this.$('.image-drop').hasClass('image-drop--drag')); }); test('it reacts to dragging on itself', function(assert) { this.render(hbs`{{image-drop}}`); this.$('.image-drop').trigger('dragover'); - assert.equal(this.$('.image-drop').hasClass('active'), true); + assert.ok(this.$('.image-drop').hasClass('image-drop--active')); this.$('.image-drop').trigger('dragleave'); - assert.equal(this.$('.image-drop').hasClass('active'), false); + assert.notOk(this.$('.image-drop').hasClass('image-drop--active')); }); test('it renders the original image', function(assert) { @@ -78,14 +78,14 @@ test('it handles a dropped image file', function(assert) { let fileName = 'file.png'; this.$('.image-drop').trigger('dragover'); - assert.equal(this.$('.image-drop').hasClass('active'), true); + assert.ok(this.$('.image-drop').hasClass('image-drop--active')); fillInFileInput('.image-drop input[type=file]', { name: fileName, content: droppedImageString }); let style = this.$('.image-drop').css('background-image'); let expectedStyle = `url(${droppedImageString})`; assert.equal(removeDoubleQuotes(style), expectedStyle); - assert.equal(this.$('.image-drop').hasClass('active'), false); + assert.notOk(this.$('.image-drop').hasClass('image-drop--active')); }); test('it does not show the hover text if not hovering', function(assert) { @@ -113,5 +113,5 @@ test('it does not show the hover text if not hovering', function(assert) { test('it is circular if circle passed in', function(assert) { this.render(hbs`{{image-drop circle=true}}`); - assert.equal(this.$('.image-drop').hasClass('is-circular'), true); + assert.ok(this.$('.image-drop').hasClass('image-drop--circle')); }); diff --git a/tests/integration/components/member-list-item-test.js b/tests/integration/components/member-list-item-test.js index 1fb73671f..450f9fa19 100644 --- a/tests/integration/components/member-list-item-test.js +++ b/tests/integration/components/member-list-item-test.js @@ -15,13 +15,6 @@ let user = Object.create({ name: 'Josh Smith', username: 'joshsmith', photoThumbUrl: 'http://lorempixel.com/image_output/people-q-c-50-50-4.jpg', - userCategories: [ - { - category: { - name: 'Technology' - } - } - ], userSkills: [ { skill: { @@ -67,13 +60,12 @@ test('it renders the basic information for the user', function(assert) { this.render(hbs`{{member-list-item user=user}}`); assert.equal(this.$('.icon').attr('src'), user.photoThumbUrl); - assert.equal(this.$('p.name').text().trim(), user.name); - assert.equal(this.$('p.username').text().trim(), user.username); + assert.equal(this.$('.project-member__name strong').text().trim(), user.name); + assert.equal(this.$('.project-member__name span').text().trim(), user.username); assert.equal(this.$('.icon').attr('src'), user.photoThumbUrl); - assert.equal(this.$('p.interests').text().trim(), 'Technology'); - assert.equal(this.$('p.skills li:eq(0)').text().trim(), 'Ember.js'); - assert.equal(this.$('p.skills li:eq(1)').text().trim(), 'Rails'); - assert.equal(this.$('p.skills li:eq(2)').text().trim(), 'Ruby'); + assert.equal(this.$('.project-member__skills li:eq(0)').text().trim(), 'Ember.js'); + assert.equal(this.$('.project-member__skills li:eq(1)').text().trim(), 'Rails'); + assert.equal(this.$('.project-member__skills li:eq(2)').text().trim(), 'Ruby'); assert.equal(this.$('button').length, 0); }); @@ -83,7 +75,7 @@ test('it renders the username in the name if name is empty', function(assert) { this.render(hbs`{{member-list-item user=user}}`); - assert.equal(this.$('p.name').text().trim(), get(user, 'username')); + assert.equal(this.$('.project-member__name strong').text().trim(), get(user, 'username')); }); test('it renders the buttons when pending', function(assert) { diff --git a/tests/integration/components/navigation-menu-test.js b/tests/integration/components/navigation-menu-test.js index d254f082d..242bc270f 100644 --- a/tests/integration/components/navigation-menu-test.js +++ b/tests/integration/components/navigation-menu-test.js @@ -8,41 +8,35 @@ moduleForComponent('navigation-menu', 'Integration | Component | navigation menu test('it renders elements for the default menu when logged out', function(assert) { this.render(hbs`{{navigation-menu}}`); - - assert.equal(this.$('.site-logo').length, 1); - assert.equal(this.$('.main-nav').length, 1); - assert.equal(this.$('.auth-nav').length, 1); - assert.equal(this.$('.user-menu-tab').length, 0); - assert.equal(this.$('.onboarding-steps').length, 0); + assert.equal(this.$('.header__logo').length, 1); + assert.equal(this.$('.header-navigation--main').length, 1); + assert.equal(this.$('.user-menu').length, 0, 'does not show uer menu'); + assert.equal(this.$('.onboarding__steps').length, 0); }); test('it renders elements for the default menu when logged in', function(assert) { stubService(this, 'session', { isAuthenticated: true }); this.render(hbs`{{navigation-menu}}`); - - assert.equal(this.$('.site-logo').length, 1); - assert.equal(this.$('.main-nav').length, 1); - assert.equal(this.$('.auth-nav').length, 0); - assert.equal(this.$('.user-menu-tab').length, 1); - assert.equal(this.$('.onboarding-steps').length, 0); + assert.equal(this.$('.header__logo').length, 1); + assert.equal(this.$('.header-navigation--main').length, 1); + assert.equal(this.$('.user-menu').length, 1, 'shows uer menu'); + assert.equal(this.$('.onboarding__steps').length, 0); }); test('it renders elements for the onboarding menu', function(assert) { stubService(this, 'navigation-menu', { isOnboarding: true }); stubService(this, 'onboarding', { currentStepNumber: 1, - totalSteps: 3, - progressPercentage: 100 + totalSteps: 4, + progressPercentage: 25 }); this.render(hbs`{{navigation-menu}}`); - - assert.equal(this.$('.site-logo').length, 1); - assert.equal(this.$('.main-nav').length, 0); - assert.equal(this.$('.auth-nav').length, 0); - assert.equal(this.$('.user-menu-tab').length, 0); - assert.equal(this.$('.onboarding-steps').length, 1); - assert.equal(this.$('.onboarding-steps p').text().trim(), 'Step 1 of 3'); - assert.equal(this.$('.progress-bar').attr('style'), 'width: 100%;'); + assert.equal(this.$('.header__logo').length, 1); + assert.equal(this.$('.header-navigation--main').length, 0); + assert.equal(this.$('.user-menu').length, 0, 'does not show uer menu'); + assert.equal(this.$('.onboarding__steps').length, 1); + assert.equal(this.$('.onboarding__steps').text().trim(), 'Step 1 of 4'); + assert.equal(this.$('.progress-bar').attr('style'), 'width: 25%;'); }); diff --git a/tests/integration/components/project-details-test.js b/tests/integration/components/project-details-test.js index 71e806d1b..be9231863 100644 --- a/tests/integration/components/project-details-test.js +++ b/tests/integration/components/project-details-test.js @@ -1,42 +1,15 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -import startMirage from '../../helpers/setup-mirage-for-integration'; moduleForComponent('project-details', 'Integration | Component | project details', { - integration: true, - setup() { - startMirage(this.container); - }, - afterEach() { - server.shutdown(); - } + integration: true }); -test('it renders', function(assert) { - let project = server.create('project'); +test('it renders title', function(assert) { + let project = { title: 'Test title' }; this.set('project', project); this.render(hbs`{{project-details project=project}}`); - assert.equal(this.$('.project-details').length, 1); -}); - -test('when expanded', function(assert) { - let project = server.create('project'); - this.set('project', project); - - this.render(hbs`{{project-details project=project expanded=true}}`); - - assert.equal(this.$('.title').text().trim(), project.title, 'Title is rendered'); - assert.equal(this.$('.description').text().trim(), project.description, 'Description is rendered'); -}); - -test('when not expanded', function(assert) { - let project = server.create('project'); - this.set('project', project); - - this.render(hbs`{{project-details project=project}}`); - - assert.equal(this.$('.title').text().trim(), project.title, 'Title is rendered'); - assert.equal(this.$('.description').length, 0, 'Hides description'); + assert.equal(this.$('.project__header__title').text().trim(), project.title, 'Title is rendered'); }); diff --git a/tests/integration/components/project-menu-test.js b/tests/integration/components/project-menu-test.js index a0e24a1a1..8a73ba35b 100644 --- a/tests/integration/components/project-menu-test.js +++ b/tests/integration/components/project-menu-test.js @@ -17,42 +17,14 @@ test('when not authenticated, it renders properly', function(assert) { this.render(hbs`{{project-menu}}`); - assert.equal(this.$('.project-menu li a').length, 2, 'The correct number of links render'); - assert.equal(this.$('.project-menu li a:contains("About")').length, 1, 'The about link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Tasks")').length, 1, 'The tasks link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Contributors")').length, 0, 'The contributors link is not rendered'); - assert.equal(this.$('.project-menu li a:contains("Settings")').length, 0, 'The settings link is not rendered'); + assert.equal(this.$('.project__menu li a').length, 2, 'The correct number of links render'); + assert.equal(this.$('.project__menu li a:contains("About")').length, 1, 'The about link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Tasks")').length, 1, 'The tasks link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Contributors")').length, 0, 'The contributors link is not rendered'); + assert.equal(this.$('.project__menu li a:contains("Settings")').length, 0, 'The settings link is not rendered'); }); -test('it renders the task count when it has tasks', function(assert) { - assert.expect(1); - - stubService(this, 'session', { isAuthenticated: false }); - this.set('project', { - hasOpenTasks: true, - openTasksCount: 7 - }); - - this.render(hbs`{{project-menu project=project}}`); - - assert.equal(this.$('.project-menu li a span.info').text().trim(), '7', 'The number of open tasks are rendered'); -}); - -test('it does not render the task count when it has no tasks', function(assert) { - assert.expect(1); - - stubService(this, 'session', { isAuthenticated: false }); - this.set('project', { - hasOpenTasks: false, - openTasksCount: 0 - }); - - this.render(hbs`{{project-menu project=project}}`); - - assert.equal(this.$('.project-menu li a span.info').length, 0, 'The number of open tasks are not rendered'); -}); - test('when authenticated, and user cannot manage organization, it renders properly', function(assert) { assert.expect(5); @@ -61,11 +33,11 @@ test('when authenticated, and user cannot manage organization, it renders proper this.render(hbs`{{project-menu}}`); - assert.equal(this.$('.project-menu li a').length, 2, 'The correct number of links render'); - assert.equal(this.$('.project-menu li a:contains("About")').length, 1, 'The about link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Tasks")').length, 1, 'The tasks link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Contributors")').length, 0, 'The contributors link is not rendered'); - assert.equal(this.$('.project-menu li a:contains("Settings")').length, 0, 'The settings link is not rendered'); + assert.equal(this.$('.project__menu li a').length, 2, 'The correct number of links render'); + assert.equal(this.$('.project__menu li a:contains("About")').length, 1, 'The about link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Tasks")').length, 1, 'The tasks link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Contributors")').length, 0, 'The contributors link is not rendered'); + assert.equal(this.$('.project__menu li a:contains("Settings")').length, 0, 'The settings link is not rendered'); }); test('when authenticated, and user can manage organization, it renders properly', function(assert) { @@ -76,13 +48,13 @@ test('when authenticated, and user can manage organization, it renders properly' this.render(hbs`{{project-menu}}`); - assert.equal(this.$('.project-menu li a').length, 6, 'The correct number of links render'); - assert.equal(this.$('.project-menu li a:contains("About")').length, 1, 'The about link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Tasks")').length, 1, 'The tasks link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Contributors")').length, 1, 'The contributors link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Settings")').length, 1, 'The settings link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Donations")').length, 1, 'The donations link is rendered'); - assert.equal(this.$('.project-menu li a:contains("Payments")').length, 1, 'The payments link is rendered'); + assert.equal(this.$('.project__menu li a').length, 6, 'The correct number of links render'); + assert.equal(this.$('.project__menu li a:contains("About")').length, 1, 'The about link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Tasks")').length, 1, 'The tasks link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Contributors")').length, 1, 'The contributors link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Settings")').length, 1, 'The settings link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Donations")').length, 1, 'The donations link is rendered'); + assert.equal(this.$('.project__menu li a:contains("Payments")').length, 1, 'The payments link is rendered'); }); test('when authenticated, and user can manage organization, and project has pending members', function(assert) { @@ -95,7 +67,7 @@ test('when authenticated, and user can manage organization, and project has pend this.render(hbs`{{project-menu project=project}}`); - assert.equal(this.$('.project-menu li.contributors a span.info').text().trim(), '7 pending', 'The correct number of pending members render'); + assert.equal(this.$('.project__menu li.contributors a span.info').text().trim(), '7 pending', 'The correct number of pending members render'); }); test('when authenticated, and user can manage organization, and project has no pending members', function(assert) { @@ -108,5 +80,5 @@ test('when authenticated, and user can manage organization, and project has no p this.render(hbs`{{project-menu project=project}}`); - assert.equal(this.$('.project-menu li.contributors a span.info').length, 0, 'The pending members span tag does not render'); + assert.equal(this.$('.project__menu li.contributors a span.info').length, 0, 'The pending members span tag does not render'); }); diff --git a/tests/integration/components/role-item-test.js b/tests/integration/components/role-item-test.js index ea192ff90..166576cef 100644 --- a/tests/integration/components/role-item-test.js +++ b/tests/integration/components/role-item-test.js @@ -90,13 +90,13 @@ test('it works for selecting unselected roles', function(assert) { this.set('role', unselectedRole); this.render(hbs`{{role-item role=role}}`); - assert.equal(this.$('.role-item').hasClass('selected'), false); + assert.notOk(this.$('.role-item').hasClass('selected')); assert.equal(this.$('button').text().trim(), 'Backend Development'); this.$('button').click(); wait().then(() => { - assert.equal(this.$('.role-item').hasClass('selected'), true); + assert.ok(this.$('.role-item').hasClass('selected')); done(); }); }); @@ -109,13 +109,13 @@ test('it works for removing selected roles', function(assert) { this.set('role', selectedRole); this.render(hbs`{{role-item role=role}}`); - assert.equal(this.$('.role-item').hasClass('selected'), true); + assert.ok(this.$('.role-item').hasClass('selected')); assert.equal(this.$('button').text().trim(), 'Mobile Development'); this.$('button').click(); wait().then(() => { - assert.equal(this.$('.role-item').hasClass('selected'), false); + assert.notOk(this.$('.role-item').hasClass('selected')); done(); }); }); diff --git a/tests/integration/components/select-dropdown-test.js b/tests/integration/components/select-dropdown-test.js index aac1dc87a..486b15691 100644 --- a/tests/integration/components/select-dropdown-test.js +++ b/tests/integration/components/select-dropdown-test.js @@ -32,5 +32,5 @@ test('it renders proper ui elements, properly bound', function(assert) { this.render(hbs`{{select-dropdown items=items optionValuePath='value' optionLabelPath='label' selectedItem=selectedItem}}`); assert.equal(this.$('option[value="task"]').text(), 'Task', 'Label and value are properly bound and rendered'); - assert.equal(this.$('.select-dropdown').hasClass('task'), true, 'Class is bound to selectedItem value'); + assert.ok(this.$('.select-dropdown').hasClass('task'), 'Class is bound to selectedItem value'); }); diff --git a/tests/integration/components/signup-email-input-test.js b/tests/integration/components/signup-email-input-test.js index 5432c50d8..1b10ee46c 100644 --- a/tests/integration/components/signup-email-input-test.js +++ b/tests/integration/components/signup-email-input-test.js @@ -20,8 +20,8 @@ test('it shows nothing when empty', function(assert) { this.render(hbs`{{signup-email-input}}`); assert.equal(this.$('.suggestions li').length, 0); - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), false); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.notOk(this.$('.suggestions p').hasClass('not-ok')); }); test('it shows suggestions when invalid', function(assert) { @@ -34,7 +34,7 @@ test('it shows suggestions when invalid', function(assert) { this.on('emailValidated', (result) => { run.next(() => { - assert.equal(result, false); + assert.notOk(result); }); }); this.render(hbs`{{signup-email-input user=user emailValidated="emailValidated"}}`); @@ -42,8 +42,8 @@ test('it shows suggestions when invalid', function(assert) { this.set('user', { email: 'incomplete@' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), true); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.ok(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 1); assert.equal(this.$('.suggestions li:eq(0)').text().trim(), 'Please enter a valid email.'); done(); @@ -60,7 +60,7 @@ test('it shows suggestions when unavailable', function(assert) { this.on('emailValidated', (result) => { run.next(() => { - assert.equal(result, false); + assert.notOk(result); }); }); this.render(hbs`{{signup-email-input user=user emailValidated="emailValidated"}}`); @@ -68,8 +68,8 @@ test('it shows suggestions when unavailable', function(assert) { this.set('user', { email: 'taken@gmail.com' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), true); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.ok(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 1); assert.equal(this.$('.suggestions li:eq(0)').text().trim(), 'This email is already registered. Want to login?'); done(); @@ -86,7 +86,7 @@ test('it shows ok when valid and available', function(assert) { this.on('emailValidated', (result) => { run.next(() => { - assert.equal(result, true); + assert.ok(result); }); }); this.render(hbs`{{signup-email-input user=user emailValidated="emailValidated"}}`); @@ -94,8 +94,8 @@ test('it shows ok when valid and available', function(assert) { this.set('user', { email: 'available@gmail.com' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), true); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), false); + assert.ok(this.$('.suggestions p').hasClass('ok')); + assert.notOk(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 0); done(); }); @@ -111,7 +111,7 @@ test('it resets to invalid when deleted', function(assert) { this.on('emailValidated', (result) => { run.next(() => { - assert.equal(result, false); + assert.notOk(result); }); }); this.set('user', { email: 'available@gmail.com' }); @@ -120,8 +120,8 @@ test('it resets to invalid when deleted', function(assert) { this.set('user', { email: '' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), false); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.notOk(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 0); done(); }); diff --git a/tests/integration/components/signup-password-input-test.js b/tests/integration/components/signup-password-input-test.js index 9265bfcf1..819e5b5ce 100644 --- a/tests/integration/components/signup-password-input-test.js +++ b/tests/integration/components/signup-password-input-test.js @@ -15,7 +15,7 @@ test('it shows suggestions when needed', function(assert) { this.set('user', { password: 'password' }); this.render(hbs`{{signup-password-input user=user}}`); - assert.equal(this.$('p').hasClass('ok'), true); + assert.ok(this.$('p').hasClass('ok')); assert.equal(this.$('.suggestions li').length, 2); assert.equal(this.$('.suggestions li:eq(0)').text().trim(), 'Tips for a stronger password:'); assert.equal(this.$('.suggestions li:eq(1)').text().trim(), 'Add another word or two. Uncommon words are better.'); @@ -33,7 +33,7 @@ test('it shows minimum length error', function(assert) { this.set('user', { password: 'p' }); this.render(hbs`{{signup-password-input user=user}}`); - assert.equal(this.$('p').hasClass('not-ok'), true); + assert.ok(this.$('p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 1); assert.equal(this.$('.suggestions li:eq(0)').text().trim(), 'Your password must be at least 6 characters.'); }); diff --git a/tests/integration/components/signup-username-input-test.js b/tests/integration/components/signup-username-input-test.js index 1bb984427..4c388719d 100644 --- a/tests/integration/components/signup-username-input-test.js +++ b/tests/integration/components/signup-username-input-test.js @@ -20,8 +20,8 @@ test('it shows nothing when empty', function(assert) { this.render(hbs`{{signup-username-input}}`); assert.equal(this.$('.suggestions li').length, 0); - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), false); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.notOk(this.$('.suggestions p').hasClass('not-ok')); }); test('it shows suggestions when invalid', function(assert) { @@ -34,7 +34,7 @@ test('it shows suggestions when invalid', function(assert) { this.on('usernameValidated', (result) => { run.next(() => { - assert.equal(result, false); + assert.notOk(result); }); }); this.render(hbs`{{signup-username-input user=user usernameValidated="usernameValidated"}}`); @@ -42,8 +42,8 @@ test('it shows suggestions when invalid', function(assert) { this.set('user', { username: 'lots--of--hypens' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), true); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.ok(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 1); assert.equal(this.$('.suggestions li:eq(0)').text().trim(), 'Please enter a username with only letters, numbers, or underscores.'); done(); @@ -60,7 +60,7 @@ test('it shows suggestions when unavailable', function(assert) { this.on('usernameValidated', (result) => { run.next(() => { - assert.equal(result, false); + assert.notOk(result); }); }); this.render(hbs`{{signup-username-input user=user usernameValidated="usernameValidated"}}`); @@ -68,8 +68,8 @@ test('it shows suggestions when unavailable', function(assert) { this.set('user', { username: 'taken' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), true); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.ok(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 1); assert.equal(this.$('.suggestions li:eq(0)').text().trim(), 'This username is already registered. Want to login?'); done(); @@ -86,7 +86,7 @@ test('it shows ok when valid and available', function(assert) { this.on('usernameValidated', (result) => { run.next(() => { - assert.equal(result, true); + assert.ok(result); }); }); this.render(hbs`{{signup-username-input user=user usernameValidated="usernameValidated"}}`); @@ -94,8 +94,8 @@ test('it shows ok when valid and available', function(assert) { this.set('user', { username: 'available' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), true); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), false); + assert.ok(this.$('.suggestions p').hasClass('ok')); + assert.notOk(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 0); done(); }); @@ -111,7 +111,7 @@ test('it resets to invalid when deleted', function(assert) { this.on('usernameValidated', (result) => { run.next(() => { - assert.equal(result, false); + assert.notOk(result); }); }); this.set('user', { username: 'available' }); @@ -120,8 +120,8 @@ test('it resets to invalid when deleted', function(assert) { this.set('user', { username: '' }); wait().then(() => { - assert.equal(this.$('.suggestions p').hasClass('ok'), false); - assert.equal(this.$('.suggestions p').hasClass('not-ok'), false); + assert.notOk(this.$('.suggestions p').hasClass('ok')); + assert.notOk(this.$('.suggestions p').hasClass('not-ok')); assert.equal(this.$('.suggestions li').length, 0); done(); }); diff --git a/tests/integration/components/skill-button-test.js b/tests/integration/components/skill-button-test.js index 697dd3df2..3d2c20d16 100644 --- a/tests/integration/components/skill-button-test.js +++ b/tests/integration/components/skill-button-test.js @@ -77,21 +77,21 @@ test('it only renders loading spinner even when hovering', function(assert) { page.mouseenter(); assert.ok(page.isDisabled); assert.ok(page.span.hasSpinner); - assert.equal(this.$('button').hasClass('can-delete'), true); + assert.ok(this.$('button').hasClass('can-delete')); }); test('it responds to hovering', function(assert) { this.render(hbs`{{skill-button remove=(action removeHandler)}}`); - assert.equal(this.$('button').hasClass('can-delete'), false); + assert.notOk(this.$('button').hasClass('can-delete')); assert.notOk(page.span.hasX); page.mouseenter(); - assert.equal(this.$('button').hasClass('can-delete'), true); + assert.ok(this.$('button').hasClass('can-delete')); assert.ok(page.span.hasX); page.mouseleave(); - assert.equal(this.$('button').hasClass('can-delete'), false); + assert.notOk(this.$('button').hasClass('can-delete')); assert.notOk(page.span.hasX); }); diff --git a/tests/integration/components/skills-typeahead-result-test.js b/tests/integration/components/skills-typeahead-result-test.js index abf17bbc0..95ad091d7 100644 --- a/tests/integration/components/skills-typeahead-result-test.js +++ b/tests/integration/components/skills-typeahead-result-test.js @@ -51,7 +51,7 @@ test('it renders as selected with the highlighted string', function(assert) { }} `); - assert.equal(page.listItemIsSelected, true); + assert.ok(page.listItemIsSelected); assert.equal(page.highlightedStrings(0).text, 'Ru'); assert.equal(page.highlightedStrings(1).text, 'on'); diff --git a/tests/integration/components/skills-typeahead-test.js b/tests/integration/components/skills-typeahead-test.js index 2a62a4c3c..71fd4d02c 100644 --- a/tests/integration/components/skills-typeahead-test.js +++ b/tests/integration/components/skills-typeahead-test.js @@ -78,10 +78,10 @@ test('it fetches results when changing the input', function(assert) { page.keydown(); assert.equal(page.inputItems(0).highlightedStrings(0).text, 'Ruby'); - assert.equal(page.inputItems(0).listItemIsSelected, true); + assert.ok(page.inputItems(0).listItemIsSelected); assert.equal(page.inputItems(1).highlightedStrings(1).text, 'Ra'); - assert.equal(page.inputItems(1).listItemIsSelected, false); + assert.notOk(page.inputItems(1).listItemIsSelected); done(); }); @@ -98,24 +98,24 @@ test('it changes the selection when arrowing up or down', function(assert) { page.focus(); page.keydown(); - assert.equal(page.inputItems(0).listItemIsSelected, true); - assert.equal(page.inputItems(1).listItemIsSelected, false); + assert.ok(page.inputItems(0).listItemIsSelected); + assert.notOk(page.inputItems(1).listItemIsSelected); page.pressDownKey(); - assert.equal(page.inputItems(0).listItemIsSelected, false); - assert.equal(page.inputItems(1).listItemIsSelected, true); + assert.notOk(page.inputItems(0).listItemIsSelected); + assert.ok(page.inputItems(1).listItemIsSelected); page.pressDownKey(); - assert.equal(page.inputItems(0).listItemIsSelected, true); - assert.equal(page.inputItems(1).listItemIsSelected, false); + assert.ok(page.inputItems(0).listItemIsSelected); + assert.notOk(page.inputItems(1).listItemIsSelected); page.pressUpKey(); - assert.equal(page.inputItems(0).listItemIsSelected, false); - assert.equal(page.inputItems(1).listItemIsSelected, true); + assert.notOk(page.inputItems(0).listItemIsSelected); + assert.ok(page.inputItems(1).listItemIsSelected); page.pressUpKey(); - assert.equal(page.inputItems(0).listItemIsSelected, true); - assert.equal(page.inputItems(1).listItemIsSelected, false); + assert.ok(page.inputItems(0).listItemIsSelected); + assert.notOk(page.inputItems(1).listItemIsSelected); done(); }); @@ -153,12 +153,12 @@ test('it changes the selection when hovering', function(assert) { page.focus(); page.keydown(); - assert.equal(page.inputItems(0).listItemIsSelected, true); - assert.equal(page.inputItems(1).listItemIsSelected, false); + assert.ok(page.inputItems(0).listItemIsSelected); + assert.notOk(page.inputItems(1).listItemIsSelected); page.mouseenterDropdownSecondItem(); - assert.equal(page.inputItems(0).listItemIsSelected, false); - assert.equal(page.inputItems(1).listItemIsSelected, true); + assert.notOk(page.inputItems(0).listItemIsSelected); + assert.ok(page.inputItems(1).listItemIsSelected); done(); }); }); diff --git a/tests/integration/components/task-status-test.js b/tests/integration/components/task-status-test.js index a77f484d1..ab0e425ee 100644 --- a/tests/integration/components/task-status-test.js +++ b/tests/integration/components/task-status-test.js @@ -12,7 +12,7 @@ test('it renders closed status', function(assert) { this.set('task', task); this.render(hbs`{{task-status task=task}}`); - assert.equal(this.$('.task-status').hasClass('closed'), true); + assert.ok(this.$('.task-status').hasClass('closed')); assert.equal(this.$('.task-status').text().trim(), 'Closed'); }); @@ -23,6 +23,6 @@ test('it renders open status', function(assert) { this.set('task', task); this.render(hbs`{{task-status task=task}}`); - assert.equal(this.$('.task-status').hasClass('open'), true); + assert.ok(this.$('.task-status').hasClass('open')); assert.equal(this.$('.task-status').text().trim(), 'Open'); }); diff --git a/tests/integration/components/user-menu-test.js b/tests/integration/components/user-menu-test.js index c34c6d747..30985448a 100644 --- a/tests/integration/components/user-menu-test.js +++ b/tests/integration/components/user-menu-test.js @@ -33,20 +33,16 @@ moduleForComponent('user-menu', 'Integration | Component | user menu', { }); test('it renders properly', function(assert) { - assert.expect(9); + assert.expect(7); set(this, 'user', stubUser); page.render(hbs`{{user-menu user=user}}`); - assert.ok(page.avatarVisible, "The user's avatar renders"); - assert.equal(this.$('img.avatar').attr('src'), stubUser.get('photoThumbUrl'), 'The avatar has the correct source'); - assert.equal(this.$('img.avatar').attr('alt'), stubUser.get('atUsername'), 'The avatar has the correct alt'); + page.toggle(); - assert.ok(page.dropdownIsHidden, 'The dropdown is initially hidden'); - - this.$('.user-menu-select').click(); - - assert.notOk(page.dropdownIsHidden, 'The dropdown is now visible'); + assert.ok(page.iconVisible, "The user's icon renders"); + assert.equal(page.icon.src, stubUser.get('photoThumbUrl'), 'The icon has the correct source'); + assert.equal(page.icon.alt, stubUser.get('atUsername'), 'The icon has the correct alt'); assert.ok(page.sluggedRouteLinkVisible, 'The link to the user route is rendered'); assert.ok(page.profileLinkVisible, 'The link to the user profile is rendered'); @@ -55,13 +51,14 @@ test('it renders properly', function(assert) { assert.equal(page.footerText, `Signed in as ${stubUser.get('username')}`, 'The username is rendered in the footer'); }); -test('clicking an open dropdown dismisses it', function(assert) { - assert.expect(2); +test('clicking the menu toggles the dropdown', function(assert) { + assert.expect(3); set(this, 'user', stubUser); page.render(hbs`{{user-menu user=user}}`); - this.$('.user-menu-select').click(); + assert.ok(page.dropdownIsHidden, 'The dropdown is initially hidden'); + page.toggle(); assert.notOk(page.dropdownIsHidden, 'The dropdown is now visible'); this.$('.user-menu .dropdown-menu').click(); assert.ok(page.dropdownIsHidden, 'The dropdown is now hidden'); diff --git a/tests/pages/components/categories-list.js b/tests/pages/components/categories-list.js index 15cd63531..7fc8774e6 100644 --- a/tests/pages/components/categories-list.js +++ b/tests/pages/components/categories-list.js @@ -4,11 +4,11 @@ import { } from 'ember-cli-page-object'; export default { - scope: '.categories-list', + scope: '.start__interests', items: collection({ itemScope: '.category-item', item: { - name: text('') + name: text('button') } }) }; diff --git a/tests/pages/components/navigation-menu.js b/tests/pages/components/navigation-menu.js index 6f564eed3..f17862b26 100644 --- a/tests/pages/components/navigation-menu.js +++ b/tests/pages/components/navigation-menu.js @@ -1,11 +1,11 @@ -import { - attribute, - clickable -} from 'ember-cli-page-object'; +import { isVisible } from 'ember-cli-page-object'; +import userMenu from './user-menu'; export default { + loginLinkVisible: isVisible('a.login'), + logo: { - scope: '.site-logo a' + scope: '.header__logo a' }, logIn: { scope: 'a.login' @@ -13,20 +13,6 @@ export default { signUp: { scope: 'a.signup' }, - userMenu: { - scope: '.user-menu', - open: clickable('a.user-menu-select'), - profileLink: { - scope: 'a.slugged-route', - href: attribute('href') - }, - settingsLink: { - scope: '.profile', - href: attribute('href') - }, - logOut: { - scope: 'a.logout' - } - } + userMenu }; diff --git a/tests/pages/components/project-details.js b/tests/pages/components/project-details.js index 1ecd73733..db03dfa34 100644 --- a/tests/pages/components/project-details.js +++ b/tests/pages/components/project-details.js @@ -3,16 +3,16 @@ import { } from 'ember-cli-page-object'; export default { - scope: '.project-details', + scope: '.project__header', joinProjectButton: { - scope: '.join-project button', + scope: 'aside button', href: attribute('href'), disabled: attribute('disabled') }, signUpLink: { - scope: '.join-project a', + scope: 'aside a', href: attribute('href') } }; diff --git a/tests/pages/components/project-menu.js b/tests/pages/components/project-menu.js index 85f8dcfd4..cca202bc2 100644 --- a/tests/pages/components/project-menu.js +++ b/tests/pages/components/project-menu.js @@ -4,13 +4,14 @@ import { } from 'ember-cli-page-object'; export default { - scope: '.project-menu', + scope: '.project__menu', aboutLink: { scope: 'li:eq(0) a', href: attribute('href'), isActive: hasClass('active') }, + tasksLink: { scope: 'li:eq(1) a', href: attribute('href'), diff --git a/tests/pages/components/user-menu.js b/tests/pages/components/user-menu.js index 93ff189a3..d3e80a5c6 100644 --- a/tests/pages/components/user-menu.js +++ b/tests/pages/components/user-menu.js @@ -1,14 +1,33 @@ -import { hasClass, isVisible, text } from 'ember-cli-page-object'; +import { attribute, clickable, hasClass, isVisible, text } from 'ember-cli-page-object'; export default { scope: '.user-menu', dropdownIsHidden: hasClass('menu-hidden'), - avatarVisible: isVisible('img.avatar'), + icon: { + scope: 'img', + alt: attribute('alt'), + src: attribute('src') + }, + iconVisible: isVisible('img'), + loginLinkVisible: isVisible('a.login'), logoutLinkVisible: isVisible('a.logout'), profileLinkVisible: isVisible('a.profile'), sluggedRouteLinkVisible: isVisible('a.slugged-route'), - footerText: text('.dropdown-footer') + footerText: text('.dropdown__footer'), + + logOut: clickable('a.logout'), + open: clickable('a'), + toggle: clickable('a.user-menu__toggle'), + + profileLink: { + scope: 'a.slugged-route', + href: attribute('href') + }, + settingsLink: { + scope: '.profile', + href: attribute('href') + } }; diff --git a/tests/pages/components/user-organizations-list.js b/tests/pages/components/user-organizations-list.js index 286eb9f4a..68556147c 100644 --- a/tests/pages/components/user-organizations-list.js +++ b/tests/pages/components/user-organizations-list.js @@ -7,10 +7,10 @@ import { export default { scope: '.user-organizations-list', - header: text('h2'), + header: text('h3'), emptyState: text('.empty-state strong'), listItemCount: count('li'), organizationDescription: text('li:first p'), organizationIconSrc: property('src', 'li:first img'), - organizationTitle: text('li:first h3') + organizationTitle: text('li:first h4') }; diff --git a/tests/pages/components/user-sidebar.js b/tests/pages/components/user-sidebar.js index 16c0fe10f..8079e1662 100644 --- a/tests/pages/components/user-sidebar.js +++ b/tests/pages/components/user-sidebar.js @@ -3,7 +3,7 @@ import { text, isHidden, property } from 'ember-cli-page-object'; export default { scope: '.user-sidebar', - name: text('h2 .name'), + name: text('.name'), biography: text('p.biography'), biographyIsHidden: isHidden('li.twitter'), @@ -16,5 +16,5 @@ export default { websiteHidden: isHidden('li.website'), websiteLink: property('href', 'li.website a'), - username: text('h2 .username') + username: text('.username') }; diff --git a/tests/pages/contributors.js b/tests/pages/contributors.js index c9f19082c..f7aa9306e 100644 --- a/tests/pages/contributors.js +++ b/tests/pages/contributors.js @@ -10,7 +10,7 @@ import { function buildContributorsDefinitionForIndex(index) { return { scope: `.contributors-list:eq(${index})`, - emptyMessageVisible: isVisible('.contributors-list-empty'), + emptyMessageVisible: isVisible('.contributors-list--empty'), members: collection({ itemScope: '.member-list-item', item: { @@ -30,11 +30,11 @@ export default create({ others: buildContributorsDefinitionForIndex(3), projectMenu: { - scope: '.project-menu', + scope: '.project__menu', contributors: { scope: '.contributors', - infoVisible: isVisible('.info'), - infoText: text('.info') + infoText: text('.info'), + infoVisible: isVisible('.info') } } }); diff --git a/tests/pages/index.js b/tests/pages/index.js index 4c56ead7a..6d7bc84e5 100644 --- a/tests/pages/index.js +++ b/tests/pages/index.js @@ -9,7 +9,7 @@ import siteFooter from './components/site-footer'; export default create({ visit: visitable('/'), - isLightTheme: hasClass('code-theme--light', '.main.container'), + isLightTheme: hasClass('code-theme--light', '.site-content.container'), navMenu, siteFooter diff --git a/tests/pages/onboarding.js b/tests/pages/onboarding.js index a53b309ba..874c55b3c 100644 --- a/tests/pages/onboarding.js +++ b/tests/pages/onboarding.js @@ -23,34 +23,43 @@ export default create({ lastName: fillable('[name="lastName"]'), lastNameEnter: triggerable('keyup', '[name="lastName"]', { eventProperties: { keyCode: 13 } }), clickCategoryItem: clickable('.category-item button'), + footer: { scope: '.site-footer' }, startButton: { - scope: '.start-actions button', + scope: '.start__footer button', isDisabled: attribute('disabled') }, - roles: collection({ - itemScope: '.roles-column', + roleColumns: collection({ + itemScope: '.expertise__column', item: { - title: text('h3'), + hasClass, + header: { - scope: '.roles-column-header', - hasClass + scope: 'h3', + title: text() }, - button: { - scope: 'button', - text: text(), - hasClass - } + + roles: collection({ + itemScope: '.role-item', + + item: { + button: { + scope: 'button', + text: text(), + hasClass + } + } + }) } }), userSkillsList: collection({ - scope: '.user-skills-list', + scope: '.skills__list', itemScope: 'button', item: { text: text(), diff --git a/tests/pages/project/tasks/index.js b/tests/pages/project/tasks/index.js index ea6c96162..f5d194ef7 100644 --- a/tests/pages/project/tasks/index.js +++ b/tests/pages/project/tasks/index.js @@ -18,8 +18,8 @@ export default create({ scope: '.site-footer' }, - mainContainer: { - scope: '.main.container.for-project-tasks' + siteContentContainer: { + scope: '.site-content.container.for-project-tasks' }, clickNewTask: clickable('.new-task'), diff --git a/tests/pages/user.js b/tests/pages/user.js index 2f93884ad..c32885e0e 100644 --- a/tests/pages/user.js +++ b/tests/pages/user.js @@ -12,7 +12,7 @@ export default create({ organizations: collection({ scope: '.user-organizations-list li', - itemScope: 'h3 a', + itemScope: 'h4 a', item: { click: clickable(), href: attribute('href') diff --git a/tests/unit/mixins/contains-code-test.js b/tests/unit/mixins/contains-code-test.js index 2e3c32fa9..74d17e8c3 100644 --- a/tests/unit/mixins/contains-code-test.js +++ b/tests/unit/mixins/contains-code-test.js @@ -32,7 +32,7 @@ test('it returns true "code" tag is present', function(assert) { let model = this.subject({ body: 'Hello, world!' }); - assert.equal(model.get('containsCode'), true); + assert.ok(model.get('containsCode')); }); test('it returns false if "code" tag is absent', function(assert) { @@ -40,5 +40,5 @@ test('it returns false if "code" tag is absent', function(assert) { let model = this.subject({ body: 'Hello, world!' }); - assert.equal(model.get('containsCode'), false); + assert.notOk(model.get('containsCode')); }); diff --git a/tests/unit/models/comment-test.js b/tests/unit/models/comment-test.js index 34f17ec10..2d7e0e770 100644 --- a/tests/unit/models/comment-test.js +++ b/tests/unit/models/comment-test.js @@ -27,7 +27,7 @@ test('it correctly identifies code in the body', function(assert) { let model = this.subject({ body: 'Hello, world!' }); - assert.equal(model.get('containsCode'), true); + assert.ok(model.get('containsCode')); }); test('it correctly identifies lack of code in the body', function(assert) { @@ -35,5 +35,5 @@ test('it correctly identifies lack of code in the body', function(assert) { let model = this.subject({ body: '
    Hello, world!
    ' });
 
-  assert.equal(model.get('containsCode'), false);
+  assert.notOk(model.get('containsCode'));
 });
diff --git a/tests/unit/models/organization-test.js b/tests/unit/models/organization-test.js
index 0fdb26ee0..8992178da 100644
--- a/tests/unit/models/organization-test.js
+++ b/tests/unit/models/organization-test.js
@@ -54,5 +54,5 @@ test('it should have computed properties for its organization\'s members', funct
   });
 
   assert.equal(model.get('pendingMembersCount'), 1, 'pendingMembersCount should return 1');
-  assert.equal(model.get('hasPendingMembers'), true, 'hasPendingMembers should return true');
+  assert.ok(model.get('hasPendingMembers'), 'hasPendingMembers should return true');
 });
diff --git a/tests/unit/models/project-test.js b/tests/unit/models/project-test.js
index ad03bdb17..b7f8ea721 100644
--- a/tests/unit/models/project-test.js
+++ b/tests/unit/models/project-test.js
@@ -49,7 +49,7 @@ test('it should have open tasks', function(assert) {
 
   let project = this.subject({ openTasksCount: 1 });
 
-  assert.equal(project.get('hasOpenTasks'), true, 'has open tasks');
+  assert.ok(project.get('hasOpenTasks'), 'has open tasks');
 });
 
 test('it should have computed properties for its organization\'s members', function(assert) {
@@ -66,7 +66,7 @@ test('it should have computed properties for its organization\'s members', funct
   });
 
   assert.equal(project.get('pendingMembersCount'), 1, 'pendingMembersCount should return 1');
-  assert.equal(project.get('hasPendingMembers'), true, 'hasPendingMembers should return true');
+  assert.ok(project.get('hasPendingMembers'), 'hasPendingMembers should return true');
 });
 
 test('it should have computed properties for its current donation goal', function(assert) {
diff --git a/tests/unit/models/task-test.js b/tests/unit/models/task-test.js
index 50942b1b9..539dad1d2 100644
--- a/tests/unit/models/task-test.js
+++ b/tests/unit/models/task-test.js
@@ -32,7 +32,7 @@ test('it correctly identifies code in the body', function(assert) {
 
   let model = this.subject({ body: 'Hello, world!' });
 
-  assert.equal(model.get('containsCode'), true);
+  assert.ok(model.get('containsCode'));
 });
 
 test('it correctly identifies lack of code in the body', function(assert) {
@@ -40,5 +40,5 @@ test('it correctly identifies lack of code in the body', function(assert) {
 
   let model = this.subject({ body: '
    Hello, world!
    ' });
 
-  assert.equal(model.get('containsCode'), false);
+  assert.notOk(model.get('containsCode'));
 });
diff --git a/tests/unit/services/code-theme-test.js b/tests/unit/services/code-theme-test.js
index eae1887f2..00bf12c03 100644
--- a/tests/unit/services/code-theme-test.js
+++ b/tests/unit/services/code-theme-test.js
@@ -12,15 +12,15 @@ test('it exists', function(assert) {
 
 test('it is light by default', function(assert) {
   let service = this.subject();
-  assert.equal(service.get('isLight'), true);
-  assert.equal(service.get('isDark'), false);
+  assert.ok(service.get('isLight'));
+  assert.notOk(service.get('isDark'));
   assert.equal(service.get('className'), 'code-theme--light');
 });
 
 test('it changes to dark when toggled', function(assert) {
   let service = this.subject();
   service.toggle();
-  assert.equal(service.get('isLight'), false);
-  assert.equal(service.get('isDark'), true);
+  assert.notOk(service.get('isLight'));
+  assert.ok(service.get('isDark'));
   assert.equal(service.get('className'), 'code-theme--dark');
 });
diff --git a/tests/unit/services/drag-state-test.js b/tests/unit/services/drag-state-test.js
index 791adf550..2dee1f5f3 100644
--- a/tests/unit/services/drag-state-test.js
+++ b/tests/unit/services/drag-state-test.js
@@ -12,18 +12,18 @@ test('it exists', function(assert) {
 
 test('it is not dragging by default', function(assert) {
   let service = this.subject();
-  assert.equal(service.get('isDragging'), false);
+  assert.notOk(service.get('isDragging'));
 });
 
 test('it sets dragging to false when leaving is called', function(assert) {
   let service = this.subject();
   service.set('isDragging', true);
   service.leaving();
-  assert.equal(service.get('isDragging'), false);
+  assert.notOk(service.get('isDragging'));
 });
 
 test('it sets dragging to true when dragging is called', function(assert) {
   let service = this.subject();
   service.dragging();
-  assert.equal(service.get('isDragging'), true);
+  assert.ok(service.get('isDragging'));
 });