Make footer smaller and always sticked to bottom of the window

Signed-off-by: Maël Lavault <mael.lavault@mailz.org>
This commit is contained in:
Maël Lavault 2015-05-07 17:35:36 +02:00
parent 4ce9e2a895
commit 4bb4fd9c01
2 changed files with 23 additions and 19 deletions

View file

@ -31,14 +31,15 @@
<h3 class="text-muted">Docker Registry Frontend</h3>
</div>
<div ng-view></div>
<main ng-view></main>
<div class="footer">
<p class="text-muted"><a href="#/about">About the Docker Registry Frontend</a></p>
<p><span class="glyphicon glyphicon-fire"></span> <a href="https://github.com/kwk/docker-registry-frontend/issues/new">Report a bug</a></p>
<p><span class="glyphicon glyphicon-random"></span> <a href="https://github.com/kwk/docker-registry-frontend">Fork me on GitHub</a></p>
<p class="text-muted"><small>This is git revision: <a href="https://github.com/kwk/docker-registry-frontend/commit/{{appVersion.git.sha1}}"><span ng-bind-template="{{appVersion.git.sha1 | limitTo: 7}}">-</span></a></small></p>
</div>
<footer>
<p>
<a href="https://github.com/kwk/docker-registry-frontend/issues/new"><small>Report a bug</small></a>
<a href="https://github.com/kwk/docker-registry-frontend"><small>Fork me on GitHub</small></a>
<a href="#/about"><small>About</small></a>
</p>
</footer>
</div>
@ -51,7 +52,7 @@
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>

View file

@ -1,25 +1,28 @@
body {
padding-top: 20px;
}
.container {
margin-top: 0px;
display: flex;
min-height: 100vh;
flex-direction: column;
}
ol.breadcrumb li:first-child::before {
content: "You are here: ";
content: "You are here: ";
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
main {
flex: 1;
}
footer {
padding-top: 20px;
padding-bottom: 20px;
margin-top: 40px;
border-top: 1px solid #eee;
text-align: center;
}
.footer img {
max-height: 50px;
footer a + a {
margin-left: 50px;
}
/* Style the repository list */
@ -107,7 +110,7 @@ ol.breadcrumb li:first-child::before {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
footer {
padding-right: 0;
padding-left: 0;
}