From 75eab2efb563e99c81f173568e2ac03d56a88783 Mon Sep 17 00:00:00 2001
From: Alex Gibson <agibson@mozilla.com>
Date: Thu, 15 Jan 2015 11:12:11 +0000
Subject: [PATCH 1/2] [fix bug 1121914] Next pager arrow wrong direction on
 /firefox/desktop/tips

---
 .../templates/firefox/desktop/tips.html       |  11 +-
 media/css/firefox/desktop/tips.less           | 130 ++++++++++--------
 2 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/bedrock/firefox/templates/firefox/desktop/tips.html b/bedrock/firefox/templates/firefox/desktop/tips.html
index d25dcb2d60d..b830c5cfe0e 100644
--- 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
index a20e0e72674..b495d626874 100644
--- 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;
+        }
     }
 }
 

From 3b032f0500359b8b762382e2f8f4a7a1c249a923 Mon Sep 17 00:00:00 2001
From: Alex Gibson <agibson@mozilla.com>
Date: Thu, 15 Jan 2015 18:49:45 +0000
Subject: [PATCH 2/2] [fix bug 1121733] Tabs missing from /firefox/tips pages

---
 bedrock/firefox/templates/firefox/desktop/tips.html | 4 ++--
 media/css/firefox/desktop/tips.less                 | 6 +++---
 media/js/firefox/desktop/tips.js                    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/bedrock/firefox/templates/firefox/desktop/tips.html b/bedrock/firefox/templates/firefox/desktop/tips.html
index b830c5cfe0e..b6c0d6134e0 100644
--- a/bedrock/firefox/templates/firefox/desktop/tips.html
+++ b/bedrock/firefox/templates/firefox/desktop/tips.html
@@ -40,7 +40,7 @@ <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">
@@ -249,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>
diff --git a/media/css/firefox/desktop/tips.less b/media/css/firefox/desktop/tips.less
index b495d626874..a724c4dd750 100644
--- a/media/css/firefox/desktop/tips.less
+++ b/media/css/firefox/desktop/tips.less
@@ -138,7 +138,7 @@
     }
 }
 
-#share-nav-wrapper {
+#main-nav-wrapper {
     .clearfix();
 
     .socialshare {
@@ -413,7 +413,7 @@ html[dir='rtl'] {
         margin-left: @baseLine;
     }
 
-    #share-nav-wrapper .socialshare {
+    #main-nav-wrapper .socialshare {
         float: right;
     }
 
@@ -505,7 +505,7 @@ html[dir='rtl'] {
             .font-size(22px);
         }
 
-        #share-nav-wrapper {
+        #main-nav-wrapper {
             margin: -20px 156px 0 0;
 
             .socialshare {
diff --git a/media/js/firefox/desktop/tips.js b/media/js/firefox/desktop/tips.js
index 74c392415cf..70d9ffc8b82 100644
--- a/media/js/firefox/desktop/tips.js
+++ b/media/js/firefox/desktop/tips.js
@@ -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]);
         });