Permalink
Browse files

[fix bug 1121914] Next pager arrow wrong direction on /firefox/deskto…

…p/tips
  • Loading branch information...
1 parent ed05921 commit 75eab2efb563e99c81f173568e2ac03d56a88783 @alexgibson alexgibson committed Jan 15, 2015
Showing with 81 additions and 60 deletions.
  1. +6 −5 bedrock/firefox/templates/firefox/desktop/tips.html
  2. +75 −55 media/css/firefox/desktop/tips.less
@@ -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">
@@ -67,7 +68,7 @@
<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>
@@ -77,7 +78,7 @@
<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">
@@ -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 {
@@ -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;
+ }
+ }
}
}
}
@@ -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 {
@@ -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;
}
}
@@ -747,6 +744,14 @@ html[dir='rtl'] {
&.inactive {
opacity: .4;
}
+
+ &.tip-prev {
+ background-position: left top;
+ }
+
+ &.tip-next {
+ background-position: -60px top;
+ }
}
}
@@ -784,14 +789,6 @@ html[dir='rtl'] {
}
}
- #tip-prev {
- background-position: left top;
- }
-
- #tip-next {
- background-position: -60px top;
- }
-
#tips-wrapper {
min-height: 500px;
}
@@ -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;
}
}
}
@@ -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;
+ }
}
}

0 comments on commit 75eab2e

Please sign in to comment.