-
Notifications
You must be signed in to change notification settings - Fork 915
/
macros.html
388 lines (342 loc) · 21.4 KB
/
macros.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
{# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
{% macro facebook_share_url(url) -%}
{{ 'https://www.facebook.com/sharer/sharer.php?u=%s'|format(url|urlencode)|e }}
{%- endmacro %}
{% macro twitter_share_url(url, tweet_text) -%}
{{ 'https://www.twitter.com/intent/tweet?url=%s&text=%s'|format(url|urlencode, tweet_text|urlencode)|e }}
{%- endmacro %}
{% macro twitter_follow_button(account_name, account_id, show_account_id=True) -%}
{%- if show_account_id -%}
{% set label = _('Follow @%s')|format(account_id) %}
{%- else -%}
{% set label = _('Follow') %}
{%- endif -%}
<a href="https://twitter.com/{{ account_id }}" title="{{ _('Follow %s on Twitter')|format(account_name) }}" class="twitter-follow-button" data-social-network="twitter-only" data-social-action="Follow">{{ label }}</a>
{%- endmacro %}
{% macro twitter_timeline_widget(title='', heading_level=3, max_length=0) -%}
{% if tweets -%}
<section id="twitter-timeline-widget" itemscope itemtype="http://schema.org/Blog">
<header>
<h{{ heading_level }} itemprop="name">
{%- if title -%}
{{ title }}
{%- else -%}
{{ _('Twitter Timeline of %s')|format(tweets[0].user.name) }}
{%- endif -%}
</h{{ heading_level }}>
<p>{{ twitter_follow_button(tweets[0].user.name, tweets[0].user.screen_name, False) }}</p>
</header>
<div class="tweets">
{% for _tweet in tweets %}
{%- if _tweet.retweeted_status -%}
{% set retweet = true %}
{% set tweet = _tweet.retweeted_status %}
{%- else -%}
{% set retweet = false %}
{% set tweet = _tweet %}
{%- endif -%}
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h{{ heading_level + 1 }} class="timestamp">
<a href="https://twitter.com/{{ tweet.user.screen_name }}/status/{{ tweet.id }}" class="post" data-social-network="twitter-only" data-social-action="Post Link Exit">
{{ format_tweet_timestamp(tweet)|safe }}
</a>
</h{{ heading_level + 1 }}>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<a href="https://twitter.com/{{ tweet.user.screen_name }}" class="author" data-social-network="twitter-only" data-social-action="Author Link Exit">
<img src="{{ tweet.user.profile_image_url_https }}" alt="" itemprop="image">
<span itemprop="name">{{ tweet.user.name }}</span>
<span itemprop="alternateName">@{{ tweet.user.screen_name }}</span>
</a>
</div>
</header>
<div>
<p itemprop="articleBody">{{ format_tweet_body(tweet)|safe }}</p>
{% if retweet -%}
<p class="retweet-credit">{{ _('Retweeted by %s')|format('<a href="%s" class="credit" data-social-network="twitter-only" data-social-action="Retweet Credit Link Exit">%s</a>'|format('https://twitter.com/'+_tweet.user.screen_name, _tweet.user.name)|safe) }}</p>
{% endif -%}
{% if tweet.entities.media -%}
{% for medium in tweet.entities.media -%}
{% if medium.type == 'photo' -%}
<p class="media"><a href="{{ medium.expanded_url }}" class="image" data-social-network="twitter-only" data-social-action="Preview Image Exit"><img src="{{ medium.media_url_https }}" alt="" itemprop="image"></a></p>
{% endif -%}
{% endfor -%}
{% endif -%}
</div>
<footer>
<ul class="actions">
<li><a class="reply" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}" data-social-network="twitter-only" data-social-action="Reply">{{ _('Reply') }}</a></li>
<li><a class="retweet" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}" data-social-network="twitter-only" data-social-action="Retweet">{{ _('Retweet') }}</a></li>
<li><a class="favorite" href="https://twitter.com/intent/favorite?tweet_id={{ tweet.id }}" data-social-network="twitter-only" data-social-action="Favorite">{{ _('Favorite') }}</a></li>
</ul>
</footer>
</article>
{% if max_length > 0 and loop.index == max_length -%}
{% break %}
{% endif -%}
{% endfor %}
</div>
{% endif -%}
</section>
{%- endmacro %}
{% 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&text=%s'|format(share_urls.get('twitter')|urlencode, share_text|urlencode)|e }}" title="Twitter" data-link-type="social share" data-link-name="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" data-link-type="social share" data-link-name="Facebook">Facebook</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+" data-link-type="social share" data-link-name="Google+">Google+</a></li>
</ul>
</aside>
{%- endmacro %}
{% macro fxfamilynav(activeprimary, activesub, navclass) %}
{#
1. Add to page:
a. Include this macro:
{% from "macros.html" import fxfamilynav with context %}
b. Remove old site_header:
{% block site_header %}{% endblock %}
c. Add site_header_unwrapped block, including this macro and specifying the
active primary and sub nav items:
{% block site_header_unwrapped %}
{{ fxfamilynav('android', 'index') }}
{% endblock %}
If you need the dark text version (like for /firefox/desktop), pass
in the 'dark' argument:
{% block site_header_unwrapped %}
{{ fxfamilynav('desktop', 'index', dark') }}
{% endblock %}
Available primary/sub nav ID values:
desktop
- index
- trust
- customize
- fast
- sync
- hello
android
- index
os
- index
- devices
If you need a CTA in the sticky nav, call the macro and include
the CTA element:
{% block site_header_unwrapped %}
{% call fxfamilynav('desktop', 'index') %}
<a href="{{ url('firefox.new') }}">Download Firefox</a>
{% endcall %}
{% endblock %}
2. Make sure necessary files are in your CSS/JS bundles:
a. CSS
'css/firefox/family-nav.less'
b. JS
'js/libs/jquery.waypoints.min.js',
'js/libs/jquery.waypoints-sticky.min.js',
'js/firefox/family-nav.js',
c. IE 9
IE 9 requires the matchMedia.addListener polyfill. If your page doesn't
already have a specific IE 9 bundle, you can use the generic one:
<!--[if IE 9]>
{% javascript 'matchmedia_addlistener' %}
<![endif]-->
## Notes on CTA:
CTA in sticky nav max dimensions are 160px w x 50px h. Anything over will be cut off.
Conform or feel the wrath of chopped off edges.
CTA is hidden in sticky nav at tablet (760px) breakpoint - just not enough
room (this may change in the future).
CTA is purposefully hidden for mobile.
## Notes on tabzilla wordmark
By default, wordmark is transparent, which works for most pages. If you need to set
the color behind the transparent wordmark, just include CSS like the following on
your specific page:
.fxfamilynav-tabzilla:before {
background-color: #e840c0;
}
#}
<header id="fxfamilynav-header" class="fxfamilynav-header{% if (navclass) %} {{ navclass }}{% endif %}">
<div class="container">
<a href="{{ url('firefox.family.index') }}"><i class="fxfamilynav-logo">{{ _('Firefox') }}</i></a>
<nav id="fxfamilynav" class="fxfamilynav" role="navigation">
<ul id="fxfamilynav-primary" class="primarynav">
{# L10n: The <span> elements below are for visual formatting #}
<li{% if activeprimary == 'desktop' %} class="active"{% endif %}>
<a data-id="desktop" href="{{ url('firefox.desktop.index') }}" class="primary-link" data-link-type="nav" data-link-name="for Desktop"><div>{{ _('<span>for</span> Desktop') }}</div></a>
<ul class="subnav" id="desktop-subnav">
{# note: Removing hassubsubnav for now because after localization nav items get pushed to two lines #}
<li {# {% if activesub in ('index', 'trust', 'customize', 'fast') %} class="hassubsubnav"{% endif %} #}>
<a href="{{ url('firefox.desktop.index') }}"{% if activesub == 'index' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Desktop: Overview"><div>{{ _('Overview') }}</div></a>
{# note: Removing items for now because after localization nav items get pushed to two lines
{% if activesub in ('index', 'trust', 'customize', 'fast') %}
<ul class="subsubnav" id="desktop-subsubnav">
<li><a href="{{ url('firefox.desktop.trust') }}"{% if activesub == 'trust' %} class="selected"{% endif %}>{{ _('Trusted') }}</a></li>
<li><a href="{{ url('firefox.desktop.customize') }}"{% if activesub == 'customize' %} class="selected"{% endif %}>{{ _('Flexible') }}</a></li>
<li><a href="{{ url('firefox.desktop.fast') }}"{% if activesub == 'fast' %} class="selected"{% endif %}>{{ _('Fast') }}</a></li>
</ul>
{% endif %}
#}
</li>
<li><a href="{{ url('firefox.sync') }}"{% if activesub == 'sync' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Desktop: Sync"><div>{{ _('Sync') }}</div></a></li>
<li><a href="{{ url('firefox.hello') }}"{% if activesub == 'hello' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Desktop: Hello"><div>{{ _('Hello') }}</div></a></li>
<li><a href="{{ url('firefox.private-browsing') }}"{% if activesub == 'private-browsing' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Desktop: Private Browsing"><div>{{ _('Private Browsing') }}</div></a></li>
</ul>
</li>
<li{% if activeprimary == 'android' %} class="active"{% endif %}>
<a data-id="android" href="{{ url('firefox.android.index') }}" class="primary-link" data-link-type="nav" data-link-name="for Android"><div>{{ _('<span>for</span> Android') }}</div></a>
<ul class="subnav" id="android-subnav">
<li><a href="{{ url('firefox.android.index') }}"{% if activesub == 'index' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Android: Overview"><div>{{ _('Overview') }}</div></a></li>
<li><a href="{{ url('firefox.sync') }}"{% if activesub == 'sync' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Android: Sync"><div>{{ _('Sync') }}</div></a></li>
<li><a href="{{ url('firefox.private-browsing') }}"{% if activesub == 'private-browsing' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for Android: Private Browsing"><div>{{ _('Private Browsing') }}</div></a></li>
</ul>
</li>
<li{% if activeprimary == 'ios' %} class="active"{% endif %}>
<a data-id="ios" href="{{ url('firefox.ios') }}" class="primary-link" data-link-type="nav" data-link-name="for iOS"><div>{{ _('<span>for</span> iOS') }}</div></a>
<ul class="subnav" id="ios-subnav">
<li><a href="{{ url('firefox.ios') }}"{% if activesub == 'index' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for iOS: Overview"><div>{{ _('Overview') }}</div></a></li>
<li><a href="{{ url('firefox.sync') }}"{% if activesub == 'sync' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for iOS: Sync"><div>{{ _('Sync') }}</div></a></li>
<li><a href="{{ url('firefox.private-browsing') }}"{% if activesub == 'private-browsing' %} class="selected"{% endif %} data-link-type="nav" data-link-name="for iOS: Private Browsing"><div>{{ _('Private Browsing') }}</div></a></li>
</ul>
</li>
{% if activeprimary == 'os' %}
<li class="active">
<a data-id="os" href="{{ url('firefox.os.index') }}" class="primary-link" data-link-type="nav" data-link-name="Firefox OS"><div>{{ _('Firefox OS') }}</div></a>
<ul class="subnav" id="os-subnav">
<li><a data-id="os-index" href="{{ url('firefox.os.index') }}"{% if activesub == 'index' %} class="selected"{% endif %}><div>{{ _('Overview') }}</div></a></li>
<li><a data-id="os-devices" href="{{ url('firefox.os.devices') }}"{% if activesub == 'devices' %} class="selected"{% endif %}><div>{{ _('Devices') }}</div></a></li>
<li><a data-id="os-marketplace" rel="external" href="https://marketplace.firefox.com/"><div>{{ _('Marketplace') }}<i class="icon-external"></i></div></a></li>
</ul>
</li>
{% endif %}
</ul>
</nav>{#-- /#fxfamillynav --#}
<div id="fxfamilynav-tertiarynav" class="fxfamilynav-tertiarynav">
{# the triangle needs a border, so :before content doesn't cut it #}
<div class="triangle"></div>
<div class="triangle-border"></div>
<ul class="tertiarynav{% if activeprimary == 'desktop' %} active{% endif %}">
<li><a href="{{ url('firefox.dnt') }}" data-link-type="nav" data-link-name="Side Menu: Do Not Track">{{ _('Do Not Track') }}</a></li>
<li><a href="{{ url('firefox.interest-dashboard') }}" data-link-type="nav" data-link-name="Side Menu: Interest Dashboard">{{ _('Interest Dashboard') }}</a></li>
<li><a href="{{ url('firefox.developer') }}" data-link-type="nav" data-link-name="Side Menu: Developer Edition">{{ _('Developer Edition') }}</a></li>
<li><a rel="external" href="https://support.mozilla.org/kb/private-browsing-browse-web-without-saving-info" data-link-type="nav" data-link-name="Side Menu: Private Browsing">{{ _('Private Browsing') }}</a></li>
<li><a rel="external" href="https://addons.mozilla.org" data-link-type="nav" data-link-name="Side Menu: Add-ons">{{ _('Add-ons') }}</a></li>
<li><a rel="external" href="https://support.mozilla.org/products/firefox" data-link-type="nav" data-link-name="Side Menu: Need help?">{{ _('Need help?') }}</a></li>
</ul>
<ul class="tertiarynav{% if activeprimary == 'android' %} active{% endif %}">
<li><a href="{{ url('firefox.dnt') }}" data-link-type="nav" data-link-name="Side Menu: Do Not Track">{{ _('Do Not Track') }}</a></li>
<li><a rel="external" href="https://www.youtube.com/watch?v=Ewk0YtFTBec&list=PLA8ABF6B7A66A0C5E&index=15" data-link-type="nav" data-link-name="Side Menu: Private Browsing">{{ _('Private Browsing') }}</a></li>
<li><a rel="external" href="https://addons.mozilla.org/android/" data-link-type="nav" data-link-name="Side Menu: Android Add-ons">{{ _('Add-ons') }}</a></li>
<li><a rel="external" href="https://support.mozilla.org/products/mobile" data-link-type="nav" data-link-name="Side Menu: Need help?">{{ _('Need help?') }}</a></li>
</ul>
<ul class="tertiarynav{% if activeprimary == 'ios' %} active{% endif %}">
<li><a rel="external" href="https://support.mozilla.org/products/ios" data-link-type="nav" data-link-name="Side Menu: Need help?">{{ _('Need help?') }}</a></li>
</ul>
<ul class="tertiarynav{% if activeprimary == 'os' %} active{% endif %}">
<li><a rel="external" href="https://blog.mozilla.org/blog/category/firefox-os/" data-link-type="nav" data-link-name="Side Menu: News">{{ _('News') }}</a></li>
<li><a rel="external" href="https://developer.mozilla.org/Firefox_OS" data-link-type="nav" data-link-name="Side Menu: For developers">{{ _('For developers') }}</a></li>
<li><a rel="external" href="https://find.firefox.com" data-link-type="nav" data-link-name="Side Menu: Find My Device">{{ _('Find My Device') }}</a></li>
<li><a rel="external" href="https://support.mozilla.org/products/firefox-os" data-link-type="nav" data-link-name="Side Menu: Need help?">{{ _('Need help?') }}</a></li>
</ul>
</div>{#-- /#fxfamilynav-tertiarynav --#}
{# Page will dictate CTA (button, usually) to be placed in this wrapper #}
<div id="fxfamilynav-cta-wrapper" class="fxfamilynav-cta-wrapper">{% if caller %}{{ caller() }}{% endif %}</div>
<button type="button" id="fxfamilynav-tertiarynav-trigger" class="fxfamilynav-tertiarynav-trigger" aria-controls="fxfamilynav-tertiarynav">
<span>{{ _('Menu') }}</span>
<div class="trigger-dots">
<div class="trigger-dot"></div>
<div class="trigger-dot"></div>
<div class="trigger-dot"></div>
</div>
</button>
<div id="tabzilla">
<a href="{{ url('mozorg.home') }}" data-link-type="nav" data-link-name="tabzilla">Mozilla</a>
</div>
</div>{#-- /.container --#}
</header>{#-- /#fxfamilynav-header --#}
{%- endmacro %}
{% macro send_to_device(platform, include_title=True, title_text='', include_logo=False, ios_link='') %}
{# If no App Store link is specified, use base with default "ct" param value #}
{# See https://bugzilla.mozilla.org/show_bug.cgi?id=1196310#c23 #}
{% if ios_link == '' %}
{% set ios_link = firefox_ios_url('mozorg') %}
{% endif %}
{% set android_link = settings.GOOGLE_PLAY_FIREFOX_LINK %}
<section id="send-to-device" class="{% if include_logo %}logo {% endif %}{% if include_title %}title{% else %}no-title{% endif %}" data-key="{{ settings.MOZILLA_LOCATION_SERVICES_KEY }}">
<div class="form-container">
{% if include_title %}
<h2 class="form-heading">
{% if title_text %}
{{ title_text }}
{% else %}
{{ _('Send Firefox to your smartphone or tablet') }}
{% endif %}
</h2>
{% endif %}
<h2 class="thank-you hidden">{{ _('Your download link was sent.') }}</h2>
<form id="send-to-device-form" action="{{ secure_url('firefox.send-to-device-post') }}" method="post"{% if platform == 'select' %} class="dropdown"{% endif %}>
<ul class="error-list hidden">
<li class="sms">{{ _('Sorry. This number isn’t valid. Please enter a U.S. phone number.') }}</li>
<li class="email">{{ _('Please enter an email address.') }}</li>
<li class="platform">{{ _('Please make a selection before proceeding.') }}</li>
<li class="system">{{ _('An error occurred in our system. Please try again later.') }}</li>
</ul>
<div class="input">
<div class="platform-container">
{% if platform == 'select' %}
{# User selects OS they would like to receive link for. #}
<label for="id-platform">
{{ _('Select iOS or Android') }}
</label>
<select id="id-platform" name="platform" autocomplete="off" required>
<option value="" selected>{{ _('Choose OS') }}</option>
<option value="ios">iOS</option>
<option value="android">Android</option>
</select>
{% else %}
<input type="hidden" id="id-platform" name="platform" value="{{ platform }}">
{% endif %}
<input type="hidden" name="source-url" value="{{ secure_url() }}">
</div>
<div class="inline-field">
<label id="form-input-label" for="id-input" data-alt="{{ _('Enter your email or 10-digit phone number') }}">{{ _('Enter your email') }}</label>
<div class="form-input">
<input id="id-input" name="phone-or-email" type="text" required>
</div>
<div class="form-submit">
<button type="submit" class="button-flat"
{% if platform == 'android' %} data-download-os="Android"
{% elif platform == 'ios' %} data-download-os="iOS" {% endif %}>{{ _('Send') }}</button>
</div>
</div>
<p class="legal sms">
{{ _('SMS service available to U.S. phone numbers only. SMS & data rates may apply.')}} {{ _('The intended recipient of the email or SMS must have consented.')}} <a href="{{ url('privacy.notices.websites') }}#campaigns" class="more">{{ _('Learn more')}}</a>
</p>
<p class="legal email">
{{ _('The intended recipient of the email must have consented.')}} <a href="{{ url('privacy.notices.websites') }}#campaigns" class="more">{{ _('Learn more')}}</a>
</p>
</div>
<div class="thank-you hidden">
<p class="sms">{{ _('Check your device for the email or text message!') }}</p>
<p class="email">{{ _('Check your device for the email!') }}</p>
<a href="#" role="button" class="more send-another">{{ _('Send to another device') }}</a>
</div>
<div class="loading-spinner"></div>
</form>
</div>
<footer>
<ul class="{{ platform }}">
{% if platform == 'android' %}
<li class="android-all">
<a href="{{ firefox_url('android', 'all') }}">{{_('Systems & Languages')}}</a>
</li>
{% endif %}
<li class="app-store">
<a class="more" href="{{ ios_link }}">{{ _('Go to the App Store')}}</a>
</li>
<li class="google-play">
<a class="more" href="{{ android_link }}" data-link-type="download" data-download-os="Android">{{ _('Go to Google Play')}}</a>
</li>
</ul>
</footer>
</section>
{%- endmacro %}