Skip to content

Commit 75eab2e

Browse files
alexgibsonalexgibson
committed
[fix bug 1121914] Next pager arrow wrong direction on /firefox/desktop/tips
1 parent ed05921 commit 75eab2e

File tree

2 files changed

+81
-60
lines changed

2 files changed

+81
-60
lines changed

‎bedrock/firefox/templates/firefox/desktop/tips.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,10 @@
3434
<div class="container">
3535
<div id="heading-logo-wrapper">
3636
<img src="{{ media('/img/firefox/desktop/tips/firefox-logo.png') }}" alt="Firefox" id="page-header-logo">
37-
38-
<h1>{{ _('The best of the latest Firefox') }}</h1>
39-
<h2>{{ _('5 top tips, tricks and time-saving tools') }}</h2>
37+
<div class="heading-group">
38+
<h1>{{ _('The best of the latest Firefox') }}</h1>
39+
<h2>{{ _('5 top tips, tricks and time-saving tools') }}</h2>
40+
</div>
4041
</div>
4142

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

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

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

8384
<div id="tips-wrapper" class="pager-content">

‎media/css/firefox/desktop/tips.less‎

Lines changed: 75 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -363,37 +363,32 @@ html[lang^='en'] #tips-nav-direct li a span:after {
363363
button {
364364
.transition(color .2s ease);
365365
.link-button();
366-
}
367-
368-
button:disabled {
369-
color: #ccc;
370-
cursor: default;
371366

372-
&:hover {
373-
text-decoration: none;
367+
&.tip-prev {
368+
float: left;
369+
.leading-arrow();
374370
}
375-
}
376-
}
377371

378-
#tips-nav-dots {
379-
display: none;
380-
}
372+
&.tip-next {
373+
float: right;
374+
text-align: right;
375+
.trailing-arrow();
376+
}
381377

382-
#tip-prev {
383-
float: left;
378+
&:disabled {
379+
opacity: 0.5;
380+
color: #ccc;
381+
cursor: default;
384382

385-
&:before {
386-
content: '« ';
383+
&:hover {
384+
text-decoration: none;
385+
}
386+
}
387387
}
388388
}
389389

390-
#tip-next {
391-
float: right;
392-
text-align: right;
393-
394-
&:after {
395-
content: ' »';
396-
}
390+
#tips-nav-dots {
391+
display: none;
397392
}
398393

399394
#tips-wrapper {
@@ -450,14 +445,16 @@ html[dir='rtl'] {
450445
#tips-nav-prev-next {
451446
right: auto;
452447
left: 20px;
453-
}
454448

455-
#tip-prev {
456-
float: right;
457-
}
449+
button {
450+
&.tip-prev {
451+
float: right;
452+
}
458453

459-
#tip-next {
460-
float: left;
454+
&.tip-next {
455+
float: left;
456+
}
457+
}
461458
}
462459
}
463460
}
@@ -564,15 +561,15 @@ html[dir='rtl'] {
564561
&.inactive {
565562
opacity: .4;
566563
}
567-
}
568-
}
569564

570-
#tip-prev {
571-
background-position: left top;
572-
}
565+
&.tip-prev {
566+
background-position: left top;
567+
}
573568

574-
#tip-next {
575-
background-position: -60px top;
569+
&.tip-next {
570+
background-position: -60px top;
571+
}
572+
}
576573
}
577574

578575
#tips-wrapper {
@@ -581,12 +578,12 @@ html[dir='rtl'] {
581578
}
582579

583580
html[dir='rtl'] {
584-
&.js {
585-
#tip-prev {
581+
&.js #tips-nav-prev-next button {
582+
&.tip-prev {
586583
background-position: -60px top;
587584
}
588585

589-
#tip-next {
586+
&.tip-next {
590587
background-position: left top;
591588
}
592589
}
@@ -747,6 +744,14 @@ html[dir='rtl'] {
747744
&.inactive {
748745
opacity: .4;
749746
}
747+
748+
&.tip-prev {
749+
background-position: left top;
750+
}
751+
752+
&.tip-next {
753+
background-position: -60px top;
754+
}
750755
}
751756
}
752757

@@ -784,14 +789,6 @@ html[dir='rtl'] {
784789
}
785790
}
786791

787-
#tip-prev {
788-
background-position: left top;
789-
}
790-
791-
#tip-next {
792-
background-position: -60px top;
793-
}
794-
795792
#tips-wrapper {
796793
min-height: 500px;
797794
}
@@ -810,22 +807,37 @@ html[dir='rtl'] {
810807
float: none;
811808
}
812809

810+
.tip-copy {
811+
float: none;
812+
margin: 0;
813+
}
814+
815+
#heading-logo-wrapper {
816+
padding-top: 45px;
817+
818+
.heading-group {
819+
margin-right: 155px;
820+
}
821+
}
822+
813823
&.js {
814824
#tips-nav-prev-next {
815825
left: 10px;
816826
right: auto;
817-
}
818827

819-
#tips-nav-dots span {
820-
float: right;
821-
}
828+
button {
829+
&.tip-prev {
830+
background-position: -60px top;
831+
}
822832

823-
#tip-prev {
824-
background-position: -60px top;
833+
&.tip-next {
834+
background-position: left top;
835+
}
836+
}
825837
}
826838

827-
#tip-next {
828-
background-position: left top;
839+
#tips-nav-dots span {
840+
float: right;
829841
}
830842
}
831843
}
@@ -929,6 +941,14 @@ html[dir='rtl'] {
929941
float: none;
930942
margin: 0 0 0 -150px;
931943
}
944+
945+
#masthead {
946+
overflow: hidden;
947+
}
948+
949+
#heading-logo-wrapper .heading-group {
950+
margin-right: 0;
951+
}
932952
}
933953
}
934954

0 commit comments

Comments
 (0)