From 049270149d622fa0b9032b7b2b163d6871a9fd90 Mon Sep 17 00:00:00 2001 From: Artem Zhukov Date: Fri, 11 Dec 2015 23:16:43 +0300 Subject: [PATCH] add some responsive styles to build timeline, revert in-progress pulsate animation --- static/css/sources/components/builds.less | 319 +++++++++--------- .../js/app/components/buildSidebar/index.jade | 4 - static/js/app/components/builds/item.jade | 3 - static/js/app/components/builds/list.jade | 8 +- 4 files changed, 172 insertions(+), 162 deletions(-) diff --git a/static/css/sources/components/builds.less b/static/css/sources/components/builds.less index 411dfcc..5beb586 100644 --- a/static/css/sources/components/builds.less +++ b/static/css/sources/components/builds.less @@ -6,6 +6,8 @@ } } +@animation-duration: 1.5s; + .builds { &_item { &:hover { @@ -32,7 +34,6 @@ } &_buttons { - // margin-top: 8px; transition: opacity 0.2s ease; opacity: 0; } @@ -58,21 +59,29 @@ position: relative; .builds { + &_inner { + border-left: 6px solid darken(@well-bg, 10%); + } + + &_header { + margin-bottom: 6px; + font-size: 18px; + } + + &_progress { + padding: 3px 0; + } + &_item { - display: inline-block; - vertical-align: top; + margin: 4px 0; position: relative; - width: 50%; - margin: 10px 0; &:after { content: ''; position: absolute; - width: 24px; - height: 24px; border-radius: 50%; background: @well-bg; - top: 25px; + left: 0; z-index: 1; } @@ -86,6 +95,15 @@ &__in-progress { &:after { background: @brand-info; + + -webkit-animation: pulsate @animation-duration ease-out; + -webkit-animation-iteration-count: infinite; + -moz-animation: pulsate @animation-duration ease-out; + -moz-animation-iteration-count: infinite; + -o-animation: pulsate @animation-duration ease-out; + -o-animation-iteration-count: infinite; + animation: pulsate @animation-duration ease-out; + animation-iteration-count: infinite; } } @@ -107,132 +125,48 @@ } } } - - &_header { - margin-bottom: 6px; - font-size: 18px; - } - - &_progress { - padding: 3px 0; - } } &:after { content: ''; position: absolute; top: 0; - left: 50%; bottom: 0; width: 2px; margin-left: -1px; background: darken(@well-bg, 10%); } - &-left { + &-large { .builds { &_item { - &:nth-child(odd) { - padding-right: 30px; + padding-left: 40px; - .builds { - &_inner { - border-right: 6px solid darken(@well-bg, 10%); - } - } - - &:after { - right: -12px; - } - - &:before { - right: 10px; - border-left-color: darken(@well-bg, 10%); - } + &:after { + width: 24px; + height: 24px; + top: 25px; } - &:nth-child(even) { - padding-left: 30px; - top: 50px; - - .builds { - &_inner { - border-left: 6px solid darken(@well-bg, 10%); - } - } - - &:after { - left: -12px; - } - - &:before { - left: 10px; - border-right-color: darken(@well-bg, 10%); - } + &:before { + left: 20px; + border-right-color: darken(@well-bg, 10%); + top: 25px; } } } - } - &-right { - .builds { - &_item { - &:first-child { - margin-left: 50%; - } - - &:nth-child(even) { - padding-right: 30px; - top: -50px; - - .builds { - &_inner { - border-right: 6px solid darken(@well-bg, 10%); - } - } - - &:after { - right: -12px; - } - - &:before { - right: 10px; - border-left-color: darken(@well-bg, 10%); - } - } - - &:nth-child(odd) { - padding-left: 30px; - - .builds { - &_inner { - border-left: 6px solid darken(@well-bg, 10%); - } - } - - &:after { - left: -12px; - } - - &:before { - left: 10px; - border-right-color: darken(@well-bg, 10%); - } - } - } + &:after { + left: 12px; } } &-small { .builds { &_item { - display: block; - width: auto; padding-left: 30px; - margin-bottom: 4px; &:after { - left: 0; top: 16px; height: 16px; width: 16px; @@ -241,14 +175,10 @@ &:before { left: 10px; border-right-color: darken(@well-bg, 10%); - top: 14px; + top: 13px; } } - &_inner { - border-left: 6px solid darken(@well-bg, 10%); - } - &_header { font-size: 14px; .make-xs-column(7); @@ -266,73 +196,160 @@ } &:after { - left: 9px; + left: 8px; } } } } -@animation-duration: 1.5s; +@media (min-width: @screen-sm-min) { + .builds { + &__timeline { + &-large { + .builds { + &_item { + padding-left: 0; + display: inline-block; + vertical-align: top; + width: 50%; + margin: 10px 0; -.status { - width: 25px; - height: 25px; - border-radius: 50%; + &:after { + left: auto; + } - &__in-progress { - background: @brand-info; + &:before { + left: auto; + border-right-color: transparent; + } + } - -webkit-animation: pulsate @animation-duration ease-out; - -webkit-animation-iteration-count: infinite; - -moz-animation: pulsate @animation-duration ease-out; - -moz-animation-iteration-count: infinite; - -o-animation: pulsate @animation-duration ease-out; - -o-animation-iteration-count: infinite; - animation: pulsate @animation-duration ease-out; - animation-iteration-count: infinite; - } + &_inner { + border-left: 0; + } + } - &__done { - background: @link-color; - } + &:after { + left: 50%; + } + } - &__error { - background: @brand-danger; - } + &-left { + .builds { + &_item { + &:nth-child(odd) { + padding-right: 30px; - &__queued { - background: @brand-primary; - } + .builds { + &_inner { + border-right: 6px solid darken(@well-bg, 10%); + } + } - &__small { - width: 10px; - height: 10px; + &:after { + right: -12px; + } + + &:before { + right: 10px; + border-left-color: darken(@well-bg, 10%); + } + } + + &:nth-child(even) { + padding-left: 30px; + top: 50px; + + .builds { + &_inner { + border-left: 6px solid darken(@well-bg, 10%); + } + } + + &:after { + left: -12px; + } + + &:before { + left: 10px; + border-right-color: darken(@well-bg, 10%); + } + } + } + } + } + + &-right { + .builds { + &_item { + &:first-child { + margin-left: 50%; + } + + &:nth-child(even) { + padding-right: 30px; + top: -50px; + + .builds { + &_inner { + border-right: 6px solid darken(@well-bg, 10%); + } + } + + &:after { + right: -12px; + } + + &:before { + right: 10px; + border-left-color: darken(@well-bg, 10%); + } + } + + &:nth-child(odd) { + padding-left: 30px; + + .builds { + &_inner { + border-left: 6px solid darken(@well-bg, 10%); + } + } + + &:after { + left: -12px; + } + + &:before { + left: 10px; + border-right-color: darken(@well-bg, 10%); + } + } + } + } + } + } } } .pulsate-frames() { .transform(@scaleX, @scaleY) { - -webkit-transform: scale(@scaleX, @scaleY); opacity: 1; - -moz-transform: scale(@scaleX, @scaleY); opacity: 1; - -ms-transform: scale(@scaleX, @scaleY); opacity: 1; - -o-transform: scale(@scaleX, @scaleY); opacity: 1; - transform: scale(@scaleX, @scaleY); opacity: 1; + -webkit-transform: scale3d(@scaleX, @scaleY, 1); + -moz-transform: scale3d(@scaleX, @scaleY, 1); + -ms-transform: scale3d(@scaleX, @scaleY, 1); + -o-transform: scale3d(@scaleX, @scaleY, 1); + transform: scale3d(@scaleX, @scaleY, 1); } 0% { - .transform(1.0, 1.0); - } - 25% { - opacity: 1.0; + .transform(1, 1); } + 50% { .transform(0.75, 0.75); } - 50% { - opacity: 1.0; - } + 100% { - .transform(1.0, 1.0); + .transform(1, 1); } } diff --git a/static/js/app/components/buildSidebar/index.jade b/static/js/app/components/buildSidebar/index.jade index 475d85b..e155b5b 100644 --- a/static/js/app/components/buildSidebar/index.jade +++ b/static/js/app/components/buildSidebar/index.jade @@ -3,10 +3,6 @@ .builds_item(key=item.id, class="builds_item__#{item.status}") .builds_inner .row - //- .builds_content - //- .builds_status - //- .status.status__small(class="status__#{item.status}") - .builds_header Link(to="build", params={id: item.id}) span build # diff --git a/static/js/app/components/builds/item.jade b/static/js/app/components/builds/item.jade index 91a2471..16f2f4a 100644 --- a/static/js/app/components/builds/item.jade +++ b/static/js/app/components/builds/item.jade @@ -17,9 +17,6 @@ mixin statusText(build) .builds_inner .row .builds_header - //- .builds_status - //- .status(class="status__#{build.status}") - if build.project span Scm(scm=build.project.scm.type) diff --git a/static/js/app/components/builds/list.jade b/static/js/app/components/builds/list.jade index b0a30cd..7b70c73 100644 --- a/static/js/app/components/builds/list.jade +++ b/static/js/app/components/builds/list.jade @@ -1,8 +1,8 @@ - var itemsCount = this.state.items.length; -.builds.builds__timeline(class="builds__timeline-#{itemsCount % 2 ? 'left' : 'right'}") - if itemsCount +if itemsCount + .builds.builds__timeline.builds__timeline-large(class="builds__timeline-#{itemsCount % 2 ? 'left' : 'right'}") each build, index in this.state.items Item(build=build, key=build.id) - else - p Build history is empty +else + p Build history is empty