Skip to content

Commit

Permalink
removed boostrap 3 dependency from search results page
Browse files Browse the repository at this point in the history
  • Loading branch information
@litvinovg
litvinovg committed Oct 21, 2024
1 parent d6b6cb2 commit 6559e3d
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 35 deletions.
44 changes: 43 additions & 1 deletion webapp/src/main/webapp/css/search-results.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,44 @@
display: block;
}

.tab-pane > label {
.tab > label {
display: inline-block;
}

.tab > a {
padding: 10px 15px;
position: relative;
display: block;
float: left;
text-decoration: none;
color: #555;
}

.tab {
display: block;
}

.tabs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1px;
}

#filter-groups > .tab {
border: 1px solid #ddd;
border-bottom: 0;
border-radius: 4px 4px 0 0;
}
#filter-groups {
border-bottom: 1px solid #ddd;
}

#filter-groups > .tab.active {
margin-bottom: -1px;
background-color: #fff;
}

input[type=radio]:checked + label {
background-color: #0F6568;
padding: 2px 5px 2px 5px;
Expand Down Expand Up @@ -101,10 +135,18 @@ input[type=checkbox]:not(:checked) + label {
padding: 0.3em;
}

.filter-area >.tab.active {
width: 100%;
}

.range-filter {
padding: 15px;
}

.search-filter-group-container {
border-bottom: solid 1px #ddd;
width: 100%;
}

#search-filter-container > ul > li > a {
padding: 7px 7px;
Expand Down
17 changes: 17 additions & 0 deletions webapp/src/main/webapp/js/search/search_results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,20 @@ function collapseSearchOptions(){
$(event.target).parent().children('.more-facets-link').show();
$(event.target).hide();
}

function openTab(event, tabName) {
let currentTab = document.getElementById(tabName);
let tabs = currentTab.parentElement.querySelectorAll(':scope > .tab');
for (let i = 0; i < tabs.length; i++) {
let tab = tabs[i];
tab.classList.add('fade');
}
let tabElement = event.srcElement.parentElement;
let srcTabs = tabElement.parentElement.querySelectorAll(':scope > .tab');
for (let i = 0; i < srcTabs.length; i++) {
let tab = srcTabs[i];
tab.classList.remove('active');
}
tabElement.classList.add('active');
currentTab.classList.remove('fade');
}
55 changes: 24 additions & 31 deletions webapp/src/main/webapp/templates/freemarker/body/search/search-lib.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,17 @@
<#macro searchForm>
<div id="selected-filters">
<@printSelectedFilterValueLabels filters />
</div>
<div id="filter-groups">
<ul class="nav nav-tabs">
<#assign active = true>
<#list filterGroups as group>
<#if ( user.loggedIn || group.public ) && !group.hidden >
<@searchFormGroupTab group active/>
<#assign active = false>
</#if>
</#list>
</ul>
</div>
<div id="filter-groups" class="tabs">
<#assign active = true>
<#list filterGroups as group>
<#if ( user.loggedIn || group.public ) && !group.hidden >
<@searchFormGroupTab group active/>
<#assign active = false>
</#if>
</#list>
</div>
<div class="tabs filter-area">
<#assign active = true>
<#list filterGroups as group>
<#if ( user.loggedIn || group.public ) && !group.hidden >
Expand All @@ -49,6 +49,7 @@
</#if>
</#list>
</div>

<div id="search-form-footer">
<div>
<@printResultNumbers />
Expand All @@ -61,13 +62,10 @@
</#macro>

<#macro groupFilters group active>
<#if active >
<div id="${group.id}" class="tab-pane fade in active filter-area">
<#else>
<div id="${group.id}" class="tab-pane fade filter-area">
</#if>
<div id="search-filter-group-container-${group.id}">
<ul class="nav nav-tabs">

<div id="${group.id}" class="tab <#if active >active<#else>fade</#if>">
<div id="search-filter-group-container-${group.id}" class="search-filter-group-container">
<div class="tabs">
<#assign assignedActive = false>
<#list group.filters as filterId>
<#if filters[filterId]??>
Expand All @@ -80,7 +78,7 @@
</#if>
</#if>
</#list>
</ul>
</div>
</div>
<div id="search-filter-group-tab-content-${group.id}" class="tab-content">
<#assign assignedActive = false>
Expand Down Expand Up @@ -153,27 +151,22 @@
</#macro>

<#macro searchFormGroupTab group active >
<#if active>
<li class="active form-group-tab">
<#else>
<li class="form-group-tab">
</#if>
<a data-toggle="tab" href="#${group.id?html}">${group.label?html}</a>
</li>
<div class="tab <#if active>active</#if>">
<a href="#" onclick="openTab(event, '${group.id?html}');return false;">${group.label?html}</a>
</div>
</#macro>

<#macro searchFormFilterTab filter assignedActive>
<#if filter.id == "querytext">
<#-- skip query text filter -->
<#return>
</#if>
<li class="filter-tab">
<a data-toggle="tab" href="#${filter.id?html}">${filter.name?html}</a>
</li>
<div class="tab filter-tab" >
<a href="#" onclick="openTab(event, '${filter.id?html}');return false;">${filter.name?html}</a>
</div>
</#macro>

<#macro printFilterValues filter assignedActive isEmptySearch>
<div id="${filter.id?html}" class="tab-pane fade filter-area">
<div id="${filter.id?html}" class="tab fade filter-area">
<#if filter.id == "querytext">
<#-- skip query text filter -->
<#elseif filter.type == "RangeFilter">
Expand Down
9 changes: 6 additions & 3 deletions webapp/src/main/webapp/templates/freemarker/body/search/search-pagedResults.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,19 @@

${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"/>')}
${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>')}

<#include "search-lib.ftl">

<script>
let searchFormId = "search-form";
let urlsBase = "${urls.base}";
if (window.location.toString().indexOf("?") == -1){
var queryText = 'querytext=${querytext?js_string}';
} else {
var queryText = window.location.toString().split("?")[1];
}
</script>

<@searchForm />
Expand Down

0 comments on commit 6559e3d

Please sign in to comment.