Changed the IESG photo page to show full area name instead of area acronym in each box heading. Linked the area name to the area page. Removed the area acronym under each picture. Tweaked the vertical alignment of photo wells. Fixes an issue raised by housley@vigilsec.com

 - Legacy-Id: 11390

Author: levkowetz

ietf/static/ietf/css/ietf.css

@@ -464,9 +464,14 @@ label#list-feeds {
   height: 3em;
 }
 
+ul.list-inline li {
+	vertical-align: bottom;
+}
+
 .bio-text {
 	max-width: 85ex;
 }
+
 .bio-photo {
 	float: left;
 	margin: 0.3em 1em 0.5em 0.1em;

ietf/templates/iesg/photos.html

@@ -30,7 +30,11 @@ <h1>{{ group_type | upper }} {{ role }} Photos</h1>
       {% for letter in alphabet_blocks %}
        <div class="row anchor-target" id="{{letter.grouper}}">
 	<div class="panel panel-default">
-	  <div class="panel-heading">{{letter.grouper}}</div>
+	  <div class="panel-heading">
+	     <a href="{% url 'ietf.group.views.group_home' acronym=letter.grouper %}">
+		{{letter.list.0.group.name}}
+	     </a>
+	  </div>
 	  <div class="panel-body">
 	    <ul class="list-inline">
 	    {% regroup letter.list by person as person_groups %}
@@ -45,14 +49,9 @@ <h1>{{ group_type | upper }} {{ role }} Photos</h1>
 		     <img width=100 src="{{ MEDIA_URL }}photo/nopictureavailable.jpg" alt="No photo available"/>
 	       {% endif %}
 	       </div>
-	       <div class="photo-name">
+	       <div class="photo-name" style="height: 60px;">
 		  <strong>{{person_with_groups.grouper.plain_name}}</strong>
 	       </div>
-	       <div class="photo-role-list">
-	       {% for role in person_with_groups.list %}   
-		  <a href="{% url 'ietf.group.views.group_home' acronym=role.group.acronym %}">{{role.group.acronym}}</a>
-	       {% endfor %}
-	       </div>
 	     </div>
 	     {% if person_with_groups.grouper.photo %}</a>{% endif %}
 	     </li>