start with requests styles

app/controllers/request.coffee

@@ -10,9 +10,9 @@ Controller = Ember.ObjectController.extend
 
   type: (->
     if @get('isPullRequest')
-      'Pull request'
+      'pull_request'
     else
-      'Push'
+      'push'
   ).property('isPullRequest')
 
   status: (->

app/styles/app.scss

@@ -30,7 +30,7 @@
 @import "app/pro";
 // @import "app/profile/hooks";
 // @import "app/profile";
-@import "app/requests";
+// @import "app/requests";
 // @import "app/right/lists";
 // @import "app/right/sponsors";
 // @import "app/right";
@@ -68,3 +68,4 @@
 // @import "app/top";
 
 @import "app/landing";
+@import "app/layouts/requests";

app/styles/app/layouts/requests.sass

@@ -0,0 +1,15 @@
+.requests
+  @include resetul
+  
+  .requests-commit
+    position: relative
+    &:after
+      content: ""
+      @include fadeOut(right, -90deg, $cream-light)
+
+  .requests-time
+    border-left: 1px solid $grey4
+    padding-left: 1em
+
+  .tile--jobs
+    padding-left: 2.5em

app/styles/app/modules/icons.sass

@@ -105,10 +105,12 @@
 .icon--env
   background-image: inline-image('svg/icon-environment-dark2.svg')
 .icon--cross-red,
-.icon--job.failed
+.icon--job.failed,
+.icon--job.rejected
   background-image: inline-image('svg/icon-job-failed.svg')
 .icon--check-green,
-.icon--job.passed
+.icon--job.passed,
+.icon--job.accepted
   background-image: inline-image('svg/icon-job-passed.svg')
 .icon--error-grey,
 .icon--job.errored

app/templates/requests.hbs

@@ -6,37 +6,36 @@
 </div>
 {{/if}}
 
-<table id="requests" class="list">
+<ul class="requests">
-  <thead>
-    <tr>
-      <th>Request</th>
-      <th>Commit</th>
-      <th>Build</th>
-      <th>Commit message</th>
-      <th>Type</th>
-      <th>Message</th>
-    </tr>
-  </thead>
-
-  <tbody>
   {{#each controller itemController="request"}}
-      <tr {{bind-attr class="requestClass"}}>
+    <div {{bind-attr class=":tile :tile--jobs :row requestClass" }}>
-        <td class="request-id">
+
-          <span class="status"></span>
+    {{!-- icon --}}
-          {{id}}
+    <div class="tile-status tile-status--job">
-        </td>
+      <span {{bind-attr class=":icon :icon--job requestClass"}}></span>
-        <td>{{github-commit-link repo.slug commit.sha}}</td>
+    </div>
-        <td>
+    {{!-- time --}}
+    <p class="jobs-item requests-time column medium-2">{{format-time created_at}}</p>
+    {{!-- request branch commit --}}
+    <p class="jobs-item column medium-2">
+      <span {{bind-attr class=":icon type"}}></span>
+      {{github-commit-link repo.slug commit.sha}}
+    </p>
+    {{!-- commit message --}}
+    <p class="jobs-item requests-commit column medium-4">{{{format-message commit.message short="true" repoBinding=build.repo}}}</p>
+    {{!-- job id --}}
+    <p class="jobs-item column medium-1">
       {{#if build}}
-            {{#link-to "build" build}}#{{build.number}}{{/link-to}}
+        <span class="icon icon-hash"></span>
+        {{#link-to "build" build}}
+          {{build.number}}{{/link-to}}
       {{else}}
         -
       {{/if}}
-        </td>
+    </p>
-        <td class="commit-message">{{{format-message commit.message short="true" repoBinding=build.repo}}}</td>
+    {{!-- comment --}}
-        <td>{{type}}</td>
+    <p class="jobs-item column medium-3">{{message}}</p>
-        <td>{{message}}</td>
+
-      </tr>
+    </div>
   {{/each}}
-  </tbody>
+</ul>
-</table>