Improve presentation of voting results

colleges/templates/colleges/_potentialfellowship_card.html

 {% load bootstrap %}
 
+{% load scipost_extras %}
+
 <div class="card-body">
   <div class="row">
     <div class="col-12">
@@ -24,7 +26,7 @@
   </div>
 
   {% if perms.scipost.can_manage_college_composition %}
-  <h3>Admin actions</h3>
+  <h3 class="highlight">Admin actions</h3>
   <div class="row">
     <div class="col-md-6">
       <ul>
@@ -48,45 +50,75 @@
   {% if perms.scipost.can_manage_college_composition %}
   <div class="row">
     <div class="col-12">
-      <h3>Voting results</h3>
+      <h3 class="highlight">Voting results</h3>
+      <p>
+	Voting Fellows' matching expertises are marked in <span class="bg-success">green</span>.
+      </p>
     </div>
   </div>
   <div class="row">
-    <div class="col-1"></div>
-    <div class="col-3">
-      <h4>Agreed:</h4>
-      <ul>
+    <div class="col-4">
+      <table class="table">
+	<tr><th>Agreed</th></tr>
 	{% for fellow in potfel.in_agreement.all %}
-	<li>{{ fellow }}</li>
+	<tr>
+	  <td>{{ fellow }}</td>
+	  <td>{% for expertise in fellow.profile.expertises %}
+            <div class="single d-inline{% if expertise in potfel.profile.expertises %} bg-success{% endif %}" data-specialization="{{expertise|lower}}" data-toggle="tooltip" data-placement="bottom" title="{{expertise|get_specialization_display}}">{{expertise|get_specialization_code}}</div>
+	    {% endfor %}
+	  </td>
+	</tr>
 	{% empty %}
-	<li>No Fellow has agreed</li>
+	<tr><td>No Fellow has agreed</td></tr>
 	{% endfor %}
-      </ul>
+      </table>
     </div>
-    <div class="col-3">
-      <h4>Abstained:</h4>
-      <ul>
+    <div class="col-4">
+      <table class="table">
+	<tr><th>Abstained</th></tr>
 	{% for fellow in potfel.in_abstain.all %}
-	<li>{{ fellow }}</li>
+	<tr>
+	  <td>{{ fellow }}</td>
+	  <td>{% for expertise in fellow.profile.expertises %}
+            <div class="single d-inline{% if expertise in potfel.profile.expertises %} bg-success{% endif %}" data-specialization="{{expertise|lower}}" data-toggle="tooltip" data-placement="bottom" title="{{expertise|get_specialization_display}}">{{expertise|get_specialization_code}}</div>
+	    {% endfor %}
+	  </td>
+	</tr>
 	{% empty %}
-	<li>No Fellow has abstained</li>
+	<tr><td>No Fellow has abstained</td></tr>
 	{% endfor %}
-      </ul>
+      </table>
     </div>
-    <div class="col-3">
-      <h4>Agreed:</h4>
-      <ul>
+    <div class="col-4">
+      <table class="table">
+	<tr><th>Disagreed</th></tr>
 	{% for fellow in potfel.in_disagreement.all %}
-	<li>{{ fellow }}</li>
+	<tr>
+	  <td>{{ fellow }}</td>
+	  <td>{% for expertise in fellow.profile.expertises %}
+            <div class="single d-inline{% if expertise in potfel.profile.expertises %} bg-success{% endif %}" data-specialization="{{expertise|lower}}" data-toggle="tooltip" data-placement="bottom" title="{{expertise|get_specialization_display}}">{{expertise|get_specialization_code}}</div>
+	    {% endfor %}
+	  </td>
+	</tr>
 	{% empty %}
-	<li>No Fellow has disagreed</li>
+	<tr><td>No Fellow has disagreed</td></tr>
 	{% endfor %}
-      </ul>
+      </table>
     </div>
   </div>
   {% endif %}
 
+  <h3 class="highlight">Events</h3>
   <div class="row">
+    <div class="col-md-6">
+      <ul>
+	{% for event in potfel.potentialfellowshipevent_set.all %}
+	{% include 'colleges/_potentialfellowship_event_li.html' with event=event %}
+	{% empty %}
+	<li>No events found.</li>
+	{% endfor %}
+      </ul>
+    </div>
     {% if perms.scipost.can_manage_college_composition %}
     <div class="col-md-6">
       <h3>Add an event for this Potential Fellowship</h3>
@@ -97,15 +129,5 @@
       </form>
     </div>
     {% endif %}
-    <div class="col-md-6">
-      <h3>Events</h3>
-      <ul>
-	{% for event in potfel.potentialfellowshipevent_set.all %}
-	{% include 'colleges/_potentialfellowship_event_li.html' with event=event %}
-	{% empty %}
-	<li>No events found.</li>
-	{% endfor %}
-      </ul>
-    </div>
   </div>
 </div>