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

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;
+				margin: 4px 0;
-				vertical-align: top;
 				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-left: 40px;
-						padding-right: 30px;
 
-						.builds {
+					&:after {
-							&_inner {
+						width: 24px;
-								border-right: 6px solid darken(@well-bg, 10%);
+						height: 24px;
-							}
+						top: 25px;
-						}
-
-						&:after {
-							right: -12px;
-						}
-
-						&:before {
-							right: 10px;
-							border-left-color: darken(@well-bg, 10%);
-						}
 					}
 
-					&:nth-child(even) {
+					&:before {
-						padding-left: 30px;
+						left: 20px;
-						top: 50px;
+						border-right-color: darken(@well-bg, 10%);
-
+						top: 25px;
-						.builds {
-							&_inner {
-								border-left: 6px solid darken(@well-bg, 10%);
-							}
-						}
-
-						&:after {
-							left: -12px;
-						}
-
-						&:before {
-							left: 10px;
-							border-right-color: darken(@well-bg, 10%);
-						}
 					}
 				}
 			}
-		}
 
-		&-right {
+			&:after {
-			.builds {
+				left: 12px;
-				&_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%);
-						}
-					}
-				}
 			}
 		}
 
 		&-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 {
+						&:after {
-	width: 25px;
+							left: auto;
-	height: 25px;
+						}
-	border-radius: 50%;
 
-	&__in-progress {
+						&:before {
-		background: @brand-info;
+							left: auto;
+							border-right-color: transparent;
+						}
+					}
 
-		-webkit-animation: pulsate @animation-duration ease-out;
+					&_inner {
-		-webkit-animation-iteration-count: infinite;
+						border-left: 0;
-		-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;
-	}
 
-	&__done {
+				&:after {
-		background: @link-color;
+					left: 50%;
-	}
+				}
+			}
 
-	&__error {
+			&-left {
-		background: @brand-danger;
+				.builds {
-	}
+					&_item {
+						&:nth-child(odd) {
+							padding-right: 30px;
 
-	&__queued {
+							.builds {
-		background: @brand-primary;
+								&_inner {
-	}
+									border-right: 6px solid darken(@well-bg, 10%);
+								}
+							}
 
-	&__small {
+							&:after {
-		width: 10px;
+								right: -12px;
-		height: 10px;
+							}
+
+							&: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;
+		-webkit-transform: scale3d(@scaleX, @scaleY, 1);
-		-moz-transform: scale(@scaleX, @scaleY); opacity: 1;
+		-moz-transform: scale3d(@scaleX, @scaleY, 1);
-		-ms-transform: scale(@scaleX, @scaleY); opacity: 1;
+		-ms-transform: scale3d(@scaleX, @scaleY, 1);
-		-o-transform: scale(@scaleX, @scaleY); opacity: 1;
+		-o-transform: scale3d(@scaleX, @scaleY, 1);
-		transform: scale(@scaleX, @scaleY); opacity: 1;
+		transform: scale3d(@scaleX, @scaleY, 1);
 	}
 
 	0% {
-		.transform(1.0, 1.0);
+		.transform(1, 1);
-	}
-	25% {
-		opacity: 1.0;
 	}
+
 	50% {
 		.transform(0.75, 0.75);
 	}
-	50% {
+
-		opacity: 1.0;
-	}
 	100% {
-		.transform(1.0, 1.0);
+		.transform(1, 1);
 	}
 }
 

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 #

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)

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
+else
-		p Build history is empty
+	p Build history is empty