Permalink
Browse files

Add share widget to Hello product page. Bug 1119849.

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