save current step

app/styles/app.scss

@@ -44,7 +44,7 @@
 
 @import "app/components/section";
 @import "app/components/loader";
-@import "app/components/tiles";
+// @import "app/components/tiles";
 @import "app/components/travis-switch";
 @import "app/components/buttons";
 @import "app/components/search";

app/styles/app/layouts/dashboard.sass

@@ -6,144 +6,228 @@
 .wrapper-dashboard
   background-color: $wrapper-bg-color
 
-  #top
-    .user
-      a
-        padding-right: 0
 
-.current-org-avatar
+  // <div class="dashboard">
-  display     : inline-block
+  //   <section class="dashboard-starred">
-  height      : 20px
+  //     <div class="row">
-  width       : 20px
+  //       <div class="dashboard--empty">
-  vertical-align: top
+  //         <p><span class="icon icon-star"></span>Want to keep an eye on certain projects? Star repositories below to add them in this section.</p>
-  margin : -5px 5px 0 0
+  //       </div>
+  //     </div>
+  //   </section>
+  //   <section class="dashboard-active">
 
-#filters
+  //     <div class="db db--started row">
-  float : left
+  //       <div class="db-lock"><span class="icon icon-lock"></span></div>
+  //       <div class="db-repo column medium-3">
+  //         <div class="db-status">
+  //           <span class="icon icon-started"></span>
+  //           <span class="icon icon-star"></span>
+  //         </div>
+  //         <h3>travis-pro</h3>
+  //         <h2>travis-rubies</h2>
+  //       </div>
+  //       <p class="db-job column medium-2"><span class="icon icon-hash"></span>9874 started</p>
+  //       <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
+  //       <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
+  //       <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
+  //       <div class="db-status column medium-1 end">
+  //         <span class="icon icon-burger"></span>
+  //         <ul class="dropdown">
+  //           <li><a href="#" title="">Deactivate repository</a></li>
+  //           <li><a href="#" title="">Trigger a build</a></li>
+  //         </ul>
+  //       </div>
+  //     </div>
 
-#filters ul
-  text-align : left
-  display    : inline
-  margin     : 0
-  padding    : 0
-  list-style : none
-  z-index    : 1000
 
-#filters ul li
+%br-4px
-  background   : $white
+  border-radius: 4px
-  position     : relative
-  display      : inline-block
-  padding      : 10px 0 10px 0
-  margin-right : -4px
-  margin-top   : 0
-  cursor       : pointer
-  border-radius         : 0px
 
-#filters li.filters-start:hover
+$db-gray: #C9C9C9
-  background-color : #fff
 
-#filters ul li ul
+.dashboard
-  padding    : 0
-  position   : absolute
-  top        : 35px
-  left       : 0
-  width      : 200px
-  display    : none
-  opacity    : 0
-  visibility : hidden
-  box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
 
-#filters ul li ul li
+.dashboard-starred
-  display      : block
+  margin: 2em 0 3em
-  line-height  : 23px
-  padding-left : 20px
 
-#filters ul li ul li:first-child
+.dashboard-active
-  border-top-left-radius  : 4px
+  margin: 0 0 3em
-  border-top-right-radius : 4px
+  border-bottom: dashed 1px $db-gray
 
-#filters ul li ul li:last-child
+.dashboard-inactive
-  border-bottom-left-radius  : 4px
+  margin: 2em 0 5em
-  border-bottom-right-radius : 4px
 
-#filters ul li ul li div
+.dashboard--empty
-  display          : inline-block
+  padding: 2em 5em
-  width            : 20px
+  background: #E8E6DE
-  height           : 20px
+  color: $db-gray
-  margin-right     : 5px
+  font-size: 20px
-  text-indent      : -9999px
+  text-align: center
-  border-radius    : 100px
+  @extend %br-4px
 
-#filters ul li ul li:hover
+.db
-  background : #5e869a
+  position: relative
-  color      : $white
+  height: 57px
+  margin-bottom: 1em
+  background: $white
+  @extend %br-4px
 
-#filters ul li:hover ul
+  h2, h3, p
-  display    : block
+    margin: 0
-  opacity    : 1
+    font-weight: 400
-  visibility : visible
 
-#views
+.db-repo
-  float : left
+  padding-left: 4em
+  // border-right: 1px solid $db-gray
+  transform: translateY(0.4em)
 
-#views ul
+.db-status
-  text-align : left
+  @extend %br-4px
-  display    : inline
+  position: absolute;
-  margin     : 0
+  top: 0
-  padding    : 0
+  left: 0
-  list-style : none
+  height: 100%
-  z-index    : 1000
+  width: 2.5em
+  background-color: $db-gray
 
-#views ul li
+.dropdown
-  background   : $white
+  display: none
-  position     : relative
-  display      : inline-block
-  padding      : 10px 0 10px 0
-  margin-right : -4px
-  margin-top   : 0
-  cursor       : pointer
-  border-radius         : 0px
-  -webkit-border-radius : 0px
-  -moz-border-radius    : 0px
 
-#views li.views-start:hover
-  background-color : #fff
 
-#views ul li ul
+// .current-org-avatar
-  padding    : 0
+//   display     : inline-block
-  position   : absolute
+//   height      : 20px
-  top        : 35px
+//   width       : 20px
-  left       : 0
+//   vertical-align: top
-  width      : 200px
+//   margin : -5px 5px 0 0
-  display    : none
-  opacity    : 0
-  visibility : hidden
-  box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
 
-#views ul li ul li
+// #filters
-  display      : block
+//   float : left
-  line-height  : 23px
-  padding-left : 20px
 
-#views ul li ul li:first-child
+// #filters ul
-  border-top-left-radius  : 4px
+//   text-align : left
-  border-top-right-radius : 4px
+//   display    : inline
+//   margin     : 0
+//   padding    : 0
+//   list-style : none
+//   z-index    : 1000
 
-#views ul li ul li:last-child
+// #filters ul li
-  border-bottom-left-radius  : 4px
+//   background   : $white
-  border-bottom-right-radius : 4px
+//   position     : relative
+//   display      : inline-block
+//   padding      : 10px 0 10px 0
+//   margin-right : -4px
+//   margin-top   : 0
+//   cursor       : pointer
+//   border-radius         : 0px
 
-#views ul li ul li:hover
+// #filters li.filters-start:hover
-  background : #5e869a
+//   background-color : #fff
-  color      : $white
 
-#views ul li:hover ul
+// #filters ul li ul
-  display    : block
+//   padding    : 0
-  opacity    : 1
+//   position   : absolute
-  visibility : visible
+//   top        : 35px
+//   left       : 0
+//   width      : 200px
+//   display    : none
+//   opacity    : 0
+//   visibility : hidden
+//   box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
 
-.currently-selected
+// #filters ul li ul li
-  font-weight : 600
+//   display      : block
+//   line-height  : 23px
+//   padding-left : 20px
+
+// #filters ul li ul li:first-child
+//   border-top-left-radius  : 4px
+//   border-top-right-radius : 4px
+
+// #filters ul li ul li:last-child
+//   border-bottom-left-radius  : 4px
+//   border-bottom-right-radius : 4px
+
+// #filters ul li ul li div
+//   display          : inline-block
+//   width            : 20px
+//   height           : 20px
+//   margin-right     : 5px
+//   text-indent      : -9999px
+//   border-radius    : 100px
+
+// #filters ul li ul li:hover
+//   background : #5e869a
+//   color      : $white
+
+// #filters ul li:hover ul
+//   display    : block
+//   opacity    : 1
+//   visibility : visible
+
+// #views
+//   float : left
+
+// #views ul
+//   text-align : left
+//   display    : inline
+//   margin     : 0
+//   padding    : 0
+//   list-style : none
+//   z-index    : 1000
+
+// #views ul li
+//   background   : $white
+//   position     : relative
+//   display      : inline-block
+//   padding      : 10px 0 10px 0
+//   margin-right : -4px
+//   margin-top   : 0
+//   cursor       : pointer
+//   border-radius         : 0px
+//   -webkit-border-radius : 0px
+//   -moz-border-radius    : 0px
+
+// #views li.views-start:hover
+//   background-color : #fff
+
+// #views ul li ul
+//   padding    : 0
+//   position   : absolute
+//   top        : 35px
+//   left       : 0
+//   width      : 200px
+//   display    : none
+//   opacity    : 0
+//   visibility : hidden
+//   box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
+
+// #views ul li ul li
+//   display      : block
+//   line-height  : 23px
+//   padding-left : 20px
+
+// #views ul li ul li:first-child
+//   border-top-left-radius  : 4px
+//   border-top-right-radius : 4px
+
+// #views ul li ul li:last-child
+//   border-bottom-left-radius  : 4px
+//   border-bottom-right-radius : 4px
+
+// #views ul li ul li:hover
+//   background : #5e869a
+//   color      : $white
+
+// #views ul li:hover ul
+//   display    : block
+//   opacity    : 1
+//   visibility : visible
+
+// .currently-selected
+//   font-weight : 600
 
 .arrow-down
   width        : 0

app/styles/app/maximize.sass

@@ -22,5 +22,5 @@
       &:hover
         background-color: $color-border-slider-hover
 
-#top .profile
+// #top .profile
-  margin-right: 15px
+//   margin-right: 15px

app/styles/app/pro.sass

@@ -14,8 +14,8 @@
     li.stats
       display: none
 
-    .profile
+    // .profile
-      margin-right: 5px
+    //   margin-right: 5px
 
     .legal
       min-width: 110px

app/styles/app/top.sass

@@ -107,6 +107,8 @@ $top-height: 55px
 
   .menu.profile
     padding: 0.2em 0px 0.5em
+    .centered & .handle a
+      padding-right: 0
     @media #{$medium-up}
       padding: 0
       &.signed-in

app/templates/dashboard/repositories.hbs

@@ -36,7 +36,7 @@
   </div>
 </div>
 
-<div class="tiles">
+{{!-- <div class="tiles">
   <div class="row">
   {{#each repo in filteredRepositories}}
     <div class="large-4 medium-6 columns">
@@ -60,4 +60,134 @@
     </div>
   {{/each}}
   </div>
+</div> --}}
+
+<div class="dashboard">
+  <section class="dashboard-starred">
+    <div class="row">
+      <div class="dashboard--empty">
+        <p><span class="icon icon-star"></span>Want to keep an eye on certain projects? Star repositories below to add them in this section.</p>
+      </div>
+    </div>
+  </section>
+  <section class="dashboard-active">
+
+    <div class="db db--started row">
+      <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-repo column medium-3">
+        <div class="db-status">
+          <span class="icon icon-started"></span>
+          <span class="icon icon-star"></span>
+        </div>
+        <h3>travis-pro</h3>
+        <h2>travis-rubies</h2>
+      </div>
+      <p class="db-job column medium-2"><span class="icon icon-hash"></span>9874 started</p>
+      <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
+      <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
+      <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
+      <div class="db-status column medium-1 end">
+        <span class="icon icon-burger"></span>
+        <ul class="dropdown">
+          <li><a href="#" title="">Deactivate repository</a></li>
+          <li><a href="#" title="">Trigger a build</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="db db--fail row">
+      <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-repo column medium-3">
+        <div class="db-status">
+          <span class="icon icon-started"></span>
+          <span class="icon icon-star"></span>
+        </div>
+        <h3>travis-pro</h3>
+        <h2>travis-rubies</h2>
+      </div>
+      <p class="db-job column medium-2"><span class="icon icon-hash"></span>9874 started</p>
+      <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
+      <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
+      <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>25 minutes ago</p>
+      <div class="db-status column medium-1 end">
+        <span class="icon icon-burger"></span>
+        <ul class="dropdown">
+          <li><a href="#" title="">Deactivate repository</a></li>
+          <li><a href="#" title="">Trigger a build</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="db db--error row">
+      <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-repo column medium-3">
+        <div class="db-status">
+          <span class="icon icon-started"></span>
+          <span class="icon icon-star"></span>
+        </div>
+        <h3>travis-pro</h3>
+        <h2>travis-rubies</h2>
+      </div>
+      <p class="db-job column medium-2"><span class="icon icon-hash"></span>9874 started</p>
+      <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
+      <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
+      <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
+      <div class="db-status column medium-1 end">
+        <span class="icon icon-burger"></span>
+        <ul class="dropdown">
+          <li><a href="#" title="">Deactivate repository</a></li>
+          <li><a href="#" title="">Trigger a build</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="db db--cancel row">
+      <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-repo column medium-3">
+        <div class="db-status">
+          <span class="icon icon-started"></span>
+          <span class="icon icon-star"></span>
+        </div>
+        <h3>travis-pro</h3>
+        <h2>travis-rubies</h2>
+      </div>
+      <p class="db-job column medium-2"><span class="icon icon-hash"></span>9874 started</p>
+      <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
+      <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
+      <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
+      <div class="db-status column medium-1 end">
+        <span class="icon icon-burger"></span>
+        <ul class="dropdown">
+          <li><a href="#" title="">Deactivate repository</a></li>
+          <li><a href="#" title="">Trigger a build</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="db db--pass row">
+      <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-repo column medium-3">
+        <div class="db-status">
+          <span class="icon icon-started"></span>
+          <span class="icon icon-star"></span>
+        </div>
+        <h3>travis-pro</h3>
+        <h2>travis-rubies</h2>
+      </div>
+      <p class="db-job column medium-2"><span class="icon icon-hash"></span>9874 started</p>
+      <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
+      <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
+      <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
+      <div class="db-status column medium-1 end">
+        <span class="icon icon-burger"></span>
+        <ul class="dropdown">
+          <li><a href="#" title="">Deactivate repository</a></li>
+          <li><a href="#" title="">Trigger a build</a></li>
+        </ul>
+      </div>
+    </div>
+
+  </section>
+  <section class="dashboard-inactive">
+  </section>
 </div>