vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Redo the landing page to:

Browse source 
- Show the user's top repos if they have any
  - Show a link to the guide and the repos list if they do not

- Add a getting starting guide
- Redo the repos list to show the user's repos and the top 10 public repos separately
This commit is contained in:
Joseph Schorr 2013-10-02 00:28:24 -04:00
parent f12ed9859c
commit 927b280f1a
9 changed files with 220 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

51
static/css/quay.css
View file

@ -62,6 +62,19 @@
margin-bottom: 20px;
}
.landing .welcome-message {
text-align: center;
}
.landing .welcome-message .sub-message {
margin-top: 16px;
}
.landing .welcome-message .gravatar {
display: inline-block;
border: 1px solid #94C9F7;
}
.landing .sub-message b {
color: #94C9F7;
}
@ -136,6 +149,32 @@ background: linear-gradient(to bottom, #141414 0%,transparent 15%,transparent 8
z-index: 1;
}
.landing .options {
display: inline-block;
padding: 10px;
margin-top: 20px;
}
.landing .options .option {
}
.landing .options .or {
margin: 14px;
text-align: center;
}
.landing .options .or span {
display: inline-block;
border-radius: 50%;
background: #444;
padding: 6px;
width: 48px;
height: 48px;
line-height: 36px;
text-transform: uppercase;
text-align: center;
}
.landing-footer {
padding: 20px;
@ -392,6 +431,9 @@ p.editable:hover i {
text-decoration: none !important;
}
.repo-list {
margin-bottom: 40px;
}
.repo-listing {
display: block;
@ -400,6 +442,15 @@ p.editable:hover i {
padding: 10px;
}
.repo-listing:last-child {
border-bottom: 0px;
}
.landing .repo-listing {
border-bottom: 0px;
margin-bottom: 0px;
}
.repo-listing a {
font-size: 1.5em;
}

1
static/js/app.js
View file

@ -72,6 +72,7 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment'], function($pro
when('/repository/:namespace/:name/tag/:tag', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl}).
when('/repository/:namespace/:name/admin', {templateUrl: '/static/partials/repo-admin.html', controller:RepoAdminCtrl}).
when('/repository/', {title: 'Repositories', templateUrl: '/static/partials/repo-list.html', controller: RepoListCtrl}).
when('/guide/', {title: 'Getting Started Guide', templateUrl: '/static/partials/guide.html', controller: GuideCtrl}).
when('/', {title: 'Quay', templateUrl: '/static/partials/landing.html', controller: LandingCtrl}).
otherwise({redirectTo: '/'});
}]).

48
static/js/controllers.js
View file

@ -77,6 +77,9 @@ function HeaderCtrl($scope, UserService) {
});
}
function GuideCtrl($scope, Restangular) {
}
function RepoListCtrl($scope, Restangular) {
$scope.getCommentFirstLine = function(commentString) {
return getMarkedDown(getFirstTextLine(commentString));
@ -89,12 +92,22 @@ function RepoListCtrl($scope, Restangular) {
$('.spin').spin();
$scope.loading = true;
$scope.public_repositories = null;
$scope.private_repositories = null;
// Load the list of repositories.
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList().then(function(resp) {
$scope.repositories = resp.repositories;
$scope.loading = false;
// Load the list of personal repositories.
var repositoryPrivateFetch = Restangular.all('repository/');
repositoryPrivateFetch.getList({'public': false, 'sort': true}).then(function(resp) {
$scope.private_repositories = resp.repositories;
$scope.loading = !($scope.public_repositories && $scope.private_repositories);
});
// Load the list of public repositories.
var options = {'public': true, 'private': false, 'sort': true, 'limit': 10};
var repositoryPublicFetch = Restangular.all('repository/');
repositoryPublicFetch.getList(options).then(function(resp) {
$scope.public_repositories = resp.repositories;
$scope.loading = !($scope.public_repositories && $scope.private_repositories);
});
}
@ -103,12 +116,20 @@ function LandingCtrl($scope, $timeout, Restangular, UserService) {
$('.spin').spin();
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
if (!currentUser.anonymous) {
$scope.loadMyRepos();
}
$scope.user = currentUser;
}, true);
$scope.awaitingConfirmation = false;
$scope.registering = false;
$scope.getCommentFirstLine = function(commentString) {
return getMarkedDown(getFirstTextLine(commentString));
};
$scope.browseRepos = function() {
document.location = '/#/repository';
};
@ -130,6 +151,23 @@ function LandingCtrl($scope, $timeout, Restangular, UserService) {
});
});
};
$scope.loadMyRepos = function() {
$scope.loadingmyrepos = true;
// Load the list of repositories.
var params = {
'limit': 5,
'public': false,
'sort': true
};
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList(params).then(function(resp) {
$scope.myrepos = resp.repositories;
$scope.loadingmyrepos = false;
});
};
}
function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {

33
static/partials/guide.html Normal file
View file

@ -0,0 +1,33 @@
<div class="container">
<div class="alert alert-warning">Warning: Quay requires docker version 0.7 or higher to work</div>
<h2>Getting started guide</h2>
<div class="container">
<h3>Pushing a repository to Quay</h3>
<div class="container">
First, tag the image with your repository name:<br><br>
<pre>docker tag <i>0u123imageid</i> quay.io/<i>repo_namespace/repo_name</i></pre>
<br>
Second, push the repository to Quay:<br><br>
<pre>docker push quay.io/<i>repo_namespace/repo_name</i></pre>
</div>
<br>
<h3>Pulling a repository from Quay</h3>
<div class="container">
<div class="alert alert-info">Note: <b>Private</b> repositories require you to be <b>logged in</b> or the pull will fail. See below for how to sign into Quay if you have never done so before. </div>
To pull a repository from Quay, run the following command:
<br><br>
<pre>docker pull quay.io/<i>path/to/repository</i></pre>
</div>
<br>
<h3>Signing into to Quay <span class="label label-default">Optional</span></h3>
<div class="container">
If you have never pushed a repository to Quay and wish to pull a <b>private</b> repository, you can sign into Quay by running the following command:
<br><br>
<pre>docker login quay.io</pre>
</div>
</div>
</div>

40
static/partials/landing.html
View file

@ -1,10 +1,36 @@
<div class="landing">
<div class="background"></div>
<div class="background-mask"></div>
<div class="message-container">
<div class="message-container" ng-show="user.anonymous">
<div class="message">Secure hosting for <b>private</b> docker containers</div>
<div class="sub-message" ng-show="user.anonymous">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
<div class="sellcall" ng-show="user.anonymous"><a href="">Starting at $7/mo</a></div>
<div class="sub-message">Use the docker images <b>your team</b> needs with the safety of <b>private</b> storage</div>
<div class="sellcall"><a href="">Starting at $7/mo</a></div>
</div>
<div class="message-container" ng-show="!user.anonymous">
<div ng-show="loadingmyrepos">
<div class="spin"></div>
</div>
<div ng-show="!loadingmyrepos && myrepos.length > 0">
<h2>Your Top Repositories</h4>
<div class="repo-listing" ng-repeat="repository in myrepos">
<i class="icon-hdd icon-large"></i>
<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>
</div>
<div ng-show="!loadingmyrepos && myrepos.length == 0">
<div class="sub-message">
You don't have any <b>private</b> repositories yet!
<div class="options">
<div class="option"><a href="#/guide">Learn how to create a repository</a></div>
<div class="or"><span>or</span></div>
<div class="option"><a href="#/repository">Browse the public repositories</a></div>
</div>
</div>
</div>
</div>
<div class="signup-container">
@ -24,10 +50,11 @@
</div>
</div>
<div ng-show="!user.anonymous">
<div class="sub-message">
Welcome <b>{{ user.username }}</b>!
<div class="welcome-message">
<img class="gravatar" src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=128&d=identicon" />
<div class="sub-message">Welcome <b>{{ user.username }}</b>!</div>
</div>
<button class="btn btn-lg btn-primary btn-block" ng-click="browseRepos()">Browse repositories</button>
<button ng-show="myrepos" class="btn btn-lg btn-primary btn-block" ng-click="browseRepos()">Browse all repositories</button>
</div>
</div>
@ -74,6 +101,7 @@
<h4>Support</h4>
<ul>
<li><a href="">Contact Support</a></li>
<li><a href="#/guide/">Getting Started Guide</a></li>
</ul>
</div>

31
static/partials/repo-list.html
View file

@ -3,10 +3,31 @@
</div>
<div class="container" ng-show="!loading">
<h3>Repositories</h3>
<div class="repo-listing" ng-repeat="repository in repositories">
<i class="icon-hdd icon-large"></i>
<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="repo-list">
<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>
<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>
</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>
<a href="#/guide"><b>Click here</b> to learn how to create a repository</a>
</div>
</div>
</div>
<div class="repo-list">
<h3>Top Public Repositories</h3>
<div class="repo-listing" ng-repeat="repository in public_repositories">
<i class="icon-hdd icon-large"></i>
<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>
</div>
</div>