Add tooltip with AD name over AD-indicating colour square on WG list page. Tweak the style a bit.

 - Legacy-Id: 3669

Author: levkowetz

ietf/templates/wginfo/wg-dir.html

@@ -56,11 +56,11 @@ <h2 class="ietf-divider" id="{{area.area_acronym.name|cut:" "}}">{{ area.area_ac
    {% for ad in area.areadirector_set.all|dictsort:"person.last_name" %}
    {% if forloop.first %}
    <p>Area Director{{ forloop.revcounter|pluralize }}:</p>
-   <p style="margin-left: 2em">
+   <table style="margin-left: 2em" class="ietf-wg-table">
       {% endif %}
-      <span class="square bgcolor{{forloop.counter}}">&nbsp;</span>&nbsp;<a href="mailto:{{ ad.person.email.1 }}">{{ ad.person }} &lt;{{ ad.person.email.1 }}&gt;</a>{% if not forloop.last %}<br/>{% endif %}
+      <tr><td><span class="square bgcolor{{forloop.counter}}">&nbsp;</span></td> <td><a href="mailto:{{ ad.person.email.1 }}">{{ ad.person }} &lt;{{ ad.person.email.1 }}&gt;</a></td></tr>
       {% if forloop.last %}
-   </p>
+   </table>
    {% endif %}
    {% endfor %}
 
@@ -83,7 +83,7 @@ <h2 class="ietf-divider" id="{{area.area_acronym.name|cut:" "}}">{{ area.area_ac
 	 {% endif %}
 	 <tr>
 	    <td width="10%;"><a href="/wg/{{wg}}/">{{ wg }}</a></td>
-	    <td width="1%">{% for ad in area.areadirector_set.all|dictsort:"person.last_name" %}{% ifequal ad wg.area_director %}<span class="square bgcolor{{forloop.counter}}">&nbsp;</span>{% endifequal %}{% endfor %}</td>
+	    <td width="1%">{% for ad in area.areadirector_set.all|dictsort:"person.last_name" %}{% ifequal ad wg.area_director %}<span title="AD for {{wg}}: {{ad.person}}" class="square bgcolor{{forloop.counter}}"></span>{% endifequal %}{% endfor %}</td>
 	    <td width="50%">{{ wg.group_acronym.name }}</td>
 	    <td width="39%">{% for chair in wg.chairs %}<a href="mailto:{{chair.person.email.1}}">{{chair.person}}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</td>
 	 </tr>

static/css/base2.css

@@ -164,7 +164,7 @@ form table .help {
 .color2 { color: #00ffff; }
 .bgcolor1 { background-color: #ffb000; }
 .bgcolor2 { background-color: #00ffff; }
-.square { width: 0.8ex; height: 0.8ex; margin: 0; padding: 0; display: inline-block; position: relative; top: 0.8ex }
+.square { width: 0.8ex; height: 0.8ex; margin: 0; padding: 0; display: inline-block; position: relative; top: 0.8ex; text-align: top;}
 .big	{ font-size: 109.5%; margin: 0; padding: 0; }
 .large  { font-size: 120%; margin: 0; padding: 0; }
 .huge	{ font-size: 144%; margin: 0; padding: 0; }