Dashboard & Build UI refresh (#988)

* Partial progress on dashboard redesign

* New dashboard

* Remove useless media query

* Support running tasks

* Change shade of red

* Convert dashboard project list to ul+li

from tables.
Public view is untested at the moment.

* Bring back the build history

* Update state colors

* Fix dash responsiveness

* Fix hover colors for projects and change errored color

* Inverse colors and remove border around

* Change buttons and use strider-colors

* Make config wrench a button too

* Text decoration on buttons removed

* Actually fix text decoration

* Cleaned up styles for build page

* Clean up styles

* More CSS cleanup

* More build history cleanup

* Style history items, add hover and remove icon

* Update state-text colors

* Increase history item's progress margin

* Fix waiting and running text

* Fix border and spacing on metadata/console

* Fix metadata radius

* Fix metadata padding

* Phase margin tweak

* Build history cleanup

* Build history tweaks

* Fix missing closing tag

* Better indicator for pending tasks

* Build latest

* Add seperator between dates and flatten config button

Author: Ilya Radchenko

client/styles/build.less

@@ -1,9 +1,15 @@
+@import "strider-colors";
+@import "button";
 
 .no-projects {
   margin-top: 20px;
   margin-bottom: 25px;
 }
 
+.project-list {
+  margin: 0;
+}
+
 .finished-at time {
   line-height: 27px;
 }
@@ -12,45 +18,221 @@
   line-height: 29px;
 }
 
+.icon.no-text {
+  margin-left: 0 !important;
+}
+
 #dashboard .finished-at .cancel-job {
   font-size: 18px;
   line-height: 36px;
 }
 
-#dashboard table tr {
-  .progress-meter {
-    margin-top: 10px;
-  }
-}
-
 #dashboard {
-  a, .clickable {
+  a.clickable {
     cursor: pointer;
     &:hover {
       text-decoration: none;
       color: #999;
     }
   }
-  .btn:hover {
-    color: white;
-  }
-}
 
-#dashboard {
   a.add-repo {
     color: #fff;
   }
+
   .history {
-    width:70px;
+    width: 70px;
   }
-  .last-builds {
-    tr td {
-      width:10px;
-      height:10px;
-      padding:0;
-      overflow:hidden;
-      border-top:none;    
+
+  #job-list-yours,
+  #job-list-public {
+    // We add a border on the left of each row, indicating the state of the last build.
+    li, td ~ td {
+      background-color: #fff;
+      transition: .3s;
+      margin-bottom: 10px;
+      border-left: 6px solid #BBB;
+    }
+
+    .running {
+      border-left-width: 6px;
+      border-color: @strider-bg-running;
+      background-color: lighten(@strider-bg-running, 25%);
+
+      &:hover {
+        background-color: lighten(@strider-bg-running, 35%);
+      }
     }
+
+    .passed {
+      border-left-width: 6px;
+      border-color: @strider-bg-passed;
+      background-color: lighten(@strider-bg-passed, 25%);
+
+      &:hover {
+        background-color: lighten(@strider-bg-passed, 35%);
+      }
+    }
+
+    .failed {
+      border-left-width: 6px;
+      border-color: @strider-bg-failed;
+      background-color: lighten(@strider-bg-failed, 25%);
+
+      &:hover {
+        background-color: lighten(@strider-bg-failed, 35%);
+      }
+    }
+
+    .errored {
+      border-left-width: 6px;
+      border-color: @strider-bg-errored;
+      background-color: lighten(@strider-bg-errored, 25%);
+
+      &:hover {
+        background-color: lighten(@strider-bg-errored, 35%);
+      }
+    }
+  }
+}
+
+.dashboard-row,
+#dashboard ul li {
+  padding: 10px;
+  position: relative;
+  overflow: hidden;
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .job-id {
+    font-family: monospace;
   }
 
+  .btn-link {
+    color: #333;
+  }
+
+  & > a,
+  & > span {
+    display: inline-block;
+    padding: 5px 10px;
+  }
+
+  span.clickable,
+  a:not(.button) {
+    color: black;
+    cursor: pointer;
+  }
+
+  .github-link {
+    margin-left: 5px;
+  }
+
+  &:hover {
+    .action-buttons {
+      & > div {
+        visibility: visible;
+      }
+    }
+  }
+
+  .small-text {
+    display: inline-block;
+  }
+
+  .action-buttons {
+    width: 100px;
+    text-align: center;
+    .btn-group {
+      padding-top: 4px;
+    }
+  }
+
+  .progress-meter {
+    .progress {
+      margin-bottom: 0;
+    }
+  }
+
+  .committer {
+    a {
+      padding: 0;
+    }
+    img {
+      width: 35px;
+      height: 35px;
+      max-width: inherit;
+      margin: 10px 10px 10px 0;
+    }
+  }
+
+  .project-name {
+    a {
+      font-size: 18px;
+      line-height: 27px;
+      width: 100%;
+    }
+  }
+
+  .run-time {
+    text-align: center;
+  }
+}
+
+@media (max-width: 980px) {
+  #dashboard {
+    .triggered-by-header,
+    .commit-url,
+    .committer,
+    .job-link a span {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  #dashboard {
+    .finished-at {
+      display: none;
+    }
+  }
+
+  #build-page .job-title h3 {
+    margin-bottom: 0.5em;
+  }
+
+  .navbar-fixed-top {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 650px) {
+  #dashboard {
+    overflow: auto;
+
+    .deploy,
+    .deploy-header,
+    .refresh,
+    .refresh-header,
+    .configure,
+    .configure-header,
+    .committer,
+    .committer-header,
+    .github-header,
+    .github-link {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 450px) {
+  #dashboard {
+    ul li .project-name a {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 25px;
+    }
+  }
 }

client/styles/button.less

@@ -1,6 +1,6 @@
 
 // background status
-@strider-bg-failed: #FFD2D0;
-@strider-bg-errored: #DDD;
-@strider-bg-passed: #CFFFD2;
-@strider-bg-running: #D7F3FF;
+@strider-bg-failed: #e84135;
+@strider-bg-errored: #fbda41;
+@strider-bg-passed: #7bbf51;
+@strider-bg-running: #5eaaad;