diff --git a/scipost/static/scipost/about.js b/scipost/static/scipost/about.js index 748aaa14a672c770beaba534a7f9d1306956bd8c..fb7e771813f7dec0608ee8e38ac504302061530b 100644 --- a/scipost/static/scipost/about.js +++ b/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'); } }); diff --git a/scipost/static/scipost/assets/css/_about.scss b/scipost/static/scipost/assets/css/_about.scss index c7c0b58d2f159bb6de4ea6e180f7aaf6a8598f86..0ed307a0191279d4e1ddaecb3551976a3cac4d0a 100644 --- a/scipost/static/scipost/assets/css/_about.scss +++ b/scipost/static/scipost/assets/css/_about.scss @@ -1,18 +1,18 @@ -.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); diff --git a/scipost/templates/scipost/about.html b/scipost/templates/scipost/about.html index 8e07db406525d38e4651e5be7d280390c3bcdbe4..e490c9160e49d1915a3bf99ea92f2f44c9cb5a46 100644 --- a/scipost/templates/scipost/about.html +++ b/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>