Issue 5043 - Update member page layout

pages/committee/members.tmpl

 title=Members | The Acceptable Ads Committee

[juliandoucette, 2017/06/23 12:55:21]

Note: I had originally used a schema on this page (an organization of members)
but I decided to exclude these properties for this version in the interest of
publishing this sooner - as we have not used schemas consistently throughout
this website (and we probably should - as a separate issue).

[ire, 2017/06/25 19:31:10]

Acknowledged.

 description=A list of all Representatives and supporting Members that make up the Acceptable Ads Committee.
 parent=committee/index
 custom=1
 
 {% block head %}
   <style>

[juliandoucette, 2017/06/23 12:55:21]

Note: I would have pushed back on the custom elements of this design - but the
page was so bland without them that I thought it would be counter-productive (we
would/will have to change a lot more across the whole website to make pages with
this many heading levels look good)  - and we want to get this online ASAP.

[ire, 2017/06/25 19:31:10]

Acknowledged.

+    @media(min-width: 768px)
+    {
+      #committee-structure
+      {
+        padding-top: 25%;
+        margin: 0px 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;
+      margin: 32px 0px 26px 0px;
       color: #424242;
       text-transform: none;
     }
 
+    .group-list dd
+    {
+      margin: 0px;
+    }
+
     .member-list
     {
       display: block;
       width: 100%;
+      margin: 0px;
       overflow: auto;
     }
 
     .member-list li

[ire, 2017/06/25 19:31:10]

The list items look a bit squashed together on mobile because they lose the
`min-height: 4em` style. Could we have some spacing between each list item for
smaller screens?

[juliandoucette, 2017/06/26 14:38:36]

Done.

Good catch :)

     {
-      display: block;

[ire, 2017/06/25 19:31:10]

Since this element is floated, the `display: block` isn't making any difference

[juliandoucette, 2017/06/26 14:38:36]

Done.

Verified; I did not know this :O

       width: 100%;
       float: left;
       padding-left: 0px;
-    }
-
-    @media(min-width: 767px)

[ire, 2017/06/25 19:31:10]

The $tablet-breakpoint is 768px

[juliandoucette, 2017/06/26 14:38:37]

We usually -1 when we use max-width NOT min-width (sorry - my mistake)

[juliandoucette, 2017/06/26 14:38:37]

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;
-      content: none;

[ire, 2017/06/25 19:31:10]

Setting `content: none` doesn't seem to be doing anything additional here

[juliandoucette, 2017/06/26 14:38:36]

Done.

It was doing something - just not something you can see (I'm making excuses -
thank you for pointing this out).

     }
   </style>
 {% endblock %}
 
-{% set committee = [

[juliandoucette, 2017/06/23 12:55:21]

Note: I put this inside the template because...

1. Global python files are ascii by default (and I didn't know how to make them
utf-8 at the time - I discussed this with kvas later in #websites)
2. The committee members are not currently being used in other templates
  - They may in the future when (if) we have individual committee member pages
like we had originally planned
    - I doubt this will happen soon (if ever)

[ire, 2017/06/25 19:31:10]

Acknowledged.

+{% set coalitions = {
+  "for-profit": {
+    "title": "For-Profit Coalition",
+    "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 = [
   {

[juliandoucette, 2017/06/23 12:55:21]

Note: Please double check that I didn't miss anyone / publish someone that I
shouldn't have. I...

- Exported this as csv from a spreadsheet
- Converted that csv to json based on the heading/columns
- Ran a series manipulations based on expressions that I didn't document (e.g.
combined the name, changed the keys, removed fields that do not display, removed
candidates that are not final or announced)

[ire, 2017/06/25 19:31:09]

Done. Everything looks correct to me. 

[juliandoucette, 2017/06/26 14:38:36]

Acknowledged.

     "group": "Advertisers",
     "position": "Representative",
     "name": "Breanna Fowler",
     "title": "Strategic Partnerships & Advertising",
     "org": "Dell",
   },
   {
     "group": "Advertising Agencies",
     "position": "Representative",
     "name": "Gabriel Cheng",
@@ skipping 120 matching lines @@
     "org": "Sharethrough",
   },
   {
     "group": "Ad Tech Agencies",
     "position": "Member",
     "name": "Eric Simon",
     "title": "COO",
     "org": "Skydeo",
   },
   {
-    "group": "Creative Agent",

[ire, 2017/06/25 19:31:10]

Sometimes the group is written in plural form, e.g. "Ad Tech Agencies" and
sometimes it's singular like "Creative Agent" or "Researcher". We should stick
to one form (preferably plural)

[juliandoucette, 2017/06/26 14:38:36]

Acknowledged.

I think these names don't match the ticket. I will match them. ~Good catch.

[juliandoucette, 2017/06/26 14:38:37]

Done.

+    "group": "Creative Agents",
     "position": "Representative",
     "name": "Jon Lefley",
     "title": "Creative Director",
     "org": "Saatchi & Saatchi",
   },
   {
-    "group": "Creative Agent",
+    "group": "Creative Agents",
     "position": "Member",
     "name": "Tobias Eidem",
     "title": "BrandGlobe and former chairman of Sweden’s KIA-index",
     "org": "BrandGlobe",
   },
   {
-    "group": "Digital Rights Organization",
+    "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",
@@ skipping 21 matching lines @@
     "org": "Leaf Group",
   },
   {
     "group": "Publishers & Content Creators",
     "position": "Member",
     "name": "Loic Dussart",
     "title": "COO",
     "org": "KOL",
   },
   {
-    "group": "Researcher",
+    "group": "Researchers & Academics",
     "position": "Representative",
     "name": "Fran Howarth",
     "title": "Security Analyst",
     "org": "Bloor Analyst Group",
   },
   {
-    "group": "User Agent",
+    "group": "User Agents",
     "position": "Representative",
     "name": "Kenny Ye (叶智聪)",
     "title": "Director of International Business Development, Alibaba Mobile Group",
     "org": "UC Web",
   },
+  {
+    "group": "Users",
+    "position": "Representative",
+    "name": "Caroline Crandall",
+    "title": "Adblocking User",
+    "org": False,
+  },
+  {
+    "group": "Users",
+    "position": "Member",
+    "name": "Zack Sinclair",
+    "title": "Adblocking User",
+    "org": False,
+  },
+  {
+    "group": "Users",
+    "position": "Member",
+    "name": "Leli Schiestl",
+    "title": "Adblocking User",
+    "org": False,
+  },
+  {
+    "group": "Digital Rights Organizations",
+    "position": "Representative",
+    "name": "Paul-Olivier Dehaye",
+    "title": "Co-Founder",
+    "org": "PersonalData.IO",
+  },
+  {
+    "group": "Ad Tech Agencies",
+    "position": "Member",
+    "name": "Michael Blend",
+    "title": "Co-founder and President",
+    "org": "System1",
+  },
+  {
+    "group": "Advertisers",
+    "position": "Member",
+    "name": "Thomas Wrobel",
+    "title": False,
+    "org": "Trivago",
+  },
+  {
+    "group": "Researchers & Academics",
+    "position": "Member",
+    "name": "Zubair Shafiq",
+    "title": "Assistant Professor",
+    "org": "Department of Computer Science, The University of Iowa, USA",
+  },
 ] %}
 
 {% macro member_list(group, position) -%}
-  <ul class="member-list">
-    {% for member in committee %}

[ire, 2017/06/25 19:31:09]

Should we have some fallback message for if there are no members? Currently I
think it looks a bit weird when there is just nothing there. Particularly for
the "Users" section, where there is no Representative either. 

[juliandoucette, 2017/06/26 14:38:36]

Done.

-      {% if member.group == group and member.position == position %}
-        <li>
-          <strong>{{ member.name }}</strong><br>
-          {{ member.title }}, <em>{{ member.org }}</em>
-        </li>
+  {% set count = [] %}
+  {% for member in members %}
+    {% if member.group == group and member.position == position %}
+      {% if (count | length) == 0 %}
+        <ul class="member-list">
       {% endif %}
-    {% endfor %}
-  </ul>
-  {% if position == "Member" %}
+      {% set _ = count.append(1) %}
+      {% if member.title and member.org %}
+        {% set separator = "," %}
+      {% else %}
+        {% set separator = "" %}
+      {% endif %}
+      <li>
+        <strong>{{ member.name }}</strong><br>
+        {% if member.title %}{{ member.title }}{% endif %}{{ separator }}
+        {% if member.org %}<em>{{ member.org }}</em> {% endif %}
+      </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) -%}
+{% macro group_list(id, group) -%}
   <section class="group-list">
-    <h4>{{ group | translate("group-name-heading", "heading") }}</h4>
+    <h4>{{ group | translate(id + "-heading", "heading") }}</h4>
     <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(id, group) }}
+    {% endfor %}
+  </section>
+{% endmacro %}
+
 <section class="container">
-  <div class="row">
+  <div class="row section">
     <div class="col-6">

[juliandoucette, 2017/06/23 12:55:21]

Note: I could have used a col-7, col-5 split for better image dimensions (like I
mentioned in the ticket), but col-7/col-5 collapses sooner than col-6/col-6 and
I didn't want that (or to change how columns work). 

[ire, 2017/06/25 19:31:10]

Acknowledged.

       <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>
+      <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-1") }}</p>
       <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 class="block" alt="{{ "Acceptable Ads Committee Structure" | translate("featured-image-alt", "Image alt text") }}" src="https://acceptableads.com/img/png/blog/acceptable-ads-committee-structure.png" />

[juliandoucette, 2017/06/23 12:55:21]

NIT: I didn't need to add the protocol and domain here.

[ire, 2017/06/25 19:31:10]

Was about to say :p

[juliandoucette, 2017/06/26 14:38:37]

Done.

+      <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">
-    <h3 class="center p-y-md m-a-md">{{ "Meet the Acceptable Ads Committee" | translate("committee-heading", "heading") }}</h3>

[juliandoucette, 2017/06/23 12:55:22]

NIT: I don't like the p- m- classes here - but I didn't come up with a better
solution that is consistent with the rest of the site. Any ideas?

[ire, 2017/06/25 19:31:09]

I see what you mean but I don't think they are actually a problem here. The
spacing on this element seems alright to me. I think it's the spacing on the
nearby elements that look too big on mobile, e.g. the .section and h2, and if I
remember correctly they will be fixed by #5135

[ire, 2017/06/25 19:31:09]

It seems like this should be an <h2> and the other headings below, e.g.
"For-Profit Coalition", should be an <h3>?

[juliandoucette, 2017/06/26 14:38:36]

Yes. Unfortunately the semantically correct header levels do not match the
intended style.

Done.

+    <h2 class="center h3 p-y-md m-a-md">{{ "Meet the Acceptable Ads Committee" | translate("committee-heading", "heading") }}</h2>
   </div>
 
   <div class="container">
-    <section class="section">
-      <h2>{{ "For-Profit Coalition" | translate("for-profit-heading", "heading") }}</h2>

[juliandoucette, 2017/06/23 12:55:21]

Note: I could also put this header, paragraph, set of lists into a macro. 

[ire, 2017/06/25 19:31:10]

Yes I think you should. 

[juliandoucette, 2017/06/26 14:38:37]

Done.

-      <p class="col-6">{{ "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." | translate("for-profit-intro") }}</p>

[ire, 2017/06/25 19:31:09]

Why does only this paragraph have a `.col-6`?

[juliandoucette, 2017/06/26 14:38:36]

They should all be. The design specifies 1/2 width.

-      {{ group_list("Advertisers") }}
-      {{ group_list("Ad Tech Agencies") }}
-      {{ group_list("Advertising Agencies") }}
-      {{ group_list("Publishers & Content Creators") }}
-    </section>
-    <section class="section">
-      <h2>{{ "Expert Coalition" | translate("expert-coalition", "heading") }}</h2>
-      <p>{{ "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." | translate("expert-coalition-intro") }}</p>
-      {{ group_list("Creative Agent") }}
-      {{ group_list("Researcher") }}
-      {{ group_list("User Agent") }}
-    </section>
-    <section class="section">
-      <h2>{{ "User ADvocate Coalition" | translate("user-advocate-coalition", "heading") }}</h2>

[ire, 2017/06/25 19:31:09]

NIT: "Advocate", not "ADvocate"

[juliandoucette, 2017/06/26 14:38:36]

Done.

[juliandoucette, 2017/06/26 14:38:37]

Not a NIT :D - Good catch.

-      <p>{{ "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." | translate("user-advocate-coalition-intro") }}</p>
-      {{ group_list("Digital Rights Organization") }}
-      {{ group_list("Users") }}
-    </section>
+    {% for coalition in ["for-profit", "expert", "user-advocate"] %}
+      {{ coalition_section(coalition) }}
+    {% endfor %}
   </div>
 
 </section>