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 1/2] 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

From 2ab3376729b1148bcf62d48f14217aeee2ad4ca4 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 20 Jul 2015 14:56:04 -0400
Subject: [PATCH 2/2] Nicer strength indicators

---
 .../css/directives/ui/strength-indicator.css  | 57 ++++++++++++++-----
 static/directives/strength-indicator.html     |  5 +-
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/static/css/directives/ui/strength-indicator.css b/static/css/directives/ui/strength-indicator.css
index dcd20638e..12c30d308 100644
--- a/static/css/directives/ui/strength-indicator.css
+++ b/static/css/directives/ui/strength-indicator.css
@@ -1,42 +1,71 @@
+.strength-indicator {
+  display: inline-block;
+}
+
 .strength-indicator .indicator-sliver {
-  margin: 1px;
-  width: 14px;
-  height: 3px;
+  display: inline-block;
+  margin: 0px;
+  margin-right: 2px;
+  width: 4px;
   border: 1px solid #D5D5D5;
   transition: 0.5s ease;
 }
 
-.strength-indicator .strength-indicator-element.good .indicator-sliver {
-  background: green;
-  border: 1px solid green;
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(1) {
+  height: 10px;
 }
 
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(2) {
+  height: 14px;
+}
+
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(3) {
+  height: 18px;
+}
+
+.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(4) {
+  height: 22px;
+}
+
+/** Good */
+
+.strength-indicator .strength-indicator-element.good .indicator-sliver {
+  background: #83D29C;
+  border-color: #83D29C;
+}
+
+/** Fair */
+
 .strength-indicator .strength-indicator-element.fair .indicator-sliver {
-  background: orange;
-  border: 1px solid orange;
+  background: #E4C212;
+  border-color: #E4C212;
 }
 
 .strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child {
-  border: 1px solid #D5D5D5;
   background: transparent;
+  border-color: #D5D5D5;
 }
 
+/** Bairly */
+
 .strength-indicator .strength-indicator-element.barely .indicator-sliver {
-  background: rgb(255, 61, 0);
-  border: 1px solid rgb(255, 61, 0);
+  background: rgb(255, 155, 0);
+  border-color: rgb(255, 155, 0);
 }
 
 .strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child {
-  border: 1px solid #D5D5D5;
   background: transparent;
+  border-color: #D5D5D5;
 }
 
 .strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) {
-  border: 1px solid #D5D5D5;
   background: transparent;
+  border-color: #D5D5D5;
 }
 
+/** Poor */
+
 .strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child {
-  border: 1px solid red;
   background: red;
+  border-color: red;
 }
\ No newline at end of file
diff --git a/static/directives/strength-indicator.html b/static/directives/strength-indicator.html
index 439b53639..a63642f9f 100644
--- a/static/directives/strength-indicator.html
+++ b/static/directives/strength-indicator.html
@@ -1,6 +1,3 @@
 <span class="strength-indicator-element" ng-class="strengthClass">
-  <span class="indicator-sliver"></span>
-  <span class="indicator-sliver"></span>
-  <span class="indicator-sliver"></span>
-  <span class="indicator-sliver"></span>
+  <span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span>
 </span>
\ No newline at end of file