Issue 5043 - Update member page layout

pages/committee/members.tmpl

 title=Members | The Acceptable Ads Committee
 description=A list of all Representatives and supporting Members that make up the Acceptable Ads Committee.
 parent=committee/index
 custom=1
 
 {% block head %}
   <style>
     @media(min-width: 768px)
     {
       #committee-structure
       {
         padding-top: 25%;
-        margin: 0 auto;
+        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 26px 0;
+      margin: 32px 0px 26px 0px;
       color: #424242;
       text-transform: none;
     }
 
     .group-list dd
     {
-      margin: 0;
+      margin: 0px;
     }
 
     .member-list
     {
       display: block;
       width: 100%;
-      margin: 0;
+      margin: 0px;
       overflow: auto;
     }
 
     .member-list li
     {
       width: 100%;
       float: left;
       padding-left: 0px;
       margin-bottom: 1em;
     }
@@ skipping 17 matching lines @@
 
     .member-list li:before
     {
       display: none;
     }
   </style>
 {% endblock %}
 
 {% set coalitions = {
   "for-profit": {
-    "title": "FOR-PROFIT COALITION",
+    "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",
+    "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",
+    "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 = [
   {
@@ skipping 280 matching lines @@
   {% 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/17 07:27:49]

This is back to not using an ID

[juliandoucette, 2017/07/17 10:37:39]

Done.

     <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 section">
     <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/17 07:27:49]

This should be members-intro-1

[juliandoucette, 2017/07/17 10:37:40]

Done.

       <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>