From 5adda57d8064756781d0180e43c4d085db355e61 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Mon, 9 Mar 2015 18:00:02 +0100
Subject: [PATCH] start implementing new build history
---
app/styles/app/layouts/buildheader.sass | 18 +----
app/styles/app/modules/tiles.sass | 61 +++++++++++++++-
app/templates/build.hbs | 2 +-
app/templates/builds.hbs | 96 +++++++++++--------------
4 files changed, 103 insertions(+), 74 deletions(-)
diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass
index 580f908e..efd5530e 100644
--- a/app/styles/app/layouts/buildheader.sass
+++ b/app/styles/app/layouts/buildheader.sass
@@ -12,7 +12,7 @@
.repo-header
header
- margin: 1rem 0 2.3rem
+ margin: 1rem 0 3rem
> *
vertical-align: middle
@@ -93,17 +93,6 @@
white-space: pre-wrap
color: $grey2
-.repo-main-author
- img
- width: 22px
- height: 22px
- margin-right: .4em
- vertical-align: top
- border-radius: 50%
- @media #{$medium-up}
- position: absolute
- bottom: 0
-
.repo-main-info
@include resetul
padding-right: 2em
@@ -116,11 +105,6 @@
&:hover
text-decoration: underline
- .icon
- margin-right: .3em
- height: 1.3em
- vertical-align: middle
-
.repo-main-tools
position: absolute
top: 0
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index c74021aa..de16e3fc 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -3,6 +3,9 @@
position: relative
padding: .8rem .8rem .8rem 3rem
background-color: $cream-light
+ p
+ margin: 0
+ white-space: nowrap
@media #{$medium-up}
height: 145px
@@ -10,12 +13,42 @@
.tile-main
height: 100%
+
+.tile--small
+ margin-bottom: 1em
+ @media #{$medium-up}
+ height: 70px
+ overflow: hidden
+
// todo refactor
.tile-main
+ h2,
+ small
+ margin: 0
+ font-weight: 400
+ font-size: 15px
+ color: $grey3
+ line-height: 1
+ small
+ margin-right: .3em
+ font-weight: 600
+
@media #{$xlarge-up}
@include grid-column(9)
.tile-additional
+ position: relative
+ p, li
+ padding: .1em 0
+ .icon
+ margin-right: .3em
+ height: 1.3em
+ vertical-align: middle
+ a
+ color: $grey1
+ &:hover
+ color: $grey1
+ text-decoration: underline
@media #{$small-only}
margin-top: 1em
@media #{$xlarge-up}
@@ -35,13 +68,35 @@
display: block
width: 1.1em
height: 1.2em
- margin: .5em auto 1.1em
+ margin: .8em auto 1.1em
.request-kind
display: block
width: 1.4em
height: 1.1em
margin: .5em auto 1.1em
+.tile-author
+ img
+ width: 22px
+ height: 22px
+ margin-right: .4em
+ vertical-align: top
+ border-radius: 50%
+ @media #{$medium-up}
+ position: absolute
+ bottom: 0
-.tile-additional
- position: relative
+
+// repo header
+.tile--repo
+
+// build history etc
+.tile--build
+ .tile-main
+ @media #{$medium-up}
+ border-right: solid 1px $grey1
+ @media #{$xlarge-up}
+ @include grid-column(8)
+ .tile-additional
+ @media #{$xlarge-up}
+ @include grid-column(4)
diff --git a/app/templates/build.hbs b/app/templates/build.hbs
index dd3385d6..de5d2c8b 100644
--- a/app/templates/build.hbs
+++ b/app/templates/build.hbs
@@ -15,7 +15,7 @@
<div class="repo-main-description">
<pre class="body">{{format-message build.commit.body repoBinding=build.repo pre=true}}</pre>
</div>
- <div class="repo-main-author">
+ <div class="tile-author">
{{#if commit.authorName}}
<img {{bind-attr src="urlAuthorGravatarImage"}}>{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}
{{/if}}
diff --git a/app/templates/builds.hbs b/app/templates/builds.hbs
index 7978bf25..b6ddb795 100644
--- a/app/templates/builds.hbs
+++ b/app/templates/builds.hbs
@@ -1,72 +1,62 @@
{{#if content.isLoaded}}
- <table id="builds" class="list">
- <thead>
- <tr>
- <th>Build</th>
- <th>Message</th>
- <th>
- Commit
- </th>
- <th class="committer">
- Committer
- </th>
- {{#if isPullRequestsList}}
- <th>
- PR
- </th>
- {{/if}}
- <th>Duration</th>
- <th>Finished</th>
- </tr>
- </thead>
-
- <tbody>
- {{#each build in controller itemController="buildsItem"}}
- <tr {{bind-attr class="build.color"}}>
- <td class="number">
- <span class="status"></span>
+{{!-- <table id="builds" class="list"> --}}
+ {{#each build in controller itemController="buildsItem"}}
+ <div {{bind-attr class="build.color :tile :tile--small :tile--build :row"}}>
+ <div class="tile-status">
+ <span class="icon icon-status passed"></span>
+ <span class="icon request-kind push"></span>
+ </div>
+ <div class="column tile-main medium-6">
+ <h2>
+ {{#if isPullRequestsList}}
+ <small>PR #{{build.pullRequestNumber}}</small>
+ {{else}}
+ <a {{bind-attr href="build.urlGithubPullRequest"}}>
+ <small>insert branch</small>
+ </a>
+ {{/if}}
+ {{{format-message build.commit.message short="true" repoBinding=build.repo}}}
+ </h2>
+ <p class="tile-author"><img src="//placehold.it/25x25" alt=""> {{build.commit.committerName}} commited</p>
+ </div>
+ <div class="column tile-additional medium-6 end">
+ <div class="column small-6">
+ <p class="build-id">
{{#if build.id}}
{{#link-to "build" build.repo build}}
- {{build.number}}
+ <span class="icon icon-hash"></span>
+ {{build.number}} {{build.status}}
{{/link-to}}
{{/if}}
- </td>
- <td class="message">
- {{{format-message build.commit.message short="true" repoBinding=build.repo}}}
- </td>
- <td class="commit">
+ </p>
+ <p class="">
<a {{bind-attr href="build.urlGithubCommit"}}>
+ <span class="icon icon-github"></span>
{{format-commit build.commit}}
</a>
- </td>
- <td class="committer">
- {{build.commit.committerName}}
- </td>
- {{#if isPullRequestsList}}
- <td>
- <a {{bind-attr href="build.urlGithubPullRequest"}}>
- #{{build.pullRequestNumber}}
- </a>
- </td>
- {{/if}}
- <td class="duration" {{bind-attr title="build.duration"}}>
+ </p>
+ </div>
+ <div class="column small-6">
+ <p class="" {{bind-attr title="build.duration"}}>
+ <span class="icon icon-clock"></span>
{{format-duration build.duration}}
- </td>
- <td class="finished_at timeago" {{bind-attr title="build.formattedFinishedAt"}}>
+ </p>
+ <p class="" {{bind-attr title="build.formattedFinishedAt"}}>
+ <span class="icon icon-cal"></span>
{{format-time build.finishedAt}}
- </td>
- </tr>
- {{/each}}
- </tbody>
- </table>
+ </p>
+ </div>
+ </div>
+ </div>
+ {{/each}}
{{#if displayShowMoreButton}}
<p>
{{view 'show-more-button'}}
{{#if isLoading}}
- <span class="loading"></span>
+ <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{/if}}
</p>
{{/if}}
{{else}}
- <div class="loading"><span>Loading</span></div>
+ <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
{{/if}}