From 7c4765efa43b2945a6af07c85f7570442bce36ee Mon Sep 17 00:00:00 2001
From: Jorran de Wit <jorrandewit@outlook.com>
Date: Tue, 11 Apr 2017 21:23:03 +0200
Subject: [PATCH] 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 | 7 ++++--
scipost/static/scipost/assets/css/_about.scss | 10 ++++----
scipost/templates/scipost/about.html | 24 +++++++++----------
3 files changed, 21 insertions(+), 20 deletions(-)
diff --git a/scipost/static/scipost/about.js b/scipost/static/scipost/about.js
index 748aaa14a..fb7e77181 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 c7c0b58d2..0ed307a01 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 8e07db406..e490c9160 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>
--
GitLab