Minor improvements to about page

Use toggling text on specialization block;
Use card-deck to get proper alphabetic ordering;
Add supporting text to spec. block.

scipost/static/scipost/about.js

@@ -5,6 +5,9 @@ $(function() {
         var el = $($(this).attr('data-target'));
         el.toggle();
 
+        // Switch texts of link
+        $('[href="' + $(this).attr('href') + '"]').toggle();
+
         // Reset active search after closing the box
         if(!el.is(':visible')) {
             $('.all-specializations .specialization')
@@ -33,7 +36,7 @@ $(function() {
     .on('search-specialization', function() {
         // Reset: searching multiple specializations is not supported
         $('.search-contributors.active-search').removeClass('active-search');
-        $('.contributor-col.active').removeClass('active');
+        $('.contributor.active').removeClass('active');
         $('.specialization.active-search').not(this).removeClass('active-search');
 
         var el = $(this);
@@ -44,7 +47,7 @@ $(function() {
             // Add class to specialized Contributors
             var code = el.attr('data-specialization');
             $('.single[data-specialization="' + code + '"]')
-            .parents('.contributor-col')
+            .parents('.contributor')
             .addClass('active');
         }
     });

scipost/static/scipost/assets/css/_about.scss

-.search-contributors.active-search .contributor-col {
+.search-contributors.active-search .contributor {
     display: none;
 
     &.active {
-        display: block;
+        display: inline-block;
     }
 }
 
 .contributor {
-    margin: 0.25rem 0;
-    padding: 0.05rem 0.75rem;
-    border-radius: 0.15rem;
     -webkit-transition: all 0.05s ease-in-out;
          -o-transition: all 0.05s ease-in-out;
             transition: all 0.05s ease-in-out;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    border: 0;
 
     &.hover-active {
         background-color: rgba(104, 132, 194, 0.3);

scipost/templates/scipost/about.html

@@ -160,9 +160,13 @@
 {% if codes %}
 <div class="row">
     <div class="col-12">
-        <a href="#editorial_college_{{ college|lower }}" class="d-block mb-1" data-toggle="toggle-show" data-target="#specializations-{{college|lower}}">Show Fellows by specialization</a>
-        <div id="specializations-{{college|lower}}" class="all-specializations" style="border: 1px solid; display: none;">
+        <a href="#editorial_college_{{ college|lower }}" data-toggle="toggle-show" data-target="#specializations-{{college|lower}}">Show Fellows by specialization</a>
+        <a href="#editorial_college_{{ college|lower }}" style="display: none;" data-toggle="toggle-show" data-target="#specializations-{{college|lower}}">Show full list of Fellows</a>
+        <div id="specializations-{{college|lower}}" class="all-specializations mt-2" style="border: 1px solid; display: none;">
             <div class="row">
+                <div class="col-12">
+                    <p class="text-muted">Hover to highlight or click to select</p>
+                </div>
                 <div class="col-md-6">
                     {% with total_count=codes|length %}
                         {% for code in codes %}
@@ -181,20 +185,14 @@
 {% endif %}
 
 <div class="row search-contributors" data-contributors="{{ college|lower }}">
-    <div class="col-md-4">
-        {% with total_count=college.current_fellows|length %}
+    <div class="col-12">
+        <div class="card-columns">
             {% for fellowship in college.current_fellows %}
-                <div class="col-12 contributor-col">
-                    <div class="contributor">
-                        {% include 'scipost/_contributor_short.html' with contributor=fellowship.contributor %}
-                    </div>
+                <div class="card contributor">
+                    {% include 'scipost/_contributor_short.html' with contributor=fellowship.contributor %}
                 </div>
-                {% if forloop.counter|is_modulo_one_third:total_count %}
-                    </div>
-                    <div class="col-md-4">
-                {% endif %}
             {% endfor %}
-        {% endwith %}
+        </div>
     </div>
 </div>