Skip to content

Commit

Permalink
fix(footer): Show footers within tab content, closes #728
Browse files Browse the repository at this point in the history
  • Loading branch information
adamdbradley committed Mar 10, 2014
1 parent 181269a commit 9c5772f
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 39 deletions.
10 changes: 7 additions & 3 deletions scss/_scaffolding.scss
Original file line number Diff line number Diff line change
Expand Up @@ -275,9 +275,13 @@ ion-infinite-scroll.active .scroll-infinite {
bottom: $bar-height;
}

// Specify that a content area will have tabs
.has-tabs {
bottom: 49px;
.has-tabs,
.bar-footer.has-tabs {
bottom: $tabs-height;
}

.has-footer.has-tabs {
bottom: $tabs-height + $bar-height;
}

// A full screen section with a solid background
Expand Down
94 changes: 58 additions & 36 deletions test/html/footers.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
<title>Footers</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
<style>
.hide{display:none;}
</style>
</head>
<body>

Expand All @@ -17,43 +14,68 @@ <h1 class="title">Footer</h1>
<main class="content padding has-header has-footer">
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
<p>Content element must have "has-footer" as a classname.</p>
<p><button id="btnAddMore">Dynamically Add More Content</button></p>
<div id="add-more"></div>
<p><button id="btnToggle">Toggle Content</button></p>
<p id="toggle-content" class="hide">
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
<p>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</p>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>

<footer class="bar bar-footer bar-default">
<footer class="bar bar-footer bar-positive">
<h3 class="title">Footer</h3>
</footer>

Expand Down
106 changes: 106 additions & 0 deletions test/html/tab-with-footer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<html>
<head>
<meta charset="utf-8">
<title>Tab with a Footer</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
</head>
<body>

<header class="bar bar-header bar-dark">
<h1 class="title">Tab with a Footer</h1>
</header>

<main class="content padding has-header has-footer has-tabs">
<p>Example of a tab that also has a footer inside of it</p>
<p>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</p>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>

<footer class="bar bar-footer bar-stable has-tabs">
<h3 class="title">Footer</h3>
</footer>

<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" href="#">
Fun
<i class="icon ion-game-controller-a"></i>
</a>
<a class="tab-item">
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item">
Simple
<i class="icon ion-heart"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>
<i class="icon ion-leaf"></i>
</a>
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
</nav>

</body>
</html>

0 comments on commit 9c5772f

Please sign in to comment.