Merge pull request #268 from coreos-inc/uxtweaks

UI/UX tweaks

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

@@ -50,6 +50,14 @@
 
 .repo-list-title .starred {
   color: #ffba6d;
+  display: inline-block;
+  text-align: center;
+  width: 24px;
+  margin-right: 6px;
+}
+
+.repo-list-title .avatar {
+  margin-right: 6px !important;
 }
 
 .repo-panel {

static/css/directives/ui/repo-list-table.css

@@ -33,4 +33,8 @@
 
 .repo-list-table .repo-star i {
   color: #ccc;
+}
+
+.repo-list-table table tbody tr:last-child td {
+  border: 0px;
 }

static/css/pages/repo-list.css

@@ -14,7 +14,7 @@
 }
 
 .repo-list .namespaces-list {
-  margin: 20px;
+  margin: 4px;
   padding: 0px;
   margin-bottom: 0px;
 }
@@ -31,7 +31,7 @@
 }
 
 .repo-list .new-org {
-  margin-top: 20px !important;
+  margin-top: 10px !important;
   padding-top: 14px;
   border-top: 1px solid #eee;
 }

static/directives/repo-list-table.html

@@ -1,10 +1,11 @@
 <div class="repo-list-table-element">
-  <div ng-if="orderedRepositories.length== 0">
+  <div class="cor-loader" ng-if="isLoading"></div>
+  <div ng-if="orderedRepositories.length == 0 && !isLoading">
     <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>
 
-  <table class="co-table" ng-if="orderedRepositories.length">
+  <table class="co-table" ng-if="orderedRepositories.length && !isLoading">
    <thead>
     <td class="hidden-xs"
         ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)">

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

@@ -20,7 +20,7 @@ angular.module('quay').directive('repoListTable', function () {
 
       $scope.maxPopularity = 0;
       $scope.options = {
-        'predicate': 'is_starred',
+        'predicate': 'popularity',
         'reverse': true
       };
 
@@ -81,8 +81,13 @@ angular.module('quay').directive('repoListTable', function () {
       $scope.$watch('repositoriesResources', function(resources) {
         $scope.repositories = [];
         $scope.maxPopularity = 0;
+        $scope.isLoading = false;
 
         resources.forEach(function(resource) {
+          if (resource.loading) {
+            $scope.isLoading = true;
+          }
+
           (resource.value || []).forEach(function(repository) {
             var repositoryInfo = $.extend(repository, {
               'full_name': repository.namespace + '/' + repository.name,