From 2704441eed366f642c86192a61d64d0ef1372fcd Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 20 Jul 2015 14:43:13 -0400
Subject: [PATCH] Make empty repo table a bit nicer

---
 static/directives/repo-list-grid.html  |  2 +-
 static/directives/repo-list-table.html | 97 ++++++++++++++------------
 2 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/static/directives/repo-list-grid.html b/static/directives/repo-list-grid.html
index aca6fa2b6..e1e4018d5 100644
--- a/static/directives/repo-list-grid.html
+++ b/static/directives/repo-list-grid.html
@@ -51,7 +51,7 @@
       </div>
       <div ng-if="!starred && repositoriesResource.value.length == 0">
         <div class="empty-primary-msg">This namespace doesn't have any viewable repositories.</div>
-        <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
+        <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new?namespace={{ namespace.name }}">creating a new repository</a>.</div>
       </div>
     </div>
 
diff --git a/static/directives/repo-list-table.html b/static/directives/repo-list-table.html
index 10daa7d81..3871ba873 100644
--- a/static/directives/repo-list-table.html
+++ b/static/directives/repo-list-table.html
@@ -1,49 +1,54 @@
 <div class="repo-list-table-element">
- <table class="co-table">
- <thead>
-  <td class="hidden-xs"
-      ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)">
-    <a href="javascript:void(0)" ng-click="orderBy('full_name')">Repository Name</a>
-  </td>
-  <td class="hidden-xs"
-      ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
-      style="min-width: 120px;">
-    <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
-  </td>
-  <td class="hidden-xs"
-      ng-class="tablePredicateClass('popularity', options.predicate, options.reverse)"
-      style="min-width: 20px;">
-    <a href="javascript:void(0)" ng-click="orderBy('popularity')">Activity</a>
-  </td>
-  <td class="hidden-xs"
-      ng-class="tablePredicateClass('is_starred', options.predicate, options.reverse)"
-      style="width: 70px">
-    <a href="javascript:void(0)" ng-click="orderBy('is_starred')">Star</a>
-  </td>
- </thead>
+  <div ng-if="orderedRepositories.length== 0">
+    <div class="empty-primary-msg">You do not have any viewable repositories.</div>
+    <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
+  </div>
 
- <tbody>
-   <tr ng-repeat="repository in orderedRepositories">
-     <td class="repo-name-icon">
-        <span class="avatar" size="24" data="getAvatarData(repository.namespace)"></span>
-        <a href="/repository/{{ repository.namespace }}/{{ repository.name }}">
-          <span class="namespace">{{ repository.namespace }}</span>
-          <span class="name">{{ repository.name }}</span>
-        </a>
-      </td>
-     <td class="last-modified">
-       <span ng-if="repository.last_modified">
-         {{ repository.last_modified * 1000 | amCalendar }}
-       </span>
-       <span class="empty" ng-if="!repository.last_modified">(Empty Repository)</span>
-     </td>
-     <td class="popularity hidden-xs">
-       <span class="strength-indicator" value="repository.popularity" maximum="maxPopularity"></span>
-     </td>
-     <td>
-      <span class="repo-star" repository="repository"
-            star-toggled="starToggled({'repository': repository})"></span></td>
-   </tr>
- </tbody>
- </table>
+  <table class="co-table" ng-if="orderedRepositories.length">
+   <thead>
+    <td class="hidden-xs"
+        ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)">
+      <a href="javascript:void(0)" ng-click="orderBy('full_name')">Repository Name</a>
+    </td>
+    <td class="hidden-xs"
+        ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
+        style="min-width: 120px;">
+      <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
+    </td>
+    <td class="hidden-xs"
+        ng-class="tablePredicateClass('popularity', options.predicate, options.reverse)"
+        style="min-width: 20px;">
+      <a href="javascript:void(0)" ng-click="orderBy('popularity')">Activity</a>
+    </td>
+    <td class="hidden-xs"
+        ng-class="tablePredicateClass('is_starred', options.predicate, options.reverse)"
+        style="width: 70px">
+      <a href="javascript:void(0)" ng-click="orderBy('is_starred')">Star</a>
+    </td>
+   </thead>
+
+   <tbody>
+     <tr ng-repeat="repository in orderedRepositories">
+       <td class="repo-name-icon">
+          <span class="avatar" size="24" data="getAvatarData(repository.namespace)"></span>
+          <a href="/repository/{{ repository.namespace }}/{{ repository.name }}">
+            <span class="namespace">{{ repository.namespace }}</span>
+            <span class="name">{{ repository.name }}</span>
+          </a>
+        </td>
+       <td class="last-modified">
+         <span ng-if="repository.last_modified">
+           {{ repository.last_modified * 1000 | amCalendar }}
+         </span>
+         <span class="empty" ng-if="!repository.last_modified">(Empty Repository)</span>
+       </td>
+       <td class="popularity hidden-xs">
+         <span class="strength-indicator" value="repository.popularity" maximum="maxPopularity"></span>
+       </td>
+       <td>
+        <span class="repo-star" repository="repository"
+              star-toggled="starToggled({'repository': repository})"></span></td>
+     </tr>
+   </tbody>
+  </table>
 </div>
\ No newline at end of file