Add share widget to Hello product page. Bug 1119849.

- Fix small attribute spacing issue in share macro.

Author: jpetto

bedrock/base/templates/macros.html

@@ -358,7 +358,7 @@ <h3>{{ _('Get Mozilla updates') }}</h3>
 {%- endmacro %}
 
 {% macro share_cta(cta_text, share_urls, share_text, id) %}
-<div class="mozilla-share-cta" tabindex="0"{% if id -%} id="{{ id }}"{% endif -%}>
+<div class="mozilla-share-cta" tabindex="0"{% if id %} id="{{ id }}"{% endif -%}>
   <h3>{{ cta_text }}</h3>
   <ul>
     <li><a class="twitter" href="{{ 'https://www.twitter.com/intent/tweet?url=%s&amp;text=%s'|format(share_urls.get('twitter')|urlencode, share_text|urlencode)|e }}" title="Twitter">Twitter</a></li>

bedrock/firefox/templates/firefox/hello/index.html

@@ -6,6 +6,8 @@
 
 {% set_lang_files "firefox/hello" %}
 
+{% from "macros.html" import share_cta with context %}
+
 {% block page_title_prefix %}{% endblock %}
 {% block page_title %}{{ _('Firefox Hello — Free, easy video conversations') }}{% endblock %}
 {% block page_desc %}{{ _('Learn all about Firefox Hello and see for yourself how easy it is to have a free video conversation with anyone, anywhere, right from your browser') }}{% endblock %}
@@ -25,14 +27,27 @@
 {% block site_header %}
   <header id="masthead">
     <div class="container">
-      <a href="{{ url('mozorg.home') }}" id="tabzilla" data-infobar="{{ settings.TABZILLA_INFOBAR_OPTIONS }}">Mozilla</a>
+      <div id="hello-header-nav">
+        <a href="{{ url('mozorg.home') }}" id="tabzilla" data-infobar="{{ settings.TABZILLA_INFOBAR_OPTIONS }}">Mozilla</a>
 
-      {% block site_header_nav %}
-        {% include 'firefox/includes/top-menu.html' %}
-      {% endblock %}
+        {% block site_header_nav %}
+          {% include 'firefox/includes/top-menu.html' %}
+        {% endblock %}
+      </div>
 
       {% block site_header_logo %}
-        {{ super() }}
+        <div id="hello-logo-wrapper">
+          {{ super() }}
+
+          {%
+          set share_urls = {
+            'twitter': 'http://mzl.la/1wz83AN',
+            'googleplus': 'https://www.mozilla.org/firefox/hello/?utm_source=Google&utm_medium=social&utm_campaign=Hello&utm_content=WebsiteShare',
+            'facebook': 'https://www.mozilla.org/firefox/hello/?utm_source=Facebook&utm_medium=social&utm_campaign=Hello&utm_content=WebsiteShare'
+          }
+          %}
+          {{ share_cta(_('Share'), share_urls, _('Meet Firefox Hello, the easiest way to connect for free over video with anyone, anywhere.'), 'spread-hello') }}
+        </div>
       {% endblock %}
     </div>
   </header>
@@ -122,15 +137,6 @@ <h2 class="heading-tertiary">
       <aside id="powered-by">
         {{ _('Powered by %s')|format(high_res_img('/img/firefox/hello/tef-logo.png', {'alt': 'Telefonica', 'width': '106', 'height': '29'})) }}
       </aside>
-
-      {#
-      Share widget pulled from 35, will be back for 36:
-      https://bugzilla.mozilla.org/show_bug.cgi?id=1113917#c4
-
-      <div id="share-wrapper">
-        {% include 'firefox/includes/social-share.html' %}
-      </div>
-      #}
     </div>{# /.container #}
   </section>
 

bedrock/settings/base.py

@@ -319,6 +319,7 @@ def JINJA_CONFIG():
             'css/firefox/menu-resp.less',
             'css/base/mozilla-modal.less',
             'css/base/svg-animation-check.less',
+            'css/base/mozilla-share-cta.less',
             'css/firefox/hello/index.less',
         ),
         'firefox_new': (
@@ -830,6 +831,7 @@ def JINJA_CONFIG():
             'js/firefox/australis/australis-uitour.js',
             'js/base/mozilla-modal.js',
             'js/base/svg-animation-check.js',
+            'js/base/mozilla-share-cta.js',
             'js/firefox/hello/index.js',
         ),
         'firefox_hello_ie9': (

media/css/firefox/hello/index.less

@@ -4,6 +4,15 @@
 
 @import "../../sandstone/lib.less";
 
+@font-face {
+    font-family: 'Font Awesome';
+    src: url('/media/fonts/fontawesome-webfont.eot?v4.01#iefix') format('embedded-opentype'),
+         url('/media/fonts/fontawesome-webfont.woff?v4.01') format('woff'),
+         url('/media/fonts/fontawesome-webfont.ttf?v4.01') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
 .grainy-sky() {
     background: #cae1f4;
     background: url(/media/img/sandstone/grain.png) repeat,
@@ -39,11 +48,16 @@
     }
 
     h2 {
-        padding-top: 48px;
+        float: left;
+        padding-top: 0;
         width: 185px;
     }
 }
 
+html[dir="rtl"] #masthead h2 {
+    float: right;
+}
+
 // Common styles
 
 main {
@@ -100,60 +114,59 @@ main {
     }
 }
 
-/*
-Share widget pulled from 35, but will be back for 36:
-https://bugzilla.mozilla.org/show_bug.cgi?id=1113917#c4
-
 // Share
 
-#share-wrapper {
-    margin: 30px auto 0;
-    width: 200px;
-    text-align: center;
+#hello-header-nav,
+#hello-logo-wrapper {
+    .clearfix();
+}
 
-    .socialshare {
-        & > div > a {
-            background-image: url(/media/img/firefox/hello/sprite-share.png);
-            color: #2983c8;
+#spread-hello {
+    display: none;
+    float: right;
+    margin-top: 15px;
+}
 
-            span {
-                border-color: #2983c8;
-            }
+.js #spread-hello {
+    display: block;
+}
 
-            &:hover,
-            &:focus {
-                background-position: 0 8px;
-                color: #2983c8;
+html[dir="rtl"] #spread-hello {
+    float: left;
+}
 
-                span {
-                    border-color: #2983c8;
-                }
-            }
+.mozilla-share-cta {
+    border: 0;
+    background: transparent;
+    width: 140px;
 
-            &:after {
-                background-image: url(/media/img/firefox/hello/sprite-share.png);
-                background-position: 4px -19px;
-            }
-        }
+    &:hover,
+    &:focus {
+        background: transparent;
+    }
 
-        &.open > div > a{
-            background-position: 0 8px;
+    h3 {
+        .font-size(@smallFontSize);
+        padding-left: @baseLine / 2;
+        padding-right: @baseLine / 2;
+        width: 120px;
+        color: @linkBlue;
+    }
 
-            &:after {
-                background-position: 5px -17px;
-            }
-        }
+    ul li a {
+        color: @linkBlue;
 
-        #share-options {
-            width: 85px;
+        &:before {
+            .font-size(18px);
+            line-height: 43px;
+        }
 
-            ul {
-                text-align: left;
-            }
+        &:hover,
+        &:focus {
+            color: @linkBlue;
         }
     }
 }
-*/
 
 // Intro
 
@@ -1486,6 +1499,12 @@ html[lang^="en"] #powered-by {
         .font-size(20px);
     }
 
+    // Share
+
+    #spread-hello {
+        margin-top: 25px;
+    }
+
     // Intro
 
     #intro {
@@ -1903,6 +1922,12 @@ html[lang^="en"] #powered-by {
         .font-size(20px);
     }
 
+    // Share
+
+    .js #spread-hello {
+        display: none;
+    }
+
     // Intro
 
     #intro-image {