From 1bbceeaf13d9bc14372778d11e9a44fb5e15717d Mon Sep 17 00:00:00 2001 From: Lisa P Date: Mon, 12 Oct 2015 17:17:08 +0200 Subject: [PATCH] rewrite topbar to fix in broadcasts, plus some cleanup --- app/styles/app.scss | 3 + app/styles/app/_mixins/fonts.sass | 2 + app/styles/app/_mixins/vars.sass | 9 -- app/styles/app/landing.sass | 6 +- app/styles/app/layout.sass | 17 +-- app/styles/app/layouts/broadcasts.sass | 49 ++++--- app/styles/app/layouts/buildheader.sass | 1 + app/styles/app/layouts/dashboard.sass | 1 - app/styles/app/layouts/top.sass | 130 ++----------------- app/styles/app/layouts/untitled | 17 +++ app/styles/app/modules/icons.sass | 31 ----- app/styles/app/modules/logo.sass | 21 +++ app/styles/app/modules/navigation.sass | 77 +++++++++++ app/styles/app/modules/tofuburger.sass | 16 +++ app/templates/components/orgs-filter.hbs | 1 - app/templates/layouts/profile.hbs | 2 +- app/templates/top.hbs | 96 +++++++------- public/images/line-icons/icon-tofuburger.svg | 3 +- 18 files changed, 241 insertions(+), 241 deletions(-) create mode 100644 app/styles/app/layouts/untitled create mode 100644 app/styles/app/modules/logo.sass create mode 100644 app/styles/app/modules/navigation.sass create mode 100644 app/styles/app/modules/tofuburger.sass diff --git a/app/styles/app.scss b/app/styles/app.scss index 3c3639f9..454f557d 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -24,6 +24,9 @@ @import "app/animation/tractor"; +@import "app/modules/logo"; +@import "app/modules/tofuburger"; +@import "app/modules/navigation"; @import "app/modules/row"; @import "app/modules/loader"; @import "app/modules/tiles"; diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass index 897a926e..ab3fc7c2 100644 --- a/app/styles/app/_mixins/fonts.sass +++ b/app/styles/app/_mixins/fonts.sass @@ -11,3 +11,5 @@ $line-height: 22px $line-height-log: 19px $font-weight-normal: 400 + +$top-height: 55px \ No newline at end of file diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass index 37e869da..c23a6330 100644 --- a/app/styles/app/_mixins/vars.sass +++ b/app/styles/app/_mixins/vars.sass @@ -8,15 +8,6 @@ $blue-grey: #404650 $blue-grey-light: #d8e2e6 $light-gray: #e9e9e7 -$logo-red: #dc4136 - -$topbar-bg: $blue-grey -$topbar-bg-darker: #31363d -$topbar-height: 55px - -$main-repo-link-color: #50555b -$main-repo-hover-color: #607a84 - $travis-lint-color: #9b9d9e $travis-lint-bg: #fafafa diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass index 3af2d3c2..73c53721 100644 --- a/app/styles/app/landing.sass +++ b/app/styles/app/landing.sass @@ -8,14 +8,12 @@ background-color: #fff .button--signin - margin-top: -4px background-color: #ffffff background-image: inline-image('landing-page/signingithub.svg') background-size: 16px 16px border: 2px solid #e4e7e7 color: #a0a8a8 .button--signingin - margin-top: -4px border: 2px solid #3FA75F .button--signin:hover background-color: #73c78d @@ -38,7 +36,7 @@ .landing margin: 0 auto 170px auto font-weight: 300 - overflow: hidden + overflow-x: hidden h1 font-size: 5em @@ -469,6 +467,8 @@ .landing-rows list-style: none margin: 0 + @media #{$small-only} + padding: 0 .landing-row .two-line diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index aa3851bb..014a1754 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -8,7 +8,12 @@ padding-left: 0 !important padding-right: 0 !important padding-top: 30px !important - overflow-y: auto + // overflow-y: auto + @media #{$medium-up} + .topbar + max-width: 1024px + margin: auto + padding: 0 .main, .profile-view @@ -31,16 +36,6 @@ background-color: $white border-right: 2px solid #f2f2f2 -.duration_label - display: inline-block - height: 11px - line-height: 13px - text-indent: 14px - margin-right: 1px - overflow: hidden - background: inline-image('ui/clock.svg') no-repeat 0px 0px - background-size: contain - #main position: relative padding: 1.8em $column-gutter/2 5em diff --git a/app/styles/app/layouts/broadcasts.sass b/app/styles/app/layouts/broadcasts.sass index 55005bb6..fd6045cb 100644 --- a/app/styles/app/layouts/broadcasts.sass +++ b/app/styles/app/layouts/broadcasts.sass @@ -1,20 +1,26 @@ +.broadcast + display: inline-block + height: $top-height + width: 40px + line-height: $top-height + cursor: pointer + vertical-align: middle + float: left + .broadcasts - position: absolute - top: 3.2em - width: 27em - z-index: 70 + position: relative background-color: $white list-style: none padding: 0 1em - margin: 0 - border: solid 2px $cream-dark + margin: 0 auto .7em border-radius: 2px - margin-left: -0.7em - - transform-origin: top left - transform: translateY(-100%) scale(.9) + height: 0 + transform-origin: top center + transform: translateY(50%) scale(.9) opacity: 0 - transition: transform 300ms ease, opacity 150ms ease + z-index: -1 + will-change: transform, opacity + transition: opacity 150ms ease, transform 50ms linear &:after content: "" @@ -24,29 +30,42 @@ height: 14px background: $white top: -0.5em + left: 123px transform: rotate(45deg) - left: 1rem border-top: solid 2px $cream-dark border-left: solid 2px $cream-dark - li border-bottom: solid 2px $cream-dark &:last-of-type border-bottom: none - p margin: .5em 0 padding-left: 1.5rem word-wrap: break-word - a display: inline line-height: 1.45 + text-decoration: underline &.is-open + z-index: 80 + border: solid 2px $cream-dark opacity: 1 + height: auto transform: translateY(0) scale(1) + @media #{$medium-up} + position: absolute + top: 3.3em + left: 130px + width: 27em + height: auto + z-index: 70 + margin-left: -0.7em + .centered & + left: 118px + &:after + left: 1rem .broadcast-status display: inline-block diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass index 0793a265..c19fb891 100644 --- a/app/styles/app/layouts/buildheader.sass +++ b/app/styles/app/layouts/buildheader.sass @@ -14,6 +14,7 @@ margin: 0 font-weight: 400 font-size: 35px + line-height: 1 a color: $grey-dark &:hover diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index f8a533c1..e0c160a5 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -16,7 +16,6 @@ margin: 3rem 0 5rem list-style-type: none - .dashboard-active li text-align: left .one-line diff --git a/app/styles/app/layouts/top.sass b/app/styles/app/layouts/top.sass index 4c7a273e..020b471a 100644 --- a/app/styles/app/layouts/top.sass +++ b/app/styles/app/layouts/top.sass @@ -1,4 +1,3 @@ -$top-height: 55px #auth #top .cta display: none @@ -32,132 +31,25 @@ $top-height: 55px @media #{$medium-up} display: block -.centered .cta - padding-right: 0 - -.logo - position: relative - margin: 0 1.5rem 0 1.3rem - float: left - a - display: block - width: 100px - height: $top-height - z-index: 999 - outline: none - text-indent: -9999px - transition: background-color 200ms ease - background: inline-image('svg/travis-ci-logo.svg') no-repeat 0 50% - - &:hover - background: $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50% - .centered & - margin-left: 0 - -.burger - overflow: auto - height: $top-height - @media #{$medium-up} - display: none - - .burger-btn - float: right - font-size: 50px - background: none - border: none - line-height: 1 - color: $grey-medium - outline: none !important - @include clearfix - &:hover - cursor: pointer - .top background-color: #eff0ec - position: relative - z-index: 90 .topbar + height: $top-height + padding: 0 $column-gutter/2 + clear: both + overflow: hidden font-size: $font-size-m - background-color: #eff0ec color: $grey-medium - - .navigation - padding: 0 $column-gutter/2 - margin: 0 - height: 0 - list-style: none - overflow: hidden - &.is-open - height: auto - - > li - position: relative - - .navigation-nested - margin: 0 - padding: 0 - list-style: none - - a, - .navigation-anchor - color: #898989 - font-size: $font-size-m - cursor: pointer - height: $top-height - line-height: $top-height + 2px - border: none + a + color: $grey-medium &:hover text-decoration: underline - - .profile - float: right - img - border-radius: 50%; - width: 2.7rem; - height: 2.7rem; - margin-left: 1rem; - transform: translateY(-0.1rem); - + &.has-autoheight + height: auto @media #{$medium-up} - &.row - height: $top-height - - .navigation - padding: 0 + &, + &.has-autoheight + position: relative height: $top-height overflow: visible - > li - display: inline-block - margin-right: 1rem - .centered & li.signed-out - .centered & li.signed-in - .centered & li.signing-in - margin-right: 0 - - a, - .navigation-anchor - padding: 0 .2em - - .centered & .navigation li:last-child - margin-right: 0 - - .navigation-nested - display: none - position: absolute - top: $top-height - left: -1em - z-index: 90 - background-color: #eff0ec - a - height: 35px - line-height: 35px - padding: 0 2em - white-space: nowrap - &:hover - text-decoration: none - background-color: $cream-light - - .navigation-anchor:hover + .navigation-nested, - .navigation-nested:hover - display: block diff --git a/app/styles/app/layouts/untitled b/app/styles/app/layouts/untitled new file mode 100644 index 00000000..ce1c8eb2 --- /dev/null +++ b/app/styles/app/layouts/untitled @@ -0,0 +1,17 @@ +.burger + overflow: auto + height: $top-height + @media #{$medium-up} + display: none + + .burger-btn + float: right + font-size: 50px + background: none + border: none + line-height: 1 + color: $grey-medium + outline: none !important + @include clearfix + &:hover + cursor: pointer \ No newline at end of file diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index bab6eaf2..2c9e488b 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -29,10 +29,6 @@ .icon--github-circle background-image: inline-image('icons/github.svg') -.icon-branch, -.icon--branch - background-image: inline-image('dashboard/branch.svg') - .icon-hash, .icon--hash background-image: inline-image('svg/build-number-icon.svg') @@ -59,25 +55,6 @@ %icon-star-green background-image: inline-image('svg/icon-star-green.svg') -.icon-status.errored - background-image: inline-image('dashboard/status-errored.svg') - -.icon-status.failed - background-image: inline-image('dashboard/status-failed.svg') - -.icon-status.canceled - background-image: inline-image('dashboard/status-cancelled.svg') - -.icon-status.passed - background-image: inline-image('dashboard/status-passed.svg') - -.icon-status.started, -.icon-status.queued, -.icon-status.booting, -.icon-status.received, -.icon-status.created, - background-image: inline-image('dashboard/status-pending.svg') - .icon.push background-image: inline-image('svg/push-icon.svg') @@ -97,14 +74,6 @@ .icon--grey.api background-image: inline-image('svg/api-light-grey.svg') -.icon-lock - background-image: inline-image('dashboard/private-icon.svg') - -.icon-burger - background-image: inline-image('dashboard/burger.svg') - &:hover - background-image: inline-image('dashboard/burger-hover.svg') - .icon--cancel background-image: inline-image('svg/off.svg') diff --git a/app/styles/app/modules/logo.sass b/app/styles/app/modules/logo.sass new file mode 100644 index 00000000..17f01410 --- /dev/null +++ b/app/styles/app/modules/logo.sass @@ -0,0 +1,21 @@ +.logo + position: relative + display: inline-block + height: $top-height + width: 100px + margin: 0 1.5rem 0 0 + vertical-align: middle + float: left + a + display: block + height: $top-height + z-index: 999 + outline: none + text-indent: -9999px + transition: background-color 200ms ease + background: inline-image('svg/travis-ci-logo.svg') no-repeat 0 50% + + &:hover + background: $cream-light inline-image('svg/travis-ci-logo-hover.svg') no-repeat 50% + .centered & + margin-left: 0 diff --git a/app/styles/app/modules/navigation.sass b/app/styles/app/modules/navigation.sass new file mode 100644 index 00000000..395400d0 --- /dev/null +++ b/app/styles/app/modules/navigation.sass @@ -0,0 +1,77 @@ +$nav-line-height: 35px + +.navigation-toggle + float: right + @media #{$medium-up} + display: none + +.navigation + height: 0 + will-change: height + transition: height 200ms ease + > ul + padding: 0 + margin: 0 + list-style: none + li + display: block + &.is-open + height: 100% + + @media #{$medium-up} + > ul > li + display: inline-block + vertical-align: middle + margin-right: 1.5em + + .profile + font-size: $font-size-m + color: $grey-medium + text-align: right + line-height: $top-height + img + border-radius: 50% + width: 2.7rem + height: 2.7rem + margin-left: 1rem + @media #{$medium-up} + margin-right: 0 + float: right + +.navigation-anchor + display: block + width: 100% + line-height: $nav-line-height + &:hover + text-decoration: underline + cursor: pointer + @media #{$medium-up} + line-height: $top-height + 1px // such magic wow + +.navigation-nested + margin: 0 + padding: 0 0 0 1em + list-style: none + line-height: $nav-line-height + + @media #{$medium-up} + display: none + position: absolute + padding: 0 0 0 0 + margin: -1px 0 0 -1em + z-index: 88 + background-color: #eff0ec + + li + display: block + text-align: left + a + display: block + padding: 0 2em + &:hover + text-decoration: none + background-color: $cream-light + +.navigation-anchor:hover ~ .navigation-nested, +.navigation-nested:hover + display: block diff --git a/app/styles/app/modules/tofuburger.sass b/app/styles/app/modules/tofuburger.sass new file mode 100644 index 00000000..0c153479 --- /dev/null +++ b/app/styles/app/modules/tofuburger.sass @@ -0,0 +1,16 @@ + +.tofuburger + height: $top-height + width: 30px + border: none + line-height: 1 + outline: none + text-indent: -9999px + background: + image: inline-image('line-icons/icon-tofuburger.svg') + size: 100% + position: center center + repeat: no-repeat + color: transparent + &:hover + cursor: pointer diff --git a/app/templates/components/orgs-filter.hbs b/app/templates/components/orgs-filter.hbs index b929ac85..978f008a 100644 --- a/app/templates/components/orgs-filter.hbs +++ b/app/templates/components/orgs-filter.hbs @@ -34,4 +34,3 @@ {{/each}} - diff --git a/app/templates/layouts/profile.hbs b/app/templates/layouts/profile.hbs index 707b4192..33ed9f24 100644 --- a/app/templates/layouts/profile.hbs +++ b/app/templates/layouts/profile.hbs @@ -1,5 +1,5 @@
-
+
{{render "top"}}
diff --git a/app/templates/top.hbs b/app/templates/top.hbs index 944a01ab..3a0db8fb 100644 --- a/app/templates/top.hbs +++ b/app/templates/top.hbs @@ -1,25 +1,25 @@ -
+

{{#link-to "main"}}Travis{{/link-to}}

-
- + +
+
- +
{{#if showCta}} diff --git a/public/images/line-icons/icon-tofuburger.svg b/public/images/line-icons/icon-tofuburger.svg index ea96c076..63f4d3e6 100644 --- a/public/images/line-icons/icon-tofuburger.svg +++ b/public/images/line-icons/icon-tofuburger.svg @@ -1,4 +1,5 @@ - +