From 07db658fac96f4c6e567b8811c42129916682bd6 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Mon, 16 Mar 2015 18:05:23 +0100
Subject: [PATCH] add markup and classes for sidebar

---
 app/styles/app/layouts/sidebar.sass |  29 +++++++
 app/styles/app/modules/search.sass  |  24 ++++--
 app/templates/repos.hbs             | 114 ++++++++++++++++++++--------
 app/templates/repos/list/tabs.hbs   |  36 +++++----
 app/views/repos-list-tabs.coffee    |   2 +-
 5 files changed, 150 insertions(+), 55 deletions(-)

diff --git a/app/styles/app/layouts/sidebar.sass b/app/styles/app/layouts/sidebar.sass
index e69de29b..80059cfa 100644
--- a/app/styles/app/layouts/sidebar.sass
+++ b/app/styles/app/layouts/sidebar.sass
@@ -0,0 +1,29 @@
+$sb-grey: #f2f2f2
+$sb-font-size: 14px
+
+.tile--sidebar
+  // border-left: 8px solid #
+  background-color: $white
+  border-bottom: 6px solid #FAF9F7
+
+
+
+.tabnav--sidebar
+  font-size: $sb-font-size
+  border-bottom: solid 2px $sb-grey
+  width: 90%
+  margin: auto
+  ul
+    height: 1.7em
+  li.float-right
+    padding-right: 0
+  .icon--plus:hover
+    &:after
+      color: $teal1
+
+.sidebar-list
+  margin-top: 1rem
+  ul
+    @include resetul
+
+
diff --git a/app/styles/app/modules/search.sass b/app/styles/app/modules/search.sass
index 2b1bedd2..45caa1c5 100644
--- a/app/styles/app/modules/search.sass
+++ b/app/styles/app/modules/search.sass
@@ -30,8 +30,22 @@
 
 
 .search--sidebar
-  background-color: $white;
-  border: solid 1px #f2f2f2
-  color: #a6adad
-  font-size: 14px
-  height: 28px
\ No newline at end of file
+  position: relative
+  height: 10em
+  .search-inner
+    @extend %absolute-center
+    width: 90%
+    height: 33px
+    input
+      @extend .icon--search
+      display: inline-block
+      width: 100%
+      padding: .5em
+      color: #a6adad
+      font-size: 14px
+      border: solid 1px #f2f2f2
+      border-radius: 4px
+      background:
+        repeat: no-repeat
+        position: 98% 6px
+        size: 17px 17px
diff --git a/app/templates/repos.hbs b/app/templates/repos.hbs
index 950bf60b..d7d0f388 100644
--- a/app/templates/repos.hbs
+++ b/app/templates/repos.hbs
@@ -1,49 +1,97 @@
 <div id="search_box" class="search search--sidebar">
-  {{input value=controller.search placeholder="Search all repositories"}}
+  <div class="search-inner">
+    {{input value=controller.search placeholder="Search all repositories"}}
+  </div>
 </div>
 
 {{view 'repos-list-tabs'}}
 
-<div class="tab">
+
+<div class="tabbody sidebar-list">
+
   {{#if isLoaded}}
     {{#collection 'repos-list' content=this}}
       {{#with view.repo as repo}}
-        <div class="slug-and-status">
-          <span class="status"></span>
-          {{#if repo.slug}}
-            {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
-          {{/if}}
+        <div class="tile tile--sidebar">
+          <h2 class="tile-title">
+            {{#if repo.slug}}
+              {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
+            {{/if}}
+          </h2>
+          {{#with repo.lastBuildHash as lastBuild}}
+            {{#if repo.slug}}
+              {{#if lastBuild.id}}
+              <p class="tile-title float-right">
+                {{#link-to "build" repo lastBuild.id
+                   class="last_build"}}{{lastBuild.number}}{{/link-to}}
+              </p>
+              {{/if}}
+            {{/if}}
+          {{/with}}
+          <p>
+            <span class="icon icon--clock"></span>
+            Duration: 
+            <abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
+              {{format-duration repo.lastBuildDuration}}
+            </abbr>
+          </p>
+          <p>
+            <span class="icon icon--cal"></span>
+            Finished: 
+            <abbr clas  s="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
+              {{format-time repo.lastBuildFinishedAt}}
+            </abbr>
+          </p>
         </div>
-        {{#with repo.lastBuildHash as lastBuild}}
-          {{#if repo.slug}}
-            {{#if lastBuild.id}}
-              {{#link-to "build" repo lastBuild.id
-                 class="last_build"}}{{lastBuild.number}}{{/link-to}}
-             {{/if}}
-          {{/if}}
-        {{/with}}
-
-        {{#if repo.lastBuildHash.number }}
-        <p class="summary">
-          <span class="duration_label">Duration:</span>
-          <abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
-            {{format-duration repo.lastBuildDuration}}
-          </abbr>
-        </p>
-        <p class="summary">
-          <span class="finished-icon"></span><span class="finished_at_label">Finished:</span>
-          <abbr class="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
-            {{format-time repo.lastBuildFinishedAt}}
-          </abbr>
-        </p>
-        {{/if}}
-
-        <div class="indicator"><span></span></div>
       {{/with}}
     {{else}}
       <p class="empty">{{noReposMessage}}</p>
     {{/collection}}
+
+  {{!-- <div class="tab">
+    {{#if isLoaded}}
+      {{#collection 'repos-list' content=this}}
+        {{#with view.repo as repo}}
+          <div class="slug-and-status">
+            <span class="status"></span>
+            {{#if repo.slug}}
+              {{#link-to "repo" repo class="slug"}}{{repo.slug}}{{/link-to}}
+            {{/if}}
+          </div>
+          {{#with repo.lastBuildHash as lastBuild}}
+            {{#if repo.slug}}
+              {{#if lastBuild.id}}
+                {{#link-to "build" repo lastBuild.id
+                   class="last_build"}}{{lastBuild.number}}{{/link-to}}
+               {{/if}}
+            {{/if}}
+          {{/with}}
+
+          {{#if repo.lastBuildHash.number }}
+          <p class="summary">
+            <span class="duration_label">Duration:</span>
+            <abbr class="duration" {{bind-attr title="lastBuildStartedAt"}}>
+              {{format-duration repo.lastBuildDuration}}
+            </abbr>
+          </p>
+          <p class="summary">
+            <span class="finished-icon"></span><span class="finished_at_label">Finished:</span>
+            <abbr class="finished_at timeago" {{bind-attr title="lastBuildFinishedAt"}}>
+              {{format-time repo.lastBuildFinishedAt}}
+            </abbr>
+          </p>
+          {{/if}}
+
+          <div class="indicator"><span></span></div>
+        {{/with}}
+      {{else}}
+        <p class="empty">{{noReposMessage}}</p>
+      {{/collection}}
+    {{else}}
+      <div class="loading"><span>Loading</span></div>
+    {{/if}}
+  </div> --}}
   {{else}}
     <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
   {{/if}}
-</div>
+</div>
\ No newline at end of file
diff --git a/app/templates/repos/list/tabs.hbs b/app/templates/repos/list/tabs.hbs
index 3b45ab47..8ee3f89b 100644
--- a/app/templates/repos/list/tabs.hbs
+++ b/app/templates/repos/list/tabs.hbs
@@ -1,19 +1,23 @@
-<ul class="tabs">
-  <li id="tab_owned" {{bind-attr class="view.classOwned"}}>
-    <h5>{{#link-to "main.repositories"}}My Repositories{{/link-to}}</h5>
-  </li>
-
-  {{#unless config.pro}}
-    <li id="tab_recent" {{bind-attr class="view.classRecent"}}>
-      <h5>{{#link-to "main.recent"}}Recent{{/link-to}}</h5>
+<div class="tabnav tabnav--sidebar" role="tablist">
+  <ul class="tab tabs--sidebar">
+    <li id="tab_owned" {{bind-attr class="view.classOwned"}}>
+      {{#link-to "main.repositories"}}My Repositories{{/link-to}}
     </li>
-  {{/unless}}
 
-  <li id="tab_search" {{bind-attr class="view.classSearch"}}>
-    <h5>Search</h5>
-  </li>
+{{!--     {{#unless config.pro}}
+      <li id="tab_recent" {{bind-attr class="view.classRecent"}}>
+        <h5>{{#link-to "main.recent"}}Recent{{/link-to}}</h5>
+      </li>
+    {{/unless}} --}}
 
-  <li id="tab_new" {{bind-attr class="view.classNew"}}>
-    <h5>{{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}+{{/link-to}}</h5>
-  </li>
-</ul>
+    {{!-- <li id="tab_search" {{bind-attr class="view.classSearch"}}>
+      <h5>Search</h5>
+    </li> --}}
+
+    <li id="tab_new" {{bind-attr class="view.classNew :float-right"}}>
+      {{#link-to "profile" trackEvent="add-repository-from-list" title="Add New Repository"}}
+        <span class="icon icon--plus"></span>
+      {{/link-to}}
+    </li>
+  </ul>
+</div>
diff --git a/app/views/repos-list-tabs.coffee b/app/views/repos-list-tabs.coffee
index 964f925a..6f70e6da 100644
--- a/app/views/repos-list-tabs.coffee
+++ b/app/views/repos-list-tabs.coffee
@@ -15,7 +15,7 @@ View = Ember.View.extend
   classOwned: (->
     classes = []
     classes.push('active')  if @get('tab') == 'owned'
-    classes.push('display-inline') if @get('currentUser')
+    # classes.push('display-inline') if @get('currentUser')
     classes.join(' ')
   ).property('tab', 'currentUser')