Skip to content

Commit

Permalink
[fix bug 1121914] Next pager arrow wrong direction on /firefox/deskto…
Browse files Browse the repository at this point in the history
…p/tips
  • Loading branch information
alexgibson committed Jan 15, 2015
1 parent ed05921 commit 75eab2e
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 60 deletions.
11 changes: 6 additions & 5 deletions bedrock/firefox/templates/firefox/desktop/tips.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,10 @@
<div class="container">
<div id="heading-logo-wrapper">
<img src="{{ media('/img/firefox/desktop/tips/firefox-logo.png') }}" alt="Firefox" id="page-header-logo">

<h1>{{ _('The best of the latest Firefox') }}</h1>
<h2>{{ _('5 top tips, tricks and time-saving tools') }}</h2>
<div class="heading-group">
<h1>{{ _('The best of the latest Firefox') }}</h1>
<h2>{{ _('5 top tips, tricks and time-saving tools') }}</h2>
</div>
</div>

<div id="share-nav-wrapper" class="share-wrapper">
Expand Down Expand Up @@ -67,7 +68,7 @@ <h2>{{ _('5 top tips, tricks and time-saving tools') }}</h2>
<div id="page-content">
<div class="container pager pager-no-history pager-auto-init">
<div id="tips-nav-prev-next">
<button class="link-button" id="tip-prev" aria-controls="tips-wrapper">{{ _('back') }}</button>
<button class="link-button tip-prev" id="tip-prev" aria-controls="tips-wrapper">{{ _('back') }}</button>

<div id="tips-nav-dots">
<span data-tip="bookmarks">{{ _('1') }}</span>
Expand All @@ -77,7 +78,7 @@ <h2>{{ _('5 top tips, tricks and time-saving tools') }}</h2>
<span data-tip="addons">{{ _('5') }}</span>
</div>

<button class="link-button" type="button" id="tip-next" aria-controls="tips-wrapper">{{ _('next') }}</button>
<button class="link-button tip-next" type="button" id="tip-next" aria-controls="tips-wrapper">{{ _('next') }}</button>
</div>

<div id="tips-wrapper" class="pager-content">
Expand Down
130 changes: 75 additions & 55 deletions media/css/firefox/desktop/tips.less
Original file line number Diff line number Diff line change
Expand Up @@ -363,37 +363,32 @@ html[lang^='en'] #tips-nav-direct li a span:after {
button {
.transition(color .2s ease);
.link-button();
}

button:disabled {
color: #ccc;
cursor: default;

&:hover {
text-decoration: none;
&.tip-prev {
float: left;
.leading-arrow();
}
}
}

#tips-nav-dots {
display: none;
}
&.tip-next {
float: right;
text-align: right;
.trailing-arrow();
}

#tip-prev {
float: left;
&:disabled {
opacity: 0.5;
color: #ccc;
cursor: default;

&:before {
content: '« ';
&:hover {
text-decoration: none;
}
}
}
}

#tip-next {
float: right;
text-align: right;

&:after {
content: ' »';
}
#tips-nav-dots {
display: none;
}

#tips-wrapper {
Expand Down Expand Up @@ -450,14 +445,16 @@ html[dir='rtl'] {
#tips-nav-prev-next {
right: auto;
left: 20px;
}

#tip-prev {
float: right;
}
button {
&.tip-prev {
float: right;
}

#tip-next {
float: left;
&.tip-next {
float: left;
}
}
}
}
}
Expand Down Expand Up @@ -564,15 +561,15 @@ html[dir='rtl'] {
&.inactive {
opacity: .4;
}
}
}

#tip-prev {
background-position: left top;
}
&.tip-prev {
background-position: left top;
}

#tip-next {
background-position: -60px top;
&.tip-next {
background-position: -60px top;
}
}
}

#tips-wrapper {
Expand All @@ -581,12 +578,12 @@ html[dir='rtl'] {
}

html[dir='rtl'] {
&.js {
#tip-prev {
&.js #tips-nav-prev-next button {
&.tip-prev {
background-position: -60px top;
}

#tip-next {
&.tip-next {
background-position: left top;
}
}
Expand Down Expand Up @@ -747,6 +744,14 @@ html[dir='rtl'] {
&.inactive {
opacity: .4;
}

&.tip-prev {
background-position: left top;
}

&.tip-next {
background-position: -60px top;
}
}
}

Expand Down Expand Up @@ -784,14 +789,6 @@ html[dir='rtl'] {
}
}

#tip-prev {
background-position: left top;
}

#tip-next {
background-position: -60px top;
}

#tips-wrapper {
min-height: 500px;
}
Expand All @@ -810,22 +807,37 @@ html[dir='rtl'] {
float: none;
}

.tip-copy {
float: none;
margin: 0;
}

#heading-logo-wrapper {
padding-top: 45px;

.heading-group {
margin-right: 155px;
}
}

&.js {
#tips-nav-prev-next {
left: 10px;
right: auto;
}

#tips-nav-dots span {
float: right;
}
button {
&.tip-prev {
background-position: -60px top;
}

#tip-prev {
background-position: -60px top;
&.tip-next {
background-position: left top;
}
}
}

#tip-next {
background-position: left top;
#tips-nav-dots span {
float: right;
}
}
}
Expand Down Expand Up @@ -929,6 +941,14 @@ html[dir='rtl'] {
float: none;
margin: 0 0 0 -150px;
}

#masthead {
overflow: hidden;
}

#heading-logo-wrapper .heading-group {
margin-right: 0;
}
}
}

Expand Down

0 comments on commit 75eab2e

Please sign in to comment.