Wilma Responsive redesign

webapp/src/main/webapp/css/home-page-maps.css

@@ -17,8 +17,7 @@ div#researcherTotal {
 }
 .mapArea {
     height:540px;
-    width:885px;
-    margin: 2px 0 16px 16px;
+    margin: 2px 16px 16px 16px;
 }
 .divIconCount {
     border: none;

webapp/src/main/webapp/css/visualization/capabilitymap/graph.css

@@ -41,13 +41,23 @@ body {
 
 /* Contains all the graphics. */
 #container {
-    /*width: 1200px;*/width:940px;
+    /*width: 1200px;*/
+    max-width:940px;
+    width: 100%;
     height: auto;
-    /* margin:0 auto; */
-    /*margin-left:-130px;*/
     position:relative;
-    /*box-shadow:0px 0px 20px -6px #000000;*/
     margin-top:15px;
+    transition: 0.5s ease all;
+
+}
+
+@media (min-width: 1200px) {
+    #container.wide-container {    
+        width: 1200px;
+        max-width: 1200px;
+        margin-left:-130px;
+        margin-right:-130px;
+    }
 }
 
 #left-container,

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,22 @@ $(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();
-                    }
+                        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/js/visualization/capabilitymap/graph_new.js

@@ -1025,11 +1025,10 @@ var unhide = function() {
     $("#resetButton").removeAttr("disabled");
     if ($(window).width() > 1230) {
         $("#container").css("box-shadow", "0px 0px 20px -6px #000000");
-        $("#container").animate({"height" : "600px", "width" : "1200px", "margin-bottom" : "20px", "margin-left" : (($("#main-content").width() - 1200) / 2) + "px"}, 500);
-        $("#center-container").css("width", "900px");
+        $("#container").animate({"height" : "600px", "width" : "auto", "margin-bottom" : "20px"}, 500);
+        $("#container").addClass("wide-container");
     } else {
         $("#container").animate({"height" : "600px"});
-        $("#center-container").css("width", "640px");
     }
     $("#helptext").fadeOut();
     $("#center-container").fadeIn();

webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coAuthorPersonLevelD3.ftl

@@ -135,8 +135,7 @@ $(document).ready(function(){
     // #9edae5
 
     var svg = d3.select('#chord').append('svg')
-            .attr('width', width+padding)
-            .attr('height', height+padding)
+            .attr('width', '100%')
             .append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
             .datum(chord(matrix));
 

webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coPIPersonLevelD3.ftl

@@ -139,8 +139,7 @@ $(document).ready(function(){
     // #9edae5
 
     var svg = d3.select('#chord').append('svg')
-            .attr('width', width+padding)
-            .attr('height', height+padding)
+            .attr('width', '100%')
             .append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
             .datum(chord(matrix));
 

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

@@ -20,6 +20,7 @@
     </#if>	
 </#if>	
 
+
 <#include "stylesheets.ftl">
 <#-- <link rel="stylesheet" href="${urls.theme}/css/screen.css" /> -->
 

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("../../../webjars/bootstrap/css/bootstrap.min.css");
 @import url("reset.css");
 @import url("wilma.css");
 @import url("page-createAndLink.css");