martin/nci
1
0
Fork 0
mirror of https://gitlab.silvrtree.co.uk/martind2000/nci.git synced 2025-02-10 19:39:17 +00:00
Code Issues Projects Releases Wiki Activity

add some responsive styles to build timeline, revert in-progress pulsate animation

Browse Source
This commit is contained in:
Artem Zhukov 2015-12-11 23:16:43 +03:00
parent d8301794d6
commit 049270149d
4 changed files with 172 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

319
static/css/sources/components/builds.less
View File

@ -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);
}
}

4
static/js/app/components/buildSidebar/index.jade
View File

@ -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 #

3
static/js/app/components/builds/item.jade
View File

@ -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)

8
static/js/app/components/builds/list.jade
View File

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