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}}