From 336479a2bea42425214a18ed1e78d06792cf8a9c Mon Sep 17 00:00:00 2001 From: Lisa P Date: Thu, 26 Nov 2015 18:34:08 +0100 Subject: [PATCH] jobs list styles align animating icons bring back color in sidebar tiles change settings hover color new help icon for allowed failures and settings help fix svgs for firefox also for remove log also for help icon fix coloring issues, use flexbox footer --- app/styles/app.scss | 1 - app/styles/app/_mixins/mixins.sass | 3 +- app/styles/app/base.sass | 7 + app/styles/app/layout.sass | 5 + app/styles/app/layouts/footer.sass | 114 ++-- app/styles/app/layouts/jobs.sass | 153 +++++- app/styles/app/layouts/profile.sass | 1 + app/styles/app/layouts/repo.sass | 15 +- app/styles/app/layouts/sidebar.sass | 24 +- app/styles/app/modules/buttons.sass | 3 +- app/styles/app/modules/icons.sass | 99 ++-- app/styles/app/modules/notice.sass | 5 +- app/styles/app/modules/tabs.sass | 4 +- app/styles/app/modules/tiles.sass | 149 ------ app/styles/app/modules/tooltips.sass | 41 +- app/templates/components/build-header.hbs | 4 +- app/templates/components/dashboard-row.hbs | 2 +- app/templates/components/job-repo-actions.hbs | 4 +- app/templates/components/jobs-item.hbs | 24 +- app/templates/components/jobs-list.hbs | 4 +- .../components/limit-concurrent-builds.hbs | 4 +- app/templates/components/log-content.hbs | 4 +- app/templates/components/owner-repo-tile.hbs | 2 +- app/templates/components/repo-show-tools.hbs | 2 +- app/templates/components/repos-list-item.hbs | 65 +-- app/templates/footer.hbs | 67 ++- app/templates/layouts/landing-page.hbs | 4 +- app/templates/owner.hbs | 2 +- public/images/line-icons/icon-environment.svg | 14 + public/images/line-icons/icon-flag.svg | 12 + public/images/line-icons/icon-help.svg | 19 + public/images/line-icons/icon-lang.svg | 22 + public/images/line-icons/icon-linux.svg | 32 ++ public/images/line-icons/icon-mac.svg | 28 + public/images/ui/footer-logo.svg | 491 ++++++++++++++++++ 35 files changed, 1029 insertions(+), 401 deletions(-) delete mode 100644 app/styles/app/modules/tiles.sass create mode 100644 public/images/line-icons/icon-environment.svg create mode 100644 public/images/line-icons/icon-flag.svg create mode 100644 public/images/line-icons/icon-help.svg create mode 100644 public/images/line-icons/icon-lang.svg create mode 100644 public/images/line-icons/icon-linux.svg create mode 100644 public/images/line-icons/icon-mac.svg create mode 100644 public/images/ui/footer-logo.svg diff --git a/app/styles/app.scss b/app/styles/app.scss index fdf959ee..a0a6a35c 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -30,7 +30,6 @@ @import "app/modules/navigation"; @import "app/modules/row"; @import "app/modules/loader"; -// @import "app/modules/tiles"; @import "app/modules/buttons"; @import "app/modules/icons"; @import "app/modules/search"; diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 97133aa0..0b987c5e 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -107,5 +107,6 @@ @include colorLinks($color, $status, $is-building) @include colorStatusIcons($color, $status) &:hover, - &:active, + &:active @include colorBg($color, $status, $width, $hover) + diff --git a/app/styles/app/base.sass b/app/styles/app/base.sass index c6107005..8318b1e6 100644 --- a/app/styles/app/base.sass +++ b/app/styles/app/base.sass @@ -5,3 +5,10 @@ body strong font-weight: 400 + +a + color: $grey + text-decoration: none + &:hover, + &:active + text-decoration: underline diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index 014a1754..0ec663f5 100644 --- a/app/styles/app/layout.sass +++ b/app/styles/app/layout.sass @@ -2,6 +2,7 @@ .centered .row max-width: 1024px + .main margin: auto max-width: 1024px @@ -21,6 +22,10 @@ width: 100% min-height: 100vh +.inner + max-width: 1024px + margin: auto + #auth, #not-found, #simple #top top: 0 diff --git a/app/styles/app/layouts/footer.sass b/app/styles/app/layouts/footer.sass index 46bc9822..1e244a2a 100644 --- a/app/styles/app/layouts/footer.sass +++ b/app/styles/app/layouts/footer.sass @@ -2,72 +2,56 @@ * Footer on the dashboard */ -$footer-height: 210px +$footer-bg: #e0e0e0 +$blue-grey: #8f9ba2 -a - color : $color-link - text-decoration : none - -footer +.footer position: relative padding : 20px 0 - background-color : $footer-bg-color - min-height : 334px + background-color : $footer-bg font-size : 12px line-height : 22px - margin-top : -334px /* sticky footer */ + color: #404650 a - display : block - color : $footer-color + display: inline-block vertical-align: middle + color: #404650 + text-decoration: none + &:hover, + &:active + text-decoration : underline -.wrapper - padding-bottom: 334px - min-height: 100vh - height: auto -@media (min-width: 640px) - .wrapper - padding-bottom: $footer-height + h3 + font-size : 15px + margin : 0 0 10px 0 + padding-top : 6px + font-weight : 400 + color : $blue-grey + border-top : solid 4px #ccd0d5 - footer - margin-top: - $footer-height - min-height: $footer-height + ul + padding: 0 + margin: 0 + list-style: none -footer h3 - font-size : 15px - margin : 0 0 10px 0 - padding-top : 6px - font-weight : 400 - color : $footer-h3-color - border-top : solid 4px $footer-h3-corder-color -footer .row p - display : inline-block - margin : 0 - color: $footer-color - line-height: 23px + .inner + display: flex + flex-flow: row wrap + justify-content: space-between + align-items: flex-start -footer .row - max-width: 1024px - -footer .row ul, -footer .row li - display : block - color : $footer-color - line-height : 22px - padding : 0 - margin-top : 0 - list-style-type : none - -footer a - text-decoration : none - display : inline-block - color : $footer-color - -footer a:hover, -footer a:active - text-decoration : underline + .footer-elem + flex: 1 0 70% + margin-left: 1em + @media #{$medium-up} + .footer-elem + flex: 0 1 16% + margin-left: 1em + &:first-of-type + flex: 1 1 45% + margin-left: 0 .status-circle display : inline-block @@ -75,20 +59,14 @@ footer a:active width : 11px text-indent : -9999px margin-right : 5px - border-radius : 100px - -webkit-border-radius : 100px - -moz-border-radius : 100px + border-radius: 100px vertical-align: middle - -.status-circle.none - background: #2fcc66 - -.status-circle.degraded - background: #f1c40f - -.status-circle.minor - background: #e67e22 - -.status-circle.major - background: #e74c3c + &.none + background: #2fcc66 + &.degraded + background: #f1c40f + &.minor + background: #e67e22 + &.major + background: #e74c3c diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass index 781a5677..5bbbb43e 100644 --- a/app/styles/app/layouts/jobs.sass +++ b/app/styles/app/layouts/jobs.sass @@ -1,11 +1,24 @@ -.jobs - +=colorFadeOut($status, $color) + @media #{$medium-up} + &.#{$status}:hover + .job-lang, + .job-env + &:after + @include fadeOut(right, -90deg, $color) + .job-lang:hover, + .job-env:hover + overflow: visible + z-index: 80 + .label-align + background-color: $color + &:after + content: none !important .jobs-list margin: 0 padding: 0 list-style: none - font-size: 16px + font-size: 15px .jobs-item border: 1px solid $cream-dark @@ -13,13 +26,23 @@ @include colorJobs($green, 'passed', 6px, rgba($green, .1)) @include colorJobs($red, 'failed', 6px, rgba($red, .1)) @include colorJobs($red, 'errored', 6px, rgba($red, .1)) - @include colorJobs($grey, 'canceled', 6px, rgba($grey, .1)) + @include colorJobs($grey, 'canceled', 6px, #f1f1f1) @include colorJobs($yellow, 'started', 6px, rgba($yellow, .1), true) @include colorJobs($yellow, 'queued', 6px, rgba($yellow, .1), true) @include colorJobs($yellow, 'booting', 6px, rgba($yellow, .1), true) @include colorJobs($yellow, 'received', 6px, rgba($yellow, .1), true) @include colorJobs($yellow, 'created', 6px, rgba($yellow, .1), true) + @include colorFadeOut('passed',#ECF6EF) + @include colorFadeOut('failed', #FBECEB) + @include colorFadeOut('errored', #FBECEB) + @include colorFadeOut('canceled', #f1f1f1) + @include colorFadeOut('started', #FCFBEB) + @include colorFadeOut('queued', #FCFBEB) + @include colorFadeOut('booting', #FCFBEB) + @include colorFadeOut('received', #FCFBEB) + @include colorFadeOut('created', #FCFBEB) + a display: block padding-left: 1em @@ -29,9 +52,129 @@ justify-content: space-between align-items: center height: 34px + padding-left: 0.5em .section-title font-size: 16px color: $grey font-weight: 400 - margin: 3rem 0 1rem \ No newline at end of file + margin: 3rem 0 1rem + +.job-state + display: inline-block + @media #{$medium-up} + flex: 0 0 2em + + &.started, + &.booting, + &.received, + &.created + line-height: 3 + .icon + width: 24px + height: 24px + vertical-align: middle + +.job-number + display: inline-block + @media #{$medium-up} + flex: 0 0 7em + padding-right: 1em + border-right: 1px solid $cream-dark +.icon-hash + width: 20px + height: 20px + vertical-align: middle + @extend %icon + @extend %icon-line-hash + +.job-os + position: relative + pointer-events: none + .icon + width: 16px + height: 20px + vertical-align: middle + padding-left: 1.5em + background: + size: auto 18px + repeat: no-repeat + @media #{$medium-up} + flex: 0 0 4em + text-align: center + pointer-events: initial + .icon + padding-left: 0 + text-indent: 999% + white-space: nowrap + overflow: hidden + + &.linux + .icon + @extend %icon-line-linux + &.osx + .icon + @extend %icon-line-mac + +.job-lang + @media #{$medium-up} + flex: 1 1 20% + position: relative + white-space: nowrap + overflow:hidden + &:after + content: "" + @include fadeOut(right, -90deg, white) + +.icon-lang + width: 16px + height: 13px + margin-right: .3em + vertical-align: middle + @extend %icon + @extend %icon-line-language + +.job-env + @media #{$medium-up} + flex: 1 1 30% + position: relative + white-space: nowrap + overflow: hidden + &:after + @include fadeOut(right, -90deg, white) + &.is-empty + opacity: .5 + +.icon-env + width: 14px + height: 14px + margin-right: .3em + vertical-align: middle + @extend %icon + @extend %icon-line-environment + +.job-duration + flex: 1 0 14% + padding-right: 1em +.icon-clock + display: inline-block + width: 16px + height: 20px + margin-right: .3em + vertical-align: middle + background: + size: auto 20px + position: -2px 0 + @extend %icon-line-clock + +.icon-calendar + display: inline-block + width: 16px + height: 18px + margin-right: .3em + vertical-align: middle + background: + size: auto 18px + position: -1px 0 + @extend %icon-line-calendar + diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass index 25ff25cb..5185780f 100644 --- a/app/styles/app/layouts/profile.sass +++ b/app/styles/app/layouts/profile.sass @@ -101,6 +101,7 @@ margin: 1.5rem 0 2.5rem a width: 100% + position: relative &:hover h1, h2 text-decoration: underline diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass index 876c8a75..7a1f26f1 100644 --- a/app/styles/app/layouts/repo.sass +++ b/app/styles/app/layouts/repo.sass @@ -74,11 +74,11 @@ $dropdown-button-margin: -9px &:hover, &:active, .display & - background-color: $teal - color: white - @extend %icon-line-cog-white + color: $teal + border-color: $teal + @extend %icon-line-cog-teal &:after - @extend %icon-line-dropdown-white + @extend %icon-line-dropdown-teal .settings-dropdown display: none @@ -89,15 +89,16 @@ $dropdown-button-margin: -9px margin: -1px 0 0 list-style: none z-index: 60 - background-color: #f1f1f1 + background-color: white + border: 1px solid $teal a display: block padding: .4em 1em .5em 2.4em font-size: 14px - color: $grey-light + color: $teal &:hover - background-color: $teal color: white + background-color: $teal .settings-menu position: relative diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 78c069f7..80e874ae 100644 --- a/app/styles/app/layouts/sidebar.sass +++ b/app/styles/app/layouts/sidebar.sass @@ -1,16 +1,30 @@ $sb-grey: #f2f2f2 $sb-font-size: 14px -.tile--sidebar +.tile height: auto - padding: 0.6em 0.5em + padding: 0.8em 0.5em 0.8em 1.5em margin-bottom: .46rem background-color: $white border-radius: 0 - border-left: 8px solid li:last-child & margin-bottom: 0 + @include colorRows($green, 'passed', 8px) + @include colorRows($red, 'failed', 8px) + @include colorRows($red, 'errored', 8px) + @include colorRows($grey, 'canceled', 8px) + @include colorRows($yellow, 'started', 8px, true) + @include colorRows($yellow, 'queued', 8px, true) + @include colorRows($yellow, 'booting', 8px, true) + @include colorRows($yellow, 'received', 8px, true) + @include colorRows($yellow, 'created', 8px, true) + + .status-icon .is-rotating + width: 17px; + height: 17px; + line-height: 1; + h2, p margin: 0 font-size: $sb-font-size @@ -38,6 +52,7 @@ $sb-font-size: 14px .icon width: 1.3em height: 1.4em + vertical-align: middle .tabnav--sidebar font-size: $sb-font-size @@ -59,15 +74,12 @@ $sb-font-size: 14px color: $teal-light &:after bottom: -1px - @media (min-width: #{lower-bound($large-range)}) ul height: 2em - @media #{$xxlarge-up} li padding-right: 2em - @media (max-width: #{lower-bound($large-range)}) li display: block !important diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 5cb5ac5c..0970f434 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -138,7 +138,7 @@ $button-border-color: #d4d4d4 font-size: $font-size-small color: $white background-color: #CD3A36 - font-weight: 300; + font-weight: 300 padding: 4px 10px 2px &:focus, &:hover @@ -195,7 +195,6 @@ $button-border-color: #d4d4d4 &:hover @extend %icon-line-trigger-teal - %log-button display: inline-block height: 28px diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index b5ab43eb..7aed9ee2 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -28,15 +28,12 @@ background-image: inline-image('icons/sync-account-icon.svg') %icon-download-log - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-remove-log - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-arrow-down - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') - -.icon-tab-arrow - background-image: inline-image('svg/icon-tab-arrow.svg') .icon--search background-image: inline-image('svg/search.svg') @@ -93,37 +90,84 @@ @extend %icon @extend %icon-line-commit + +%icon-line-question + background-image: url('data:image/svg+xml;utf8,') +%icon-line-question-teal + background-image: url('data:image/svg+xml;utf8,') + +.icon-question + width: 1em + height: 1em + background: + repeat: no-repeat + position: 4px 2px + size: auto 10px + display: inline-block + border: solid 1px #E4E6E6 + border-radius: 50% + @extend %icon-line-question + &:hover + border-color: $teal + @extend %icon-line-question-teal + +%icon-line-hash + background-image: url('data:image/svg+xml;utf8,') +%icon-line-linux + background-image: url('data:image/svg+xml;utf8,') +%icon-line-mac + background-image: url('data:image/svg+xml;utf8,') +%icon-line-language + background-image: url('data:image/svg+xml;utf8,') +%icon-line-environment + background-image: url('data:image/svg+xml;utf8,') + %icon-line-cog - background-image: url('data:image/svg+xml;utf8,') -%icon-line-cog-white - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') +%icon-line-cog-teal + background-image: url('data:image/svg+xml;utf8,') %icon-line-dropdown - background-image: url('data:image/svg+xml;utf8,') -%icon-line-dropdown-white - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') +%icon-line-dropdown-teal + background-image: url('data:image/svg+xml;utf8,') %icon-line-codeclimate - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-codeclimate-teal - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-cross - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-cross-white - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-cross-teal - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-trigger - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-trigger-white - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-line-trigger-teal - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') %icon-github-circle - background-image: url('data:image/svg+xml;utf8,') + background-image: url('data:image/svg+xml;utf8,') + +.icon-github-circle + display: inline-block + width: 1.2em + height: 1.2em + margin-right: 0.3em + vertical-align: middle + background-repeat: no-repeat + @extend %icon-github-circle + +%icon-line-flag-teal + background-image: url('data:image/svg+xml;utf8,') +%icon-line-flag-yellow + background-image: url('data:image/svg+xml;utf8,') + .icon--plus &:after @@ -131,19 +175,6 @@ font-size: 16px color: #A6ADAD -.icon-arrow-down - width : 0 - height : 0 - display : inline-block - padding-top : 2px - margin-left : 5px - border-left : 5px solid transparent - border-right : 5px solid transparent - border-top : 5px solid $teal-dark - -.icon-flag - background-image: inline-image('svg/notice-flag.svg') - .icon-receiving margin: 0.3rem 0.5rem; display: inline-block; diff --git a/app/styles/app/modules/notice.sass b/app/styles/app/modules/notice.sass index 1b9ead64..5c4156a8 100644 --- a/app/styles/app/modules/notice.sass +++ b/app/styles/app/modules/notice.sass @@ -25,10 +25,11 @@ text-decoration: underline .icon-flag + display: inline-block + @extend %icon-line-flag-yellow display: inline-block background: - image: url('data:image/svg+xml;utf8,') - color: #40a3ad + color: #AF9112 size: auto 13px position: 6px 4px repeat: no-repeat diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index d6d8b6e8..4ab2352c 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -84,6 +84,6 @@ width: .7em height: 1.3em background: - size: 100% + size: auto 100% repeat: no-repeat - @extend .icon-tab-arrow + image: url('data:image/svg+xml;utf8,') diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass deleted file mode 100644 index 1c4a612a..00000000 --- a/app/styles/app/modules/tiles.sass +++ /dev/null @@ -1,149 +0,0 @@ - -.tile - border-radius: 4px - overflow: hidden - position: relative - padding: .8rem .8rem .8rem 3rem - background-color: $cream-light - p - margin: 0 - .icon - vertical-align: middle - .icon--lang - width: 1.2em - height: 0.9em - - &:not(.tile--jobs) - @include colorTiles($green-dark, 'passed') - @include colorTiles($red-dark, 'failed') - @include colorTiles($red-dark, 'errored') - @include colorTiles($grey-medium, 'canceled') - @include colorTiles(#bfb502, 'started', #e5da3f) - @include colorTiles(#bfb502, 'queued', #e5da3f) - @include colorTiles(#bfb502, 'booting', #e5da3f) - @include colorTiles(#bfb502, 'received', #e5da3f) - @include colorTiles(#bfb502, 'created', #e5da3f) - - .status-icon .is-rotating - width: 17px; - height: 17px; - line-height: 1; - - @media #{$medium-up} - height: 145px - - .tile-main - height: 100% - -.tile--small - margin-bottom: 1em - @media #{$medium-up} - height: 70px - overflow: hidden - -.tile--xs - margin-bottom: 0.35em - padding: .5em .4em .4em - @media #{$medium-up} - height: 36px - overflow: hidden - -.tile-main - h2, - small - margin: 0 - font-weight: 400 - font-size: $font-size-m - color: $grey-dark - line-height: 1 - small - margin-right: .3em - font-weight: 600 - a:hover - text-decoration: underline - -.tile-additional - position: relative - p, li - padding: .1em 0 - .icon - margin-right: .3em - height: 1.3em - vertical-align: middle - a - color: $grey-medium - &:hover - color: $grey-medium - text-decoration: underline - @media #{$small-only} - margin-top: 1em - @media #{$xlarge-up} - @include grid-column(3) - - -.tile-status - position: absolute - top: 0 - bottom: 0 - left: 0 - width: 2.5em - height: 100% - border-top-left-radius: 4px - border-bottom-left-radius: 4px - .icon - display: block - .icon-status - width: 1.1em - height: 1.2em - margin: .7em auto 1em - .icon.push - width: 1.4em - height: 1.1em - margin: -0.2em auto 0 - .icon.pull_request - width: 1.1em - height: 1.6em - margin: -0.5em auto 0 - .icon.api - margin: -0.4em 0.75em - .icon--job - @extend %absolute-center - -.tile-author - img - width: 22px - height: 22px - margin-right: .4em - vertical-align: top - border-radius: 50% - @media #{$medium-up} - position: absolute - bottom: 0 - -.tile--build - .tile-main - @media #{$small-only} - h2 - line-height: $line-height-m - margin-bottom: 1em - @media #{$medium-up} - white-space: nowrap - overflow: hidden - border-right: solid 1px $cream-dark - &:after - @include fadeOut(right, -90deg, $cream-light) - @media #{$xlarge-up} - @include grid-column(7) - .tile-additional - p - white-space: nowrap - @media #{$xlarge-up} - @include grid-column(5) - .icon.api - margin: -0.2em 0.75em - -p.tile-single-line - padding: .7em 0 - .icon--code - width: 1.3em - height: 1.1em diff --git a/app/styles/app/modules/tooltips.sass b/app/styles/app/modules/tooltips.sass index fb893cd5..af7ff79d 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -59,18 +59,7 @@ &:before left: 45% -.tooltip--jobs - @extend %tooltip - display: inline-block - position: relative - .tooltip-bubble - top: -4.5em - left: -1.9em - height: 3.7em - &:before - left: 15% - -.tooltip--settings +.tooltip-settings @extend %tooltip display: inline-block position: relative @@ -82,6 +71,7 @@ top: -4em left: -1.9em height: 3.2em + font-size: 12px &:before left: 2em @@ -93,3 +83,30 @@ &:before left: 2.5em +.tooltip-jobs + display: inline-block + position: relative + vertical-align: middle + @extend %tooltip + .tooltip-bubble + top: -3.8em + left: -.5em + height: 3.2em + padding: .3em .4em + font-size: 12px + &:before + left: 0.6em + .tooltip-trigger + vertical-align: baseline + +.tooltip.job-os + .tooltip-bubble + top: -2.2em + height: 1.6em + padding: 0.1em .4em + font-size: 12px + &:before + left: 0 + right: 0 + margin: auto + diff --git a/app/templates/components/build-header.hbs b/app/templates/components/build-header.hbs index e865fa5a..3088b78c 100644 --- a/app/templates/components/build-header.hbs +++ b/app/templates/components/build-header.hbs @@ -49,10 +49,10 @@

{{#if isJob}} {{#link-to "job" repo item}} - {{request-icon event=item.build.event_type state=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} + {{request-icon event=item.build.eventType state=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} {{else}} {{#link-to "build" repo item}} - {{request-icon event=item.event_type state=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} + {{request-icon event=item.eventType state=item.state}} #{{item.number}} {{humanize-state item.state}}{{/link-to}} {{/if}}