Permalink
Browse files

Add share widget to Hello product page. Bug 1119849.

- Fix small attribute spacing issue in share macro.
  • Loading branch information...
1 parent 02e9ea4 commit bc20db6d48682f544fdcc40f39949d2a93c45957 @jpetto jpetto committed Jan 27, 2015
@@ -358,7 +358,7 @@
{%- 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>
@@ -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>
@@ -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': (
@@ -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 {

0 comments on commit bc20db6

Please sign in to comment.