diff --git a/.gitignore b/.gitignore index e4c9f3351f..79ebd73739 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,8 @@ utilities/sdb_to_tdb/.work **/overlays *~ +**/.DS_Store + # Eclipse artifacts **/.settings **/.classpath diff --git a/webapp/pom.xml b/webapp/pom.xml index 1c4746eae2..9fdec17f56 100644 --- a/webapp/pom.xml +++ b/webapp/pom.xml @@ -133,6 +133,26 @@ target/${project.artifactId}-${project.version}/webjars/fonts/open-sans/ + + org.webjars + bootstrap + jar + + META-INF/resources/webjars/bootstrap/*/css/*.css, + META-INF/resources/webjars/bootstrap/*/css/*.map, + META-INF/resources/webjars/bootstrap/*/js/*.js, + META-INF/resources/webjars/bootstrap/*/js/*.map + + + + + ^META-INF/resources/webjars/bootstrap/[^/]+/ + ./ + + + + target/${project.artifactId}-${project.version}/webjars/bootstrap/ + true true @@ -157,6 +177,11 @@ + + org.webjars + bootstrap + 5.3.3 + org.webjars.npm jquery-migrate diff --git a/webapp/src/main/webapp/css/individual/individual-property-groups.css b/webapp/src/main/webapp/css/individual/individual-property-groups.css index cc4b7cf1b2..cd9444d16c 100644 --- a/webapp/src/main/webapp/css/individual/individual-property-groups.css +++ b/webapp/src/main/webapp/css/individual/individual-property-groups.css @@ -5,6 +5,11 @@ span#toggleContainer { padding:10px 8px 0 0; font-size: 0.85em; } + +.property-tabs { + min-height: 500px; +} + section.property-group { padding-top: 15px; border-top:none; @@ -39,10 +44,11 @@ ul.propertyTabsList li { ul.propertyTabsList li:first-child { width: 7px; } -li.nonSelectedGroupTab { +li.nav-link { float:left; border: 1px solid #DFE6E5; background-color:#E4ECF3; + color: #5e6363; padding: 6px 8px 6px 8px; cursor:pointer; border-top-right-radius: 4px; @@ -52,11 +58,18 @@ li.nonSelectedGroupTab { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } -li.selectedGroupTab { + +li.nav-link:hover { + color: #5e6363; + background-color:#E4ECF3; +} + +li.nav-link.active { float:left; border: 1px solid #DFE6E5; border-bottom-color:#fff; background-color:#FFF; + color: #5e6363; padding: 6px 8px 6px 8px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px; diff --git a/webapp/src/main/webapp/css/search-results.css b/webapp/src/main/webapp/css/search-results.css index 235955e29a..1d641c246e 100644 --- a/webapp/src/main/webapp/css/search-results.css +++ b/webapp/src/main/webapp/css/search-results.css @@ -188,12 +188,13 @@ a.hidden-search-option { border-left: 0px !important; } -.filter-tab.active > a { +.filter-tab > a.active { background: linear-gradient(white 10%, #F1F1F1); border-bottom-color: #ddd !important; } .filter-tab > a { + color: #595b5b; border-right: 0px !important; border-top: 0px !important; border-left: 0px !important; diff --git a/webapp/src/main/webapp/js/individual/propertyGroupControls.js b/webapp/src/main/webapp/js/individual/propertyGroupControls.js index d9636abb62..fd8f63c13d 100644 --- a/webapp/src/main/webapp/js/individual/propertyGroupControls.js +++ b/webapp/src/main/webapp/js/individual/propertyGroupControls.js @@ -4,61 +4,38 @@ $(document).ready(function(){ $.extend(this, individualLocalName); adjustFontSize(); - padSectionBottoms(); checkLocationHash(); + + // controls the property group tabs + let showAllBtn = $('#show-all-tabs')[0]; + let tabList = $('ul.propertyTabsList')[0]; - // ensures that shorter property group sections don't cause the page to "jump around" - // when the tabs are clicked - function padSectionBottoms() { - $.each($('section.property-group'), function() { - var sectionHeight = $(this).height(); - if ( sectionHeight < 1000 ) { - $(this).css('margin-bottom', 1000-sectionHeight + "px"); - } - }); - } + showAllBtn.addEventListener('show.bs.tab', function (event) { + event.preventDefault() + showAllTabs(); + manageLocalStorage(); + }) - // controls the property group tabs - $.each($('li.clickable'), function() { - var groupName = $(this).attr("groupName"); - var $propertyGroupLi = $(this); - - $(this).click(function() { - - if ( $propertyGroupLi.attr("class") == "nonSelectedGroupTab clickable" ) { - $.each($('li.selectedGroupTab'), function() { - $(this).removeClass("selectedGroupTab clickable"); - $(this).addClass("nonSelectedGroupTab clickable"); - }); - $propertyGroupLi.removeClass("nonSelectedGroupTab clickable"); - $propertyGroupLi.addClass("selectedGroupTab clickable"); - } - if ( $propertyGroupLi.attr("groupname") == "viewAll" ) { - processViewAllTab(); - } - else { - padSectionBottoms(); - var $visibleSection = $('section.property-group:visible'); - $visibleSection.hide(); - $('h2[pgroup=tabs]').addClass("hidden"); - $('nav#scroller').addClass("hidden"); - $('section#' + groupName).show(); - } - manageLocalStorage(); - return false; - }); - }); - - function processViewAllTab() { - $.each($('section.property-group'), function() { - $(this).css("margin-bottom", "1px"); - $(this).children('h2').css("margin-top", "-15px").css("border-bottom","1px solid #DFEBE5").css("padding","12px 25px 10px 20px"); - $(this).show(); - $('h2[pgroup=tabs]').removeClass("hidden"); - $('nav#scroller').removeClass("hidden"); + showAllBtn.addEventListener('hide.bs.tab', function (event) { + $(".tab-content>section.tab-pane").removeClass('show active') + }) + + tabList.addEventListener('shown.bs.tab', function (event) { + manageLocalStorage(); + }) + + + function showAllTabs() { + $('.propertyTabsList.nav.nav-tabs > li').each(function() { + $(this).attr("aria-selected", "false"); + $(this).removeClass("active"); }); + + $('#show-all-tabs').addClass("active").attr("aria-selected", "true"); + $(".tab-content>section.tab-pane").addClass('active show') } + // If users click a marker on the home page map, they are taken to the profile // page of the corresponding country. The url contains the word "Research" in // the location hash. Use this to select the Research tab, which displays the @@ -74,17 +51,12 @@ $(document).ready(function(){ tabNameCapped = tabName.charAt(0).toUpperCase() + tabName.slice(1); // if the name of the first tab section = tabName we don't have to do anything; // otherwise, select the correct tab and deselect the first one - var $firstTab = $('li.clickable').first(); + var $firstTab = $('li.nav-link').first(); if ( $firstTab.text() != tabNameCapped ) { // select the correct tab - $('li[groupName="' + tabName + '"]').removeClass("nonSelectedGroupTab clickable"); - $('li[groupName="' + tabName + '"]').addClass("selectedGroupTab clickable"); - // deselect the first tab - $firstTab.removeClass("selectedGroupTab clickable"); - $firstTab.addClass("nonSelectedGroupTab clickable"); - $('section.property-group:visible').hide(); - // show the selected tab section - $('section#' + tabName).show(); + let tabSelect = $('li[groupName="' + tabName + '"]'); + let tab = new bootstrap.Tab(tabSelect); + tab.show() } // if there is a more link, "click" more to show all the researchers // we need the timeout delay so that the more link can get rendered @@ -142,14 +114,13 @@ $(document).ready(function(){ } } var selectedTab = []; - selectedTab.push($('li.selectedGroupTab').attr('groupName')); + selectedTab.push($('li.nav-link.active').attr('groupName')); amplify.store(localName, selectedTab); var checkLength = amplify.store(localName); if ( checkLength.length == 0 ) { amplify.store(localName, null); } } - function retrieveLocalStorage() { var localName = this.individualLocalName; @@ -163,27 +134,22 @@ $(document).ready(function(){ // So ensure that the tab in local storage has been rendered on the page. if ( $("ul.propertyTabsList li[groupName='" + groupName + "']").length ) { // if the selected tab is the default first one, don't do anything - if ( $('li.clickable').first().attr("groupName") != groupName ) { + if ( $('li.nav-link').first().attr("groupName") != groupName ) { // deselect the default first tab - var $firstTab = $('li.clickable').first(); - $firstTab.removeClass("selectedGroupTab clickable"); - $firstTab.addClass("nonSelectedGroupTab clickable"); - // select the stored tab - $("li[groupName='" + groupName + "']").removeClass("nonSelectedGroupTab clickable"); - $("li[groupName='" + groupName + "']").addClass("selectedGroupTab clickable"); - // hide the first tab section - $('section.property-group:visible').hide(); if ( groupName == "viewAll" ) { - processViewAllTab(); - } + showAllTabs(); + } else { - // show the selected tab section - $('section#' + groupName).show(); + let tabSelect = $('li[groupName="' + groupName + '"]'); + let tab = new bootstrap.Tab(tabSelect); + tab.show(); + } } } } } + // if there are so many tabs that they wrap to a second line, adjust the font size to //prevent wrapping function adjustFontSize() { diff --git a/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-property-group-tabs.ftl b/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-property-group-tabs.ftl index c5b2d7d2ef..559591bea2 100644 --- a/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-property-group-tabs.ftl +++ b/webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-property-group-tabs.ftl @@ -7,8 +7,9 @@ <#assign tabCount = 1 > <#assign sectionCount = 1 > -