diff --git a/app/components/build-header.coffee b/app/components/build-header.coffee new file mode 100644 index 00000000..5448b23e --- /dev/null +++ b/app/components/build-header.coffee @@ -0,0 +1,28 @@ +`import Ember from 'ember'` +`import { gravatarImage } from 'travis/utils/urls'` +`import GithubUrlPropertievs from 'travis/mixins/github-url-properties'` +`import { durationFrom, safe } from 'travis/utils/helpers'` + +BuildHeaderComponent = Ember.Component.extend + + tagName: 'section' + classNames: ['build-header'] + classNameBindings: ['item.state'] + + urlCommitterGravatarImage: (-> + gravatarImage(@get('commit.committerEmail'), 40) + ).property('commit.committerEmail') + + urlAuthorGravatarImage: (-> + gravatarImage(@get('commit.authorEmail'), 40) + ).property('commit.authorEmail') + + isJob: (-> + if @get('item.build') then true else false + ).property('item') + + elapsedTime: (-> + durationFrom(@get('item.startedAt'), @get('item.finishedAt')) + ).property('item.startedAt', 'item.finishedAt', 'item.duration') + +`export default BuildHeaderComponent` diff --git a/app/components/builds-item.coffee b/app/components/builds-item.coffee index 52be7376..d836ec1c 100644 --- a/app/components/builds-item.coffee +++ b/app/components/builds-item.coffee @@ -3,8 +3,10 @@ `import { githubCommit as githubCommitUrl } from 'travis/utils/urls'` BuildsItemComponent = Ember.Component.extend + + tagName: 'li' classNameBindings: ['build.state'] - classNames: ['tile', 'tile--small', 'tile--build', 'row'] + classNames: ['row-li', 'pr-row'] urlAuthorGravatarImage: (-> gravatarImage(@get('build.commit.authorEmail'), 40) diff --git a/app/components/caches-item.coffee b/app/components/caches-item.coffee index 2b693580..c6fa0dbf 100644 --- a/app/components/caches-item.coffee +++ b/app/components/caches-item.coffee @@ -4,7 +4,7 @@ CachesItemComponent = Ember.Component.extend tagName: 'li' - classNames: ['tile', 'tile--xs', 'row'] + classNames: ['cache-item'] classNameBindings: ['cache.type'] isDeleting: false diff --git a/app/components/jobs-item.coffee b/app/components/jobs-item.coffee index eb87dcfc..77bc96e2 100644 --- a/app/components/jobs-item.coffee +++ b/app/components/jobs-item.coffee @@ -5,16 +5,7 @@ JobsItemComponent = Ember.Component.extend tagName: 'li' classNameBindings: ['job.state'] - classNames: ['tile', 'tile--jobs', 'row'] - - isAnimating: (-> - state = @get('job.state') - animationStates = ['received', 'queued', 'started', 'booting'] - - unless animationStates.indexOf(state) == -1 - true - - ).property('job.state') + classNames: ['jobs-item'] languages: (-> output = [] diff --git a/app/components/jobs-list.coffee b/app/components/jobs-list.coffee index 65e26d5d..9ecf3b2b 100644 --- a/app/components/jobs-list.coffee +++ b/app/components/jobs-list.coffee @@ -1,6 +1,10 @@ `import Ember from 'ember'` JobsListComponent = Ember.Component.extend + + tagName: 'section' + classNames: ['jobs'] + jobTableId: Ember.computed(-> if @get('required') 'jobs' diff --git a/app/components/repo-show-tabs.coffee b/app/components/repo-show-tabs.coffee index aa15b348..8bbf8e46 100644 --- a/app/components/repo-show-tabs.coffee +++ b/app/components/repo-show-tabs.coffee @@ -1,6 +1,11 @@ `import Ember from 'ember'` RepoShowTabsComponent = Ember.Component.extend + + tagName: 'nav' + classNames: ['tabnav'] + ariaRole: 'tablist' + # hrm. how to parametrize bind-attr? classCurrent: (-> 'active' if @get('tab') == 'current' diff --git a/app/components/repo-show-tools.coffee b/app/components/repo-show-tools.coffee index c5101af8..dd056154 100644 --- a/app/components/repo-show-tools.coffee +++ b/app/components/repo-show-tools.coffee @@ -4,18 +4,20 @@ RepoShowToolsComponent = Ember.Component.extend popup: Ember.inject.service() + classNames: ['settings-menu'] + classNameBindings: ['isOpen:display'] + isOpen: false + click: (event) -> - if $(event.target).is('a') && $(event.target).parents('.dropdown-menu').length + if $(event.target).is('a') && $(event.target).parents('.settings-dropdown').length @closeMenu() closeMenu: -> - $('.menu').removeClass('display') + @toggleProperty('isOpen') actions: menu: -> - @get('popup').close() - $('#tools .menu').toggleClass('display') - return false + @toggleProperty('isOpen') hasPermission: (-> if permissions = @get('currentUser.permissions') diff --git a/app/components/repos-list-item.coffee b/app/components/repos-list-item.coffee index af4ee542..e6c5da71 100644 --- a/app/components/repos-list-item.coffee +++ b/app/components/repos-list-item.coffee @@ -10,15 +10,11 @@ ReposListItemComponent = Ember.Component.extend Polling, pollModels: 'repo' classNames: ['repo'] - classNameBindings: ['color', 'selected'] + classNameBindings: ['selected'] selected: (-> @get('repo') == @get('selectedRepo') ).property('selectedRepo') - color: (-> - colorForState(@get('repo.lastBuildState')) - ).property('repo.lastBuildState') - scrollTop: (-> if (window.scrollY > 0) $('html, body').animate({scrollTop: 0}, 200) diff --git a/app/components/request-icon.coffee b/app/components/request-icon.coffee index 2d97aa28..1ac50c88 100644 --- a/app/components/request-icon.coffee +++ b/app/components/request-icon.coffee @@ -3,28 +3,23 @@ RequestIconComponent = Ember.Component.extend tagName: 'span' - classNames: ['icon-request', 'icon'] - classNameBindings: ['build.last_build.state', 'build.state'] + classNames: ['status-icon', 'icon'] + classNameBindings: ['event', 'state'] isPush: (-> - @get('build.last_build.event_type') == 'push' || - @get('build.event_type') == 'push' - ).property('build.last_build') + @get('event') == 'push' + ).property('event') isPR: (-> - @get('build.last_build.event_type') == 'pull_request' || - @get('build.event_type') == 'pull_request' - ).property('build.last_build') + @get('event') == 'pull_request' + ).property('event') isAPI: (-> - @get('build.last_build.event_type') == 'api' || - @get('build.event_type') == 'api' - ).property('build.last_build') + @get('event') == 'api' + ).property('event') isEmpty: (-> - true if @get('build.last_build') == null || @get('build') == null - ).property('build.last_build') - - + true if @get('event') == null || @get('event') == null + ).property('event') `export default RequestIconComponent` diff --git a/app/components/requests-item.coffee b/app/components/requests-item.coffee index a80b0d74..c0a4382f 100644 --- a/app/components/requests-item.coffee +++ b/app/components/requests-item.coffee @@ -2,7 +2,7 @@ `import config from 'travis/config/environment'` RequestsItemComponent = Ember.Component.extend - classNames: ['tile', 'tile--jobs', 'row'] + classNames: ['request-item'] classNameBindings: ['requestClass'] tagName: 'li' @@ -27,6 +27,10 @@ RequestsItemComponent = Ember.Component.extend 'Rejected' ).property('request.isAccepted') + hasBranchName: (-> + @get('request.branchName') + ).property('request') + message: (-> message = @get('request.message') if config.pro && message == "private repository" diff --git a/app/components/show-more-button.coffee b/app/components/show-more-button.coffee index 392824fe..744110ae 100644 --- a/app/components/show-more-button.coffee +++ b/app/components/show-more-button.coffee @@ -2,7 +2,7 @@ ShowMoreButtonComponent = Ember.Component.extend tagName: 'button' - classNames: ['button button--grey button--showmore'] + classNames: ['showmore-button'] classNameBindings: ['isLoading', 'showMore'] showMore: true attributeBindings: ['disabled'] diff --git a/app/components/status-icon.coffee b/app/components/status-icon.coffee index 5ba1a048..0a28162b 100644 --- a/app/components/status-icon.coffee +++ b/app/components/status-icon.coffee @@ -7,11 +7,11 @@ StatusIconComponent = Ember.Component.extend classNameBindings: ['status'] hasPassed: (-> - @get('status') == 'passed' + @get('status') == 'passed' || @get('status') == 'accepted' ).property('status') hasFailed: (-> - @get('status') == 'failed' + @get('status') == 'failed' || @get('status') == 'rejected' ).property('status') hasErrored: (-> diff --git a/app/controllers/build.coffee b/app/controllers/build.coffee index b25d61b1..6470f9a0 100644 --- a/app/controllers/build.coffee +++ b/app/controllers/build.coffee @@ -21,14 +21,6 @@ Controller = Ember.Controller.extend GithubUrlPropertievs, @get('build.isLoading') ).property('build.isLoading') - urlCommitterGravatarImage: (-> - gravatarImage(@get('commit.committerEmail'), 40) - ).property('commit.committerEmail') - - urlAuthorGravatarImage: (-> - gravatarImage(@get('commit.authorEmail'), 40) - ).property('commit.authorEmail') - buildStateDidChange: (-> if @get('sendFaviconStateChanges') @send('faviconStateDidChange', @get('build.state')) diff --git a/app/controllers/repo.coffee b/app/controllers/repo.coffee index 6ae60aa3..4c4be4cd 100644 --- a/app/controllers/repo.coffee +++ b/app/controllers/repo.coffee @@ -5,6 +5,8 @@ Controller = Ember.Controller.extend needs: ['repos', 'currentUser', 'build', 'job'] currentUserBinding: 'controllers.currentUser.model' + classNames: ['repo'] + build: Ember.computed.alias('controllers.build.build') job: Ember.computed.alias('controllers.job.job') diff --git a/app/models/build.coffee b/app/models/build.coffee index 27ff2c8d..621305bf 100644 --- a/app/models/build.coffee +++ b/app/models/build.coffee @@ -24,7 +24,6 @@ Build = Model.extend DurationCalculations, jobs: DS.hasMany('job', async: true) config: (-> - console.log('config') if config = @get('_config') compact(config) else if @get('currentState.stateName') != 'root.loading' diff --git a/app/styles/app.scss b/app/styles/app.scss index c44215bc..d4e03f6b 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"; @@ -43,21 +42,21 @@ @import "app/modules/memberlist"; @import "app/modules/forms"; @import "app/modules/notice"; +@import "app/modules/build-header"; @import "app/layout"; @import "app/layouts/dashboard"; @import "app/layouts/error"; @import "app/layouts/footer"; -@import "app/layouts/buildheader"; -@import "app/layouts/build-job"; -@import "app/layouts/sidebar"; -@import "app/layouts/build-job"; @import "app/layouts/sidebar"; @import "app/layouts/profile"; @import "app/layouts/top"; @import "app/layouts/owner"; @import "app/layouts/branches"; @import "app/layouts/broadcasts"; +@import "app/layouts/repo"; +@import "app/layouts/jobs"; +@import "app/layouts/pull-requests"; @import "app/layouts/requests"; @import "app/layouts/caches"; diff --git a/app/styles/app/_mixins/colors.sass b/app/styles/app/_mixins/colors.sass index eb27c7b4..74987765 100644 --- a/app/styles/app/_mixins/colors.sass +++ b/app/styles/app/_mixins/colors.sass @@ -1,128 +1,27 @@ -$brighten-1: rgba(255, 255, 255, 0.05) -$brighten-2: rgba(255, 255, 255, 0.15) -$black: #000 +$teal: #40a3ad +$green: #44a662 +$yellow: #e5da3f +$red: #d94341 +$grey: #666 + +$grey-light: #f1f1f1 + +$teal-light: $teal +$teal-dark: $teal +$green-dark: $green +$red-dark: $red $white: #fff +$color-text: $grey -$green: #038035 -$green-lighter: #368c2a -$green-light-1: #dcffdc -$green-light-3: #fafffa - -$red: #cc0000 -$red-lighter: #cc3d3d -$red-medium-1: #c7371a -$red-light-1: #ffdcdc -$red-light-3: #fffafa - -$yellow: #e7d100 -$yellow-lighter: #e7d100 -$yellow-light-1: #ffffe1 -$yellow-light-2: #fffcf4 - -$gray-dark-1: #333 -$gray-dark-2: #444 -$gray-dark-3: #666 -$gray-dark-4: #777 -$gray-medium-1: #999 -$gray-medium-2: #aaa -$gray-medium-3: #c4cbcc -$gray-light-1: #ddd -$gray-light-2: #efefef -$gray-light-3: #f2f2eb -$gray-light-4: #fdfdfd - -$green-light: #73c78d -$green-dark: #3FA75F -$red-light: #D7625F -$red-dark: #DB423C -$teal-light: #63A4A3 -$teal-dark: #5BA5A4 - -$slate-blue-1: #e1e2e6 -$slate-blue-2: #e5e8ee -$slate-blue-3: #f2f4f9 -$slate-blue-4: #fafbfc -$slate-yellow-1: #7f7f75 -$slate-yellow-2: #bab9a7 - - -$color-text: $gray-dark-3 -$color-text-light: $gray-medium-1 -$color-text-lighter: $gray-medium-2 -$color-text-log: #F1F1F1 - -$color-link: $gray-dark-3 -$color-link-highlight: $red-medium-1 -$color-link-sponsor: #575c7c -$color-link-top: $gray-medium-3 -$color-link-top-highlight: #ADC7D0 -$color-link-disabled: $gray-medium-1 - -$color-bg-dark: $slate-blue-2 -$color-bg-light: $gray-light-1 -$color-bg-input: $white -$color-bg-link-top: $black -$color-bg-dropdown: #40454f -$color-bg-dropdown-highlight: #30343b -$color-bg-pre: $gray-light-2 -$color-bg-tab: $gray-light-3 -$color-bg-tab-hover: $white -$color-bg-tab-active: $white -$color-bg-log: #222222 -$color-bg-log-fold: $gray-dark-1 -$color-bg-log-hover: $gray-dark-2 -$color-bg-log-highlight: $gray-dark-3 -$color-bg-log-fold-highlight: $gray-dark-4 -$color-bg-slider: $slate-blue-3 -$color-bg-left: #fbfbfa -$color-bg-list-odd: $white -$color-bg-list-even: $gray-light-3 -$color-bg-hooks-odd: $slate-blue-4 -$color-bg-hooks-even: $white -$color-bg-menu: $gray-light-4 -$color-bg-menu-hover: $gray-light-3 -$color-bg-tools-pane: $slate-blue-3 -$color-bg-right: $slate-blue-3 -$color-bg-sidebar-box: $white - -$color-border-normal: $gray-medium-3 -$color-border-light: $gray-light-1 -$color-border-log: $gray-light-1 -$color-border-slider-normal: $slate-blue-2 -$color-border-slider-light: $gray-medium-1 -$color-border-slider-hover: $slate-blue-1 - -$color-text-status-passed: $green -$color-bg-status-passed: $green-lighter -$color-text-status-failed: $red -$color-bg-status-failed: $red-lighter -$color-text-status-pending: $color-link -$color-bg-status-pending: $yellow-lighter -$color-text-status-gray: $color-link -$color-bg-status-gray: $gray-medium-2 - -$color-bg-status-waiting: $green-lighter -$color-bg-status-errored: $red-lighter -$color-bg-status-stopped: $gray-medium-1 - -$color-bg-job: $yellow-light-2 -$color-bg-job-highlight: $yellow-light-1 -$color-bg-job-passed: $green-light-3 -$color-bg-job-passed-highlight: $green-light-1 -$color-bg-job-failed: $red-light-3 -$color-bg-job-failed-highlight: $red-light-1 -$color-bg-job-gray: $gray-light-4 -$color-bg-job-gray-highlight: $gray-light-3 - -$color-bg-list-info: $yellow-light-2 -$color-text-list-info: $slate-yellow-1 -$color-shadow-list-info: $slate-yellow-2 - -$color-bg-flash-success: #7ea35a -$color-bg-flash-notice: #a57829 -$color-bg-flash-error: #a53230 -$color-bg-flash-broadcast: #55777f +$color-text-log: $grey-light +$color-bg-log-hover: #444 +$color-bg-log-highlight: $grey +$color-bg-log-fold: #333 +$color-bg-log-fold-highlight: #777 +$color-bg-pre: #efefef +$color-border-light: #ddd +$color-link: $grey $ansi-black: #4E4E4E $ansi-black-bold: #7C7C7C diff --git a/app/styles/app/_mixins/fonts.sass b/app/styles/app/_mixins/fonts.sass index ab3fc7c2..bab1b795 100644 --- a/app/styles/app/_mixins/fonts.sass +++ b/app/styles/app/_mixins/fonts.sass @@ -10,6 +10,8 @@ $font-size-tiniest: 10px $line-height: 22px $line-height-log: 19px +$font-weight-light: 300 $font-weight-normal: 400 +$font-weight-bold: 600 $top-height: 55px \ No newline at end of file diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index 5280c306..f4fe8390 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -40,45 +40,41 @@ %inline-block display: inline-block -%helptext - font-size: $font-size-m - color: $grey-medium - a - color: $grey-dark - text-decoration: none - &:hover - text-decoration: underline - %section-title font-size: $font-size-sm color: $grey-medium font-weight: 400 -// @todo simplyfiy coloring mixins +=linkStyle + a + text-decoration: none + border-bottom: 1px solid #bfc0c1 + padding-bottom: 0.1em + transition: color 200ms ease, border 200ms ease + &:hover, + &:active + color: #303030 + text-decoration: none + border-color: transparent -@mixin colorStatusIcons($color, $status) +%helptext + font-size: $font-size-m + color: $grey-medium + +linkStyle + +.helptext + @extend %helptext + +// @todo simplyfiy coloring mixins +=colorStatusIcons($color, $status) .status-icon.#{$status} - svg g > * + svg * fill: $color -@mixin colorTiles($color, $status, $extra-bg: $color) +=statusColors($color, $status, $width, $color2: $color, $building:false) &.#{$status} - border-color: $extra-bg - .tile-status - background-color: $color - .repo-header-title a, - .repo-build-status a, - .build-status a, - .tile-header, - .tile-header a, - .tile-title a - color: $color - @include colorStatusIcons($color, $status) - -@mixin statusColors($color, $status, $color2: $color) - &.#{$status} - background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat + background: linear-gradient(to right, $color2 0%, $color2 $width, white $width, white 100%) no-repeat .row-name, .row-request a, .row-color a @@ -97,3 +93,32 @@ .build-status color: $color @include colorStatusIcons($color, $status) + @include colorLinks($color, $status, $building) + +=colorBg($color, $status, $width, $color2: white) + &.#{$status} + background: linear-gradient(to right, $color 0%, $color $width, $color2 $width, $color2 100%) no-repeat + +=colorLinks($color, $status, $building: false) + @if $building + .#{$status}, + .#{$status} a, + color: #beab04 + @else + .#{$status}, + .#{$status} a, + color: $color + +=colorRows($color, $status, $width, $is-building: false) + @include colorBg($color, $status, $width) + @include colorLinks($color, $status, $is-building) + @include colorStatusIcons($color, $status) + +=colorJobs($color, $status, $width, $hover, $is-building: false) + &.#{$status} + @include colorLinks($color, $status, $is-building) + @include colorStatusIcons($color, $status) + &:hover, + &:active + @include colorBg($color, $status, $width, $hover) + diff --git a/app/styles/app/base.sass b/app/styles/app/base.sass index eeb1c84b..f2f13c1f 100644 --- a/app/styles/app/base.sass +++ b/app/styles/app/base.sass @@ -1,2 +1,14 @@ + +html, +body + line-height: 1.45 !important + strong font-weight: 400 + +a + color: $grey + text-decoration: none + &:hover, + &:active + text-decoration: none diff --git a/app/styles/app/layout.sass b/app/styles/app/layout.sass index 014a1754..e4027df0 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 @@ -92,16 +97,3 @@ width: grid-calc(31, 36) margin-left: grid-calc(5, 36) - -.travis-lint - background-color: $travis-lint-bg - width: 100% - color: $travis-lint-color - margin: 10px 0 36px 0 - p - padding: 10px - font-weight: bold - margin: 0 - a - margin-left: 5px - diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index 1b7969a4..308119b7 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -5,15 +5,6 @@ .branch-row - .avatar - display: inline-block - width: 16px - height: 16px - margin-right: .7em - border-radius: 50% - vertical-align: middle - background-color: #E9EBEB - @media #{$medium-up} display: flex justify-content: space-between diff --git a/app/styles/app/layouts/build-job.sass b/app/styles/app/layouts/build-job.sass deleted file mode 100644 index 8d431a02..00000000 --- a/app/styles/app/layouts/build-job.sass +++ /dev/null @@ -1,129 +0,0 @@ - -@mixin colorJobs($color, $color-bg) - .job-id - color: $color - &:hover - background-color: $color-bg - .job-anchor, - .job-env, - .job-lang - background-color: $color-bg - .job-env - &:after - content: none - .job-anchor, - .job-lang - &:after - @include fadeOut(right, -90deg, $color-bg) - -.job-anchor - position: relative - -.build-title - .icon--question - width: 1.3em; - height: 1.3em; - transform: translate(0.3em, 0.2em); - cursor: pointer - -// job matrix -.tile--jobs - @extend .tile--xs - font-size: $font-size-sm - padding-left: 3.5rem - p - white-space: normal - a - color: $grey-medium - .tile-status--job - width: 2em - - .svg-booting - margin: 0.7em 0.3em - - .jobs-item - padding: .1em 0 - .icon - height: 1.2em - margin-right: .1em - .job-os .icon - height: 1.3em - .icon--lang - height: 1em - width: 1.4em - .icon--env - width: 1.1em - .icon.api - height: 1.5em - - @media #{$medium-up} - height: 36px - p - white-space: nowrap - .icon--lang, - .icon--env - margin-right: .4em - .jobs-item - position: relative - float: left - white-space: nowrap - padding: 0 - overflow: hidden - .job-id - width: grid-calc(3, 24) - border-right: solid 1px $cream-dark - .job-os - width: grid-calc(1, 24) - text-align: center - .job-lang - width: grid-calc(6, 24) - &:after - @include fadeOut(right, -90deg, $cream-light) - .job-anchor - width: grid-calc(14, 24) - &:after - @include fadeOut(right, -90deg, $cream-light) - z-index: 999 - .job-env - min-width: grid-calc(16, 24) - width: grid-calc(16, 24) - &:after - @include fadeOut(right, -90deg, $cream-light) - &:hover - position: absolute - width: auto - padding-right: 1em - z-index: 88 - .job-duration - width: grid-calc(8, 24) - max-width: 165px - float: right - - @media #{$xlarge-up} - .job-id - width: grid-calc(2, 24) - .job-os - margin: 0 1em - .job-lang - width: grid-calc(4, 24) - margin-right: 2em - - &.failed, - &.errored - @include colorJobs($fail-color, #fbebe6) - &.passed - @include colorJobs($pass-color, #e5efe4) - &.canceled - @include colorJobs($cancel-color, #e5e5e5) - &.started, - &.created, - &.received, - &.queued - @include colorJobs($created-color, #f4efd8) - -.is-empty - opacity: .5 - -.jobs-list - @include resetul - diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass deleted file mode 100644 index 421ccc42..00000000 --- a/app/styles/app/layouts/buildheader.sass +++ /dev/null @@ -1,152 +0,0 @@ - -.repo - font-size: $font-size-m - color: $grey-medium - -.repo-header - header - margin: .5rem 0 2.6rem - > * - vertical-align: middle - -.repo-header-title - @extend %inline-block - margin: 0 - font-weight: 400 - font-size: 35px - line-height: 1 - a - color: $grey-dark - &:hover - text-decoration: underline - -.repo-header-icons - line-height: 1 - vertical-align: middle - a - @extend %inline-block - height: 1.7em - margin-left: .7em - .icon - width: 1.5em - height: 100% - position: relative - top: 0.65em - - @media #{$medium-up} - @extend %inline-block - -.repo-menus - @media #{$medium-up} - .dropdown - position: absolute - top: -0.8em - right: 0 - z-index: 50 - .tabnav - position: absolute - top: -0.4em - .repo-menu-header - position: relative - height: 1.6em - margin-bottom: 1em - border-bottom: solid $cream-dark 2px - -.repo-main - .button--showmore - margin-top: 2em - .build-title - margin-top: 2.5rem - font-size: $font-size-sm - font-weight: 400 - & span:hover + .tooltip - display: block - -.repo-main-commit - position: relative - padding-bottom: 0.5em - font-weight: 400 - color: $grey-dark - &, - small - margin: 0 - font-size: $font-size-m - line-height: 1 - small - margin-right: .3em - font-weight: 600 - @media #{$medium-up} - white-space: nowrap - overflow: hidden - &:after - @include fadeOut(right, -90deg, $cream-light) - -.repo-main-description - p - margin: 0 - @media #{$medium-up} - position: relative - height: 4.9em - overflow: hidden - &:after - @include fadeOut(bottom, 0deg, $cream-light) - - .body - display: block - font-size: 13px - font-family: Monaco, monospace - margin-top: 0.6em - overflow: hidden - word-break: break-word - white-space: pre-wrap - -.repo-main-info - @include resetul - position: relative - padding-right: 2em - margin-right: 1.4em - border-right: $cream-dark 1px solid - line-height: $line-height-m - overflow: hidden - &:after - @include fadeOut(right, -90deg, $cream-light) - white-space: nowrap - &:hover - text-decoration: underline - li - white-space: nowrap - -.repo-main-tools - position: absolute - top: 0 - bottom: 0 - right: 0 - a - display: block - margin-bottom: .5em - background-color: $grey-lighter - line-height: 24px - &:hover - background-color: darken($grey-medium, 10) - .icon--trigger - width: 15px - height: 19px - margin-left: 6px - .icon--cancel - width: 16px - height: 16px - margin-left: 6px - .icon--codeclimate - width: 1.2em - height: 1.1em - margin-left: 4px - -.build-os.linux - text-transform: capitalize -.build-os.osx - text-transform: uppercase - -.build-list - padding: 0 - margin: 0 - diff --git a/app/styles/app/layouts/caches.sass b/app/styles/app/layouts/caches.sass index a2651660..251dec90 100644 --- a/app/styles/app/layouts/caches.sass +++ b/app/styles/app/layouts/caches.sass @@ -1,67 +1,100 @@ -.caches - @include resetul - margin-top: 1rem - font-size: $font-size-sm - color: $grey-medium - clear: both - - .tile-xs - padding-left: 0 - - - .push - .icon--grey - @extend .icon--grey.push - width: 1.2em; - height: 0.8em; - .pull_request - .icon--grey - @extend .icon--grey.pull_request - width: 1em; - height: 1.5em; - - .icon--grey - margin-right: .3em - - .button--delete - transform: translateY(-0.2em); - - @media #{$medium-up} - .caches-branch - position: relative - overflow: hidden - width: grid-calc(4, 13) - &:after - content: "" - @include fadeOut(right, -90deg, $cream-light) - .caches-date - width: grid-calc(4, 13) - .caches-size - width: grid-calc(4, 13) - .caches-button - text-align: right - width: grid-calc(1, 13) - -.delete-repo-caches - margin-top: 1rem .caches-header - overflow: auto - .build-title - float: left - margin: 1.1em 0 .5em - a:hover - text-decoration: underline - .button--delete - float: right + .small-title + margin-top: .5em + small + color: $grey + font-size: 14px + a:hover, + a:active + border-bottom: 1px solid $grey -.caches-helptext - @extend %helptext + @media #{$medium-up} + display: flex + flex-flow: row wrap + justify-content: space-between + align-items: center -.caches-title - @extend %helptext - @extend %section-title - @include clearfix - float: left - margin: 1em 0 .5em +.caches-list + padding: 0 + margin: 0 + list-style: none + +.cache-item + border: 1px solid $cream-dark + margin-bottom: 5px + font-size: 15px + padding: 0 1em + .status-icon + width: 1.5em + height: 1.5em + vertical-align: middle + .icon-scale + width: 1.2em + height: 1.2em + vertical-align: middle + margin-right: .3em + &:hover, + &:active + background-color: #F5F5F5 + + @media #{$medium-up} + display: flex + justify-content: space-between + flex-flow: row wrap + align-items: center + padding: .3em 0 + white-space: nowrap + .row-item:first-of-type + flex: 1 0 30% + padding-left: 1em + .row-item:nth-of-type(2) + flex: 1 0 30% + .row-item:nth-of-type(3) + flex: 1 0 30% + .row-item:last-of-type + flex: 0 0 50px + padding-right: 1em + +.delete-cache-button + padding-right: 3.1em + font-size: 15px + background: + size: auto 17px + position: 90% 0 + repeat: no-repeat + @extend %icon-line-trashcan + &:hover, + &:active + color: $red + @extend %icon-line-trashcan-red + +.delete-cache-icon + position: relative + display: inline-block + .tooltip + pointer-events: none + .icon-trash + display: inline-block + height: 17px + padding-left: 1.7em + background: + size: auto 100% + repeat: no-repeat + @extend %icon-line-trashcan + &:hover, + &:active + color: $red + .icon-trash + @extend %icon-line-trashcan-red + @media #{$medium-up} + .tooltip + pointer-events: inherit + .icon-trash + width: 50px + padding-left: 0 + text-indent: 999% + white-space: nowrap + overflow: hidden + background-position: 50% 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 new file mode 100644 index 00000000..5bbbb43e --- /dev/null +++ b/app/styles/app/layouts/jobs.sass @@ -0,0 +1,180 @@ +=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: 15px + +.jobs-item + border: 1px solid $cream-dark + margin-bottom: 5px + @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, #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 + @media #{$medium-up} + display: flex + flex-flow: row nowrap + 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 + +.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/pull-requests.sass b/app/styles/app/layouts/pull-requests.sass new file mode 100644 index 00000000..f3197733 --- /dev/null +++ b/app/styles/app/layouts/pull-requests.sass @@ -0,0 +1,53 @@ +.build-list + padding: 0 + margin: 0 + list-style: none + +.pr-row + @media #{$medium-up} + display: flex + justify-content: space-between + flex-flow: row wrap + align-items: center + + .two-line + padding: 0 + margin: .4em 0 + .row-item:not(.build-info) + display: block + + .row-committer + padding-left: 1.6em + margin-bottom: 0 + + .build-info + display: flex + flex-flow: row wrap + align-items: baseline + + .row-branch + flex: 1 0 18% + position: relative + overflow: hidden + &:after + content: "" + +fadeOut(right, -90deg, $white) + &:hover + overflow: visible + &:after + content: none + a + background-color: white + + .row-message + padding-left: 1.6em + flex: 1 1 50% + + .two-line:first-of-type + flex: 0 0 55% + padding-left: .5em + border-right: 1px solid $cream-dark + .two-line:nth-of-type(2) + flex: 0 0 20% + .two-line:last-of-type + flex: 0 0 20% diff --git a/app/styles/app/layouts/repo.sass b/app/styles/app/layouts/repo.sass new file mode 100644 index 00000000..a8ccb4e8 --- /dev/null +++ b/app/styles/app/layouts/repo.sass @@ -0,0 +1,120 @@ + +.repo-header + header + @media #{$medium-up} + display: flex + flex-flow: row wrap + justify-content: flex-start + align-items: center + + .repo-title + margin: 0 + font-size: 36px + font-weight: $font-weight-normal + a + color: #808080 + border-bottom: 2px solid transparent + transition: border-color 100ms ease + &:hover, + &:active + border-color: #808080 + +.repo-gh + width: 28px + height: 28px + flex: 0 0 28px + margin: 0 1.2em + overflow: hidden + text-indent: 999% + white-space: nowrap + a + @extend %icon-github-circle + display: block + height: 100% + background: + size: 100% + repeat: no-repeat + +.repo-navigation + margin: 1.9em 0 1.2em + @media #{$medium-up} + display: flex + flex-flow: row-reverse wrap + justify-content: space-between + border-bottom: 2px #f1f1f1 solid + + +$dropdown-button-height: 30px +$dropdown-button-margin: -9px + +.settings-button + display: block + height: $dropdown-button-height + padding: 0 0.7em 0 2.3em + background: + color: white + repeat: no-repeat + size: auto 14px + position: 11px 7px + border: 1px solid #f1f1f1 + color: $grey-light + border-radius: 2px + text-align: center + line-height: 2 + font-size: 14px + @extend %icon-line-cog + &:after + content: "" + display: inline-block + width: 0.9em + height: 0.6em + margin-left: 1em + background: + size: 100% + repeat: no-repeat + @extend %icon-line-dropdown + &:hover, + &:active, + // .display &, + .settings-menu:hover & + color: $teal + border-color: $teal + @extend %icon-line-cog-teal + &:after + @extend %icon-line-dropdown-teal + @media #{$medium-up} + margin-top: $dropdown-button-margin + +.settings-dropdown + display: none + position: absolute + top: $dropdown-button-height + ($dropdown-button-margin * .8) + width: 100% + padding: 0 + margin: 6px 0 0 + list-style: none + z-index: 60 + background-color: white + border: 1px solid $teal + a + display: block + padding: .4em 1em .5em 2.4em + font-size: 14px + color: $teal + &:hover + color: white + background-color: $teal + @media #{$medium-up} + margin-top: -3px + +.settings-menu + position: relative + @media #{$small-only} + &.display + .settings-dropdown + display: block + @media #{$medium-up} + &:hover + .settings-dropdown + display: block + diff --git a/app/styles/app/layouts/requests.sass b/app/styles/app/layouts/requests.sass index ac331376..d93b85ec 100644 --- a/app/styles/app/layouts/requests.sass +++ b/app/styles/app/layouts/requests.sass @@ -1,58 +1,67 @@ -@mixin colorRequests($color-bg) - &:hover - background-color: $color-bg - .requests-commit, - .requests-branch, - .requests-message, - .requests-time - &:after - @include fadeOut(right, -90deg, $color-bg, 30%) - +=requestFadeOut($status, $color) + @media #{$medium-up} + &.#{$status}:hover + .status-icon.api + svg + background-color: $color + .fade-out + &:after + @include fadeOut(right, -90deg, $color) .requests - @include resetul + padding: 0 + margin: 0 + list-style: none - .accepted:hover - @include colorRequests(#e5efe4) - .rejected:hover - @include colorRequests(#fbebe6) +.request-item + border: 1px solid $cream-dark + margin-bottom: 5px + font-size: 15px + padding-left: 1em + @include colorJobs($green, 'accepted', 6px, rgba($green, .1)) + @include colorJobs($red, 'rejected', 6px, rgba($red, .1)) - margin-top: 2.5rem - color: #969496 - a:hover + @include requestFadeOut('accepted',#ECF6EF) + @include requestFadeOut('rejected', #FBECEB) + + strong + font-weight: $font-weight-bold + margin-right: .5em + + .status-icon + width: 1.3em + height: 1.3em + vertical-align: middle + &.api + width: 1.2em !important + + a:hover, + a:active text-decoration: underline - - .requests-commit, - .requests-branch, - .requests-message, - .requests-time - position: relative - &:after - content: "" - @include fadeOut(right, -90deg, $cream-light, 30%) - - .requests-time - @media #{$medium-up} - padding-left: 2em - border-left: 1px solid $cream-dark - - .tile--jobs - padding-left: 2.5em - - .icon.push - width: 1.2em - height: .8em - .icon.pull_request - height: 1.5em @media #{$medium-up} - .requests-time - width: grid-calc(4, 24) - .requests-branch - width: grid-calc(4, 24) - .requests-commit - width: grid-calc(9, 24) - .requests-build - width: grid-calc(2, 24) - .requests-message - width: grid-calc(5, 24) + display: flex + justify-content: space-between + flex-flow: row wrap + align-items: center + padding: .3em 0 + white-space: nowrap + .row-item + overflow: hidden + + .row-item:first-of-type + flex: 0 0 3em + padding-left: .7em + border-right: 1px solid $cream-dark + .row-item:nth-of-type(2) + flex: 1 0 15% + padding-left: 1em + .row-item:nth-of-type(3) + flex: 0 0 15% + .row-item:nth-of-type(4) + flex: 1 0 30% + .row-item:nth-of-type(5) + flex: 0 0 8% + .row-item:last-of-type + flex: 0 0 20% + diff --git a/app/styles/app/layouts/settings.sass b/app/styles/app/layouts/settings.sass index 6ddaabca..11446efa 100644 --- a/app/styles/app/layouts/settings.sass +++ b/app/styles/app/layouts/settings.sass @@ -53,17 +53,18 @@ box-shadow: none %settings-row - padding: .6em .5em border-radius: 4px background-color: #F6F5F5 @media #{$medium-up} - height: 47px + height: 36px .settings-envvar @extend %settings-row + padding: .4em .5em .settings-sshkey @extend %settings-row + padding: .6em .5em display: block margin-bottom: 1rem overflow: hidden @@ -78,6 +79,7 @@ vertical-align: middle overflow: hidden white-space: nowrap + color: #8e8f8e &:after content: "" @include fadeOut(right, -90deg, #F6F5F5) @@ -104,7 +106,6 @@ width: grid-calc(6, 12) margin-bottom: 0 - %settings-value-section display: inline-block vertical-align: middle @@ -133,7 +134,7 @@ input display: inline-block width: 100% - padding: 0.7em 0.5em 0.7em 2.6em + padding: 0.6em 0.5em 0.7em 1.1em border-radius: 4px border: none background-color: #eeedec @@ -146,7 +147,7 @@ .is-public & input background-image: none; - padding: 0.4em 0 0.5em 0.9em; + padding: 0.3em 0 0.4em 0.9em; font-size: 14px; %settings-action-section @@ -161,7 +162,7 @@ @extend .icon-delete width: 1.1em height: 1.6em - background-position: 0 4px + background-position: 0 2px &:hover .icon-delete @extend .icon-delete-hover diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass index 1e133d45..4510cceb 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 @@ -47,7 +62,7 @@ $sb-font-size: 14px .active a:after, a:hover:after - bottom: -3px + bottom: -1px .icon--plus &:after @@ -58,18 +73,12 @@ $sb-font-size: 14px .icon--plus:after color: $teal-light &:after - bottom: -2px - + bottom: -1px + li + margin-right: 0.8em @media (min-width: #{lower-bound($large-range)}) ul height: 2em - li - padding-right: 1em - - @media #{$xxlarge-up} - li - padding-right: 2em - @media (max-width: #{lower-bound($large-range)}) li display: block !important @@ -78,7 +87,6 @@ $sb-font-size: 14px padding: 0 0 .35em margin-bottom: .8em - .sidebar-list margin-top: 1.4rem color: $grey-medium diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass index ab9d88f1..890dff13 100644 --- a/app/styles/app/main/log.sass +++ b/app/styles/app/main/log.sass @@ -13,7 +13,16 @@ .tail-label display: none + padding: 0.1em 0.5em 0.1em 1.5em cursor: pointer + background: + color: #777777 + repeat: no-repeat + size: auto 12px + position: 6px 4px + border-radius: 2px + color: #f1f1f1 + @extend %icon-arrow-down &:hover .tail-label @@ -35,14 +44,14 @@ height: 20px; width: 20px; vertical-align: middle - background-color: #696867; + background-color: $grey-light border-radius: 50%; &:after content: "" display: block height: 10px; width: 10px; - background: #F2F2F2; + background: #f1f1f1; border-radius: 50%; @extend %absolute-center @@ -62,16 +71,6 @@ color: #999 background: inline-image('ui/workers-close.svg') no-repeat right 6px - .icon - width: 1.3em - height: 1.1em - margin-right: 6px - vertical-align: middle - .icon--down - width: 0.7em - height: 0.9em - margin-right: 4px - .log-header height: 44px margin: 0 @@ -84,6 +83,12 @@ .log-body position: relative + max-height: 20vh + overflow: scroll + @media #{$medium-up} + max-height: none + overflow: auto + pre clear: left min-height: 42px @@ -97,7 +102,6 @@ background-color: #2a2a2a counter-reset: line-numbering margin-top: 0 - @extend %border-bottom-4px .cut padding: 20px 15px 0 55px diff --git a/app/styles/app/misc.sass b/app/styles/app/misc.sass index 414a75c8..c5a3dc47 100644 --- a/app/styles/app/misc.sass +++ b/app/styles/app/misc.sass @@ -19,7 +19,6 @@ color: #c00 text-decoration: underline - .small-title font-size: 18px color: $teal-light @@ -27,3 +26,8 @@ .blank-list @include resetul + +.monospace + font-family: Monaco, monospace + font-size: 13px + line-height: 1 diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass new file mode 100644 index 00000000..90a14468 --- /dev/null +++ b/app/styles/app/modules/build-header.sass @@ -0,0 +1,123 @@ +.build-header + font-size: 16px + border: 1px solid $cream-dark + clear: both + + @include colorRows($green, 'passed', 12px) + @include colorRows($red, 'failed', 12px) + @include colorRows($red, 'errored', 12px) + @include colorRows($grey, 'canceled', 12px) + @include colorRows($yellow, 'started', 12px, true) + @include colorRows($yellow, 'queued', 12px, true) + @include colorRows($yellow, 'booting', 12px, true) + @include colorRows($yellow, 'received', 12px, true) + @include colorRows($yellow, 'created', 12px, true) + + @media #{$medium-up} + display: flex + flex-flow: row no-wrap + justify-content: space-between + + a:hover, + a:active + text-decoration: underline + +.build-commit, +.build-tools + padding-left: 2rem + +.build-commit + font-size: 16px + @media #{$medium-up} + flex: 1 1 65% + padding-left: 2.5rem + +.build-tools + padding: 1rem 0 1rem 3rem + overflow: auto + @media #{$medium-up} + flex: 0 0 40px + padding: 1rem 0 0 + +.build-info + font-size: 15px + padding-left: 3rem + @media #{$medium-up} + flex: 1 1 35% + +.build-title, +.build-status + margin: 1rem 0 + padding-left: 1rem + font-weight: $font-weight-normal + font-size: 16px + + .status-icon + width: 1.7rem + height: 1.8rem + vertical-align: middle + +.build-title + .status-icon + margin-left: -2rem + +.commit-info + font-size: 15px + padding-left: 1rem + +.commit-branch + margin-right: .5em + font-weight: $font-weight-bold + font-size: 16px + +.build-status + padding-left: 0 + +.commit-author + margin: 1rem 0 .7rem + img + width: 20px + height: 20px + margin-right: .5em + border-radius: 50% + +.commit-description + margin: 1rem 0 + +.list-icon + padding: 0 + margin: 1rem 0 + list-style: none + line-height: 1.7 + + .commit-commit, + .commit-compare + @extend %icon-line-commit + padding-left: 1.7em + background: + size: auto 23px + repeat: no-repeat + position: -11px -1px + .commit-clock + @extend %icon-line-clock + padding-left: 1.7em + margin-bottom: 1rem + background: + size: auto 22px + repeat: no-repeat + position: 0 2px + .commit-calendar + @extend %icon-line-calendar + padding-left: 1.7em + background: + size: auto 20px + repeat: no-repeat + position: 1px 3px + .commit-stopwatch + @extend %icon-line-stopwatch + padding-left: 1.7em + background: + size: auto 18px + repeat: no-repeat + position: 4px 3px + diff --git a/app/styles/app/modules/buttons.sass b/app/styles/app/modules/buttons.sass index 72d14d9b..9b51f96b 100644 --- a/app/styles/app/modules/buttons.sass +++ b/app/styles/app/modules/buttons.sass @@ -35,19 +35,6 @@ $button-border-color: #d4d4d4 border-bottom-color: #2356c4 background-color: #40454f -.show-more - background-color: #F2F2EB - display: inline-block - color: #666 - padding: 6px 15px - text-decoration: none - border: 1px solid #DDD -.show-more:hover - background-color: #40454F - color: $white - border: 1px solid #40454F - cursor: pointer - .button--signin, .button--signingin display: inline-block @@ -122,20 +109,6 @@ $button-border-color: #d4d4d4 &:focus background-color: #696867 -.button-circle - width: 28px - height: 28px - border-radius: 50% - -.button--showmore - height: auto - padding: 0.3em 0.7em - font-size: $font-size-m - .icon - width: 1.1em - height: 0.7em - margin-right: .5em - .button--delete @extend .button border-radius: 2px @@ -143,8 +116,120 @@ $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 background-color: lighten(#CD3A36, 10) + + + +// new stuff + +%circle-button + display: block + text-indent: 999% + overflow: hidden + width: 28px + height: 28px + border: solid 1px #E4E6E6 + border-radius: 50% + &:hover + border-color: $teal + + float: left + margin-right: 1rem + @media #{$medium-up} + float: none + margin-right: 0 + margin-bottom: .5em + +.button-circle-codeclimate + @extend %circle-button + @extend %icon-line-codeclimate + background: + repeat: no-repeat + size: auto 9px + position: 4px 8px + &:hover + @extend %icon-line-codeclimate-teal + +.button-circle-cancel + @extend %circle-button + @extend %icon-line-cross + background: + repeat: no-repeat + size: auto 100% + &:hover + @extend %icon-line-cross-teal + +.button-circle-trigger + @extend %circle-button + @extend %icon-line-trigger + background: + position: 2px 1px + repeat: no-repeat + size: 24px 24px + &:hover + @extend %icon-line-trigger-teal + +%log-button + display: inline-block + height: 28px + padding: 0 0.8em 0 2.3em + border: 1px solid #f1f1f1 + color: #f1f1f1 + border-radius: 2px + text-align: center + line-height: 1.9 + font-size: 14px + font-weight: 300 + background: + repeat: no-repeat + size: auto 14px + position: 7px 6px + +// log buttons +.remove-log-button + @extend %log-button + @extend %icon-remove-log + &:hover, + &:active + background-color: #d94341 + +.download-log-button + @extend %log-button + @extend %icon-download-log + &:hover, + &:active + background-color: #999a98 + +// popup buttons +@mixin buttons($bg-color) + display: inline-block + padding: .3em 1em + font-size: 20px + color: white + font-weight: $font-weight-light + border-radius: 2px + background-color: $bg-color + &:hover, + &:active + background-color: lighten($bg-color, 10) + +.button-delete + @include buttons($red) + +.button-cancel + @include buttons(#A0A8A8) + +.showmore-button + padding-left: 2em + background: + repeat: no-repeat + size: auto 20px + position: 4px 1px + cursor: pointer + @extend .button--grey + @extend %icon-line-eye + diff --git a/app/styles/app/modules/dropdown.sass b/app/styles/app/modules/dropdown.sass index af929de1..ff683fe3 100644 --- a/app/styles/app/modules/dropdown.sass +++ b/app/styles/app/modules/dropdown.sass @@ -1,6 +1,3 @@ -/* - * Dashboard Activation Dropdown - */ $dropdown-border: #C3D9DB @@ -35,10 +32,6 @@ $dropdown-border: #C3D9DB border-left: solid 2px $dropdown-border; transform: rotate(45deg); - -/* - * Dashboard Organizations Dropdown - */ .filter position: relative img @@ -85,50 +78,3 @@ $dropdown-border: #C3D9DB &.is-open display: block - - - -.dropdown - position: relative -.dropdown--classic - width: 10.7rem - -.dropdown-button - height: 28px - background-color: $grey-lighter - border: none - color: $white - line-height: 1 - font-size: $font-size-normal - &:hover, - &:focus - background-color: #8b9595 - .icon-cog-light - position: relative - top: 0.15em - left: -0.2em - .icon-arrow-down - border-top-color: $white - - @media #{$medium-up} - float: right - -.dropdown-menu - @include resetul - @extend %border-bottom-4px - position: absolute - top: 29px // height of the button +1 - width: 100% - z-index: 70 - overflow: hidden - background-color: $grey-lighter - display: none - a - @extend %inline-block - width: 100% - padding: .4em 2em - color: $white - &:hover - background-color: darken($grey-lighter, 10) - &.display - display: block diff --git a/app/styles/app/modules/icons.sass b/app/styles/app/modules/icons.sass index 434b2e6b..cedcf80f 100644 --- a/app/styles/app/modules/icons.sass +++ b/app/styles/app/modules/icons.sass @@ -9,65 +9,12 @@ height: 1em @extend %icon -.icon-cal, -.icon--cal, -.icon-calendar - background-image: inline-image('svg/finished-icon.svg') - -.icon-clock, -.icon--clock - background-image: inline-image('svg/duration-icon.svg') - -.icon-clock-dark, -.icon--clock-dark - background-image: inline-image('svg/duration-icon-dark2.svg') - -.icon-github, -.icon--github - background-image: inline-image('svg/commit-icon.svg') - -.icon--github-circle - background-image: inline-image('icons/github.svg') - -.icon-hash, -.icon--hash - background-image: inline-image('svg/build-number-icon.svg') - -.icon-hash-dark, -.icon--hash-dark - background-image: inline-image('svg/build-number-icon-dark2.svg') - .icon-cog, .icon--cog background-image: inline-image('svg/settings_gray.svg') &:hover background-image: inline-image('svg/settings_teal.svg') -.icon-cog-light - background-image: inline-image('icons/settings.svg') - -%icon-star-grey - background-image: inline-image('svg/icon-star-grey.svg') -%icon-star-yellow - background-image: inline-image('svg/icon-star-yellow.svg') -%icon-star-red - background-image: inline-image('svg/icon-star-red.svg') -%icon-star-green - background-image: inline-image('svg/icon-star-green.svg') - -.icon.push - background-image: inline-image('svg/push-icon.svg') - -.icon.pull_request - background-image: inline-image('svg/pull-request-icon.svg') - -.icon--grey.push, -.icon-push - background-image: inline-image('svg/icon-request-push.svg') -.icon--grey.pull_request, -.icon-pull_request - background-image: inline-image('svg/icon-request-pull.svg') - .icon-api, .icon.api background-image: inline-image('svg/api-white.svg') @@ -77,77 +24,16 @@ .icon--cancel background-image: inline-image('svg/off.svg') -.icon-sync, -.icon--trigger +.icon-sync background-image: inline-image('icons/sync-account-icon.svg') -.icon--downloadLog - background-image: inline-image('icons/download-log-icon.svg') -.icon--removeLog - background-image: inline-image('icons/remove-log-icon.svg') -.icon--down - background-image: inline-image('icons/end-of-log-icon.svg') -.icon--codeclimate - background-image: inline-image('icons/code-climate-icon.svg') +%icon-download-log + background-image: url('data:image/svg+xml;utf8,') +%icon-remove-log + background-image: url('data:image/svg+xml;utf8,') +%icon-arrow-down + background-image: url('data:image/svg+xml;utf8,') - -.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--env - background-image: inline-image('svg/icon-environment-dark2.svg') -.icon--job.failed, -.icon--job.rejected - background-image: inline-image('svg/icon-job-failed.svg') -.icon--job.passed, -.icon--job.accepted - background-image: inline-image('svg/icon-job-passed.svg') -.icon--job.errored - background-image: inline-image('svg/icon-job-errored.svg') -.icon--job.started, -.icon--job.queued, -.icon--job.booting, -.icon--job.received, -.icon--job.created, - background-image: inline-image('svg/icon-job-started.svg') -.icon--job.canceled - background-image: inline-image('svg/icon-job-canceled.svg') - -.icon--lang - background-image: inline-image('svg/icon-language-dark2.svg') -.icon--linux, -.icon.linux - background-image: inline-image('svg/icon-linux-dark2.svg') -.icon--mac, -.icon.mac -.icon.osx - background-image: inline-image('svg/icon-mac-dark2.svg') -.icon--eye - background-image: inline-image('svg/icon-showmore.svg') -.icon--question - background-image: inline-image('svg/icon-help.svg') - &:hover - background-image: inline-image('svg/icon-help-hover.svg') - -.icon-tab-arrow - background-image: inline-image('svg/icon-tab-arrow.svg') .icon--search background-image: inline-image('svg/search.svg') @@ -166,14 +52,20 @@ %icon-hook-off background-image: inline-image('svg/hooks-off.svg') -.icon-delete - background-image: inline-image('svg/delete.svg') - -.icon-delete-hover - background-image: inline-image('svg/delete-hover.svg') +%icon-line-trashcan + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trashcan-red + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trashcan-disabled + background-image: url('data:image/svg+xml;utf8,') + +.icon-delete + @extend %icon-line-trashcan +.icon-delete-hover + @extend %icon-line-trashcan-red .icon-delete-disabled - background-image: inline-image('svg/delete-disabled.svg') + @extend %icon-line-trashcan-disabled .icon-key background-image: inline-image('svg/key.svg') @@ -182,15 +74,131 @@ background-image: inline-image('svg/fingerprint.svg') +%icon-line-calendar + background-image: inline-image('line-icons/icon-cal.svg') .icon-line-cal @extend %icon - background-image: inline-image('line-icons/icon-cal.svg') + @extend %icon-line-calendar + +%icon-line-clock + background-image: url('data:image/svg+xml;utf8,') +.icon-line-clock + @extend %icon + @extend %icon-line-clock + +%icon-line-stopwatch + background-image: url('data:image/svg+xml;utf8,') + .icon-line-build @extend %icon background-image: inline-image('line-icons/icon-build.svg') + +%icon-line-commit + background-image: inline-image('line-icons/icon-commit.svg') .icon-line-commit @extend %icon - background-image: inline-image('line-icons/icon-commit.svg') + @extend %icon-line-commit + + +%icon-line-eye + background-image: url('data:image/svg+xml;utf8,') + +%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-teal + background-image: url('data:image/svg+xml;utf8,') + +%icon-line-dropdown + 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,') +%icon-line-codeclimate-teal + background-image: url('data:image/svg+xml;utf8,') + +%icon-line-cross + background-image: url('data:image/svg+xml;utf8,') +%icon-line-cross-white + background-image: url('data:image/svg+xml;utf8,') +%icon-line-cross-teal + background-image: url('data:image/svg+xml;utf8,') + +%icon-line-trigger + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trigger-white + background-image: url('data:image/svg+xml;utf8,') +%icon-line-trigger-teal + background-image: url('data:image/svg+xml;utf8,') + +%icon-github + background-image: url('data:image/svg+xml;utf8,') +.icon-github + display: inline-block + width: 1.1em + height: 1.1em + margin-right: 0.3em + vertical-align: middle + background: + repeat: no-repeat + size: auto 21px + position: -9px -3px + @extend %icon-github + +%icon-github-circle + 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-line-scale + background-image: url('data:image/svg+xml;utf8,') + +.icon-scale + @extend %icon + @extend %icon-line-scale .icon--plus &:after @@ -198,19 +206,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..5d009316 100644 --- a/app/styles/app/modules/notice.sass +++ b/app/styles/app/modules/notice.sass @@ -4,11 +4,17 @@ background-color: #F9F3D3 color: #AF9112 border-radius: 2px + font-size: 15px a color: #AF9112 text-decoration: underline .icon-flag - @extend %icon + @extend %icon-line-flag-yellow + background: + color: #AF9112 + size: auto 13px + position: 6px 4px + repeat: no-repeat width: 1.3em height: 1.5em margin: 0 .6em 0 .2em @@ -20,14 +26,16 @@ background-color: #d2f5f9 color: #40a3ad border-radius: 2px + font-size: 15px a color: #40a3ad text-decoration: underline .icon-flag + display: inline-block + @extend %icon-line-flag-teal display: inline-block background: - image: url('data:image/svg+xml;utf8,') color: #40a3ad size: auto 13px position: 6px 4px diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass index 06fd5619..3509a90b 100644 --- a/app/styles/app/modules/row.sass +++ b/app/styles/app/modules/row.sass @@ -18,10 +18,13 @@ color: $grey-dark background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat - h2, h3 + h2, h3, small margin: 0 font-weight: $font-weight-normal font-size: 16px + small + font-weight: $font-weight-bold + margin-right: 1em .row-header width: 100% @@ -53,7 +56,7 @@ .two-line @extend %row-element padding: .4em 0 - margin-left: 2em + margin-left: 1em text-align: left @media #{$medium-up} @@ -76,12 +79,21 @@ display: inline-block vertical-align: middle - @include statusColors($green-dark, 'passed') - @include statusColors($red-dark, 'failed') - @include statusColors($red-dark, 'errored') - @include statusColors($grey-medium, 'canceled') - @include statusColors(#bfb502, 'started', #e5da3f) - @include statusColors(#bfb502, 'queued', #e5da3f) - @include statusColors(#bfb502, 'booting', #e5da3f) - @include statusColors(#bfb502, 'received', #e5da3f) - @include statusColors(#bfb502, 'created', #e5da3f) + .avatar + display: inline-block + width: 16px + height: 16px + margin: 0 .4em 0 .1em + border-radius: 50% + vertical-align: middle + background-color: #E9EBEB + + @include statusColors($green, 'passed', 10px) + @include statusColors($red, 'failed', 10px) + @include statusColors($red, 'errored', 10px) + @include statusColors($grey, 'canceled', 10px) + @include statusColors($yellow, 'started', 10px, #e5da3f, true) + @include statusColors($yellow, 'queued', 10px, #e5da3f, true) + @include statusColors($yellow, 'booting', 10px, #e5da3f, true) + @include statusColors($yellow, 'received', 10px, #e5da3f, true) + @include statusColors($yellow, 'created', 10px, #e5da3f, true) diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass index 1423673c..4ab2352c 100644 --- a/app/styles/app/modules/tabs.sass +++ b/app/styles/app/modules/tabs.sass @@ -4,59 +4,43 @@ font-size: $font-size-sm ul @include resetul + margin-top: 2em + display: flex + flex-flow: row wrap + justify-content: space-between width: 100% - clear: both - @media #{$small-only} - margin-top: 2em + @media #{$medium-up} + margin-top: 0 + display: block li - @media #{$small-only} - margin-bottom: .8em + flex: 0 0 8em + text-align: center + margin: .5em 0 + @media #{$medium-up} + display: inline-block + text-align: left + margin: 0 1.5em 0 0 + a @extend %inline-block width: 100% color: $grey-light - padding: .2em 0 + padding: 3px 0 4px .active a, a:hover position: relative - color: $teal-dark + color: $teal &:after content: "" position: absolute left: 0 - bottom: -0.25em + bottom: -2px width: 100% height: 2px - background-color: $teal-dark + background-color: $teal .active a - font-weight: 600 - - @media #{$medium-up} - ul - display: block - li - float: left - padding-right: 2em - -// todo: switch to icon -#tab_build - position: relative - padding-left: 1em - &:before - content: "" - display: block - position: absolute - color: $grey-lighter - top: 0.4em - left: -0.7em - width: .7em - height: 1.3em - background: - size: 100% - repeat: no-repeat - @extend .icon-tab-arrow - + font-weight: $font-weight-bold .tabbody position: relative @@ -76,35 +60,6 @@ float: left margin-right: 1em - -#main - .tabs - border-bottom: 3px solid #f5f5f6 - li - height: 29px - background-color: #f5f5f6 - margin-right: 0 - overflow: hidden - &:hover - background-color: #e1e8eb - a - text-decoration: none - - .active - display: block - background-color: $tab-active-bg - border-bottom-color: $tab-active-bg - &:hover - background-color: $tab-active-bg - a - color: #6c878e - @media #{$medium-up} - display: inline-block - - #builds - a - display: inline - .tabs--main #tab_build, #tab_job, @@ -116,7 +71,19 @@ &.active display: inline-block -#profile - #main - .tab - margin: 30px 0 0 12px +#tab_build + position: relative + @media #{$medium-up} + left: .5em + + .tab-arrow + display: inline-block + position: absolute + top: 5px + left: -19px + width: .7em + height: 1.3em + background: + size: auto 100% + repeat: no-repeat + 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..9fdb8ed1 100644 --- a/app/styles/app/modules/tooltips.sass +++ b/app/styles/app/modules/tooltips.sass @@ -3,14 +3,14 @@ position: absolute top: -2.8em width: auto - height: 1.9em + height: 1.6em margin: auto - padding: .3em .4em .3em + padding: .1em .4em z-index: 5 background-color: #818383 border-radius: 4px color: $white - font-size: $font-size-sm + font-size: 12px line-height: 1.3 text-align: center white-space: nowrap @@ -54,23 +54,12 @@ right: 0 left: 0 top: -4em - height: 3.2em + height: 2.9em max-width: 8.6em &: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 @@ -93,3 +82,28 @@ &: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 + &:before + left: 0.6em + .tooltip-trigger + vertical-align: baseline + +.tooltip.job-os + .tooltip-bubble + top: -2.2em + height: 1.6em + padding: 0.1em .4em + &:before + left: 0 + right: 0 + margin: auto + diff --git a/app/styles/app/pages/home-pro.sass b/app/styles/app/pages/home-pro.sass index a40ae150..7d837021 100644 --- a/app/styles/app/pages/home-pro.sass +++ b/app/styles/app/pages/home-pro.sass @@ -4,18 +4,6 @@ $red: #DB4242 $yellow: #E5C025 $grey: #858585 -@mixin linkStyle - a - text-decoration: none - border-bottom: 1px solid #bfc0c1 - padding-bottom: 0.1em - transition: color 200ms ease, border 200ms ease - &:hover, - &:active - color: #303030 - text-decoration: none - border-color: transparent - .landing-pro br @@ -36,95 +24,6 @@ $grey: #858585 max-width: 1024px padding: 0 $column-gutter/2 - %h1 - margin: 0 - font-size: 54px - font-weight: 300 - line-height: 1.2 - - .h1--grey - @extend %h1 - @include linkStyle - color: $grey !important - a - color: $grey - - .h1--teal - @extend %h1 - font-size: 64px - color: #408692 !important - - .h1--green - @extend %h1 - color: $green !important - - .h1--red - @extend %h1 - color: $red !important - - %h2 - margin: 0 0 .5em - font-size: 36px - font-weight: 300 - line-height: 1.3 - - .h2--grey - @extend %h2 - color: $grey - - .h2--green - @extend %h2 - color: $green - - .h2--red - @extend %h2 - color: $red - - .h2--teal - @extend %h2 - color: $teal - - %h3 - margin: .5em 0 - font-size: 22px - font-weight: 300 - - .h3 - @extend %h3 - - .h3--plans - @extend %h3 - font-size: 28px - text-align: center - line-height: 1.3 - - .h3--teal - @extend %h3 - color: $teal - - .h3--red - @extend %h3 - color: $red - - .h3--green - @extend %h3 - color: $green - - .h3--yellow - @extend %h3 - color: $yellow - - .text-big - @include linkStyle - font-size: 20px - font-weight: 300 - line-height: 1.55 - - .text-small - @include linkStyle - margin: 0 0 2.5em - font-size: 16px - .text-logo @extend .text-small line-height: 1.8 @@ -289,3 +188,93 @@ $grey: #858585 height: 3.5em width: 3.5em margin: 0 auto .5em + + +%h1 + margin: 0 + font-size: 54px + font-weight: 300 + line-height: 1.2 + +.h1--grey + @extend %h1 + @include linkStyle + color: $grey !important + a + color: $grey + +.h1--teal + @extend %h1 + font-size: 64px + color: #408692 !important + +.h1--green + @extend %h1 + color: $green !important + +.h1--red + @extend %h1 + color: $red !important + +%h2 + margin: 0 0 .5em + font-size: 36px + font-weight: 300 + line-height: 1.3 + +.h2--grey + @extend %h2 + color: $grey + +.h2--green + @extend %h2 + color: $green + +.h2--red + @extend %h2 + color: $red + +.h2--teal + @extend %h2 + color: $teal + +%h3 + margin: .5em 0 + font-size: 22px + font-weight: 300 + +.h3 + @extend %h3 + +.h3--plans + @extend %h3 + font-size: 28px + text-align: center + line-height: 1.3 + +.h3--teal + @extend %h3 + color: $teal + +.h3--red + @extend %h3 + color: $red + +.h3--green + @extend %h3 + color: $green + +.h3--yellow + @extend %h3 + color: $yellow + +.text-big + @include linkStyle + font-size: 20px + font-weight: 300 + line-height: 1.55 + +.text-small + @include linkStyle + margin: 0 0 2.5em + font-size: 16px diff --git a/app/styles/app/popup.sass b/app/styles/app/popup.sass index 466fc04c..d00a8ff8 100644 --- a/app/styles/app/popup.sass +++ b/app/styles/app/popup.sass @@ -1,15 +1,14 @@ %popup - width: 29em height: auto position: fixed top: 50% left: 50% transform: translate(-50%, -50%) - padding: 2.5em 2em + padding: 2.9em 2em color: #565656 z-index: 99 background-color: $white - border-radius: 4px + border-radius: 2px .help display: inline-block @@ -28,9 +27,8 @@ .popup @extend %popup display: none - width: 400px background-color: #fff - border: solid 10px $cream-dark + border: solid 10px #f1f1f1 &:before content: "" @@ -38,22 +36,20 @@ .close position: absolute display: block - right: 10px - top: 10px - width: 16px - height: 16px - @extend .icon - @extend .icon--dismiss-grey + right: 5px + top: 8px + width: 30px + height: 30px + text-indent: 999% + overflow: hidden + white-space: nowrap + @extend %icon-line-cross h4 margin-top: 0 font-size: 18px font-weight: bold color: $color-text - p - font-size: $font-size-sm - word-wrap: normal - pre background-color: $color-bg-pre margin: 0 @@ -61,6 +57,15 @@ border-radius: 4px overflow-x: scroll + .popup-title + margin-bottom: 0 + .popup-text + margin-top: 0 + text-align: center + .buttons + margin-top: 3rem + text-align: center + .status-images width: 100% @media #{$medium-up} @@ -83,32 +88,13 @@ p:last-child margin-top: 10px -#regenerate-key, -#remove-log-popup - .cancel - text-decoration: underline - p - text-align: center - .or - display: inline-block - margin: 20px 10px 0 10px - p:last-of-type - margin-bottom: 5px - a.button - font-size: 13px - strong - color: $red - -.status-images, #regenerate-key +.status-images input border: 1px solid $color-border-light width: 505px padding: 4px border-radius: 3px -#regenerate-key, #regeneration-success - width: 400px - #code-climate width: 100% ol diff --git a/app/templates/build.hbs b/app/templates/build.hbs index 4e9766ca..41e53594 100644 --- a/app/templates/build.hbs +++ b/app/templates/build.hbs @@ -1,76 +1,8 @@ {{#if loading}} {{loading-indicator}} {{else}} -
-
- - -
-
-

- {{#if build.pullRequest}} - Pull Request #{{build.pullRequestNumber}} - {{build.pullRequestTitle}} - {{else}} - {{build.commit.branch}} - {{format-message build.commit.subject repo=build.repo}} - {{/if}} -

-
- {{#if build.pullRequest}} -

{{format-message build.commit.subject repo=build.repo}}

- {{/if}} - 
{{format-message build.commit.body repo=build.repo pre=true}}
-
-
- {{#if commit.authorName}} - {{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}} - {{/if}} - {{#unless commit.authorIsCommitter}} - {{#if commit.committerName}} - {{commit.committerName}} committed - {{/if}} - {{/unless}} -
-
- -
- - - {{repo-actions build=build repo=build.repo user=auth.currentUser}} -
-
+ {{build-header item=build user=auth.currentUser commit=commit}} {{#unless build.isMatrix}} {{view 'annotations' annotations=build.jobs.firstObject.annotations}} diff --git a/app/templates/caches.hbs b/app/templates/caches.hbs index e9ef582f..f7ee4306 100644 --- a/app/templates/caches.hbs +++ b/app/templates/caches.hbs @@ -1,13 +1,13 @@ {{#if cachesExist}}
-

All caches (documentation)

- +

All caches (Read the docs)

+ Delete all repository caches
{{#if model.pushes.length}} -

Pushes

-