Issue 5043 - Update member page layout

pages/committee/members.tmpl

 title=Members | The Acceptable Ads Committee
-description=Meet the Acceptable Ads Committee.
-breadcrumb=Members
+description=A list of all Representatives and supporting Members that make up the Acceptable Ads Committee.
 parent=committee/index
 custom=1
 
-<style type="text/css">
-  .card
-  {
-    border-bottom: 0px;
-  }
-
-  .card .summary
-  {
-    height: 140px;
-  }
-
-  .card h3
-  {
-    height: auto;
-  }
-
-  html[dir="ltr"] .card
-  {
-    border-left: 0px;
-  }
-
-  html[dir="rtl"] .card
-  {
-    border-right: 0px;
-  }
-</style>
-
-<div class="container" markdown="1">
-# {{members-heading[Members Heading] Members}}
-
----
-</div>
-
-<? include members/all-members ?>
+{% block head %}
+  <style>
+    @media(min-width: 768px)
+    {
+      #committee-structure
+      {
+        padding-top: 25%;
+        margin: 0 auto;
+        max-width: 70%;
+      }
+    }
+
+    .group-list h4
+    {
+      margin-top: 40px;
+      padding: 8px 22px;
+      background-color: #E1E1E1;
+    }
+
+    .group-list dl
+    {
+      margin: 22px;
+    }
+
+    .group-list dt
+    {
+      margin: 32px 0 26px 0;
+      color: #424242;
+      text-transform: none;
+    }
+
+    .group-list dd
+    {
+      margin: 0;
+    }
+
+    .member-list
+    {
+      display: block;
+      width: 100%;
+      margin: 0;
+      overflow: auto;
+    }
+
+    .member-list li
+    {
+      width: 100%;
+      float: left;
+      padding-left: 0px;

[ire, 2017/07/06 15:41:21]

Unit not needed

[juliandoucette, 2017/07/07 14:20:00]

Acknowledged.

I agree. But saroyanm and greiner fought me on this one. I think our last
conclusion was to add units.

[ire, 2017/07/10 07:43:00]

Acknowledged. But does that mean units should be applied everywhere there's a 0?
i.e. elsewhere in this file.

[juliandoucette, 2017/07/14 12:10:43]

Done.

+      margin-bottom: 1em;
+    }
+
+    @media(min-width: 768px)
+    {
+      .member-list li
+      {
+        min-height: 4em;
+        width: 50%;
+      }
+    }
+
+    @media(min-width: 992px)
+    {
+      .member-list li
+      {
+        width: 33.3333333%;
+      }
+    }
+
+    .member-list li:before
+    {
+      display: none;
+    }
+  </style>
+{% endblock %}
+
+{% set coalitions = {
+  "for-profit": {
+    "title": "FOR-PROFIT COALITION",

[ire, 2017/07/06 15:41:21]

NIT: I prefer the capitalization to be applied with CSS

[juliandoucette, 2017/07/07 14:20:00]

Acknowledged.

I agree. But I copied this content from elsewhere - and didn't think it was
necessary to manually change - considering I can un-capitalize it with CSS too.
Do you know how to do this automatically in a text editor?

[ire, 2017/07/10 07:43:00]

Okay. I don't know of a way to do it in a text editor, but I found this online -
http://titlecase.com/

[juliandoucette, 2017/07/14 12:10:43]

Done.

I'm sure there is a better way, but I ended up using emacs'  M-x
capitalize-region.

+    "description": "This Coalition consists of stakeholders that can be classified as organizations primarily driven by generating profits. The following groups form the For-Profit Coalition: Advertisers, Ad-Tech Agencies, Advertising Agencies, and Publishers and Content Creators.",
+    "groups": [
+      "Advertisers",
+      "Ad Tech Agencies",
+      "Advertising Agencies",
+      "Publishers & Content Creators",
+    ],
+  },
+  "expert": {
+    "title": "EXPERT COALITION",
+    "description": "This Coalition consists of stakeholders who primarily focus on specific issues relevant to their area of expertise. These experts bring a unique and objective perspective to the AAC. The following groups form the Expert Coalition: Creative Agents, Researchers and Academics and User Agents.",
+    "groups": [
+      "Creative Agents",
+      "Researchers & Academics",
+      "User Agents",
+    ],
+  },
+  "user-advocate": {
+    "title": "USER ADVOCATE COALITION",
+    "description": "This Coalition consists of stakeholders that can be classified as entities primarily driven by protecting the rights of online users. The following Member Groups form the User Advocate Coalition: Digital Rights Organizations and Individual Users.",
+    "groups": [
+      "Digital Rights Organizations",
+      "Users",
+    ],
+  },
+} %}
+
+{% set members = [
+  {
+    "group": "Advertisers",
+    "position": "Representative",
+    "name": "Breanna Fowler",
+    "title": "Strategic Partnerships & Advertising",
+    "org": "Dell",
+  },
+  {
+    "group": "Advertising Agencies",
+    "position": "Representative",
+    "name": "Gabriel Cheng",
+    "title": "VP Strategy Growth & Partnerships",
+    "org": "M&C Saatchi Mobile",
+  },
+  {
+    "group": "Advertising Agencies",
+    "position": "Member",
+    "name": "Kevin Vanvalkenburgh",
+    "title": "Vice President of Connections Planning",
+    "org": "The Tombras Group",
+  },
+  {
+    "group": "Advertising Agencies",
+    "position": "Member",
+    "name": "Tom Rathbone",
+    "title": "Head of Technology",
+    "org": "Schaaf-PartnerCentric",
+  },
+  {
+    "group": "Advertising Agencies",
+    "position": "Member",
+    "name": "Christoph Bornschein",
+    "title": "CEO/Founder",
+    "org": "TLGG",
+  },
+  {
+    "group": "Advertising Agencies",
+    "position": "Member",
+    "name": "Will Perkins",
+    "title": "VP Media",
+    "org": "Look Listen",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Representative",
+    "name": "Ari Levenfeld",
+    "title": "Senior Director of Privacy and Inventory Quality",
+    "org": "Rocket Fuel Inc.",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Todd Garland",
+    "title": "Founder",
+    "org": "BuySellAds",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Sebastien Bock",
+    "title": "GVP Tech & Product Programmatic & Data",
+    "org": "Rakuten Marketing",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Jon Malach",
+    "title": "CEO",
+    "org": "Native Ads, Inc.",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Francine Hardaway",
+    "title": "Director of Marketing",
+    "org": "ZEDO",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Henry Lau",
+    "title": "Head of Partnerships",
+    "org": "Instinctive",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Alex Calic",
+    "title": "Chief Revenue Officer",
+    "org": "The Media Trust",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Henrik Lohk",
+    "title": "Co-founder",
+    "org": "Adtoma AB",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "James Sciolto",
+    "title": "Co-Founder & Chief Marketing Officer",
+    "org": "Bidio",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Nicole Pruess",
+    "title": "Global Managing Director, Publisher Marketplace",
+    "org": "Criteo",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Mat Bennett",
+    "title": "Managing Director",
+    "org": "OKO Digital",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Tom Gabriele",
+    "title": "Co-Founder",
+    "org": "WowYow Inc.",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Dan Greenberg",
+    "title": "Founder & CEO",
+    "org": "Sharethrough",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Eric Simon",
+    "title": "COO",
+    "org": "Skydeo",
+  },
+  {
+    "group": "Creative Agents",
+    "position": "Representative",
+    "name": "Jon Lefley",
+    "title": "Creative Director",
+    "org": "Saatchi & Saatchi",
+  },
+  {
+    "group": "Creative Agents",
+    "position": "Member",
+    "name": "Tobias Eidem",
+    "title": "BrandGlobe and former chairman of Sweden’s KIA-index",
+    "org": "BrandGlobe",
+  },
+  {
+    "group": "Digital Rights Organizations",
+    "position": "Representative",
+    "name": "Holmes Wilson",
+    "title": "Co-Founder/Co-director",
+    "org": "Fight for the Future",
+  },
+  {
+    "group": "Publishers & Content Creators",
+    "position": "Representative",
+    "name": "Gavin Hall",
+    "title": "CTO",
+    "org": "TED",
+  },
+  {
+    "group": "Publishers & Content Creators",
+    "position": "Member",
+    "name": "Paul Lomax",
+    "title": "CTO",
+    "org": "Dennis Media",
+  },
+  {
+    "group": "Publishers & Content Creators",
+    "position": "Member",
+    "name": "Christian Hendricks",
+    "title": "Founder",
+    "org": "Local Media Consortium",
+  },
+  {
+    "group": "Publishers & Content Creators",
+    "position": "Member",
+    "name": "Scott Messer",
+    "title": "VP Content Channels",
+    "org": "Leaf Group",
+  },
+  {
+    "group": "Publishers & Content Creators",
+    "position": "Member",
+    "name": "Loic Dussart",
+    "title": "COO",
+    "org": "KOL",
+  },
+  {
+    "group": "Researchers & Academics",
+    "position": "Representative",
+    "name": "Fran Howarth",
+    "title": "Security Analyst",
+    "org": "Bloor Analyst Group",
+  },
+  {
+    "group": "User Agents",
+    "position": "Representative",
+    "name": "Kenny Ye (叶智聪)",
+    "title": "Director of International Business Development, Alibaba Mobile Group",
+    "org": "UC Web",
+  },
+] %}
+
+{% macro member_list(group, position) -%}
+    {% set count = [] %}
+    {% for member in members %}
+      {% if member.group == group and member.position == position %}
+        {% if (count | length) == 0 %}
+          <ul class="member-list">
+        {% endif %}
+        {% set count = count.append(None) %}
+        <li>
+          <strong>{{ member.name }}</strong><br>
+          {{ member.title }}, <em>{{ member.org }}</em>

[ire, 2017/07/06 15:41:21]

Should job titles be translated?

[juliandoucette, 2017/07/07 14:19:59]

I don't think so.

@Jeen? @Tamara?

+        </li>
+      {% endif %}
+    {% endfor %}
+    {% if (count | length) > 0 %}
+          </ul>
+    {% endif %}
+    {% if position == "Member" or (count | length) < 1 %}
+      <p><a class="btn-primary" href="committee/apply">{{ "Apply" | translate("apply-button", "button label") }}</a></p>
+    {% endif %}
+{% endmacro %}
+
+{% macro group_list(group) -%}
+  <section class="group-list">
+    <h4>{{ group | translate("group-name-heading", "heading") }}</h4>

[ire, 2017/07/06 15:41:21]

It seems like this "group-name-heading" ID will be applied to multiple different
strings

[juliandoucette, 2017/07/07 14:20:00]

Done.

Good catch.

+    <dl>
+      <dt>{{ "Representative" | translate("representative-heading", "heading") }}</dt>
+      <dd>{{ member_list(group, "Representative") }}</dd>
+    </dl>
+    <dl>
+      <dt>{{ "Members" | translate("members-heading", "heading") }}</dt>
+      <dd>{{ member_list(group, "Member") }}</dd>
+    </dl>
+  </section>
+{%- endmacro %}
+
+{% macro coalition_section(id) -%}
+  <section class="section">
+    <h3 class="h2">{{ coalitions[id].title | translate("{{ id }}-heading", "heading") }}</h3>
+    <p class="col-6">{{ coalitions[id].description | translate("{{ id }}-intro") }}</p>
+    {% for group in coalitions[id].groups %}
+      {{ group_list(group) }}
+    {% endfor %}
+  </section>
+{% endmacro %}
+
+<section class="container">
+  <div class="row">
+    <div class="col-6">
+      <h1>{{ "Members" | translate("members-heading", "heading") }}</h1>
+      <hr>
+      <p>{{ "The Acceptable Ads Committee is divided into three Coalitions, with each faction consisting of several Members. Each group includes a Representative and multiple supporting Members." | translate("members-intro-2") }}</p>

[ire, 2017/07/06 15:41:21]

Translation ID should be "members-intro-1"

[juliandoucette, 2017/07/07 14:19:59]

Done.

Good catch.

+      <p>{{ "Below is a list of all current Representatives and supporting Members, broken down by Coalition." | translate("members-intro-2") }}</p>
+    </div>
+    <aside class="col-6">
+      <img id="committee-structure" class="block" alt="{{ "Acceptable Ads Committee Structure" | translate("featured-image-alt", "Image alt text") }}" src="/img/png/blog/acceptable-ads-committee-structure.png" />
+    </aside>
+  </div>
+</section>
+
+<section>
+
+  <div class="bg-accent">
+    <h2 class="center h3 p-y-md m-a-md">{{ "Meet the Acceptable Ads Committee" | translate("committee-heading", "heading") }}</h2>
+  </div>
+
+  <div class="container">
+    {% for coalition in ["for-profit", "expert", "user-advocate"] %}
+      {{ coalition_section(coalition) }}
+    {% endfor %}
+  </div>
+
+</section>