Skip to content

Commit

Permalink
Merge pull request #2740 from kyoshino/bug-1131309-plugincheck-share
Browse files Browse the repository at this point in the history 
Fix Bug 1131309 - Add share buttons to 'Check your plugins' page
  • Loading branch information
@alexgibson
alexgibson committed Feb 24, 2015
2 parents 1ecd039 + d6d4ab6 commit 58892a0
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 68 deletions.
10 changes: 5 additions & 5 deletions bedrock/base/templates/macros.html
View file
Expand Up @@ -357,15 +357,15 @@ <h3>{{ _('Get Mozilla updates') }}</h3>
</section>
{%- endmacro %}

{% macro share_cta(cta_text, share_urls, share_text, id) %}
<div class="mozilla-share-cta" tabindex="0"{% if id %} id="{{ id }}"{% endif -%}>
{% macro share_cta(cta_text, share_urls, share_text, id, class) %}
<aside class="mozilla-share-cta{% if class %} {{ class }}{% endif %}" 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>
<li><a class="twitter" href="{{ 'https://www.twitter.com/intent/tweet?url=%s&text=%s'|format(share_urls.get('twitter')|urlencode, share_text|urlencode)|e }}" title="Twitter">Twitter</a></li>
<li><a class="facebook" href="{{ 'https://www.facebook.com/sharer/sharer.php?u=%s'|format(share_urls.get('facebook')|urlencode)|e }}" title="Facebook">Facebook</a></li>
<li><a class="g-plus" href="{{ 'https://plus.google.com/share?url=%s&amp;hl=%s'|format(share_urls.get('googleplus')|urlencode, LANG)|e }}" title="Google+">Google+</a></li>
<li><a class="g-plus" href="{{ 'https://plus.google.com/share?url=%s&hl=%s'|format(share_urls.get('googleplus')|urlencode, LANG)|e }}" title="Google+">Google+</a></li>
</ul>
</div>
</aside>
{%- endmacro %}

{% macro anniversary_video(buttons_overlay, button_footer, embed_video) %}
Expand Down
2 changes: 1 addition & 1 deletion bedrock/firefox/templates/firefox/hello/index.html
View file
Expand Up @@ -47,7 +47,7 @@
'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') }}
{{ share_cta(_('Share'), share_urls, _('Meet Firefox Hello, the easiest way to connect for free over video with anyone, anywhere.'), 'spread-hello', 'sky mini') }}
</div>
{% endblock %}
</div>
Expand Down
10 changes: 10 additions & 0 deletions bedrock/mozorg/templates/mozorg/plugincheck.html
View file
Expand Up @@ -4,6 +4,8 @@

{% extends "base-resp.html" %}

{% from "macros.html" import share_cta with context %}

{% block body_id %}plugincheck{% endblock %}

{% block page_title %}{{_('Plugin Check &amp; Updates')}}{% endblock %}
Expand Down Expand Up @@ -54,6 +56,14 @@
{{ download_firefox(small=True) }}
<h1 class="large">{{_('Check Your Plugins')}}</h1>
<p class="preamble">{{_('Keeping your plugins up to date helps Firefox run safely and smoothly.')}}</p>
{% set share_urls = { 'twitter': 'http://mzl.la/17aqnLZ', 'googleplus': 'http://mzl.la/1FuAhTS', 'facebook': 'http://mzl.la/1z4Noqm' } -%}
{% if l10n_has_tag('share_cta') -%}
{% set share_text = _('Plugins don’t always update automatically. Check yours now to stay safe and browse without interruption!') %}
{%- else -%}
{# If the new copy is not localized yet, just use the same text as the existing preamble #}
{% set share_text = _('Keeping your plugins up to date helps Firefox run safely and smoothly.') %}
{% endif -%}
{{ share_cta(_('Share'), share_urls, share_text, 'spread-plugincheck', 'sky mini') }}
</header>

<section class="plugin-status-container billboard">
Expand Down
2 changes: 2 additions & 0 deletions bedrock/settings/base.py
View file
Expand Up @@ -829,6 +829,7 @@ def JINJA_CONFIG():
},
'plugincheck': {
'source_filenames': (
'css/base/mozilla-share-cta.less',
'css/plugincheck/plugincheck.less',
'css/plugincheck/qtip.css',
),
Expand Down Expand Up @@ -1590,6 +1591,7 @@ def JINJA_CONFIG():
},
'plugincheck': {
'source_filenames': (
'js/base/mozilla-share-cta.js',
'js/plugincheck/lib/mustache.js',
'js/plugincheck/tmpl/plugincheck.ui.tmpl.js',
'js/plugincheck/check-plugins.js',
Expand Down
63 changes: 58 additions & 5 deletions media/css/base/mozilla-share-cta.less
View file
Expand Up @@ -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;
}

// Share button
.mozilla-share-cta {
position: relative;
Expand All @@ -21,7 +30,7 @@
}

h3 {
display: block;
display: none;
width: 256px;
padding: 1em 20px;
margin: 0;
Expand Down Expand Up @@ -52,7 +61,7 @@
padding: 0;
width: 100%;
height: 100%;
visibility: hidden;
visibility: visible;

li {
display: table-cell;
Expand All @@ -61,7 +70,7 @@
padding: 0;
text-align: center;
vertical-align: middle;
opacity: 0;
opacity: 1;
.transition(opacity .2s ease-in-out);

a {
Expand Down Expand Up @@ -106,10 +115,46 @@
}
}
}

/* Sky theme: blue buttons & transparent background */
&.sky {
&,
&:hover,
&:focus {
background: transparent;
}

h3,
ul li a,
ul li a:hover,
ul li a:focus {
color: @linkBlue;
}
}

/* Mini widget */
&.mini {
border: 0;
border-radius: 0;
width: 140px;

h3 {
padding: 15px 10px;
width: 120px;
height: 13px;
.font-size(@smallFontSize);
}

ul li a:before {
.font-size(18px);
line-height: 43px;
}
}
}

.js .mozilla-share-cta {
h3 {
display: block;
position: absolute;
top: 0;
left: 0;
Expand All @@ -120,7 +165,15 @@
}
}

ul.in li {
opacity: 1;
ul {
visibility: hidden;

li {
opacity: 0;
}

&.in li {
opacity: 1;
}
}
}
47 changes: 0 additions & 47 deletions media/css/firefox/hello/index.less
View file
Expand Up @@ -4,15 +4,6 @@

@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,
Expand Down Expand Up @@ -122,52 +113,14 @@ main {
}

#spread-hello {
display: none;
float: right;
margin-top: 15px;
}

.js #spread-hello {
display: block;
}

html[dir="rtl"] #spread-hello {
float: left;
}

.mozilla-share-cta {
border: 0;
background: transparent;
width: 140px;

&:hover,
&:focus {
background: transparent;
}

h3 {
.font-size(@smallFontSize);
padding-left: @baseLine / 2;
padding-right: @baseLine / 2;
width: 120px;
color: @linkBlue;
}

ul li a {
color: @linkBlue;

&:before {
.font-size(18px);
line-height: 43px;
}

&:hover,
&:focus {
color: @linkBlue;
}
}
}

// Intro

#intro {
Expand Down
32 changes: 31 additions & 1 deletion media/css/plugincheck/plugincheck.less
View file
Expand Up @@ -26,12 +26,25 @@
color: rgb(72, 72, 72);
}
}
.html-rtl {

.mozilla-share-cta {
position: absolute;
top: -43px;
right: 24px;
}

html[dir="rtl"] {
#main-feature > .download-button {
right: auto;
left: 0;
}

.mozilla-share-cta {
right: auto;
left: 24px;
}
}

.billboard {
padding-top: 42px;
padding-bottom: 0;
Expand Down Expand Up @@ -298,4 +311,21 @@
position: relative;
margin-top: 20px;
}

.mozilla-share-cta {
top: -63px;
right: 0;
}

html[dir="rtl"] .mozilla-share-cta {
right: auto;
left: 0;
}
}

/* Mobile Layout: 320px */
@media only screen and (max-width: @breakMobileLandscape) {
.mozilla-share-cta {
display: none;
}
}
9 changes: 0 additions & 9 deletions media/css/privacy/privacy-day.less
View file
Expand Up @@ -4,15 +4,6 @@

@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;
}

@privacyGreen: #00af84;
@localBlue: #0c99d5;
@localBlueDark: darken(#0c99d5, 5%);
Expand Down

0 comments on commit 58892a0

Please sign in to comment.