From 13fc4e83e53598cf900e3e02d275a70425bf485b Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Tue, 24 Mar 2015 15:14:52 +0100
Subject: [PATCH] fadeout repos descriptions

---
 app/styles/app/layouts/profile.sass |  16 ++--
 app/templates/account.hbs           | 125 ++++++++++++++--------------
 2 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/app/styles/app/layouts/profile.sass b/app/styles/app/layouts/profile.sass
index 2dc76f71..50cc0468 100644
--- a/app/styles/app/layouts/profile.sass
+++ b/app/styles/app/layouts/profile.sass
@@ -16,9 +16,9 @@
       font-size: $font-size-sm
       color: #adaaab
       margin: 2rem 0 1rem 0
-    a
-      color: #adaaab
-      text-decoration: underline
+      a
+        color: #adaaab
+        text-decoration: underline
     @media #{$medium-up}
       h1, .sync-button, .ember-view
         display: inline-block
@@ -114,8 +114,6 @@ p.profile-user-last
         width: grid-calc(7, 24)
       @media #{$large-up}
         width: grid-calc(5, 24)
-  a
-    text-decoration: none
   .switch
     display: inline-block
   .profile-settings
@@ -130,8 +128,10 @@ p.profile-user-last
 
 .profile-repo
   @extend %border-radius-4px
+  position: relative
   width: grid-calc(14, 24)
   padding: .25em .5em .3em
+  white-space: nowrap
   span
     display: none
     margin-left: 2rem
@@ -139,8 +139,14 @@ p.profile-user-last
     color: #484849
   &:hover
     background-color: #ededec
+    &:after
+      content: ""
+      @include fadeOut(right, -90deg, #ededec)
   .active &:hover
     background-color: #e2eee2
+    &:after
+      content: ""
+      @include fadeOut(right, -90deg, #e2eee2)
   @media #{$medium-up}
     width: grid-calc(17, 24)
     height: 30px
diff --git a/app/templates/account.hbs b/app/templates/account.hbs
index 404b862d..556d9cb6 100644
--- a/app/templates/account.hbs
+++ b/app/templates/account.hbs
@@ -24,75 +24,76 @@
       {{else}}
       <p>We're only showing you public repositories. You can find your private projects on <a href="https://travis-ci.com" title="travis-ci.com">travis-ci.com</a>.</p>
     {{/if}}
+
   </header>
 
-    <section class="profile-getstarted">
-      <a href="#" class="dismiss"><span class="icon icon--dismiss-grey"></span></a>
-      <ol class="row">
-        <li class="columns medium-4">
-          <figure>
-            <img src="/images/svg/hooks-step-1-01.svg" alt="">
-            <figcaption>Flick the repository switch on</figcaption>
-          </figure>
+  <section class="profile-getstarted">
+    <a href="#" class="dismiss"><span class="icon icon--dismiss-grey"></span></a>
+    <ol class="row">
+      <li class="columns medium-4">
+        <figure>
+          <img src="/images/svg/hooks-step-1-01.svg" alt="">
+          <figcaption>Flick the repository switch on</figcaption>
+        </figure>
+      </li>
+      <li class="columns medium-4">
+        <figure>
+          <img src="/images/svg/hooks-step-2-01.svg" alt="">
+          <figcaption>Add .travis.yml file to your repository</figcaption>
+        </figure>
+      </li>
+      <li class="columns medium-4">
+        <figure>
+          <img src="/images/svg/hooks-step-3-01.svg" alt="">
+          <figcaption>Trigger your first build with a git push</figcaption>
+        </figure>
+      </li>
+    </ol>
+  </section>
+
+  <div>
+    <ul class="profile-hooklist">
+      {{#each hook in hooks}}
+        <li {{bind-attr class="hook.active:active :row"}}>
+          <div class="columns">
+            {{travis-switch action="toggle" target=hook toggleAutomatically="false"}}
+            {{!-- <button class="switch is-on"></button> --}}
+            {{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
+          </div>
+          {{#if hook.isSaving}}<span class="loading"></span>{{/if}}
+          <a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo columns">{{hook.slug}}
+            <span>{{hook.description}}</span></a>
         </li>
-        <li class="columns medium-4">
-          <figure>
-            <img src="/images/svg/hooks-step-2-01.svg" alt="">
-            <figcaption>Add .travis.yml file to your repository</figcaption>
-          </figure>
+      {{else}}
+        <li>
+          {{#if hooksWithoutAdmin.length}}
+            Sorry, but we can't find any repositories you have admin access to.
+          {{else}}
+            Sorry, it seems like we couldn't find any repositories you have access to on GitHub.
+          {{/if}}
         </li>
-        <li class="columns medium-4">
-          <figure>
-            <img src="/images/svg/hooks-step-3-01.svg" alt="">
-            <figcaption>Trigger your first build with a git push</figcaption>
-          </figure>
-        </li>
-      </ol>
-    </section>
+      {{/each}}
+    </ul>
+  </div>
 
-    <div>
-      <ul class="profile-hooklist">
-        {{#each hook in hooks}}
-          <li {{bind-attr class="hook.active:active :row"}}>
-            <div class="columns">
-              {{travis-switch action="toggle" target=hook toggleAutomatically="false"}}
-              {{!-- <button class="switch is-on"></button> --}}
-              {{#link-to "settings" hook.ownerName hook.name class="profile-settings" title="Repository settings"}}<span class="icon icon--cog"></span>{{/link-to}}
-            </div>
-            {{#if hook.isSaving}}<span class="loading"></span>{{/if}}
-            <a {{bind-attr href="hook.urlGithub"}} rel="nofollow" class="profile-repo columns">{{hook.slug}}
-              <span>{{hook.description}}</span></a>
-          </li>
-        {{else}}
-          <li>
-            {{#if hooksWithoutAdmin.length}}
-              Sorry, but we can't find any repositories you have admin access to.
-            {{else}}
-              Sorry, it seems like we couldn't find any repositories you have access to on GitHub.
-            {{/if}}
-          </li>
-        {{/each}}
-      </ul>
-    </div>
+    {{!-- {{#if hooksWithoutAdmin.length}}
+      <div id="unadministerable-hooks">
+        <h3>Repositories without admin access</h3>
 
-      {{!-- {{#if hooksWithoutAdmin.length}}
-        <div id="unadministerable-hooks">
-          <h3>Repositories without admin access</h3>
+        <p class="tip">
+          You only have pull or push access to the repositories below.
+        </p>
 
-          <p class="tip">
-            You only have pull or push access to the repositories below.
-          </p>
-
-          <ul>
-            {{#each hook in hooksWithoutAdmin}}
-              <li {{bind-attr class="hook.active:active"}}>
-                <a {{bind-attr href="hook.urlGithub"}} rel="nofollow">{{hook.slug}}</a>
-                <p class="description">{{hook.description}}</p>
-              </li>
-            {{/each}}
-          </ul>
-        </div>
-      {{/if}} --}}
+        <ul>
+          {{#each hook in hooksWithoutAdmin}}
+            <li {{bind-attr class="hook.active:active"}}>
+              <a {{bind-attr href="hook.urlGithub"}} rel="nofollow">{{hook.slug}}</a>
+              <p class="description">{{hook.description}}</p>
+            </li>
+          {{/each}}
+        </ul>
+      </div>
+    {{/if}} --}}
   {{/if}}
 {{else}}
   <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>