Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
25a4e553 by Jeff Balicki
Options

new search 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 18a0c238
Inline Side-by-side
Showing 13 changed files with 170 additions and 32 deletions
......@@ -18016,6 +18016,10 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
border-left: none;
}
#search-wrapper {
opacity: 0;
}
#search-sidebar {
min-width: 20rem;
}
......@@ -18027,11 +18031,28 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
.search-result {
position: absolute;
right: 0px;
top: 120px;
width: calc(100% - 21.25rem);
}
@media screen and (max-width: 48rem) {
.search-result {
width: 100%;
position: relative;
top: 40px;
}
}
@media screen and (max-width: 48rem) {
.mobile-hidden {
display: none !important;
}
}
@media screen and (max-width: 48rem) {
.mobile-hidden.show {
display: block !important;
}
}
......@@ -18049,6 +18070,9 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
}
#search-wrapper {
margin-bottom: 150px;
}
#search-wrapper .searchandfilter {
width: calc(100% - 3.125rem);
display: inline-block;
......@@ -18087,6 +18111,9 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
content: "";
display: block;
}
#search-wrapper .filter-display {
top: 80px;
}
#search-wrapper .btn.filter.apply-filters, #search-wrapper .wpcf7 input.filter.apply-filters[type=submit], .wpcf7 #search-wrapper input.filter.apply-filters[type=submit], #search-wrapper .woocommerce-notices-wrapper .woocommerce-message a.filter.apply-filters.button, .woocommerce-notices-wrapper .woocommerce-message #search-wrapper a.filter.apply-filters.button, #search-wrapper .woocommerce-info a.filter.apply-filters.button, .woocommerce-info #search-wrapper a.filter.apply-filters.button {
color: #fff;
background-color: red;
......@@ -18118,10 +18145,28 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
@media screen and (max-width: 59.375rem) {
#search-wrapper #search-sidebar {
width: 100%;
margin-bottom: 3.125rem;
}
}
#search-wrapper #search-sidebar .sf-field-search {
display: none !important;
position: absolute;
}
#search-wrapper #search-sidebar .sf-field-search label {
width: calc(100% - 60px);
}
@media screen and (max-width: 62.5rem) {
#search-wrapper #search-sidebar .sf-field-search label {
width: calc(100% - 55px);
}
}
#search-wrapper #search-sidebar .sf-field-search .advance-search-button {
margin-top: 25px;
float: right;
}
@media screen and (max-width: 62.5rem) {
#search-wrapper #search-sidebar .sf-field-search .advance-search-button {
margin-top: 10px;
}
}
#search-wrapper #search-sidebar .searchandfilter {
width: 100%;
......@@ -18242,6 +18287,12 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
#search-wrapper .sf-field-sort_order {
margin-bottom: 28px;
padding-top: 120px !important;
}
@media screen and (max-width: 90.625rem) {
#search-wrapper .sf-field-sort_order {
padding-top: 80px !important;
}
}
#search-wrapper .sf-field-sort_order label {
display: inline-grid !important;
......@@ -18263,7 +18314,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
#search-wrapper .sf-field-search {
width: calc(100% - 7.5rem);
margin: 0 auto;
max-width: 1015px !important;
margin-bottom: 3.75rem;
position: relative;
flex-wrap: nowrap;
......@@ -18299,7 +18350,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
}
#search-wrapper .sf-field-search input[name="_sf_search[]"] {
width: 100%;
width: calc(100% - 60px);
border: 0;
border-bottom: 0.0625rem solid #4D4D4D;
border-radius: 0;
......@@ -18315,10 +18366,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
font-size: 1.5rem !important;
}
}
#search-wrapper .sf-field-submit {
display: inline-block !important;
}
#search-wrapper .sf-field-submit input[name=_sf_submit] {
#search-wrapper input[name=_sf_submit] {
border-radius: 50% !important;
padding: 0;
height: 2.5rem;
......@@ -18334,14 +18382,17 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
text-transform: uppercase;
transition: none;
display: inline-block !important;
float: right;
margin-top: 14px;
}
@media screen and (max-width: 56.25rem) {
#search-wrapper .sf-field-submit input[name=_sf_submit] {
#search-wrapper input[name=_sf_submit] {
height: 2.5rem;
width: 2.5rem;
margin-top: 0px;
}
}
#search-wrapper .sf-field-submit input[name=_sf_submit]:hover {
#search-wrapper input[name=_sf_submit]:hover {
background: #669999;
}
#search-wrapper ul.sf_date_field label::after {
......@@ -18413,7 +18464,6 @@ ul.sf_date_field .sf-datepicker {
width: 40px;
height: 40px;
text-indent: -624.9375rem;
right: -0.625rem;
display: inline-block;
}
@media screen and (max-width: 48rem) {
......@@ -18917,9 +18967,6 @@ ul.sf_date_field .sf-datepicker {
flex-basis: 100%;
margin-bottom: 0px !important;
}
#advance-search-modal .sf-field-submit {
margin-top: 20px !important;
}
#advance-search-modal .sf-field-reset {
margin-top: 10px !important;
}
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -20674,6 +20674,14 @@
setTimeout(() => {
$('.badge').css('transition', '4s ease-in-out');
}, "100");
$('#search-sidebar .searchandfilter ul li').addClass('mobile-hidden');
$('#search-sidebar .sf-field-search').removeClass('mobile-hidden');
$('#search-sidebar .apply-filters').addClass('mobile-hidden');
$('#search-wrapper .advance-search-button').appendTo($('#search-sidebar .sf-field-search'));
$('#search-sidebar [name="_sf_submit"]').appendTo($('#search-sidebar .sf-field-search label'));
$('.filter-display.btn').insertAfter($('#search-sidebar .sf-field-search'));
$('.apply-filters.btn').insertAfter($('#search-sidebar .sf-field-taxonomy-language'));
$('#search-wrapper').css('opacity', '1');
$(window).on('resize', function () {
$('.search-box').css('transition', '0s ease-in-out');
$('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
......@@ -20687,6 +20695,9 @@
});
$(".searchandfilter ul li:contains('hidden')").hide();
$('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" ></li>').appendTo(jQuery('#advance-search-modal .searchandfilter ul:first-child '));
$(document).on("input", '#search-sidebar > [name="_sf_search[]"]', function (e) {
e.preventDefault();
});
$(document).on("click", ".search-filter-reset-custom", function (e) {
e.preventDefault();
$(this).closest('.searchandfilter')[0].reset();
......@@ -20706,6 +20717,15 @@
window.location.href = window.location.href;
}, "1000");
});
$(document).on("click", ".filter-display", function (e) {
e.preventDefault();
console.log('filter-display');
$('.mobile-hidden:not(:contains("hidden"))').toggleClass('show');
});
$(document).on("click", ".apply-filters", function (e) {
e.preventDefault();
$('.mobile-hidden:not(:contains("hidden"))').toggleClass('show');
});
$(document).on("click", ".advance-search-button", function (e) {
$('#search-box-content').addClass('show');
$('.search-box').addClass('show');
......@@ -26127,7 +26147,7 @@
var thisSwiper = this;
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesOffsetAfter: 100,
slidesOffsetAfter: 0,
slidesOffsetBefore: 0,
spaceBetween: 24,
// centeredSlides: true,
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -17,15 +17,16 @@ get_header();
<div class="<?php echo esc_attr( $container ); ?> container search-content" id="content" tabindex="-1">
<h1 class="sh1"><?php _e("Search results for:", 'msf'); ?></h1>
<?php //get_search_form() ?>
<?php echo do_shortcode('[searchandfilter slug="top-search"]'); echo do_shortcode('[advance-search search_id="advanced-search"]'); ?>
<button class="btn btn-primary filter" data-bs-toggle="collapse" data-bs-target="#search-sidebar" role="button" aria-expanded="false" aria-controls="search-sidebar" >
<?php //echo do_shortcode('[searchandfilter slug="top-search"]');
echo do_shortcode('[advance-search search_id="advanced-search"]'); ?>
<button class="btn btn-primary filter filter-display" >
<?php _e("SORT AND FILTER", 'msf'); ?>
</button>
<div class="search-wrapper row">
<div class="col-sm-12 col-md-12 col-lg-3 widget-area collapse" id="search-sidebar">
<div class="col-sm-12 col-md-12 col-lg-3 widget-area" id="search-sidebar">
<?php echo do_shortcode('[searchandfilter slug="search"]'); ?>
<button class="btn btn-primary filter apply-filters" data-bs-toggle="collapse" data-bs-target="#search-sidebar" role="button" aria-expanded="false" aria-controls="search-sidebar" >
<button class="btn btn-primary filter apply-filters" >
<?php _e("APPLY FILTERS", 'msf'); ?>
</button>
</div>
......
......@@ -25,7 +25,7 @@ jQuery(document).ready(function($) {
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesOffsetAfter: 100,
slidesOffsetAfter: 0,
slidesOffsetBefore: 0,
spaceBetween: 24,
// centeredSlides: true,
......
......@@ -17,6 +17,16 @@ var Search = (function($) {
setTimeout(() => {
$('.badge').css('transition', '4s ease-in-out');
}, "100");
$('#search-sidebar .searchandfilter ul li').addClass('mobile-hidden');
$('#search-sidebar .sf-field-search').removeClass('mobile-hidden');
$('#search-sidebar .apply-filters').addClass('mobile-hidden');
$('#search-wrapper .advance-search-button').appendTo($('#search-sidebar .sf-field-search'));
$('#search-sidebar [name="_sf_submit"]').appendTo($('#search-sidebar .sf-field-search label'));
$('.filter-display.btn').insertAfter($('#search-sidebar .sf-field-search'));
$('.apply-filters.btn').insertAfter($('#search-sidebar .sf-field-taxonomy-language'));
$('#search-wrapper').css('opacity', '1');
$(window).on('resize', function(){
$('.search-box').css('transition', '0s ease-in-out');
......@@ -33,6 +43,10 @@ var Search = (function($) {
$(".searchandfilter ul li:contains('hidden')").hide();
$('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" ></li>').appendTo( jQuery( '#advance-search-modal .searchandfilter ul:first-child ' ) );
$(document).on("input", '#search-sidebar > [name="_sf_search[]"]', function(e){
e.preventDefault();
});
$(document).on("click", ".search-filter-reset-custom", function(e){
e.preventDefault();
$(this).closest('.searchandfilter')[0].reset();
......@@ -56,6 +70,17 @@ var Search = (function($) {
}, "1000");
});
$(document).on("click", ".filter-display", function(e){
e.preventDefault();
console.log('filter-display');
$('.mobile-hidden:not(:contains("hidden"))').toggleClass('show');
});
$(document).on("click", ".apply-filters", function(e){
e.preventDefault();
$('.mobile-hidden:not(:contains("hidden"))').toggleClass('show');
});
$(document).on("click", ".advance-search-button", function(e){
$('#search-box-content').addClass('show');
......
#search-wrapper{
opacity: 0;
}
#search-sidebar{
min-width: 20rem;
@media screen and (max-width: 48rem){
......@@ -7,12 +9,27 @@
}
}
.search-result{
position: absolute;
right: 0px;
top: 120px;
width: calc(100% - 21.25rem);
@media screen and (max-width: 48rem){
width:100%;
position: relative;
top: 40px;
}
}
.mobile-hidden{
@media screen and (max-width: 48rem){
display: none !important;
}
}
.mobile-hidden.show{
@media screen and (max-width: 48rem){
display: block !important;
}
}
.sh1 {
font-size:24px;
......@@ -28,11 +45,12 @@
}
#search-wrapper {
margin-bottom: 150px;
.searchandfilter {
width: calc(100% - 3.125rem);
display: inline-block;
}
.search-field {
......@@ -43,6 +61,7 @@
.btn.filter {
position: relative;
visibility: visible;
display: block;
margin-bottom: 1.875rem;
......@@ -70,6 +89,9 @@
display: block;
}
}
.filter-display{
top: 80px;
}
.btn.filter.apply-filters {
color: #fff;
......@@ -106,11 +128,28 @@
@media screen and (max-width: 59.375rem) {
width: 100%;
margin-bottom: 3.125rem;
}
// min-width: 20rem;
.sf-field-search {
display: none !important;
position: absolute;
label{
width:calc(100% - 60px);
@media screen and (max-width: 62.5rem) {
width:calc(100% - 55px);
}
}
.advance-search-button{
margin-top: 25px;
float: right;
@media screen and (max-width: 62.5rem) {
margin-top: 10px;
}
}
// display: none !important;
}
.searchandfilter {
......@@ -262,6 +301,10 @@
}
.sf-field-sort_order {
margin-bottom: 28px;
padding-top: 120px !important;
@media screen and (max-width: 90.625rem) {
padding-top: 80px !important;
}
}
.sf-field-sort_order label {
display: inline-grid !important;
......@@ -284,7 +327,7 @@
.sf-field-search {
width: calc(100% - 7.5rem);
margin: 0 auto;
max-width: 1015px!important;
margin-bottom: 3.75rem;
position: relative;
flex-wrap: nowrap;
......@@ -300,7 +343,7 @@
label {
width: 100%;
width: 100%;
&:after {
content: "";
position: absolute;
......@@ -322,7 +365,7 @@
}
input[name="_sf_search[]"] {
width: 100%;
width: calc(100% - 60px);
border: 0;
border-bottom: 0.0625rem solid #4D4D4D;
border-radius: 0;
......@@ -339,8 +382,8 @@
}
.sf-field-submit {
display: inline-block !important;
//.sf-field-submit {
// display: inline-block !important;
input[name="_sf_submit"] {
border-radius: 50% !important;
......@@ -358,17 +401,20 @@
text-transform: uppercase;
transition: none;
display: inline-block !important;
float: right;
margin-top: 14px;
@media screen and (max-width: 56.25rem) {
height: 2.5rem;
width:2.5rem;
margin-top: 0px;
}
&:hover {
background: #669999;
}
}
}
//}
ul.sf_date_field label::after {
......@@ -451,7 +497,6 @@ ul.sf_date_field {
width: 40px;
height: 40px;
text-indent: -624.9375rem;
right:-0.625rem ;
display: inline-block;
@media screen and (max-width: 48rem) {
height: 1.875rem;
......@@ -957,7 +1002,7 @@ ul.sf_date_field {
margin-bottom: 0px !important;
}
.sf-field-submit{
margin-top: 20px !important;
// margin-top: 20px !important;
}
.sf-field-reset{
margin-top: 10px !important;
......
......@@ -2,6 +2,6 @@
Theme Name: MSF CA Child
Author: Tenzing Communications
Template: msf-ca
Version: 1.0.514
Version: 1.0.515
*/
......