Skip to content

Commit

Permalink
Merge pull request #2662 from alexgibson/bug-1121914-pager-arrow-tips…
Browse files Browse the repository at this point in the history 
…-page

[fix bug 1121914] Next pager arrow wrong direction on /firefox/desktop/tips
  • Loading branch information
@jpetto
jpetto committed Jan 15, 2015
2 parents c6d0a3d + 3b032f0 commit 60632a8
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 66 deletions.
15 changes: 8 additions & 7 deletions bedrock/firefox/templates/firefox/desktop/tips.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,13 @@
<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">
<div id="main-nav-wrapper" class="button-wrapper">
{% include 'firefox/includes/social-share.html' %}
<nav id="tips-nav-direct">
<ol role="tablist">
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 Expand Up @@ -248,7 +249,7 @@ <h3>{{ _('Congratulations') }}</h3>
{{ _('You’re an expert!') }}
{{ _('Now help your friends master Firefox.') }}
</p>
<div class="share-wrapper">
<div class="button-wrapper">
{% include 'firefox/includes/social-share.html' %}
</div>
</div>
Expand Down
136 changes: 78 additions & 58 deletions media/css/firefox/desktop/tips.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
}
}

#share-nav-wrapper {
#main-nav-wrapper {
.clearfix();

.socialshare {
Expand Down 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 All @@ -418,7 +413,7 @@ html[dir='rtl'] {
margin-left: @baseLine;
}

#share-nav-wrapper .socialshare {
#main-nav-wrapper .socialshare {
float: right;
}

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 @@ -508,7 +505,7 @@ html[dir='rtl'] {
.font-size(22px);
}

#share-nav-wrapper {
#main-nav-wrapper {
margin: -20px 156px 0 0;

.socialshare {
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
2 changes: 1 addition & 1 deletion media/js/firefox/desktop/tips.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@
// GA tracking
$('.share-button').on('click', function() {
// determine position
var pos = ($(this).closest('.share-wrapper').prop('id') === 'share-nav-wrapper') ? 'top' : 'bottom';
var pos = ($(this).closest('.button-wrapper').prop('id') === 'main-nav-wrapper') ? 'top' : 'bottom';

gaTrack(['_trackEvent','/desktop/tips/ Interactions','Social Share', 'share drop-down ' + pos]);
});
Expand Down

0 comments on commit 60632a8

Please sign in to comment.