Skip to content

Commit

Permalink
fix(header): buttons do not align in Android 4.4
Browse files Browse the repository at this point in the history 
Closes #1614
  • Loading branch information
@adamdbradley
adamdbradley committed Aug 5, 2014
1 parent 64641b1 commit 06086ee
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 79 deletions.
4 changes: 4 additions & 0 deletions scss/_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,10 @@
.buttons.right-buttons {
display: inherit;
}
.buttons span {
display: inline-flex;
}

// Place the last button in a bar on the right of the bar
.title + .button:last-child,
> .button + .button:last-child,
Expand Down
102 changes: 23 additions & 79 deletions test/css/headers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ <h1 class="title">Really really really really really really really really long t
</a>
</div>

<header class="bar bar-header bar-positive">
<header class="bar bar-header bar-light">
<a class="button icon ion-navicon"> Home</a>
<div class="button-bar">
<a class="button button-calm">First</a>
<a class="button button-positive">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
Expand All @@ -47,22 +47,10 @@ <h1 class="title">Really really really really really really really really long t
</a>
</header>

<header class="bar bar-header bar-royal">
<a class="button button-clear icon ion-ios7-alarm"> Back</a>
<div class="button-bar">
<a class="button button-calm">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i> Favorites
</a>
</header>

<header class="bar bar-header bar-positive">
<header class="bar bar-header bar-stable">
<a class="button button-clear icon ion-ios7-arrow-back"> Back</a>
<div class="button-bar">
<a class="button button-calm">First</a>
<a class="button button-dark">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
Expand All @@ -71,7 +59,7 @@ <h1 class="title">Really really really really really really really really long t
</a>
</header>

<div class="bar bar-header bar-calm">
<div class="bar bar-header bar-positive">
<a class="button button-icon icon ion-home"></a>
<div class="button-bar">
<a href="#" class="button button-clear">Edit</a>
Expand All @@ -83,30 +71,6 @@ <h1 class="title">Really really really really really really really really long t
</a>
</div>

<header class="bar bar-dark">
<a class="button icon ion-home"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i>
</a>
</header>

<header class="bar bar-positive">
<a class="button icon ion-home"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i>
</a>
</header>

<header class="bar bar-calm">
<a class="button icon ion-home"></a>
<div class="button-bar">
Expand All @@ -132,42 +96,6 @@ <h1 class="title">Really really really really really really really really long t
</header>

<header class="bar bar-balanced">
<a class="button icon ion-home"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i>
</a>
</header>

<header class="bar bar-energized">
<a class="button icon ion-home"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i>
</a>
</header>

<header class="bar bar-royal">
<a class="button icon ion-home"></a>
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
<a class="button">
<i class="icon ion-star"></i>
</a>
</header>

<header class="bar bar-light">
<a class="button icon ion-arrow-left-c"></a>
<div class="button-bar">
<a class="button">First</a>
Expand All @@ -179,7 +107,7 @@ <h1 class="title">Really really really really really really really really long t
</a>
</header>

<header class="bar bar-assertive">
<header class="bar bar-energized">
<a class="button button-icon icon ion-arrow-left-c"></a>
<div class="button-bar">
<a class="button">First</a>
Expand All @@ -191,11 +119,27 @@ <h1 class="title">Really really really really really really really really long t
</a>
</header>

<header class="bar bar-header bar-stable">
<header class="bar bar-header bar-royal">
<button class="button button-clear button-icon ion-ios7-arrow-back"> Back</button>
<h1 class="title">Title here</h1>
</header>

<header class="bar bar-header bar-dark nav-bar nav-title-slide-ios7">
<div class="buttons left-buttons">
<span>
<button class="button button-icon ion-ios7-world-outline"></button>
<button class="button button-icon ion-ios7-world-outline"></button>
</span>
</div>
<h1 class="title">Two Buttons</h1>
<div class="buttons right-buttons">
<span>
<button class="button button-icon ion-ios7-world-outline"></button>
<button class="button button-icon ion-ios7-world-outline"></button>
</span>
</div>
</header>

</ion-content>

</body>
Expand Down

0 comments on commit 06086ee

Please sign in to comment.