Cherry-pick

Added Bootstrap and updated CSS for Wilma theme to make it responsive (vivo-project#3909)

* Added bootstrap and updated CSS for Wilma theme to make it responsive

* Fixed View All position

* Fixed footer

* Added responsiveness to Page managment table

* Fixed CapabilityMap responsive

* modified Photo Cropping page and minor fixes

* Removed unused libraries

* Fixed horizonal scroll in the site admin pages

* Minor fix in Capability map page

* fix: Fixed serach bar button moving out of place

* fix: Co-author Network graph size on mobile phone

* Fixed tenderfoot bootstrap in search page

* Updated bootstrap location and refactored propert group tabs

* Reimplemented tab state persistence after refresh feature

webapp/src/main/webapp/js/individual/propertyGroupControls.js

@@ -4,54 +4,39 @@ $(document).ready(function(){
 
     $.extend(this, individualLocalName);
     adjustFontSize();
-    padSectionBottoms();
     checkLocationHash();
 
     // prevents the page jumping down when loading a page with a requested tab in the url
     removeHash();
 
-    // 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");
-            }
-        });
-    }
-
     // controls the property group tabs
-    $.each($('li.clickable'), function() {
-        var groupName = $(this).attr("groupName");
-        var $propertyGroupLi = $(this);
+    let showAllBtn = $('#show-all-tabs')[0];
+    let tabList = $('ul.propertyTabsList')[0];
 
-        $(this).click(function() {
+    showAllBtn.addEventListener('show.bs.tab', function (event) {
+        event.preventDefault()
+        showAllTabs();
+        manageLocalStorage();
+    })
 
-            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();
-            }
+    showAllBtn.addEventListener('hide.bs.tab', function (event) {
+        $(".tab-content>section.tab-pane").removeClass('show active')
+    })
+
+    tabList.addEventListener('shown.bs.tab', function (event) {
+        manageLocalStorage();
+    })
 
-            manageLocalStorage();
-            return false;
+
+    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')    
+    }
 
 
     function removeHash () {
@@ -73,22 +58,13 @@ $(document).ready(function(){
         }
     }
 
-    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");
-        });
-    }
 
     // If a page is requested with a hash this script will try to open a property
     // group tab matching that hash value.
     // The geographic focus map links to a county's page with a #map hash. This will
     // select the research tab and expand the 'geographic focus of' property list.
     function checkLocationHash() {
-        var currentTab = $('li.selectedGroupTab').attr('groupName')
+        var currentTab = $('li.nav-link').attr('groupName')
 
         if ( location.hash ) {
             // remove the trailing white space
@@ -108,55 +84,23 @@ $(document).ready(function(){
 
             if ( tabName ) {
                 if ( tabName != currentTab ) {
-                    swapTabs(tabName, currentTab)
+                    let tabSelect = $('li[groupName="' + tabName + '"]');
+                    let tab = new bootstrap.Tab(tabSelect);
+                    tab.show()
                 }
             }
 
             // the requested tab was gibberish, try the local storage
             else {
-                retrieveLocalStorage(currentTab);
+                retrieveLocalStorage();
             }
         }
 
         else {
-            retrieveLocalStorage(currentTab);
+            retrieveLocalStorage();
         }
     }
 
-    function swapTabs(tabName, currentTab) {
-        $('li[groupName="' + tabName + '"]').removeClass("nonSelectedGroupTab clickable");
-        $('li[groupName="' + tabName + '"]').addClass("selectedGroupTab clickable");
-        // deselect the first tab
-        $('li[groupName="' + currentTab + '"]').removeClass("selectedGroupTab clickable");
-        $('li[groupName="' + currentTab + '"]').addClass("nonSelectedGroupTab clickable");
-
-        if ( tabName == 'viewAll'){
-            processViewAllTab();
-        }
-
-        else {
-            padSectionBottoms();
-            $('section.property-group:visible').hide();
-            // show the selected tab section
-            $('section#' + tabName).show();
-        }
-
-    }
-
-    function geoFocusExpand() {
-        // if the ontology is set to collate by subclass, $list.length will be > 0
-        // this ensures both possibilities are covered
-        var $list = $('ul#geographicFocusOfList').find('ul');
-        if ( $list.length > 0 )
-        {
-            var $more = $list.find('a.more-less');
-            $more.click();
-        }
-        else {
-            var $more = $('ul#geographicFocusOfList').find('a.more-less');
-            $more.click();
-        }
-    }
 
     //  Next two functions --  keep track of which property group tab was selected,
     //  so if we return from a custom form or a related individual, even via the back button,
@@ -186,15 +130,15 @@ $(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(currentTab) {
+    function retrieveLocalStorage() {
 
         var localName = this.individualLocalName;
         var selectedTab = amplify.store(individualLocalName);
@@ -209,28 +153,23 @@ $(document).ready(function(){
                 // if the selected tab is the default first one, don't do anything
                 if ( $('li.clickable').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();
-                    }
+                        console.log("View all")
+                        showAllTabs();
+                    } else {
 
-                    // show the selected tab section
-                    $('section#' + groupName).show();
+                        let tabSelect = $('li[groupName="' + groupName + '"]');
+                        let tab = new bootstrap.Tab(tabSelect);
+                        tab.show();
+                    }
                 }
             }
         }
         // If you wish to default to the "all" tab for small profiles, uncomment the following lines
 //      -- Start view all mod
 //        else if ( $('article.property').length < 10 ) {
-//            swapTabs('viewAll', currentTab)
+//            showAllTabs();
 //        }
 //      -- End view all mod
     }

webapp/src/main/webapp/themes/nemo/templates/head.ftl

@@ -20,6 +20,8 @@
     </#if>	
 </#if>	
 
+<script src="${urls.base}/bootstrap-5.3.2/js/bootstrap.min.js"></script> 
+
 <#include "stylesheets.ftl">
 <#-- <link rel="stylesheet" href="${urls.theme}/css/screen.css" /> -->
 

webapp/src/main/webapp/themes/nemo/templates/headScripts.ftl

@@ -15,7 +15,7 @@ var i18nStrings = {
 
 <script type="text/javascript" src="${urls.base}/js/vitroUtils.js"></script>
 
-<script src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script> 
+<script src="${urls.base}/bootstrap/js/bootstrap.min.js"></script> 
 
 <script src="${urls.theme}/js/publicationTableFilter.js"></script>
 

webapp/src/main/webapp/themes/tenderfoot/css/screen.css

@@ -16,8 +16,8 @@ VIVO tenderfoot theme: screen styles
 
 @charset "UTF-8";
 
-@import url("../../../js/bootstrap/css/bootstrap.min.css");
-@import url("../../../js/bootstrap/css/bootstrap-theme.min.css");
+@import url("../../../bootstrap/css/bootstrap.min.css");
+@import url("../../../bootstrap/css/bootstrap-theme.min.css");
 @import url("reset.css");
 @import url("tenderfoot.css");
 @import url("edit.css");

webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/headScripts.ftl

@@ -15,7 +15,7 @@ var i18nStrings = {
 <script type="text/javascript" src="${urls.base}/js/html5.js"></script>
 <![endif]-->
 
-<script src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script>
+<script src="${urls.base}/bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript">
 	$(document).ready(function(){
         $('#nav-wrapper').height($("#nav").height());

webapp/src/main/webapp/themes/tenderfoot/templates/page/partials/menu.ftl

@@ -1,5 +1,16 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
+<style>
+ul#main-nav {
+    display:block;
+}
+
+nav.navbar.navbar-default {
+    display: block;
+    padding: 0;
+}
+</style>
+
 <div id="nav-wrapper">
     <div id="nav">
         <div class="container">

webapp/src/main/webapp/themes/wilma/css/screen.css

@@ -22,6 +22,7 @@ VIVO wilma theme: screen styles
 
 @charset "UTF-8";
 
+@import url("../../../bootstrap-5.3.2/css/bootstrap.css");
 @import url("reset.css");
 @import url("wilma.css");
 @import url("page-createAndLink.css");