Fix the footer to be on all pages (except the repo view page due to an issue), fix the double body tag issue and add padding to content pages

This commit is contained in:
Joseph Schorr 2013-11-20 16:17:47 -05:00
parent c7e9b0d9f6
commit 45680d4a8e
10 changed files with 86 additions and 58 deletions

View file

@ -1,5 +1,26 @@
* { * {
font-family: 'Droid Sans', sans-serif; font-family: 'Droid Sans', sans-serif;
margin: 0;
}
html, body {
height: 100%;
}
.content-container {
padding-bottom: 70px;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -136px;
}
.footer-container, .push {
height: 110px;
overflow: hidden;
} }
.button-hidden { .button-hidden {
@ -624,49 +645,53 @@ form input.ng-valid.ng-dirty,
} }
} }
.landing-footer { .page-footer {
background-color: white; background-color: white;
background-image: none; background-image: none;
padding: 10px; padding: 10px;
padding-bottom: 40px; padding-bottom: 40px;
margin-top: 10px; margin-top: 52px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.landing-footer .row { .page-footer .row {
max-width: 100%; max-width: 100%;
} }
.landing-footer .copyright-container { .page-footer .logo-container {
font-size: 11px; font-size: 11px;
color: black; color: black;
text-align: right; text-align: right;
padding-right: 30px; padding-right: 30px;
padding-top: 20px;
} }
.landing-footer .copyright-container a { .page-footer .logo-container a {
display: block; display: block;
margin-top: 4px;
margin-right: 10px;
} }
.landing-footer .dt-logo { .page-footer .dt-logo {
vertical-align: center; vertical-align: center;
max-width: 150px; max-width: 150px;
} }
.landing-footer .copyright { .page-footer .copyright {
font-size: 11px; font-size: 12px;
color: black; color: black;
} }
.landing-footer ul { .page-footer ul {
list-style-type: none; list-style-type: none;
margin: 0px; margin: 0px;
padding-left: 0px; padding-left: 0px;
margin-top: 10px;
} }
.landing-footer li { .page-footer li {
margin: 0px; margin: 0px;
display: inline-block;
padding: 10px;
} }
.user-welcome { .user-welcome {
@ -698,7 +723,6 @@ form input.ng-valid.ng-dirty,
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.entity-mini-listing { .entity-mini-listing {
margin: 2px; margin: 2px;
} }

View file

@ -427,8 +427,10 @@ quayApp = angular.module('quay', ['ngRoute', 'restangular', 'angularMoment', 'an
// index rule to make sure that deep links directly deep into the app continue to work. // index rule to make sure that deep links directly deep into the app continue to work.
// WARNING WARNING WARNING // WARNING WARNING WARNING
$routeProvider. $routeProvider.
when('/repository/:namespace/:name', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl, reloadOnSearch: false}). when('/repository/:namespace/:name', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl,
when('/repository/:namespace/:name/tag/:tag', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl}). hideFooter: true, reloadOnSearch: false}).
when('/repository/:namespace/:name/tag/:tag', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl,
hideFooter: true}).
when('/repository/:namespace/:name/image/:image', {templateUrl: '/static/partials/image-view.html', controller: ImageViewCtrl}). when('/repository/:namespace/:name/image/:image', {templateUrl: '/static/partials/image-view.html', controller: ImageViewCtrl}).
when('/repository/:namespace/:name/admin', {templateUrl: '/static/partials/repo-admin.html', controller:RepoAdminCtrl}). when('/repository/:namespace/:name/admin', {templateUrl: '/static/partials/repo-admin.html', controller:RepoAdminCtrl}).
when('/repository/', {title: 'Repositories', description: 'Public and private docker repositories list', when('/repository/', {title: 'Repositories', description: 'Public and private docker repositories list',
@ -1211,6 +1213,8 @@ quayApp.run(['$location', '$rootScope', 'Restangular', 'UserService', '$http',
} else { } else {
$rootScope.description = 'Hosted private docker repositories. Includes full user management and history. Free for public repositories.'; $rootScope.description = 'Hosted private docker repositories. Includes full user management and history. Free for public repositories.';
} }
$rootScope.hideFooter = !!current.$$route.hideFooter;
}); });
var initallyChecked = false; var initallyChecked = false;

View file

@ -192,6 +192,12 @@ function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyS
function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $timeout) { function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $timeout) {
$rootScope.title = 'Loading...'; $rootScope.title = 'Loading...';
$scope.$on('$destroy', function() {
if ($scope.tree) {
$scope.tree.dispose();
}
});
// Watch for changes to the tag parameter. // Watch for changes to the tag parameter.
$scope.$on('$routeUpdate', function(){ $scope.$on('$routeUpdate', function(){
$scope.setTag($location.search().tag, false); $scope.setTag($location.search().tag, false);
@ -308,7 +314,7 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope, $location, $tim
// Dispose of any existing tree. // Dispose of any existing tree.
if ($scope.tree) { if ($scope.tree) {
$scope.tree.dispose(); $scope.tree.dispose();
} }
// Create the new tree. // Create the new tree.

View file

@ -1,4 +1,4 @@
<div class="container"> <div class="container content-container">
<div class="alert alert-warning">Warning: Quay requires docker version 0.6.2 or higher to work</div> <div class="alert alert-warning">Warning: Quay requires docker version 0.6.2 or higher to work</div>
<h2>User Guide</h2> <h2>User Guide</h2>

View file

@ -147,36 +147,3 @@
</div> </div>
</div> </div>
</div> </div>
<nav class="landing-footer">
<div class="row">
<div class="col-md-2 col-md-offset-1">
<h4>About</h4>
<ul>
<li><a href="http://blog.devtable.com/">Blog</a></li>
</ul>
</div>
<div class="col-md-2">
<h4>Legal</h4>
<ul>
<li><a href="/tos" target="_self">Terms of Service</a></li>
<li><a href="/privacy" target="_self">Privacy Policy</a></li>
</ul>
</div>
<div class="col-md-2">
<h4>Support</h4>
<ul>
<li><a href="mailto:support@quay.io">Contact Support</a></li>
<li><a href="/guide/">User Guide</a></li>
</ul>
</div>
<div class="col-md-3 col-md-offset-2 copyright-container">
<a href="https://devtable.com"><img class="dt-logo" src="/static/img/dt-logo.png"></a>
<span class="copyright">&copy;2013 DevTable, LLC</span>
</div>
</div> <!-- row -->
</nav>

View file

@ -1,4 +1,4 @@
<div class="container org-list"> <div class="container org-list conntent-container">
<div class="loading" ng-show="loading"> <div class="loading" ng-show="loading">
<i class="fa fa-spinner fa-spin fa-3x"></i> <i class="fa fa-spinner fa-spin fa-3x"></i>
</div> </div>

View file

@ -1,4 +1,4 @@
<div class="container plans"> <div class="container plans content-container">
<div class="callout"> <div class="callout">
Plans &amp; Pricing Plans &amp; Pricing
</div> </div>

View file

@ -67,7 +67,7 @@
<!-- Content view --> <!-- Content view -->
<div class="repo-content" ng-show="currentTag.image"> <div class="repo-content" ng-show="currentTag.image">
<!-- Image History --> <!-- Image History -->
<div id="image-history"> <div id="image-history" style="max-height: 10px;">
<div class="row"> <div class="row">
<!-- Tree View container --> <!-- Tree View container -->
<div class="col-md-8"> <div class="col-md-8">

View file

@ -40,6 +40,7 @@
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script> <script src="//cdn.jsdelivr.net/underscorejs/1.5.2/underscore-min.js"></script>
<script src="//cdn.jsdelivr.net/restangular/1.1.3/restangular.js"></script> <script src="//cdn.jsdelivr.net/restangular/1.1.3/restangular.js"></script>
@ -64,7 +65,6 @@
<script src="static/js/controllers.js"></script> <script src="static/js/controllers.js"></script>
<script src="static/js/graphing.js"></script> <script src="static/js/graphing.js"></script>
<!-- start Mixpanel --><script type="text/javascript"> <!-- start Mixpanel --><script type="text/javascript">
var isProd = document.location.hostname === 'quay.io'; var isProd = document.location.hostname === 'quay.io';
@ -74,12 +74,36 @@ b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
mixpanel.init(isProd ? "50ff2b2569faa3a51c8f5724922ffb7e" : "38014a0f27e7bdc3ff8cc7cc29c869f9", { track_pageview : false, debug: !isProd });</script><!-- end Mixpanel --> mixpanel.init(isProd ? "50ff2b2569faa3a51c8f5724922ffb7e" : "38014a0f27e7bdc3ff8cc7cc29c869f9", { track_pageview : false, debug: !isProd });</script><!-- end Mixpanel -->
</head> </head>
<body> <body>
<!-- Nav bar --> <div ng-class="!hideFooter ? 'wrapper' : ''">
<nav class="navbar navbar-default header-bar" role="navigation"></nav> <nav class="navbar navbar-default header-bar" role="navigation"></nav>
{% block body_content %} {% block body_content %}
{% endblock %} {% endblock %}
<div ng-class="!hideFooter ? 'push' : ''"></div>
</div>
<div class="footer-container" ng-show="!hideFooter">
<nav class="page-footer visible-lg visible-md">
<div class="row">
<div class="col-md-7">
<ul>
<li><span class="copyright">&copy;2013 DevTable, LLC</span></li>
<li><a href="http://blog.devtable.com/">Blog</a></li>
<li><a href="/tos" target="_self">Terms of Service</a></li>
<li><a href="/privacy" target="_self">Privacy Policy</a></li>
<li><a href="/guide/">User Guide</a></li>
<li><b><a href="mailto:support@quay.io">Contact Support</a></b></li>
</ul>
</div>
<div class="col-md-5 logo-container">
<a href="https://devtable.com"><img class="dt-logo" src="/static/img/dt-logo.png"></a>
</div>
</div> <!-- row -->
</nav>
</div>
<!-- begin olark code --> <!-- begin olark code -->
<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){ <script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
@ -101,5 +125,6 @@ mixpanel.init(isProd ? "50ff2b2569faa3a51c8f5724922ffb7e" : "38014a0f27e7bdc3ff8
/* custom configuration goes here (www.olark.com/documentation) */ /* custom configuration goes here (www.olark.com/documentation) */
olark.identify('1189-336-10-9918');/*]]>*/</script><noscript><a href="https://www.olark.com/site/1189-336-10-9918/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript> olark.identify('1189-336-10-9918');/*]]>*/</script><noscript><a href="https://www.olark.com/site/1189-336-10-9918/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
<!-- end olark code --> <!-- end olark code -->
</body> </body>
</html> </html>

View file

@ -22,7 +22,6 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="static/lib/ZeroClipboard.min.js"></script> <script src="static/lib/ZeroClipboard.min.js"></script>
<script src="static/lib/jquery.overscroll.min.js"></script>
<script src="static/lib/d3-tip.js" charset="utf-8"></script> <script src="static/lib/d3-tip.js" charset="utf-8"></script>
<script src="static/lib/browser-chrome.js"></script> <script src="static/lib/browser-chrome.js"></script>
@ -33,6 +32,9 @@
{% endblock %} {% endblock %}
{% block body_content %} {% block body_content %}
<!-- Note: Must be in the <body> tag -->
<script src="static/lib/jquery.overscroll.min.js"></script>
<div ng-view></div> <div ng-view></div>
<!-- Modal message dialog --> <!-- Modal message dialog -->