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

Change the screenshots section to be a single screenshot with clickable sections

Browse source
This commit is contained in:
Joseph Schorr 2014-04-30 21:00:07 -04:00
parent cfcbc44c72
commit 2d18117e68
3 changed files with 83 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
static/css/quay.css
View file

@ -4109,4 +4109,49 @@ have a fixed width and height (but it's not required).
.tour-section.tour-header .tour-section-title {
text-align: center;
}
}
.screenshot-feature {
margin-bottom: 20px;
position: relative;
}
.screenshot-feature .fa {
float: left;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
background: #eee;
font-size: 28px;
text-align: center;
margin-right: 20px;
margin-top: 0px;
clear: both;
}
.screenshot-feature.active .fa {
color: white;
background: #428bca;
}
.screenshot-feature .sf-title {
font-size: 20px;
display: inline-block;
margin-bottom: 10px;
margin-top: 6px;
}
.screenshot-feature:hover {
cursor: pointer;
}
.screenshot-feature:hover .sf-title {
text-decoration: underline;
}
.screenshot-feature .sf-text {
margin-left: 70px;
}

5
static/js/controllers.js
View file

@ -265,6 +265,7 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
function LandingCtrl($scope, UserService, ApiService, Features, Config) {
$scope.namespace = null;
$scope.currentScreenshot = 'repo-view';
$scope.$watch('namespace', function(namespace) {
loadMyRepos(namespace);
@ -274,6 +275,10 @@ function LandingCtrl($scope, UserService, ApiService, Features, Config) {
loadMyRepos($scope.namespace);
});
$scope.changeScreenshot = function(screenshot) {
$scope.currentScreenshot = screenshot;
};
$scope.canCreateRepo = function(namespace) {
if (!$scope.user) { return false; }

59
static/partials/landing-normal.html
View file

@ -109,39 +109,44 @@
</div> <!-- -->
<div class="landing-section">
<h2>Business-class management tools</h2>
<h2>Built with our users in mind</h2>
<div class="container">
<div class="row">
<div class="col-md-4 feature-shoutout">
<img src="/static/img/user-home.png" class="img-responsive">
<a href="">Customized for you</a>
<div class="col-lg-8 feature-shoutout">
<img id="screenshot" ng-src="{{ '/static/img/' + currentScreenshot + '.png' }}" class="img-responsive">
</div>
<div class="col-lg-4">
<div class="screenshot-feature" ng-class="currentScreenshot == 'repo-view' ? 'active' : ''" ng-click="changeScreenshot('repo-view')">
<i class="fa fa-hdd-o"></i>
<span class="sf-title">Beautiful repository view</span>
<div class="sf-text">
Repository is presented with the maximum amount of useful information, including a visual tree of its image history, markdown-based description, and tags.
</div>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/repo-view.png" class="img-responsive">
<a href="">Detailed repository information</a>
</div>
<div class="screenshot-feature" ng-class="currentScreenshot == 'repo-admin' ? 'active' : ''" ng-click="changeScreenshot('repo-admin')">
<i class="fa fa-group"></i>
<span class="sf-title">Share at your control</span>
<div class="sf-text">
Set up the exact permissions your team, organization or business needs. Need to grant external access? Create one or more robot accounts to restrict access.
</div>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/build-history.png" class="img-responsive">
<a href="">Dockerfile build in the cloud</a>
</div>
</div>
<div class="screenshot-feature" ng-class="currentScreenshot == 'build-history' ? 'active' : ''" ng-click="changeScreenshot('build-history')">
<i class="fa fa-tasks"></i>
<span class="sf-title">Dockerfile Build</span>
<div class="sf-text">
Repositories can be linked to Github repositories, with automatic building of the Dockerfile(s) found on push.
</div>
</div>
<div class="row">
<div class="col-md-4 feature-shoutout">
<img src="/static/img/repo-admin.png" class="img-responsive">
<a href="">Fine grain permissions model</a>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/repo-changes.png" class="img-responsive">
<a href="">Docker diff visualized</a>
</div>
<div class="col-md-4 feature-shoutout">
<img src="/static/img/org-repo-list.png" class="img-responsive">
<a href="">Organizations and Teams</a>
<div class="screenshot-feature" ng-class="currentScreenshot == 'repo-changes' ? 'active' : ''" ng-click="changeScreenshot('repo-changes')">
<i class="fa fa-code-fork"></i>
<span class="sf-title">Repository Diff</span>
<div class="sf-text">
See exactly which files were added, changed, or removed for each image in a repository.
</div>
</div>
</div>
</div>
</div>