diff --git a/app/components/branch-row.coffee b/app/components/branch-row.coffee index 0c392424..43437095 100644 --- a/app/components/branch-row.coffee +++ b/app/components/branch-row.coffee @@ -8,7 +8,7 @@ BranchRowComponent = Ember.Component.extend routing: Ember.inject.service('-routing') tagName: 'li' classNameBindings: ['build.last_build.state'] - classNames: ['branch-row'] + classNames: ['branch-row', 'row-li'] isLoading: false isTriggering: false hasTriggered: false diff --git a/app/components/dashboard-row.coffee b/app/components/dashboard-row.coffee index 4ed5cbe4..62379a05 100644 --- a/app/components/dashboard-row.coffee +++ b/app/components/dashboard-row.coffee @@ -6,7 +6,7 @@ DashboardRowComponent = Ember.Component.extend tagName: 'li' classNameBindings: ['repo.default_branch.last_build.state'] - classNames: ['dashboard-row'] + classNames: ['dashboard-row', 'row-li'] isLoading: false isTriggering: false hasTriggered: false diff --git a/app/components/owner-repo-tile.coffee b/app/components/owner-repo-tile.coffee index 1f491361..d98020a1 100644 --- a/app/components/owner-repo-tile.coffee +++ b/app/components/owner-repo-tile.coffee @@ -3,7 +3,7 @@ OwnerRepoTileComponent = Ember.Component.extend tagName: 'li' - classNames: ['owner-tile'] + classNames: ['owner-tile', 'row-li'] classNameBindings: ['repo.default_branch.last_build.state'] ownerName: (-> diff --git a/app/controllers/dashboard/repositories.coffee b/app/controllers/dashboard/repositories.coffee index f536320c..cdeae39b 100644 --- a/app/controllers/dashboard/repositories.coffee +++ b/app/controllers/dashboard/repositories.coffee @@ -12,7 +12,6 @@ Controller = Ember.Controller.extend org = @get('org') repos = repos.filter (item, index) -> - console.log(item) item.get('default_branch.last_build') != null .sortBy('default_branch.last_build.finished_at') .reverse() diff --git a/app/styles/app.scss b/app/styles/app.scss index 24bfdfbc..fa7db947 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -24,6 +24,7 @@ @import "app/animation/tractor"; +@import "app/modules/row"; @import "app/modules/loader"; @import "app/modules/tiles"; @import "app/modules/buttons"; diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass index f98025d7..5280c306 100644 --- a/app/styles/app/_mixins/mixins.sass +++ b/app/styles/app/_mixins/mixins.sass @@ -29,17 +29,6 @@ padding: 0 list-style: none -%border-radius-4px - border-radius: 4px - -%border-top-4px - border-top-left-radius: 4px - border-top-right-radius: 4px - -%border-bottom-4px - border-bottom-left-radius: 4px - border-bottom-right-radius: 4px - %absolute-center position: absolute top: 0 @@ -66,7 +55,6 @@ font-weight: 400 - // @todo simplyfiy coloring mixins @mixin colorStatusIcons($color, $status) @@ -92,7 +80,8 @@ &.#{$status} background: linear-gradient(to right, $color2 0%, $color2 9px, white 9px, white 100%) no-repeat .row-name, - .row-request a + .row-request a, + .row-color a color: $color &:hover border-color: $color diff --git a/app/styles/app/layouts/branches.sass b/app/styles/app/layouts/branches.sass index 12e6621d..a4f6f024 100644 --- a/app/styles/app/layouts/branches.sass +++ b/app/styles/app/layouts/branches.sass @@ -4,19 +4,6 @@ margin: 1.5em 0 0.7em .branch-row - border: 1px solid $cream-dark - font-size: 16px - text-align: right - margin-bottom: .3rem - color: $grey-dark - background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat - - .icon - width: 1.3em - height: 1.3em - margin-right: .2em - display: inline-block - vertical-align: middle .avatar display: inline-block @@ -27,21 +14,10 @@ vertical-align: middle background-color: #E9EBEB - .row-item - margin: .2em - font-size: 16px - font-weight: $font-weight-normal - white-space: nowrap - overflow: hidden - a - color: $grey-dark - text-decoration: none - &:hover - text-decoration: underline - @media #{$medium-up} & > div:first-of-type width: 30% + padding-left: 1em & > div:nth-of-type(2) width: 20% & > div:nth-of-type(3) @@ -50,6 +26,7 @@ // width: 5% & > div:nth-of-type(4) width: 28% + float: right @media #{$large-up} & > div:nth-of-type(2) width: 21% @@ -60,53 +37,17 @@ & > div:nth-of-type(4) width: 25% - @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) - -%row-element - vertical-align: middle - @media #{$medium-up} - display: inline-block - .row-item - vertical-align: middle - -.two-line - @extend %row-element - padding: .4em 0 - margin-left: 2em - text-align: left - - @media #{$medium-up} - margin-left: 0 - -.one-line - @extend %row-element - .row-item - display: inline-block - .row-nav - display: none - text-align: center + .row-last-build @media #{$medium-up} - display: block - -.row-last-build - @media #{$medium-up} - padding-left: 1em - &:before - content: ""; - display: block; - width: 1px; - background-color: #EFF0EC; - position: absolute; - height: 3.7em; - margin-left: -1em; + padding-left: 1em + &:before + content: ""; + display: block; + width: 1px; + background-color: #EFF0EC; + position: absolute; + height: 3.7em; + margin-left: -1em; // @todo refactor into dropup module %dropup @@ -222,10 +163,6 @@ path fill: $teal-dark -.label-align - vertical-align: middle - line-height: 1.5 - // @todo refactor to status-icon module .status-icon .is-rotating diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass index d7ea1667..f8a533c1 100644 --- a/app/styles/app/layouts/dashboard.sass +++ b/app/styles/app/layouts/dashboard.sass @@ -1,20 +1,3 @@ -.fade-out - @media #{$medium-up} - white-space: nowrap - position:relative - overflow: hidden - &:after - content: "" - @include fadeOut(right, -90deg, $white, 30%) - -@mixin colorDashboardTiles($color, $status, $color2: $color) - &.#{$status} - .row-request - color: $color - .row-name a, - .row-request a - color: $color - .dashboard .centered @@ -33,51 +16,20 @@ margin: 3rem 0 5rem list-style-type: none + .dashboard-active li - - border: 1px solid $cream-dark - font-size: 16px text-align: left - margin-bottom: .3rem - color: $grey-dark - background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 9px, white 100%) no-repeat - - .icon - width: 1.3em - height: 1.3em - margin-right: .2em - display: inline-block - vertical-align: middle - - h2, h3 - margin: 0 - font-weight: $font-weight-normal - - h3 - font-size: 16px - - h2 - font-size: 18px .one-line margin-left: 2em + text-align: left .two-line padding: .1em 0 - - .row-item - margin: .2em - font-size: 16px - font-weight: $font-weight-normal - white-space: nowrap - overflow: hidden - a - color: $grey-dark - text-decoration: none - &:hover - text-decoration: underline + .row-item h2 + font-size: 18px @media #{$medium-up} & > div:first-of-type - width: 28% + width: 30% position: relative padding-left: 1em &:after @@ -100,26 +52,3 @@ li border: none transform: translate(-19%, -170%) - - - @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) - - @include colorDashboardTiles($green-dark, 'passed') - @include colorDashboardTiles($red-dark, 'failed') - @include colorDashboardTiles($red-dark, 'errored') - @include colorDashboardTiles($grey-medium, 'canceled') - @include colorDashboardTiles(#bfb502, 'started', #e5da3f) - @include colorDashboardTiles(#bfb502, 'queued', #e5da3f) - @include colorDashboardTiles(#bfb502, 'booting', #e5da3f) - @include colorDashboardTiles(#bfb502, 'received', #e5da3f) - @include colorDashboardTiles(#bfb502, 'created', #e5da3f) - - diff --git a/app/styles/app/layouts/owner.sass b/app/styles/app/layouts/owner.sass index cdd62b9c..4f611658 100644 --- a/app/styles/app/layouts/owner.sass +++ b/app/styles/app/layouts/owner.sass @@ -82,87 +82,21 @@ padding: 0 list-style-type: none -%one-line - font-size: 16px - font-weight: 400 - vertical-align: middle - margin: 0 - display: inline-block - * - display: inline-block - font-size: inherit - font-weight: 400 - vertical-align: middle - margin: 0 - padding: 0 - line-height: 1 - -.owner-tile - padding: .8em 0 .8em 2em - margin-bottom: .5em - border: #F2F0F0 solid 1px - - a - text-decoration: none - &:hover - span - text-decoration: underline - .repo-title a:hover - text-decoration: underline - - .icon - width: 1.3em - height: 1.1em - .build-status text-transform: capitalize - .repo - @extend %one-line - white-space: nowrap - width: grid-calc(9, 12) - .build - @extend %one-line - width: grid-calc(5, 12) - .branch - @extend %one-line - width: grid-calc(6, 12) - .commit - @extend %one-line - width: grid-calc(6, 12) - .duration - @extend %one-line - width: grid-calc(12, 12) +.owner-tile + padding: .4em 0 .3em @media #{$medium-up} - display: flex - flex-direction: row - flex-flow: space-between - align-items: baseline - height: 3.8em - padding: .8em 0 - - .build - width: grid-calc(2, 12) - .branch - width: grid-calc(2, 12) - .commit - width: grid-calc(2, 12) - .duration - width: grid-calc(4, 12) - .repo - width: grid-calc(4, 12) - margin-left: 2em - - - @include statusColors($green-dark, 'passed') - @include statusColors($red-dark, 'failed') - @include statusColors($red-dark, 'errored') - @include statusColors($grey-medium, 'canceled') - @include statusColors(#ECCE4B, 'started') - @include statusColors(#ECCE4B, 'queued') - @include statusColors(#ECCE4B, 'booting') - @include statusColors(#ECCE4B, 'received') - @include statusColors(#ECCE4B, 'created') - - + & > div:first-of-type + width: 30% + padding-left: 1em + & > div:nth-of-type(2) + width: 10% + & > div:nth-of-type(3) + width: 15% + & > div:nth-of-type(4) + width: 15% + & > div:nth-of-type(5) + width: 25% diff --git a/app/styles/app/modules/row.sass b/app/styles/app/modules/row.sass new file mode 100644 index 00000000..5a267809 --- /dev/null +++ b/app/styles/app/modules/row.sass @@ -0,0 +1,79 @@ +.fade-out + @media #{$medium-up} + white-space: nowrap + position:relative + overflow: hidden + &:after + content: "" + @include fadeOut(right, -90deg, $white, 30%) + +.label-align + vertical-align: middle + line-height: 1.5 + +.row-li + border: 1px solid $cream-dark + font-size: 16px + margin-bottom: .3rem + color: $grey-dark + background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat + + .row-item + display: inline-block + margin: .2em + font-size: 16px + font-weight: $font-weight-normal + white-space: nowrap + overflow: hidden + a + color: $grey-dark + text-decoration: none + &:hover + text-decoration: underline + h2, h3 + margin: 0 + font-weight: $font-weight-normal + font-size: 16px + + %row-element + vertical-align: middle + @media #{$medium-up} + display: inline-block + .row-item + vertical-align: middle + + .two-line + @extend %row-element + padding: .4em 0 + margin-left: 2em + text-align: left + + @media #{$medium-up} + margin-left: 0 + + .one-line + @extend %row-element + .row-item + display: inline-block + .row-nav + display: none + text-align: center + @media #{$medium-up} + display: block + + .icon + width: 1.3em + height: 1.3em + margin-right: .2em + 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) \ No newline at end of file diff --git a/app/templates/components/branch-row.hbs b/app/templates/components/branch-row.hbs index 009350d5..9baf6753 100644 --- a/app/templates/components/branch-row.hbs +++ b/app/templates/components/branch-row.hbs @@ -33,7 +33,7 @@ -
+
{{#if build.last_build}} diff --git a/app/templates/components/dashboard-row.hbs b/app/templates/components/dashboard-row.hbs index 80f1bca2..035f9d26 100644 --- a/app/templates/components/dashboard-row.hbs +++ b/app/templates/components/dashboard-row.hbs @@ -1,6 +1,6 @@
-
+

{{#link-to "owner" repo.owner.login}}{{status-icon status=repo.default_branch.last_build.state}} {{repo.owner.login}}{{/link-to}}

{{#link-to "repo" repo.owner.login repo.name}}{{repo.name}}{{/link-to}}

diff --git a/app/templates/components/owner-repo-tile.hbs b/app/templates/components/owner-repo-tile.hbs index e818221c..f47ab4b7 100644 --- a/app/templates/components/owner-repo-tile.hbs +++ b/app/templates/components/owner-repo-tile.hbs @@ -1,87 +1,99 @@ {{!-- {{#if repo.private }}
{{/if}} --}} -
-

- {{status-icon status=repo.default_branch.last_build.state}} - {{#link-to "repo" ownerName repoName }} - {{repoName}} - {{/link-to}} -

+
+
+

+ {{status-icon status=repo.default_branch.last_build.state}} + {{#link-to "repo" ownerName repoName }} + {{repoName}} + {{/link-to}} +

+
{{#if repo.default_branch.last_build}} -
- {{#link-to "build" ownerName repoName repo.default_branch.last_build.id}} - - - x +
+
+ {{#link-to "build" ownerName repoName repo.default_branch.last_build.id}} + + + x + + + {{repo.default_branch.last_build.number}} + {{/link-to}} +
+
+ +
+
+ {{request-icon build=repo.default_branch.last_build}} + {{repo.default_branch.name}} +
+
+ +
+
+ + + + + + - {{repo.default_branch.last_build.number}} - {{/link-to}} + {{format-sha repo.default_branch.last_build.commit.sha}} + +
-
- {{request-icon build=repo.default_branch.last_build}} - {{repo.default_branch.name}} - -
-
- + +
+
- - - + + + + + - {{format-sha repo.default_branch.last_build.commit.sha}} - -
-
- - - - - - - - - - {{repo.default_branch.last_build.state}} - {{format-time repo.default_branch.last_build.finished_at}} + {{repo.default_branch.last_build.state}} + {{format-time repo.default_branch.last_build.finished_at}} +
{{else}}

there is no build