style cache entries

app/styles/app/layouts/build-job.sass

@@ -28,9 +28,9 @@
 
 // job matrix
 .tile--jobs
+  @extend .tile--xs
   font-size: $font-size-sm
-  padding: 0.5em 0.4em 0.4em 3.5rem
-  margin-bottom: 0.35rem
+  padding-left: 3.5rem
   p
     white-space: normal
   a

app/styles/app/layouts/caches.sass

@@ -1,2 +1,34 @@
 .caches
   @include resetul
+  font-size: $font-size-sm
+  color: $grey3
+
+  .tile-xs
+    padding-left: 0
+
+  .icon.push
+    width: 1.2em;
+    height: 0.8em;
+    margin-right: .3em
+
+  .button--delete
+    transform: translateY(-0.2em);
+
+  @media #{$medium-up}
+    .caches-branch
+      position: relative
+      overflow: hidden
+      width: grid-calc(4, 13)
+      &:after
+        content: ""
+        @include fadeOut(right, -90deg, $cream-light)
+    .caches-date
+      width: grid-calc(4, 13)
+    .caches-size
+      width: grid-calc(4, 13)
+    .caches-button
+      text-align: right
+      width: grid-calc(1, 13)
+
+.delete-repo-caches
+  margin-top: 1rem

app/styles/app/modules/buttons.sass

@@ -86,7 +86,7 @@ $button-border-color: #d4d4d4
 
 .btn
   @extend .button
-  border-radius: 4px
+  @extend %border-radius-4px
 .button--green
   border: none
   font-size: $font-size-small
@@ -149,3 +149,15 @@ $button-border-color: #d4d4d4
     width: 1.1em
     height: 0.7em
     margin-right: .5em
+
+.button--delete
+  @extend .button
+  @extend %border-radius-4px
+  border: none
+  font-size: $font-size-small
+  color: $white
+  background-color: #CD3A36
+  font-weight: 300;
+  padding: 4px 10px 2px
+  &:hover
+    background-color: lighten(#CD3A36, 10)

app/styles/app/modules/tiles.sass

@@ -51,6 +51,13 @@
     height: 70px
     overflow: hidden
 
+.tile--xs
+  margin-bottom: 0.35em
+  padding: .5em .4em .4em
+  @media #{$medium-up}
+    height: 36px
+    overflow: hidden
+
 // todo refactor
 .tile-main
   h2,

app/templates/caches.hbs

@@ -1,5 +1,5 @@
 {{#if length}}
-  <a href="#" {{action "deleteRepoCache"}} {{bind-attr class="isDeleting:deleting :delete-repo-caches"}}>
+  <a href="#" {{action "deleteRepoCache"}} {{bind-attr class="isDeleting:deleting :delete-repo-caches :button--delete"}}>
     Delete all repository caches
   </a>
 
@@ -8,20 +8,20 @@
   <ul id="caches" class="caches">
     {{#each controller itemController="cachesByBranch"}}
       {{#each cache in caches itemController="cachesItem"}}
-        <li {{bind-attr class=":tile :tile--small :row" }}>
+        <li {{bind-attr class=":tile :tile--xs :tile :row" }}>
 
-          <p class="tile-item column">
-            <span {{bind-attr class=":icon :icon--grey push"}}></span>
+          <p class="tile-item caches-branch column">
+            <span {{bind-attr class=":icon :icon--grey :push"}}></span>
             {{cache.branch}}
           </p>
 
-          <p class="tile-item column">{{cache.last_modified}}</p>
+          <p class="tile-item caches-date column">{{cache.last_modified}}</p>
 
-          <p class="tile-item column">{{mb cache.size}}MB</p>
+          <p class="tile-item caches-size column">{{mb cache.size}}MB</p>
 
-          <p class="tile-item">
+          <p class="tile-item caches-button column">
             <a href="#" {{action "delete"}} {{bind-attr class="isDeleting:deleting :delete-by-slug :delete :button--delete"}}>
-              delete
+              Delete
             </a>
           </p>
         </li>
@@ -31,9 +31,9 @@
 
   <h2 class="build-title">Pull Requests</h2>
   <ul class="caches">
-    {{#each controller itemController="cachesByBranch"}}
+{{!--     {{#each controller itemController="cachesByBranch"}}
       {{#each cache in caches itemController="cachesItem"}}
-        <li {{bind-attr class=":tile :tile--small :row" }}>
+        <li {{bind-attr class=":tile :tile--xs :tile :row" }}>
 
           <p class="tile-item column">
             <span {{bind-attr class=":icon :icon--grey pull_request"}}></span>
@@ -44,14 +44,14 @@
 
           <p class="tile-item column">{{mb cache.size}}MB</p>
 
-          <p class="tile-item">
+          <p class="tile-item column">
             <a href="#" {{action "delete"}} {{bind-attr class="isDeleting:deleting :delete-by-slug :delete :button--delete"}}>
               delete
             </a>
           </p>
         </li>
       {{/each}}
-    {{/each}}
+    {{/each}} --}}
   </ul>
 {{else}}
   There are no caches for this repository.