pages/download.tmpl - Issue 29722640: Fixes #22 - Add download page

Delta Between Two Patch Sets: pages/download.tmpl

Issue 29722640: Fixes #22 - Add download page (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org

Left Patch Set: Rebase Created March 21, 2018, 9:17 a.m.

Right Patch Set: Addressed comments #17 Created April 3, 2018, 3:19 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 title=Download Adblock Plus	1 title=Download Adblock Plus

2 description=Get Adblock Plus for free on Firefox, Chrome, Opera, Safari, Android and iOS	2 description=Get Adblock Plus for free on Firefox, Chrome, Opera, Safari, Android and iOS

3 template=minimal	3 template=minimal

4	4

5 <head>	5 <head>

6 <style>	6 <style>

7 header img {	7 header img {

8 width: 4em;	8 width: 4em;

9 height: auto;	9 height: auto;

10 }	10 }

11 </style>	11 </style>

12 </head>	12 </head>

13	13

14

15

16 {% set supported_devices = [	14 {% set supported_devices = [

17 {	15 {

18 "id": "desktop",	16 "id": "desktop",

19 "icons": ["device-desktop.png", "device-desktop-2x.png"],	17 "icons": { "1x": "device-desktop.png", "2x": "device-desktop-2x.png" },

20 "icon_alt": "Computer monitor and mouse icon",	18 "icon_alt": "Computer monitor and mouse icon",

21 "title": "Block ads on any desktop browser",	19 "title": "Block ads on any desktop browser",

22 "description": "By clicking any of the links below, you agree to our " + "t erms" \| linkify + "Terms of Use</a>.",	20 "description": "By clicking any of the links below, you agree to our " + "t erms" \| linkify + "Terms of Use</a>.",
juliandoucette 2018/04/03 13:24:51 NIT/Suggest: <small> (semantic, not size.) NIT/Suggest: <small> (semantic, not size.) Show quoted text > The HTML <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation. > > -- mdn ire 2018/04/03 15:37:37 Ack. Done. Show quoted text On 2018/04/03 13:24:51, juliandoucette wrote: > NIT/Suggest: <small> (semantic, not size.) > > > The HTML <small> element makes the text font size one size smaller (for > example, from large to medium, or from small to x-small) down to the browser's > minimum font size. In HTML5, this element is repurposed to represent > side-comments and small print, including copyright and legal text, independent > of its styled presentation. > > > > -- mdn > Ack. Done.
23 "platforms": [	21 "platforms": [

24 { "name": "Chrome", "url": "https://chrome.google.com/webstore/detail/cfhd ojbkjhnklbpkdaibdccddilifddb" },	22 { "name": "Chrome", "url": "https://chrome.google.com/webstore/detail/cfhd ojbkjhnklbpkdaibdccddilifddb" },

25 { "name": "Firefox", "url": "https://update.adblockplus.org/latest/adblock plusfirefox.xpi" },	23 { "name": "Firefox", "url": "https://update.adblockplus.org/latest/adblock plusfirefox.xpi" },

26 { "name": "Internet Explorer", "url": "https://update.adblockplus.org/late st/adblockplusie.exe" },	24 { "name": "Internet Explorer", "url": "https://update.adblockplus.org/late st/adblockplusie.exe" },

27 { "name": "Safari", "url": "https://update.adblockplus.org/latest/adblockp lussafari.safariextz" },	25 { "name": "Safari", "url": "https://update.adblockplus.org/latest/adblockp lussafari.safariextz" },

28 { "name": "Edge (beta)", "url": "https://www.microsoft.com/store/p/adblock -plus/9nblggh4r9nz" },	26 { "name": "Edge (beta)", "url": "https://www.microsoft.com/store/p/adblock -plus/9nblggh4r9nz" },

29 { "name": "Opera", "url": "https://addons.opera.com/extensions/details/ope ra-adblock/" },	27 { "name": "Opera", "url": "https://addons.opera.com/extensions/details/ope ra-adblock/" },

30 { "name": "Maxthon", "url": "http://www.maxthon.com/mx5/features/ad-blocke r/" },	28 { "name": "Maxthon", "url": "http://www.maxthon.com/mx5/features/ad-blocke r/" },

31 { "name": "Yandex Browser", "url": "https://chrome.google.com/webstore/det ail/cfhdojbkjhnklbpkdaibdccddilifddb" }	29 { "name": "Yandex Browser", "url": "https://chrome.google.com/webstore/det ail/cfhdojbkjhnklbpkdaibdccddilifddb" }

32 ]	30 ]

33 },	31 },

34 {	32 {

35 "id": "mobile",	33 "id": "mobile",

36 "icons": ["device-mobile.png", "device-mobile.svg"],	34 "icons": { "1x": "device-mobile.png", "2x": "device-mobile.svg" },

37 "icon_alt": "Mobile icon",	35 "icon_alt": "Mobile icon",

38 "title": "Block ads in your mobile browser",	36 "title": "Block ads in your mobile browser",

39 "platforms": [	37 "platforms": [

40 { "name": "Samsung Internet (Android)", "url": "https://play.google.com/st ore/apps/details?id=org.adblockplus.adblockplussbrowser&hl" },	38 { "name": "Samsung Internet (Android)", "url": "https://play.google.com/st ore/apps/details?id=org.adblockplus.adblockplussbrowser&hl" },

41 { "name": "Safari (iOS)", "url": "https://itunes.apple.com/app/adblock-plu s-abp-remove-ads-browse-faster-without-tracking/id1028871868?mt=8" },	39 { "name": "Safari (iOS)", "url": "https://itunes.apple.com/app/adblock-plu s-abp-remove-ads-browse-faster-without-tracking/id1028871868?mt=8" },

42 { "name": "Firefox", "url": "https://addons.mozilla.org/android/addon/adbl ock-plus/" }	40 { "name": "Firefox", "url": "https://addons.mozilla.org/android/addon/adbl ock-plus/" }

43 ]	41 ]

44 },	42 },

45 {	43 {

46 "id": "abb",	44 "id": "abb",

47 "icons": ["abb-icon.png", "abb-icon-2x.png"],	45 "icons": { "1x": "abb-icon.png", "2x": "abb-icon-2x.png" },

48 "icon_alt": "Adblock Browser logo",	46 "icon_alt": "Adblock Browser logo",

49 "title": "Block ads in a dedicated ad-blocking browser",	47 "title": "Block ads in a dedicated ad-blocking browser",

50 "platforms": [	48 "platforms": [

51 { "name": "Adblock Browser (Android)", "url": "https://play.google.com/sto re/apps/details?id=org.adblockplus.browser" },	49 { "name": "Adblock Browser (Android)", "url": "https://play.google.com/sto re/apps/details?id=org.adblockplus.browser" },
saroyanm 2018/03/23 18:33:39 I noticed that we still not using redirection link I noticed that we still not using redirection links, so I also replied in the gitlab discussion. ire 2018/03/26 07:29:07 Ack. Will wait for Jeen's response. Show quoted text On 2018/03/23 18:33:39, saroyanm wrote: > I noticed that we still not using redirection links, so I also replied in the > gitlab discussion. Ack. Will wait for Jeen's response.
52 { "name": "Adblock Browser (iOS)", "url": "https://itunes.apple.com/my/app /adblock-browser/id1015653330?mt=8&ign-itsct=1015653330-1015653330&ign-itscg=017 6&ign-mpt=uo%3D4" }	50 { "name": "Adblock Browser (iOS)", "url": "https://itunes.apple.com/my/app /adblock-browser/id1015653330?mt=8&ign-itsct=1015653330-1015653330&ign-itscg=017 6&ign-mpt=uo%3D4" }

53 ]	51 ]

54 }	52 }

55 ] %}	53 ] %}

56	54

57 <header class="bg-primary section content text-center">	55 <header class="bg-primary section content text-center">

58 <div class="container">	56 <div class="container">

59 <img height="90px"	57 <img height="90px"

60 width="90px"	58 width="90px"

61 src="/img/download-icon.png"	59 src="/img/download-icon.png"

62 srcset="/img/download-icon.svg 2x"	60 srcset="/img/download-icon.svg 2x"

63 alt="{{ "White down arrow" \| translate("download-icon", "Alt text") }}" >	61 alt="{{ "White down arrow" \| translate("download-icon", "Alt text") }}" >

64 <h1>{{ "Get Adblock Plus products on these devices" \| translate("download-he ading", "Heading") }}</h1>	62 <h1>{{ "Get Adblock Plus products on these devices" \| translate("download-he ading", "Heading") }}</h1>

65 <p>{{ "Supported platforms" \| translate("download-subheading", "Subheading") }}</p>	63 <p>{{ "Supported platforms" \| translate("download-subheading", "Subheading") }}</p>

66 </div>	64 </div>

67 </header>	65 </header>

68	66

69 <div class="item-group container text-center content">	67 <div id="supported-devices" class="item-group container text-center content">

70 <div class="row">	68 <div class="row">

71 {% for device in supported_devices %}	69 {% for device in supported_devices %}

72 <div class="column one-third">	70 <div class="column one-third">
juliandoucette 2018/04/03 13:24:51 NIT/Suggest: <article> NIT/Suggest: <article> Show quoted text > The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry. > > -- mdn ire 2018/04/03 15:37:37 I don't think this fits within the definition of a Show quoted text On 2018/04/03 13:24:51, juliandoucette wrote: > NIT/Suggest: <article> > > > The HTML <article> element represents a self-contained composition in a > document, page, application, or site, which is intended to be independently > distributable or reusable (e.g., in syndication). Examples include: a forum > post, a magazine or newspaper article, or a blog entry. > > > > -- mdn I don't think this fits within the definition of an <article> I don't think it is self-contained. Each "device" seems to be to be part of the rest of the page, under the page title "Get Adblock Plus products on these devices". I don't think each device would be considered to be standalone.
73 <img	71 <img

74 height="90px"	72 height="90px"

75 width="90px"	73 width="90px"

76 src="/img/{{ device.icons[0] }}"	74 src="/img/{{ device.icons['1x'] }}"

77 srcset="/img/{{ device.icons[1] }} 2x"	75 srcset="/img/{{ device.icons['2x'] }} 2x"
juliandoucette 2018/04/03 13:24:51 NIT: You could use a dict and place device.icons.1 NIT: You could use a dict and place device.icons.1x and 2x to be more descriptive. ire 2018/04/03 15:37:37 Done. Show quoted text On 2018/04/03 13:24:51, juliandoucette wrote: > NIT: You could use a dict and place device.icons.1x and 2x to be more > descriptive. Done.
78 alt="{{ device.icon_alt \| translate(device.id + "-icon-alt", "Alt text") }}">	76 alt="{{ device.icon_alt \| translate(device.id + "-icon-alt", "Alt text") }}">
juliandoucette 2018/04/03 13:24:51 NIT: I usually imagine "id"s to be for machines an NIT: I usually imagine "id"s to be for machines and "name"s to be for humans. And it seems like you're referring to a human kind of "id" (a "name"). I think this is a PHP convention. You may consider adopting it if you like the idea. ire 2018/04/03 15:37:37 I look at "id"s simply as "identifiers". I wouldn' Show quoted text On 2018/04/03 13:24:51, juliandoucette wrote: > NIT: I usually imagine "id"s to be for machines and "name"s to be for humans. > And it seems like you're referring to a human kind of "id" (a "name"). I think > this is a PHP convention. You may consider adopting it if you like the idea. I look at "id"s simply as "identifiers". I wouldn't consider "abb" for example, to be a name, it's a simplified version of the name that I'm using an an identifier.
79 <h2>{{ device.title \| translate(device.id + "-title", "Heading") }}</h2>	77 <h2>{{ device.title \| translate(device.id + "-title", "Heading") }}</h2>
juliandoucette 2018/04/03 13:24:50 NIT: It's unnecessary to capitalize string context NIT: It's unnecessary to capitalize string contexts. (The same applies elsewhere.) ire 2018/04/03 15:37:37 I like it capitalised. It conveys to me that it is Show quoted text On 2018/04/03 13:24:50, juliandoucette wrote: > NIT: It's unnecessary to capitalize string contexts. > > (The same applies elsewhere.) I like it capitalised. It conveys to me that it is more of a sentence/description rather than a single word/identifier.
80 <div>	78 <div>

81 {% if device.description %}	79 {% if device.description %}

82 <p>{{ device.description \| safe \| translate(device.id + "-description", "Paragraph") }}</p>	80 <p><small>{{ device.description \| safe \| translate(device.id + "-descrip tion", "Paragraph") }}</small></p>

83 {% endif %}	81 {% endif %}

84 <ul class="horizontal-list">	82 <ul class="horizontal-list">

85 {% for platform in device.platforms %}	83 {% for platform in device.platforms %}

86 <li>	84 <li>

87 {% set platform_identifier = device.id + "-product-name-" + loop.i ndex \| string %}	85 {% set platform_identifier = device.id + "-product-name-" + loop.i ndex \| string %}

88 <a href="{{ platform.url }}">{{ platform.name \| translate(platform _identifier, "Product name") }}</a>{{ ", " if loop.index != loop.length }}	86 <a href="{{ platform.url }}">{{ platform.name \| translate(platform _identifier, "Product name") }}</a>{{ ", " if loop.index != loop.length }}
juliandoucette 2018/04/03 13:24:51 Cool :+1: Cool :+1: ire 2018/04/03 15:37:37 Thanks :p Show quoted text On 2018/04/03 13:24:51, juliandoucette wrote: > Cool :+1: Thanks :p
89 </li>	87 </li>

90 {% endfor %}	88 {% endfor %}

91 </ul>	89 </ul>

92 </div>	90 </div>

93 </div>	91 </div>

94 {% endfor %}	92 {% endfor %}

95 </div>	93 </div>

96 </div>	94 </div>

LEFT	RIGHT