Add the namespaces box to the right hand side and make other small UI improvements to the repo list view

static/css/directives/repo-list-grid.css

@@ -105,10 +105,8 @@
 
 .new-repo-listing {
   display: block;
-  border-bottom: 1px solid #eee;
   font-size: 14px;
   line-height: normal;
-  padding-bottom: 30px;
 }
 
 .new-repo-listing .description {
@@ -129,3 +127,7 @@
 .repo-list-grid {
   padding-top: 10px;
 }
+
+.repo-list-title .avatar {
+  margin-right: 10px;
+}

static/css/pages/repo-list.css

@@ -0,0 +1,26 @@
+.repo-list .repo-list-panel {
+  padding: 20px;
+  padding-top: 0px;
+}
+
+.repo-list .repo-list-namespaces h4 {
+  margin: 6px;
+  margin-bottom: 20px;
+}
+
+.repo-list .namespaces-list {
+  margin: 20px;
+  padding: 0px;
+  margin-bottom: 0px;
+}
+
+.repo-list .namespaces-list li {
+  list-style: none;
+  margin: 4px;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.repo-list .namespaces-list li .avatar {
+  margin-right: 10px;
+}

static/directives/repo-list-grid.html

@@ -8,8 +8,9 @@
     </div>
     <div ng-if="!starred" class="repo-list-title">
       <span class="avatar" size="24" hash="namespace.avatar"></span>
-      <a ng-if="user.username == namespace.name">{{ namespace.name }}</a>
-      <a ng-if="user.username != namespace.name" href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>
+      <span ng-if="!isOrganization(namespace.name)">{{ namespace.name }}</span>
+      <a ng-if="isOrganization(namespace.name)"
+         href="/organization/{{ namespace.name }}">{{ namespace.name }}</a>
     </div>
 
     <!-- Repositories -->

static/js/directives/ui/repo-list-grid.js

@@ -1,11 +1,12 @@
 /**
  * An element that displays a list of repositories in a grid.
- *
  */
-angular.module('quay').directive('repoListGrid', function() {
-  return {
-    templateUrl: '/static/directives/repo-list-grid.html',
+angular.module('quay').directive('repoListGrid', function () {
+  var directiveDefinitionObject = {
     priority: 0,
+    templateUrl: '/static/directives/repo-list-grid.html',
+    replace: false,
+    transclude: true,
     restrict: 'C',
     scope: {
       repositories: '=repositories',
@@ -14,5 +15,11 @@ angular.module('quay').directive('repoListGrid', function() {
       namespace: '=namespace',
       toggleStar: '&toggleStar'
     },
+    controller: function($scope, $element, UserService) {
+      $scope.isOrganization = function(namespace) {
+        return !!UserService.getOrganization(namespace);
+      };
+    }
   };
-});
+  return directiveDefinitionObject;
+});

static/js/pages/repo-list.js

@@ -46,6 +46,10 @@
       }
     });
 
+    $scope.isOrganization = function(namespace) {
+      return !!UserService.getOrganization(namespace);
+    };
+
     // Star a repository or unstar a repository.
     $scope.toggleStar = function(repo) {
       if (repo.is_starred) {

static/partials/repo-list.html

@@ -1,4 +1,4 @@
-<div class="page-content">
+<div class="repo-list page-content">
   <div class="cor-title">
     <span class="cor-title-link"></span>
     <span class="cor-title-content">Repositories</span>
@@ -9,6 +9,8 @@
       </a>
     </span>
   </div>
+
+  <!-- Not signed in -->
   <div class="co-main-content-panel" ng-if="user.anonymous" >
     <!-- The user is not logged in -->
     <div class="cor-container signin-container row">
@@ -21,33 +23,39 @@
     </div>
   </div>
 
-    <div class="cor-tab-panel" ng-if="!user.anonymous" >
-      <div class="cor-tabs">
-        <li class="cor-tab"><i class="fa fa-star starred"></i></li>
-        <li class="cor-tab" ng-repeat="namespace in namespaces">
-          <span class="avatar" size="36" hash="namespace.avatar"></span>
-        </li>
-
-      </div> <!-- /cor-tabs -->
-
-      <div class="cor-tab-content">
-
-    <!-- The user is logged in -->
-    <div ng-if="!user.anonymous">
-
-      <!-- Starred Repository Listing -->
-      <div class="repo-list-grid" repositories="starred_repositories.value" starred="true" toggle-star="toggleStar(repository)"></div>
-
-      <!-- User and Org Repository Listings -->
-      <div ng-repeat="namespace in namespaces">
-        <div class="repo-list-grid" repositories="namespace.repositories.value" starred="false" user="user" namespace="namespace" toggle-star="toggleStar(repository)"></div>
+  <!-- Signed in -->
+  <div class="row"  ng-if="!user.anonymous">
+    <div class="col-lg-3 col-lg-push-9 col-md-3 col-md-push-9 col-sm-12">
+      <div class="co-main-content-panel repo-list-namespaces">
+        <h4>Users and Organizations</h4>
+        <ul class="namespaces-list">
+          <li ng-repeat="namespace in namespaces">
+            <span ng-if="!isOrganization(namespace.name)">
+              <span class="avatar" size="30" hash="namespace.avatar"></span>
+              {{ namespace.name }}
+            </span>
+            <a href="/organization/{{ namespace.name }}" ng-if="isOrganization(namespace.name)">
+              <span class="avatar" size="30" hash="namespace.avatar"></span>
+              {{ namespace.name }}
+            </a>
+          </li>
+        </ul>
       </div>
-
     </div>
 
-    </div>
-    </div>
+    <div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-12">
+      <div class="repo-list-panel co-main-content-panel">
+        <!-- Starred Repository Listing -->
+        <div class="repo-list-grid" repositories="starred_repositories.value" starred="true" toggle-star="toggleStar(repository)"></div>
 
+        <!-- User and Org Repository Listings -->
+        <div ng-repeat="namespace in namespaces">
+          <div class="repo-list-grid" repositories="namespace.repositories.value" starred="false" user="user" namespace="namespace" toggle-star="toggleStar(repository)"></div>
+        </div>
+      </div>
+    </div>
   </div>
+
+
 </div>