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

…p/tips
mozilla · Jan 15, 2015 · 75eab2e · 75eab2e
1 parent ed05921
commit 75eab2e
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 60 deletions.
diff --git a/bedrock/firefox/templates/firefox/desktop/tips.html b/bedrock/firefox/templates/firefox/desktop/tips.html
@@ -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 @@ <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>
@@ -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">

diff --git a/media/css/firefox/desktop/tips.less b/media/css/firefox/desktop/tips.less
@@ -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;
+        }
     }
 }