Rip out spinjs in favor of a font-awesome + css spinner.

static/js/app.js

@@ -1,30 +1,3 @@
-// Register any plugin code.
-$.fn.spin = function(opts) {
-  this.each(function() {
-    var $this = $(this),
-        spinner = $this.data('spinner');
-
-    if (spinner) spinner.stop();
-    if (opts !== false) {
-      options = {
-        color: $this.css('color') || '#000',
-        lines: 12, // The number of lines to draw
-        length: 7, // The length of each line
-        width: 4, // The line thickness
-        radius: 10, // The radius of the inner circle
-        speed: 1, // Rounds per second
-        trail: 100, // Afterglow percentage
-        shadow: false // Whether to render a shadow   
-      };
-
-      opts = $.extend(options, opts);
-      spinner = new Spinner(opts).spin(this);
-      $this.data('spinner', spinner);
-    }
-  });
-  return this;
-};
-
 // Start the application code itself.
 quayApp = angular.module('quay', ['restangular', 'angularMoment'], function($provide) {
     $provide.factory('UserService', ['Restangular', function(Restangular) {

static/js/controllers.js

@@ -108,7 +108,6 @@ function RepoListCtrl($scope, Restangular, UserService) {
     return getMarkedDown(string);
   };
 
-  $('.spin').spin();
   $scope.loading = true;
   $scope.public_repositories = null;
   $scope.private_repositories = null;
@@ -131,7 +130,6 @@ function RepoListCtrl($scope, Restangular, UserService) {
 
 function LandingCtrl($scope, $timeout, Restangular, UserService) {
   $('.form-signup').popover();
-  $('.spin').spin();
 
   $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
     if (!currentUser.anonymous) {
@@ -262,7 +260,6 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
   var name = $routeParams.name;
   var tag = $routeParams.tag || 'latest';
 
-  $('.spin').spin();
   $scope.loading = true;
 
   var repositoryFetch = Restangular.one('repository/' + namespace + '/' + name);
@@ -417,7 +414,6 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
     });
   };
 
-  $('.spin').spin();
   $scope.loading = true;
 
   // Fetch the repository information.
@@ -472,8 +468,6 @@ function UserAdminCtrl($scope, Restangular) {
     planDict[$scope.plans[i].stripeId] = $scope.plans[i];
   }
 
-  $('.spin').spin();
-
   var subscribedToPlan = function(sub) {
     $scope.subscription = sub;
     $scope.subscribedPlan = planDict[sub.plan];

static/partials/landing.html

@@ -9,7 +9,7 @@
 
   <div class="message-container" ng-show="!user.anonymous">
     <div ng-show="loadingmyrepos">
-      <div class="spin"></div>
+      <i class="icon-spinner icon-spin icon-3x"></i>
     </div>
     <div ng-show="!loadingmyrepos && myrepos.length > 0">
       <h2>Your Top Repositories</h4>      
@@ -43,7 +43,7 @@
         <button class="btn btn-lg btn-primary btn-block" ng-disabled="signupForm.$invalid" type="submit">Get Started!</button>
       </form>
       <div ng-show="registering" style="text-align: center">
-        <span class="spin" color="#fff" style="display: inline-block"></span>
+        <i class="icon-spinner icon-spin icon-3x"></i>
       </div>
       <div ng-show="awaitingConfirmation">
         <div class="sub-message">Thank you for registering! We have sent you an activation email. You must <b>verify your email address</b> before you can continue.</div>

static/partials/repo-admin.html

@@ -1,5 +1,5 @@
 <div class="loading" ng-show="loading">
-  <div class="spin"></div>
+  <i class="icon-spinner icon-spin icon-3x"></i>
 </div>
 
 <div class="container" ng-show="!loading && (!repo || !permissions)">

static/partials/repo-list.html

@@ -1,5 +1,5 @@
 <div class="loading" ng-show="loading">
-  <div class="spin"></div>
+  <i class="icon-spinner icon-spin icon-3x"></i>
 </div>
 
 <div class="container" ng-show="!loading">
@@ -7,16 +7,16 @@
     <h3>Your Repositories</h3>
     <div ng-show="private_repositories.length > 0">
       <div class="repo-listing" ng-repeat="repository in private_repositories">
-	<i class="icon-hdd icon-large"></i>
+        <i class="icon-hdd icon-large"></i>
-	<a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
+        <a ng-href="#/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
-	<div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
+        <div class="description" ng-bind-html-unsafe="getCommentFirstLine(repository.description)"></div>
       </div>
     </div>
 
     <div ng-show="private_repositories.length == 0" style="padding:20px;">
       <div class="alert alert-info">
-	<h4>You don't have any repositories yet!</h4>
+        <h4>You don't have any repositories yet!</h4>
-	<a href="#/guide"><b>Click here</b> to learn how to create a repository</a>
+        <a href="#/guide"><b>Click here</b> to learn how to create a repository</a>
       </div>
 
     </div>

static/partials/user-admin.html

@@ -1,6 +1,6 @@
 <div class="container user-admin">
   <div class="loading" ng-show="planLoading || planChanging">
-    <div class="spin"></div>
+    <i class="icon-spinner icon-spin icon-3x"></i>
   </div>
   <div class="row" ng-show="errorMessage">
     <div class="col-md-12">
@@ -11,7 +11,7 @@
     <div class="col-md-4" ng-repeat='plan in plans'>
       <div class="panel" ng-class="{'panel-success': subscription.plan == plan.stripeId, 'panel-default': subscription.plan != plan.stripeId}">
         <div class="panel-heading">
-	  {{ plan.title }}
+          {{ plan.title }}
           <span class="pull-right" ng-show="subscription.plan == plan.stripeId">
             <i class="icon-ok"></i>
             Subscribed
@@ -22,7 +22,7 @@
           <div class="plan-description"><b>{{ plan.privateRepos }}</b> Private Repositories</div>
           <button class="btn btn-primary" ng-hide="subscription" ng-click="subscribe(plan.stripeId)">Subscribe</button>
           <button class="btn" ng-show="subscription && (subscription.plan != plan.stripeId)" ng-click="changeSubscription(plan.stripeId)">Change</button>
-          <button class="btn btn-danger" ng-show="subscription.plan == plan.stripeId" ng-click="cancelSubscription()">Cancel</button>      
+          <button class="btn btn-danger" ng-show="subscription.plan == plan.stripeId" ng-click="cancelSubscription()">Cancel</button>
         </div>
       </div>
     </div>
@@ -34,9 +34,9 @@
           Plan Usage
         </div>
         <div class="panel-body">
-	  <div class="used-description">
+          <div class="used-description">
             <b>{{ subscription.usedPrivateRepos }}</b> of <b>{{ subscribedPlan.privateRepos }}</b> private repositories used
-	  </div>
+          </div>
           <div class="progress">
             <div ng-class="'progress-bar ' + (planUsagePercent > 90 ? 'progress-bar-danger' : '')" role="progressbar" aria-valuenow="{{ subscription.usedPrivateRepos }}" aria-valuemin="0" aria-valuemax="{{ subscribedPlan.privateRepos }}" style="width: {{ planUsagePercent }}%;">
             </div>

static/partials/view-repo.html

@@ -3,7 +3,7 @@
 </div>
 
 <div class="loading" ng-show="loading">
-  <div class="spin"></div>
+  <i class="icon-spinner icon-spin icon-3x"></i>
 </div>
 
 <div class="container repo" ng-show="!loading && repo">
@@ -93,7 +93,7 @@
 
     <div id="image-history" style="display: none">
       <div ng-hide="imageHistory">
-        <div class="spin"></div>
+        <i class="icon-spinner icon-spin icon-3x"></i>
       </div>
 
       <div ng-show="imageHistory">

templates/index.html

@@ -26,7 +26,6 @@
 
     <script src="static/lib/ZeroClipboard.min.js"></script>
     <script src="static/lib/typeahead.min.js"></script>
-    <script src="static/lib/spin.min.js"></script>
 
     <script src="static/js/app.js"></script>
     <script src="static/js/controllers.js"></script>