From 792cc256a55245993258c0ffe023d53998bee0e9 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Fri, 10 Feb 2017 14:55:39 -0800 Subject: [PATCH] Redo CSS for headers and add breakpoints --- app/components/navigation-menu.js | 2 +- app/routes/index.js | 3 +- app/services/navigation-menu.js | 3 +- app/styles/_icons.scss | 1 + app/styles/_shame.scss | 9 ++ app/styles/app.scss | 1 + app/styles/base/_base.scss | 1 - app/styles/base/_helpers.scss | 11 +- app/styles/components/donation-payment.scss | 16 ++ app/styles/components/dropdown-menu.scss | 2 +- app/styles/components/image-drop.scss | 67 +++++---- app/styles/components/project-card.scss | 11 ++ app/styles/components/project-details.scss | 19 ++- app/styles/components/project-menu.scss | 8 +- app/styles/components/task-list-cards.scss | 6 +- app/styles/components/user-menu.scss | 2 +- app/styles/layout/_breakpoints.scss | 4 + app/styles/layout/_content.scss | 2 + app/styles/layout/_footer.scss | 9 +- app/styles/layout/_forms.scss | 2 +- app/styles/layout/_header.scss | 38 ++++- app/styles/templates/project/tasks/index.scss | 1 + app/styles/templates/start/hello.scss | 4 + app/styles/templates/start/start.scss | 8 +- app/templates/about.hbs | 74 ++++----- app/templates/application.hbs | 14 +- app/templates/components/navigation-menu.hbs | 24 ++- .../components/organization-menu.hbs | 22 ++- .../components/organization-profile.hbs | 19 ++- .../components/organization-settings.hbs | 6 +- app/templates/components/project-menu.hbs | 62 ++++---- app/templates/components/site-footer.hbs | 141 +++++++++--------- app/templates/components/skills-list.hbs | 4 +- app/templates/components/user-details.hbs | 6 +- app/templates/index.hbs | 54 +++---- app/templates/organizations/slugged-route.hbs | 8 +- .../slugged-route/settings/profile.hbs | 4 +- app/templates/project/donate.hbs | 28 ++-- app/templates/project/index.hbs | 52 ++++--- app/templates/project/settings.hbs | 10 +- app/templates/project/tasks.hbs | 8 +- app/templates/project/tasks/index.hbs | 1 + app/templates/project/tasks/new.hbs | 16 +- app/templates/project/thank-you.hbs | 6 +- app/templates/projects-list.hbs | 22 +-- app/templates/settings/profile.hbs | 12 +- app/templates/start.hbs | 6 +- app/templates/start/hello.hbs | 2 +- app/templates/team.hbs | 116 +++++++------- tests/acceptance/footer-test.js | 8 - .../components/navigation-menu-test.js | 6 +- .../components/site-footer-test.js | 26 ++-- tests/pages/components/site-footer.js | 7 +- tests/pages/index.js | 2 +- tests/pages/project/tasks/index.js | 2 +- 55 files changed, 570 insertions(+), 428 deletions(-) create mode 100644 app/styles/layout/_breakpoints.scss diff --git a/app/components/navigation-menu.js b/app/components/navigation-menu.js index e6c4cc221..c16884f7f 100644 --- a/app/components/navigation-menu.js +++ b/app/components/navigation-menu.js @@ -20,7 +20,7 @@ const { */ export default Component.extend({ tagName: 'header', - classNames: ['site-header', 'container'], + classNames: ['site-header'], /** @property currentUser diff --git a/app/routes/index.js b/app/routes/index.js index 433cec6c5..59741a071 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -1,6 +1,7 @@ import Ember from 'ember'; const { + get, inject: { service }, Route } = Ember; @@ -9,7 +10,7 @@ export default Route.extend({ session: service(), beforeModel() { - if (this.get('session.isAuthenticated')) { + if (get(this, 'session.isAuthenticated')) { this.transitionTo('projects-list'); } } diff --git a/app/services/navigation-menu.js b/app/services/navigation-menu.js index c7685b043..82fd4c51a 100644 --- a/app/services/navigation-menu.js +++ b/app/services/navigation-menu.js @@ -2,6 +2,7 @@ import Ember from 'ember'; const { computed, + get, inject: { service }, Service } = Ember; @@ -13,7 +14,7 @@ export default Service.extend({ isOnboarding: computed.equal('menuType', 'onboarding'), menuType: computed('onboarding.isOnboarding', function() { - let isOnboarding = this.get('onboarding.isOnboarding'); + let isOnboarding = get(this, 'onboarding.isOnboarding'); if (isOnboarding) { return 'onboarding'; } else { diff --git a/app/styles/_icons.scss b/app/styles/_icons.scss index 3d94ab3bf..6f07831f1 100644 --- a/app/styles/_icons.scss +++ b/app/styles/_icons.scss @@ -22,6 +22,7 @@ $sprite-bgiSizeW: 230px; $sprite-bgiSizeH: 330px; $logo: 230px 50px $spriteURL 0px 0px $spritex2URL; $logo-small: 161px 35px $spriteURL 0px -50px $spritex2URL; +$logo-small-icon-only: 35px 35px $spriteURL 0px -50px $spritex2URL; $location: 16px 16px $spriteURL 0px -85px $spritex2URL; $twitter: 16px 16px $spriteURL -16px -85px $spritex2URL; $link: 16px 16px $spriteURL -32px -85px $spritex2URL; diff --git a/app/styles/_shame.scss b/app/styles/_shame.scss index eaecedbfd..f21cdca8f 100644 --- a/app/styles/_shame.scss +++ b/app/styles/_shame.scss @@ -15,6 +15,15 @@ .temporary-projects-notice { @include span-columns(4); + @include media($md-screen) { + @include omega(2n); + @include span-columns(6); + } + + @include media($xs-screen) { + display: none; + } + border: 1px dashed $gray--lightest; border-radius: 4px; color: $text--light; diff --git a/app/styles/app.scss b/app/styles/app.scss index da4bffb32..d5d5b222e 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -41,6 +41,7 @@ // // LAYOUT // +@import "layout/breakpoints"; @import "layout/content"; @import "layout/footer"; @import "layout/forms"; diff --git a/app/styles/base/_base.scss b/app/styles/base/_base.scss index e6f886ced..ded8d9915 100644 --- a/app/styles/base/_base.scss +++ b/app/styles/base/_base.scss @@ -14,7 +14,6 @@ a { body { height: 100%; margin: 0; - padding: 0 10px; > .ember-view:first-of-type { height: 100%; diff --git a/app/styles/base/_helpers.scss b/app/styles/base/_helpers.scss index 4d29b33ff..65e8897a6 100644 --- a/app/styles/base/_helpers.scss +++ b/app/styles/base/_helpers.scss @@ -1,6 +1,13 @@ .container { - @include outer-container(980px); - min-width: 980px; + max-width: 1040px; + margin: 0 auto; + padding: 0 10px; + height: 100%; + width: 100%; + + &--wide { + padding: 0 10px; + } } .flexbox-container { diff --git a/app/styles/components/donation-payment.scss b/app/styles/components/donation-payment.scss index 24e17af16..c44be2f7a 100644 --- a/app/styles/components/donation-payment.scss +++ b/app/styles/components/donation-payment.scss @@ -1,6 +1,22 @@ .donation-container { @include span-columns(5); @include shift(7/2); + + @include media($lg-screen) { + @include span-columns(8); + @include shift(2); + } + + @include media($md-screen) { + @include shift(1); + @include span-columns(10); + } + + @include media($sm-screen) { + @include shift(0); + @include span-columns(12); + } + h3 { margin-top: 35px; margin-top: 2.5em; diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index d439e7cdd..ea37bc2d4 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -1,6 +1,6 @@ .dropdown-menu { background: white; - border: 1px solid $gray; + border: 1px solid $gray--lightest; border-radius: 4px; box-shadow: 0px 10px 41px -16px rgba(0,0,0,0.75); float: left; diff --git a/app/styles/components/image-drop.scss b/app/styles/components/image-drop.scss index d28a28eef..87809f5a2 100644 --- a/app/styles/components/image-drop.scss +++ b/app/styles/components/image-drop.scss @@ -41,6 +41,37 @@ width: $size; } + .hover { + border-radius: 5px; + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 5px; + color: white; + background: rgba(0, 0, 0, 0.6); + z-index: 2; + + p { + &:before { + @include sprite($camera); + content: ""; + display: block; + margin: 0 auto; + } + + color: white; + display: block; + font-size: $body-font-size-normal; + margin: 5px 0; + padding: 0 10px; + text-align: center; + width: 100%; + } + } + &--circle { border-radius: $border-radius; @@ -56,7 +87,7 @@ &--drag { @include outside-border(2px, dashed, $gray--lightest); - &--circle { + &.image-drop--circle { @include outside-border(2px, default, $gray--lightest, $border-radius); } @@ -79,40 +110,10 @@ } } - .hover { - border-radius: 5px; - display: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 5px; - color: white; - background: rgba(0, 0, 0, 0.6); - z-index: 2; - - p { - &:before { - @include sprite($camera); - content: ""; - display: block; - margin: 0 auto; - } - - color: white; - display: block; - font-size: $body-font-size-normal; - margin: 5px 0; - padding: 0 10px; - width: 100%; - } - } - - &:hover:not(&--drag) { + &:hover:not(.image-drop--drag) { @include outside-border(2px, solid, $blue--dark); - &--circle { + &.image-drop--circle { @include outside-border(2px, solid, $blue--dark, $border-radius); } diff --git a/app/styles/components/project-card.scss b/app/styles/components/project-card.scss index 944e87109..05ed86f28 100644 --- a/app/styles/components/project-card.scss +++ b/app/styles/components/project-card.scss @@ -1,6 +1,17 @@ .project-card { @include omega(3n); @include span-columns(4); + + @include media($md-screen) { + @include omega(2n); + @include span-columns(6); + } + + @include media($xs-screen) { + @include omega(1n); + @include span-columns(12); + } + border: 1px solid $gray--lightest; border-radius: 4px; padding: 20px; diff --git a/app/styles/components/project-details.scss b/app/styles/components/project-details.scss index cd762611d..145de90fc 100644 --- a/app/styles/components/project-details.scss +++ b/app/styles/components/project-details.scss @@ -1,11 +1,14 @@ .project__header { - margin: 0 0 10px 0; width: 100%; @include clearfix; + $icon-size: 50px; + &__icon { float: left; + height: $icon-size; + width: $icon-size; } &__main { @@ -13,15 +16,17 @@ @include span-columns(8); } - &__details { - margin-left: 10px; - } - &__side { @include span-columns(4); - p { - text-align: right; + display: flex; + align-items: center; + height: 50px; + justify-content: flex-end; + + button { + vertical-align: middle; } + span { color: $blue; } diff --git a/app/styles/components/project-menu.scss b/app/styles/components/project-menu.scss index ad4b7e224..06fbde163 100644 --- a/app/styles/components/project-menu.scss +++ b/app/styles/components/project-menu.scss @@ -1,10 +1,9 @@ .project__menu, .organization-menu { &--horizontal { @include clearfix; - border-bottom: 1px solid $gray--light; - height: 2.5em; + border-bottom: 1px solid $blue--lighter; list-style-type: none; - margin-bottom: .7em; + margin-bottom: 10px; padding: 0; width: 100%; @@ -20,7 +19,8 @@ display: block; font-weight: 500; height: 100%; - padding: 6px 10px; + margin-bottom: -1px; + padding: 9px 10px; text-decoration: none; &.active, &:hover { diff --git a/app/styles/components/task-list-cards.scss b/app/styles/components/task-list-cards.scss index 4ccd68f95..4f6513132 100644 --- a/app/styles/components/task-list-cards.scss +++ b/app/styles/components/task-list-cards.scss @@ -5,9 +5,13 @@ height: 100%; width: 280px; overflow-y: scroll; - margin-right: 7px; + margin-left: 7px; padding: 8px 10px; white-space: normal; + + &:first-child { + margin-left: 10px; + } } .task-list { diff --git a/app/styles/components/user-menu.scss b/app/styles/components/user-menu.scss index ea6f90351..c4d563c42 100644 --- a/app/styles/components/user-menu.scss +++ b/app/styles/components/user-menu.scss @@ -24,7 +24,7 @@ } .user-menu a { - padding: 5px; + padding: 6px 0 4px 0; } .user-menu__avatar { diff --git a/app/styles/layout/_breakpoints.scss b/app/styles/layout/_breakpoints.scss new file mode 100644 index 000000000..d71031ca0 --- /dev/null +++ b/app/styles/layout/_breakpoints.scss @@ -0,0 +1,4 @@ +$xs-screen: new-breakpoint(max-width 479px); +$sm-screen: new-breakpoint(max-width 599px); +$md-screen: new-breakpoint(max-width 767px); +$lg-screen: new-breakpoint(max-width 991px); diff --git a/app/styles/layout/_content.scss b/app/styles/layout/_content.scss index befa87be7..4de76aa0c 100644 --- a/app/styles/layout/_content.scss +++ b/app/styles/layout/_content.scss @@ -1,4 +1,6 @@ .site-content { + margin-top: 10px; + &.for-project-tasks { display: flex; flex-direction: column; diff --git a/app/styles/layout/_footer.scss b/app/styles/layout/_footer.scss index 6931f1339..27b3c7168 100644 --- a/app/styles/layout/_footer.scss +++ b/app/styles/layout/_footer.scss @@ -1,5 +1,5 @@ .site-footer { - padding: 1.4em 0; + padding: 2em 0 1em 0; h4 { margin: 7px 0; } @@ -14,11 +14,12 @@ .footer-columns { > li { float: left; + margin-bottom: 1em; + width: 25%; - &:first-child { - width: 28% + @include media($md-screen) { + width: 50%; } - width: 18%; } } diff --git a/app/styles/layout/_forms.scss b/app/styles/layout/_forms.scss index 51f673bcc..77e27d138 100644 --- a/app/styles/layout/_forms.scss +++ b/app/styles/layout/_forms.scss @@ -130,8 +130,8 @@ form { } .suggestions { - left: 394px; position: absolute; + right: -250px; width: 250px; p { diff --git a/app/styles/layout/_header.scss b/app/styles/layout/_header.scss index 8b74ce443..a704da5d9 100644 --- a/app/styles/layout/_header.scss +++ b/app/styles/layout/_header.scss @@ -9,32 +9,54 @@ } .site-header { + border-bottom: 1px solid #EEE; display: flex; - height: 5em; - padding: .7em 0; + height: 53px; + padding: 0 10px; } .header__logo { + display: flex; + align-items: center; line-height: 50px; margin: 0; a { - @include sprite($logo); + @include sprite($logo-small); display: inline-block; text-indent: -9999px; + + @include media($sm-screen) { + @include sprite($logo-small-icon-only); + } } } .header-navigation { - &--main, &--auth { - padding: 0 2em; + &--left { + display: flex; + flex: 2; + order: 1; } -} -.header-navigation--auth { - margin-left: auto; + &--middle { + display: flex; + flex: 1; + order: 2; + justify-content: center; + } + + &--right { + display: flex; + flex: 2; + justify-content: flex-end; + order: 3; + } } .header-navigation__options { + display: flex; + justify-content: flex-end; + li { display: inline-block; float: left; diff --git a/app/styles/templates/project/tasks/index.scss b/app/styles/templates/project/tasks/index.scss index e458e4ee9..c5fd8f8f7 100644 --- a/app/styles/templates/project/tasks/index.scss +++ b/app/styles/templates/project/tasks/index.scss @@ -1,5 +1,6 @@ .tasks-menu { @include clearfix; + padding: 0 10px; margin-bottom: 10px; } diff --git a/app/styles/templates/start/hello.scss b/app/styles/templates/start/hello.scss index efeb182c1..08a11b945 100644 --- a/app/styles/templates/start/hello.scss +++ b/app/styles/templates/start/hello.scss @@ -47,3 +47,7 @@ } } } + +.photo-help-text { + text-align: center; +} diff --git a/app/styles/templates/start/start.scss b/app/styles/templates/start/start.scss index aa07f6edb..5c6ab7e6b 100644 --- a/app/styles/templates/start/start.scss +++ b/app/styles/templates/start/start.scss @@ -1,3 +1,8 @@ +.start { + display: flex; + flex-direction: column; +} + .start__header { align-self: flex-start; margin-bottom: 2em; @@ -20,7 +25,8 @@ .start__footer { align-self: flex-end; border-top: 1px solid $gray--lightest; - margin-bottom: 2em; + margin: 2em 0; + padding: 2em 0; text-align: center; width: 100%; p { diff --git a/app/templates/about.hbs b/app/templates/about.hbs index ad449711d..ee7ef8e22 100644 --- a/app/templates/about.hbs +++ b/app/templates/about.hbs @@ -1,40 +1,42 @@ {{title "About"}} -
-

We help people build simple software
that solves hard problems.

-
-
-
-

We were promised flying cars and we got targeted advertising.

-
-

Where are the apps to challenge poverty or end climate change?

-
-

We want to build these things not because they are easy,
but because they are hard. Here's our plan:

- -
-

We need your help.

-

We're a small team and we can't do this alone.

-

{{#link-to "signup" class="button default"}}Join Code Corps today{{/link-to}}

+
+
+

We help people build simple software
that solves hard problems.

+
+
+
+

We were promised flying cars and we got targeted advertising.

+
+

Where are the apps to challenge poverty or end climate change?

+
+

We want to build these things not because they are easy,
but because they are hard. Here's our plan:

+
    +
  • +
    +

    Connect People

    +

    We're matching developers and designers, project managers and marketers – any and every talent – to ambitious projects that need their help.

    +
    • +
  • +
    +

    Provide Support

    +

    We're educating and training, developing and encouraging people who build public software. We want to help projects be successful and people to do their best work.

    +
    • +
  • +
    +

    Fund Projects

    +

    We're building a crowdfunding platform to support ongoing work. We aim to keep funders engaged in projects and connected to the teams they're supporting.

    +
    • +
  • +
    +

    Develop New Tools

    +

    We're developing tools to help people collaborate on, organize, and even distribute their work. We're listening closely to hear what needs built, and then building it.

    +
    • +
+
+

We need your help.

+

We're a small team and we can't do this alone.

+

{{#link-to "signup" class="button default"}}Join Code Corps today{{/link-to}}

+
diff --git a/app/templates/application.hbs b/app/templates/application.hbs index 0a62d9c6c..89343794e 100644 --- a/app/templates/application.hbs +++ b/app/templates/application.hbs @@ -9,17 +9,9 @@ isn't this here mainly for updating a user's image? }} 'navigation-menu' to 'site-header' }} {{navigation-menu}} {{flash-messages}} - {{#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}} +
+ {{outlet}} +
{{#if shouldShowSpacer}}
{{/if}} diff --git a/app/templates/components/navigation-menu.hbs b/app/templates/components/navigation-menu.hbs index dd2d70dad..a345178fc 100644 --- a/app/templates/components/navigation-menu.hbs +++ b/app/templates/components/navigation-menu.hbs @@ -1,21 +1,29 @@ -

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

- {{#if navigationMenu.isDefault}} -