From 30485d1f00afb7eb0c3e74160f76e01d89c06298 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Tue, 10 Mar 2015 12:16:11 +0100
Subject: [PATCH] fix things as described in teal#148

---
 app/styles/app/_mixins/mixins.sass      | 16 +++++++++++++
 app/styles/app/_mixins/vars.sass        |  3 +++
 app/styles/app/layouts/buildheader.sass | 31 +++++++++++++++++--------
 app/styles/app/main/log.sass            |  2 +-
 app/styles/app/modules/tabs.sass        |  2 +-
 app/styles/app/modules/tiles.sass       |  2 +-
 app/templates/build.hbs                 |  2 +-
 7 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/app/styles/app/_mixins/mixins.sass b/app/styles/app/_mixins/mixins.sass
index 8b5761de..ac4e134f 100644
--- a/app/styles/app/_mixins/mixins.sass
+++ b/app/styles/app/_mixins/mixins.sass
@@ -8,6 +8,22 @@
   background-clip: padding-box
   border-radius 4px
 
+@mixin fadeOut($position, $angle, $color)
+  content: ""
+  display: block
+  position: absolute
+
+  @if $position == bottom
+    bottom: 0
+    width: 100%
+    height: 2em
+  @else if $position == right
+    top: 0
+    right: 0
+    width: 2em
+    height: 100%
+
+  background: linear-gradient($angle, rgba($color, 1) 0%, rgba($color, 0) 100%)
 
 @mixin clearfix
   &:before,
diff --git a/app/styles/app/_mixins/vars.sass b/app/styles/app/_mixins/vars.sass
index d74726a5..f4b5c16c 100644
--- a/app/styles/app/_mixins/vars.sass
+++ b/app/styles/app/_mixins/vars.sass
@@ -1,4 +1,7 @@
 
+$font-size-m: 16px
+$line-height-m: 1.3
+
 // colors
 $teal1: #5FA5A4
 $teal2: #63A4A3
diff --git a/app/styles/app/layouts/buildheader.sass b/app/styles/app/layouts/buildheader.sass
index efd5530e..da6def72 100644
--- a/app/styles/app/layouts/buildheader.sass
+++ b/app/styles/app/layouts/buildheader.sass
@@ -5,9 +5,8 @@
   .repo-build-status a
     color: $color
 
-
 .repo
-  font-size: $font-size-normal
+  font-size: $font-size-m
   color: $grey
 
 .repo-header
@@ -58,12 +57,12 @@
   @media #{$medium-up}
     .dropdown
       position: absolute
-      top: -1.1em
+      top: -0.8em
       right: 0
       z-index: 50
     .tabnav
       position: absolute
-      top: -0.6em
+      top: -0.4em
     .repo-menu-header
       position: relative
       height: 1.6em
@@ -75,7 +74,7 @@
   small
     margin: 0
     font-weight: 400
-    font-size: $font-size-big
+    font-size: $font-size-m
     color: $grey3
     line-height: 1
   small
@@ -83,6 +82,14 @@
     font-weight: 600
 
 .repo-main-description
+
+  @media #{$medium-up}
+    position: relative
+    max-height: 4.9em
+    overflow: hidden
+    &:after
+      @include fadeOut(bottom, 0deg, $cream-light)
+
   .body
     display: block
     font-size: 13px
@@ -95,10 +102,13 @@
 
 .repo-main-info
   @include resetul
+  position: relative
   padding-right: 2em
   margin-right: 1.4em
   border-right: $cream-dark 1px solid
-  line-height: 1.8
+  line-height: $line-height-m
+  &:after
+    @include fadeOut(right, -90deg, $cream-light)
   a
     color: $grey
     white-space: nowrap
@@ -118,10 +128,11 @@
     &:hover
       background-color: darken($grey, 10)
   .icon
-    width: 1em
-    height: 1.4em
-    vertical-align: middle
-  .icon--cancel
+    width: .9em
     height: 1.1em
+    vertical-align: bottom
+  .icon--cancel
+    width: 1em
+    height: 1.05em
   .icon--codeclimate
     width: 1.2em
diff --git a/app/styles/app/main/log.sass b/app/styles/app/main/log.sass
index 12229b2e..d9d1eb35 100644
--- a/app/styles/app/main/log.sass
+++ b/app/styles/app/main/log.sass
@@ -75,7 +75,7 @@
 .log-header
   height: 44px
   margin: 0
-  padding: .9em .8em .6em
+  padding: .7em .8em .6em
   text-align: right
   background-color: $log-header-bg
   @extend %border-top-4px
diff --git a/app/styles/app/modules/tabs.sass b/app/styles/app/modules/tabs.sass
index 7bb0c86e..2e8d9ca0 100644
--- a/app/styles/app/modules/tabs.sass
+++ b/app/styles/app/modules/tabs.sass
@@ -42,7 +42,7 @@
   .tabnav-sub
     @include resetul
     @extend %inline-block
-    overflow: auto
+    overflow: visible
     a
       color: $grey2
       padding: .5em 0
diff --git a/app/styles/app/modules/tiles.sass b/app/styles/app/modules/tiles.sass
index de16e3fc..0fc3cc83 100644
--- a/app/styles/app/modules/tiles.sass
+++ b/app/styles/app/modules/tiles.sass
@@ -68,7 +68,7 @@
     display: block
     width: 1.1em
     height: 1.2em
-    margin: .8em auto 1.1em
+    margin: .7em auto 1em
   .request-kind
     display: block
     width: 1.4em
diff --git a/app/templates/build.hbs b/app/templates/build.hbs
index de5d2c8b..4ba65f7f 100644
--- a/app/templates/build.hbs
+++ b/app/templates/build.hbs
@@ -41,7 +41,7 @@
         </li>
         <li>
           {{#if build.pullRequest}}
-            <a class="compare" {{bind-attr href="build.commit.compareUrl"}}>#{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
+            <a class="compare" {{bind-attr href="build.commit.compareUrl"}}><span class="icon icon--github"></span> #{{build.pullRequestNumber}}: {{build.pullRequestTitle}}</a>
           {{else}}
             {{#if build.commit.compareUrl}}
               <a class="compare" {{bind-attr href="build.commit.compareUrl"}}>