Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: pages/committee/members.tmpl

Issue 29471608: Issue 5043 - Update member page layout (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Left Patch Set: Addressed comments Created June 26, 2017, 2:38 p.m.
Right Patch Set: Fixed regression Created July 17, 2017, 10:36 a.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
« no previous file with change/comment | « no previous file | no next file » | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 title=Members | The Acceptable Ads Committee 1 title=Members | The Acceptable Ads Committee
2 description=A list of all Representatives and supporting Members that make up th e Acceptable Ads Committee. 2 description=A list of all Representatives and supporting Members that make up th e Acceptable Ads Committee.
3 parent=committee/index 3 parent=committee/index
4 custom=1 4 custom=1
5 5
6 {% block head %} 6 {% block head %}
7 <style> 7 <style>
8 @media(min-width: 768px) 8 @media(min-width: 768px)
9 { 9 {
10 #committee-structure 10 #committee-structure
11 { 11 {
12 padding-top: 25%; 12 padding-top: 25%;
13 margin: 0 auto; 13 margin: 0px auto;
14 max-width: 70%; 14 max-width: 70%;
15 } 15 }
16 } 16 }
17 17
18 .group-list h4 18 .group-list h4
19 { 19 {
20 margin-top: 40px; 20 margin-top: 40px;
21 padding: 8px 22px; 21 padding: 8px 22px;
22 background-color: #E1E1E1; 22 background-color: #E1E1E1;
23 } 23 }
24 24
25 .group-list dl 25 .group-list dl
26 { 26 {
27 margin: 22px; 27 margin: 22px;
28 } 28 }
29 29
30 .group-list dt 30 .group-list dt
31 { 31 {
32 margin: 32px 0 26px 0; 32 margin: 32px 0px 26px 0px;
33 color: #424242; 33 color: #424242;
34 text-transform: none; 34 text-transform: none;
35 } 35 }
36 36
37 .group-list dd 37 .group-list dd
38 { 38 {
39 margin: 0; 39 margin: 0px;
40 } 40 }
41 41
42 .member-list 42 .member-list
43 { 43 {
44 display: block; 44 display: block;
45 width: 100%; 45 width: 100%;
46 margin: 0; 46 margin: 0px;
47 overflow: auto; 47 overflow: auto;
48 } 48 }
49 49
50 .member-list li 50 .member-list li
51 { 51 {
52 width: 100%; 52 width: 100%;
53 float: left; 53 float: left;
54 padding-left: 0px; 54 padding-left: 0px;
55 margin-bottom: 1em; 55 margin-bottom: 1em;
56 } 56 }
57 57
58 @media(min-width: 768px) 58 @media(min-width: 768px)
59 { 59 {
60 .member-list li 60 .member-list li
61 { 61 {
62 min-height: 3em; 62 min-height: 4em;
63 width: 50%; 63 width: 50%;
64 } 64 }
65 } 65 }
66 66
67 @media(min-width: 992px) 67 @media(min-width: 992px)
68 { 68 {
69 .member-list li 69 .member-list li
70 { 70 {
71 width: 33.3333333%; 71 width: 33.3333333%;
72 } 72 }
73 } 73 }
74 74
75 .member-list li:before 75 .member-list li:before
76 { 76 {
77 display: none; 77 display: none;
78 } 78 }
79 </style> 79 </style>
80 {% endblock %} 80 {% endblock %}
81 81
82 {% set coalitions = { 82 {% set coalitions = {
83 "for-profit": { 83 "for-profit": {
84 "title": "FOR-PROFIT COALITION", 84 "title": "For-Profit Coalition",
85 "description": "This Coalition consists of stakeholders that can be classifi ed as organizations primarily driven by generating profits. The following groups form the For-Profit Coalition: Advertisers, Ad-Tech Agencies, Advertising Agenc ies, and Publishers and Content Creators.", 85 "description": "This Coalition consists of stakeholders that can be classifi ed as organizations primarily driven by generating profits. The following groups form the For-Profit Coalition: Advertisers, Ad-Tech Agencies, Advertising Agenc ies, and Publishers and Content Creators.",
86 "groups": [ 86 "groups": [
87 "Advertisers", 87 "Advertisers",
88 "Ad Tech Agencies", 88 "Ad Tech Agencies",
89 "Advertising Agencies", 89 "Advertising Agencies",
90 "Publishers & Content Creators", 90 "Publishers & Content Creators",
91 ], 91 ],
92 }, 92 },
93 "expert": { 93 "expert": {
94 "title": "EXPERT COALITION", 94 "title": "Expert Coalition",
95 "description": "This Coalition consists of stakeholders who primarily focus on specific issues relevant to their area of expertise. These experts bring a un ique and objective perspective to the AAC. The following groups form the Expert Coalition: Creative Agents, Researchers and Academics and User Agents.", 95 "description": "This Coalition consists of stakeholders who primarily focus on specific issues relevant to their area of expertise. These experts bring a un ique and objective perspective to the AAC. The following groups form the Expert Coalition: Creative Agents, Researchers and Academics and User Agents.",
96 "groups": [ 96 "groups": [
97 "Creative Agents", 97 "Creative Agents",
98 "Researchers & Academics", 98 "Researchers & Academics",
99 "User Agents", 99 "User Agents",
100 ], 100 ],
101 }, 101 },
102 "user-advocate": { 102 "user-advocate": {
103 "title": "USER ADVOCATE COALITION", 103 "title": "User Advocate Coalition",
104 "description": "This Coalition consists of stakeholders that can be classifi ed as entities primarily driven by protecting the rights of online users. The fo llowing Member Groups form the User Advocate Coalition: Digital Rights Organizat ions and Individual Users.", 104 "description": "This Coalition consists of stakeholders that can be classifi ed as entities primarily driven by protecting the rights of online users. The fo llowing Member Groups form the User Advocate Coalition: Digital Rights Organizat ions and Individual Users.",
105 "groups": [ 105 "groups": [
106 "Digital Rights Organizations", 106 "Digital Rights Organizations",
107 "Users", 107 "Users",
108 ], 108 ],
109 }, 109 },
110 } %} 110 } %}
111 111
112 {% set members = [ 112 {% set members = [
113 { 113 {
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after
313 "title": "Security Analyst", 313 "title": "Security Analyst",
314 "org": "Bloor Analyst Group", 314 "org": "Bloor Analyst Group",
315 }, 315 },
316 { 316 {
317 "group": "User Agents", 317 "group": "User Agents",
318 "position": "Representative", 318 "position": "Representative",
319 "name": "Kenny Ye (叶智聪)", 319 "name": "Kenny Ye (叶智聪)",
320 "title": "Director of International Business Development, Alibaba Mobile Gro up", 320 "title": "Director of International Business Development, Alibaba Mobile Gro up",
321 "org": "UC Web", 321 "org": "UC Web",
322 }, 322 },
323 {
324 "group": "Users",
325 "position": "Representative",
326 "name": "Caroline Crandall",
327 "title": "Adblocking User",
328 "org": False,
329 },
330 {
331 "group": "Users",
332 "position": "Member",
333 "name": "Zack Sinclair",
334 "title": "Adblocking User",
335 "org": False,
336 },
337 {
338 "group": "Users",
339 "position": "Member",
340 "name": "Leli Schiestl",
341 "title": "Adblocking User",
342 "org": False,
343 },
344 {
345 "group": "Digital Rights Organizations",
346 "position": "Representative",
347 "name": "Paul-Olivier Dehaye",
348 "title": "Co-Founder",
349 "org": "PersonalData.IO",
350 },
351 {
352 "group": "Ad Tech Agencies",
353 "position": "Member",
354 "name": "Michael Blend",
355 "title": "Co-founder and President",
356 "org": "System1",
357 },
358 {
359 "group": "Advertisers",
360 "position": "Member",
361 "name": "Thomas Wrobel",
362 "title": False,
363 "org": "Trivago",
364 },
365 {
366 "group": "Researchers & Academics",
367 "position": "Member",
368 "name": "Zubair Shafiq",
369 "title": "Assistant Professor",
370 "org": "Department of Computer Science, The University of Iowa, USA",
371 },
323 ] %} 372 ] %}
324 373
325 {% macro member_list(group, position) -%} 374 {% macro member_list(group, position) -%}
326 {% set count = [] %} 375 {% set count = [] %}
327 {% for member in members %} 376 {% for member in members %}
328 {% if member.group == group and member.position == position %} 377 {% if member.group == group and member.position == position %}
329 {% if (count | length) == 0 %} 378 {% if (count | length) == 0 %}
330 <ul class="member-list"> 379 <ul class="member-list">
331 {% endif %}
332 {% set count = count.append(None) %}
333 <li>
334 <strong>{{ member.name }}</strong><br>
335 {{ member.title }}, <em>{{ member.org }}</em>
336 </li>
337 {% endif %} 380 {% endif %}
338 {% endfor %} 381 {% set _ = count.append(1) %}
339 {% if (count | length) > 0 %} 382 {% if member.title and member.org %}
340 </ul> 383 {% set separator = "," %}
384 {% else %}
385 {% set separator = "" %}
386 {% endif %}
387 <li>
388 <strong>{{ member.name }}</strong><br>
389 {% if member.title %}{{ member.title }}{% endif %}{{ separator }}
390 {% if member.org %}<em>{{ member.org }}</em> {% endif %}
391 </li>
341 {% endif %} 392 {% endif %}
342 {% if position == "Member" or (count | length) < 1 %} 393 {% endfor %}
343 <p><a class="btn-primary" href="committee/apply">{{ "Apply" | translate("a pply-button", "button label") }}</a></p> 394 {% if (count | length) > 0 %}
344 {% endif %} 395 </ul>
396 {% endif %}
397 {% if position == "Member" or (count | length) < 1 %}
398 <p><a class="btn-primary" href="committee/apply">{{ "Apply" | translate("app ly-button", "button label") }}</a></p>
399 {% endif %}
345 {% endmacro %} 400 {% endmacro %}
346 401
347 {% macro group_list(group) -%} 402 {% macro group_list(id, group) -%}
348 <section class="group-list"> 403 <section class="group-list">
349 <h4>{{ group | translate("group-name-heading", "heading") }}</h4> 404 <h4>{{ group | translate(id + "-heading", "heading") }}</h4>
350 <dl> 405 <dl>
351 <dt>{{ "Representative" | translate("representative-heading", "heading") } }</dt> 406 <dt>{{ "Representative" | translate("representative-heading", "heading") } }</dt>
352 <dd>{{ member_list(group, "Representative") }}</dd> 407 <dd>{{ member_list(group, "Representative") }}</dd>
353 </dl> 408 </dl>
354 <dl> 409 <dl>
355 <dt>{{ "Members" | translate("members-heading", "heading") }}</dt> 410 <dt>{{ "Members" | translate("members-heading", "heading") }}</dt>
356 <dd>{{ member_list(group, "Member") }}</dd> 411 <dd>{{ member_list(group, "Member") }}</dd>
357 </dl> 412 </dl>
358 </section> 413 </section>
359 {%- endmacro %} 414 {%- endmacro %}
360 415
361 {% macro coalition_section(id) -%} 416 {% macro coalition_section(id) -%}
362 <section class="section"> 417 <section class="section">
363 <h3 class="h2">{{ coalitions[id].title | translate("{{ id }}-heading", "head ing") }}</h3> 418 <h3 class="h2">{{ coalitions[id].title | translate("{{ id }}-heading", "head ing") }}</h3>
364 <p class="col-6">{{ coalitions[id].description | translate("{{ id }}-intro") }}</p> 419 <p class="col-6">{{ coalitions[id].description | translate("{{ id }}-intro") }}</p>
365 {% for group in coalitions[id].groups %} 420 {% for group in coalitions[id].groups %}
366 {{ group_list(group) }} 421 {{ group_list(id, group) }}
367 {% endfor %} 422 {% endfor %}
368 </section> 423 </section>
369 {% endmacro %} 424 {% endmacro %}
370 425
371 <section class="container"> 426 <section class="container">
372 <div class="row"> 427 <div class="row section">
373 <div class="col-6"> 428 <div class="col-6">
374 <h1>{{ "Members" | translate("members-heading", "heading") }}</h1> 429 <h1>{{ "Members" | translate("members-heading", "heading") }}</h1>
375 <hr> 430 <hr>
376 <p>{{ "The Acceptable Ads Committee is divided into three Coalitions, with each faction consisting of several Members. Each group includes a Representativ e and multiple supporting Members." | translate("members-intro-2") }}</p> 431 <p>{{ "The Acceptable Ads Committee is divided into three Coalitions, with each faction consisting of several Members. Each group includes a Representativ e and multiple supporting Members." | translate("members-intro-1") }}</p>
377 <p>{{ "Below is a list of all current Representatives and supporting Membe rs, broken down by Coalition." | translate("members-intro-2") }}</p> 432 <p>{{ "Below is a list of all current Representatives and supporting Membe rs, broken down by Coalition." | translate("members-intro-2") }}</p>
378 </div> 433 </div>
379 <aside class="col-6"> 434 <aside class="col-6">
380 <img id="committee-structure" class="block" alt="{{ "Acceptable Ads Commit tee Structure" | translate("featured-image-alt", "Image alt text") }}" src="/img /png/blog/acceptable-ads-committee-structure.png" /> 435 <img id="committee-structure" class="block" alt="{{ "Acceptable Ads Commit tee Structure" | translate("featured-image-alt", "Image alt text") }}" src="/img /png/blog/acceptable-ads-committee-structure.png" />
381 </aside> 436 </aside>
382 </div> 437 </div>
383 </section> 438 </section>
384 439
385 <section> 440 <section>
386 441
387 <div class="bg-accent"> 442 <div class="bg-accent">
388 <h2 class="center h3 p-y-md m-a-md">{{ "Meet the Acceptable Ads Committee" | translate("committee-heading", "heading") }}</h2> 443 <h2 class="center h3 p-y-md m-a-md">{{ "Meet the Acceptable Ads Committee" | translate("committee-heading", "heading") }}</h2>
389 </div> 444 </div>
390 445
391 <div class="container"> 446 <div class="container">
392 {% for coalition in coalitions %} 447 {% for coalition in ["for-profit", "expert", "user-advocate"] %}
393 {{ coalition_section(coalition) }} 448 {{ coalition_section(coalition) }}
394 {% endfor %} 449 {% endfor %}
395 </div> 450 </div>
396 451
397 </section> 452 </section>
LEFTRIGHT
« no previous file | no next file » | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld