Work in progress: Add the UI for the build status and start on the file drop stuff

static/css/quay.css

@@ -13,6 +13,30 @@
   color: #428bca;
 }
 
+.build-statuses {
+}
+
+.build-status-container {
+  padding: 4px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.build-status-container .build-message {
+  display: block;
+  white-space: nowrap;
+}
+
+.build-status-container .progress {
+  height: 12px;
+  margin: 0px;
+  margin-top: 10px;
+}
+
+.build-status-container:last-child {
+  margin-bottom: 0px;
+  border-bottom: 0px solid white;
+}
 
 .repo-circle {
   position: relative;
@@ -579,6 +603,7 @@ p.editable:hover i {
 }
 
 .repo .description {
+  margin-top: 10px;
   margin-bottom: 40px;
 }
 
@@ -608,22 +633,70 @@ p.editable:hover i {
   display: inline-block;
 }
 
+.repo .status-boxes {
+  float: right;
+  margin-bottom: 20px;
+}
+
+.repo .status-boxes .status-box {
+  cursor: pointer;
+  display: inline-block;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.repo .status-boxes .status-box .title {
+  padding: 4px;
+  display: inline-block;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.repo .status-boxes .status-box .title i {
+  margin-right: 6px;
+}
+
+.repo .status-boxes .status-box .count {
+  display: inline-block;
+  background-image: linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);
+  padding: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-weight: bold;
+
+  transform: scaleX(0);
+  -webkit-transform: scaleX(0);
+  -moz-transform: scaleX(0);
+
+  transition: transform 500ms ease-in-out;
+  -webkit-transition: -webkit-transform 500ms ease-in-out;
+  -moz-transition: -moz-transform 500ms ease-in-out;
+}
+
+.repo .status-boxes .status-box .count.visible {
+  transform: scaleX(1);
+  -webkit-transform: scaleX(1);
+  -moz-transform: scaleX(1);
+}
+
 .repo .pull-command {
   float: right;
   display: inline-block;
-  font-size: 1.2em;
+  font-size: 0.8em;
   position: relative;
-  margin-right: 10px;
+  margin-top: 30px;
+  margin-right: 26px;
 }
 
-.repo .pull-command .pull-container {
+.repo .pull-container {
     display: inline-block;
     width: 300px;
+    margin-left: 10px;
     margin-right: 10px;
     vertical-align: middle;
 }
 
-.repo .pull-command input {
+.repo .pull-container input {
   cursor: default;
   background: white;
   color: #666;
@@ -788,8 +861,22 @@ p.editable:hover i {
   cursor: pointer;
 }
 
-.repo .description p {
-  margin-bottom: 6px;
+
+.repo .build-info {
+  padding: 10px;
+  margin: 0px;
+}
+
+.repo .build-info .progress {
+  margin: 0px;
+  margin-top: 10px;
+}
+
+.repo .section {
+  display: block;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
 }
 
 .repo .description p:last-child {
@@ -967,7 +1054,7 @@ p.editable:hover i {
   background: rgb(253, 191, 191);
 }
 
-.repo-admin .repo-access-state .state-icon i.fa-unlock-alt {
+.repo-admin .repo-access-state .state-icon i.fa-unlock {
   background: rgb(170, 236, 170);
 }