Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wilma Responsive redesign #460

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Wilma Responsive redesign #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9605af0
Added Boostrap 5 webjar dependency
litvinovg May 24, 2024
e0bf28d
Cherry-pick
milospp Dec 7, 2023
34afe5a
Removed debug prints
milospp May 27, 2024
3e89331
Removed bootstrap5 files from webapp
milospp Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ utilities/sdb_to_tdb/.work
**/overlays
*~

**/.DS_Store

# Eclipse artifacts
**/.settings
**/.classpath
Expand Down
25 changes: 25 additions & 0 deletions webapp/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,26 @@
</fileMappers>
<outputDirectory>target/${project.artifactId}-${project.version}/webjars/fonts/open-sans/</outputDirectory>
</artifactItem>
<artifactItem>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<type>jar</type>
<includes>
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
</includes>
<fileMappers>
<org.codehaus.plexus.components.io.filemappers.RegExpFileMapper>
<pattern>
^META-INF/resources/webjars/bootstrap/[^/]+/</pattern>
<replacement>./</replacement>
</org.codehaus.plexus.components.io.filemappers.RegExpFileMapper>
</fileMappers>
<outputDirectory>
target/${project.artifactId}-${project.version}/webjars/bootstrap/</outputDirectory>
</artifactItem>
</artifactItems>
<overWriteReleases>true</overWriteReleases>
<overWriteSnapshots>true</overWriteSnapshots>
Expand All @@ -157,6 +177,11 @@
</build>

<dependencies>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.3.3</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>jquery-migrate</artifactId>
Expand Down
17 changes: 15 additions & 2 deletions webapp/src/main/webapp/css/individual/individual-property-groups.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/main/webapp/css/search-results.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
112 changes: 39 additions & 73 deletions webapp/src/main/webapp/js/individual/propertyGroupControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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() {
Expand Down
26 changes: 20 additions & 6 deletions ...n/webapp/templates/freemarker/body/partials/individual/individual-property-group-tabs.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
<#assign tabCount = 1 >
<#assign sectionCount = 1 >
<!-- ${propertyGroups.all?size} -->
<ul class="propertyTabsList">
<ul class="propertyTabsList nav nav-tabs">
<li class="groupTabSpacer">&nbsp;</li>

<#list propertyGroups.all as groupTabs>
<#if ( groupTabs.properties?size > 0 ) >
<#assign groupName = groupTabs.getName(nameForOtherGroup)>
Expand All @@ -20,26 +21,38 @@
<#assign groupNameHtmlId = "${i18n().properties}" >
</#if>
<#if tabCount = 1 >
<li class="selectedGroupTab clickable" groupName="${groupNameHtmlId?replace("/","-")}">${p.capitalizeGroupName(groupName)}</li>
<li class="nav-link active" data-bs-toggle="tab" data-bs-target="#${groupNameHtmlId?replace("/","-")}-section" type="button" role="tab" id="${groupNameHtmlId?replace("/","-")}-tab" aria-controls="${groupNameHtmlId?replace("/","-")}" aria-selected="true" groupName="${groupNameHtmlId?replace("/","-")}">${p.capitalizeGroupName(groupName)}</li>
<li class="groupTabSpacer">&nbsp;</li>
<#assign tabCount = 2>
<#else>
<li class="nonSelectedGroupTab clickable" groupName="${groupNameHtmlId?replace("/","-")}">${p.capitalizeGroupName(groupName)}</li>
<li class="nav-link" data-bs-toggle="tab" data-bs-target="#${groupNameHtmlId?replace("/","-")}-section" type="button" role="tab" id="${groupNameHtmlId?replace("/","-")}-tab" aria-controls="${groupNameHtmlId?replace("/","-")}" aria-selected="false" groupName="${groupNameHtmlId?replace("/","-")}">${p.capitalizeGroupName(groupName)}</li>
<li class="groupTabSpacer">&nbsp;</li>
</#if>
</#if>
</#list>

<#if (propertyGroups.all?size > 1) >
<li class="nonSelectedGroupTab clickable" groupName="viewAll">${i18n().view_all_capitalized}</li>
<li class="groupTabSpacer">&nbsp;</li>
<li class="nav-link" id="show-all-tabs" groupName="viewAll" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">${i18n().view_all_capitalized}</li>
<li class="groupTabSpacer">&nbsp;</li>
</#if>
</ul>

<div class="tab-content property-tabs">
<#assign tabCount = 1 >

<#list propertyGroups.all as group>
<#if (group.properties?size > 0)>
<#assign groupName = group.getName(nameForOtherGroup)>
<#assign groupNameHtmlId = p.createPropertyGroupHtmlId(groupName) >
<#assign verbose = (verbosePropertySwitch.currentValue)!false>
<section id="${groupNameHtmlId?replace("/","-")}" class="property-group" role="region" style="<#if (sectionCount > 1) >display:none<#else>display:block</#if>">

<#if tabCount = 1 >
<section id="${groupNameHtmlId?replace("/","-")}-section" class="tab-pane fade show active property-group" role="tabpanel" aria-labelledby="${groupNameHtmlId?replace("/","-")}-tab" role="region">
<#assign tabCount = 2>
<#else>
<section id="${groupNameHtmlId?replace("/","-")}-section" class="tab-pane fade property-group" role="tabpanel" aria-labelledby="${groupNameHtmlId?replace("/","-")}-tab" role="region">
</#if>

<nav id="scroller" class="scroll-up hidden" role="navigation">
<a href="#branding" title="${i18n().scroll_to_menus}" >
<img src="${urls.images}/individual/scroll-up.gif" alt="${i18n().scroll_to_menus}" />
Expand All @@ -62,6 +75,7 @@
<#assign sectionCount = 2 >
</#if>
</#list>
</div>
<script>
var individualLocalName = "${individual.localName}";
</script>
Expand Down
13 changes: 6 additions & 7 deletions webapp/src/main/webapp/templates/freemarker/body/search/search-pagedResults.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@

${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/nouislider.css"/>')}
${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/css/search-results.css"/>')}
${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/js/bootstrap/css/bootstrap.min.css"/>')}
${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/js/bootstrap/css/bootstrap-theme.min.css"/>')}
${stylesheets.add('<link rel="stylesheet" type="text/css" href="${urls.base}/webjars/bootstrap/css/bootstrap.min.css"/>')}
${headScripts.add('<script type="text/javascript" src="${urls.base}/js/nouislider.min.js"></script>')}
${headScripts.add('<script type="text/javascript" src="${urls.base}/js/wNumb.min.js"></script>')}
${headScripts.add('<script type="text/javascript" src="${urls.base}/js/bootstrap/js/bootstrap.min.js"></script>')}
${headScripts.add('<script type="text/javascript" src="${urls.base}/webjars/bootstrap/js/bootstrap.min.js"></script>')}

<@searchForm />

Expand Down Expand Up @@ -302,11 +301,11 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/bootstrap

<#macro searchFormGroupTab group active >
<#if active>
<li class="active form-group-tab">
<li class="active nav-item form-group-tab">
<#else>
<li class="form-group-tab">
<li class="form-group-tab nav-item">
</#if>
<a data-toggle="tab" href="#${group.id?html}">${group.label?html}</a>
<a data-toggle="tab" class="nav-link" href="#${group.id}" id="${group.id}-tab" data-bs-toggle="tab" data-bs-target="#${group.id}" type="button" role="tab" aria-controls="${group.id}" aria-selected="false">${group.label}</a>
</li>
</#macro>

Expand All @@ -316,7 +315,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/bootstrap
<#return>
</#if>
<li class="filter-tab">
<a data-toggle="tab" href="#${filter.id?html}">${filter.name?html}</a>
<a data-toggle="tab" class="nav-link" href="#${filter.id}" id="${filter.id}-tab" data-bs-toggle="tab" data-bs-target="#${filter.id}" type="button" role="tab" aria-controls="${filter.id}" aria-selected="false">${filter.name}</a>
</li>
</#macro>

Expand Down
Loading