Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
2c574527 by Jeff Balicki
Options

new top search 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 18a0c238
Inline Side-by-side
Showing 13 changed files with 80 additions and 14 deletions
......@@ -17012,7 +17012,7 @@ select[multiple] {
padding-right: 0;
}
input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit), optgroup, select, textarea {
input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit):not(.top-go), optgroup, select, textarea {
border: 0.0625rem solid #707070 !important;
border-radius: 0px;
}
......@@ -18035,6 +18035,18 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
}
.top-search .sf-field-search label:after {
top: 1rem !important;
}
@media screen and (max-width: 56.25rem) {
.top-search .sf-field-search label:after {
top: 0.5rem !important;
}
}
.top-search .advance-search-button {
margin-left: 20px;
}
.sh1 {
font-size: 24px;
font-weight: bold !important;
......@@ -18120,6 +18132,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
width: 100%;
}
}
#search-wrapper #search-sidebar .sf-field-submit,
#search-wrapper #search-sidebar .sf-field-search {
display: none !important;
}
......@@ -18262,7 +18275,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
display: none;
}
#search-wrapper .sf-field-search {
width: calc(100% - 7.5rem);
width: calc(100% - 11.5rem);
margin: 0 auto;
margin-bottom: 3.75rem;
position: relative;
......@@ -18273,7 +18286,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
@media screen and (max-width: 56.25rem) {
#search-wrapper .sf-field-search {
margin-bottom: 1.875rem;
width: calc(100% - 5rem);
width: calc(100% - 10rem);
margin-left: 1.25rem;
}
}
......@@ -18295,9 +18308,9 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
width: 26px;
height: 26px;
left: -2rem !important;
top: 1.225rem !important;
}
}
#search-wrapper .sf-field-search #top-search,
#search-wrapper .sf-field-search input[name="_sf_search[]"] {
width: 100%;
border: 0;
......@@ -18310,6 +18323,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
padding: 0.375rem 0.75rem;
}
@media screen and (max-width: 56.25rem) {
#search-wrapper .sf-field-search #top-search,
#search-wrapper .sf-field-search input[name="_sf_search[]"] {
padding: 0;
font-size: 1.5rem !important;
......@@ -18318,6 +18332,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
#search-wrapper .sf-field-submit {
display: inline-block !important;
}
#search-wrapper .sf-field-submit .top-go,
#search-wrapper .sf-field-submit input[name=_sf_submit] {
border-radius: 50% !important;
padding: 0;
......@@ -18336,11 +18351,13 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
display: inline-block !important;
}
@media screen and (max-width: 56.25rem) {
#search-wrapper .sf-field-submit .top-go,
#search-wrapper .sf-field-submit input[name=_sf_submit] {
height: 2.5rem;
width: 2.5rem;
}
}
#search-wrapper .sf-field-submit .top-go:hover,
#search-wrapper .sf-field-submit input[name=_sf_submit]:hover {
background: #669999;
}
......@@ -18683,6 +18700,7 @@ ul.sf_date_field .sf-datepicker {
width: 26px;
height: 26px;
left: -2rem;
top: 1.225rem !important;
}
}
#advance-search-modal .modal-dialog .searchandfilter .sf-field-reset,
......@@ -20589,7 +20607,7 @@ ul.sf_date_field .sf-datepicker {
opacity: 1 !important;
}
.modal-header .btn-close:hover {
.modal-header .btn-close-white:hover {
filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !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.
......@@ -20697,6 +20697,20 @@
$('.searchandfilter')[0].reset();
return false;
});
$(document).on("click", ".top-go", function (e) {
e.preventDefault();
$('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
$('#search-sidebar [name="_sf_submit"]').click();
return false;
});
$(document).on("keydown", "#top-search", function (e) {
if (e.keyCode == 13) {
e.preventDefault();
$('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
$('#search-sidebar [name="_sf_submit"]').click();
return false;
}
});
$(document).on("click", '#advance-search-modal [name="_sf_submit"]', function (e) {
$('#advance-search-modal .searchandfilter').hide();
$('[data-sf-form-id="399"]').trigger("submit");
......
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,7 +17,11 @@ 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"]'); ?>
<div class="top-search">
<li class="sf-field-search"><label>
<input placeholder="Search …" id="top-search" class="sf-input-text" type="text" value="<?php echo $_GET["_sf_s"]; ?>" title=""></label></li>
<li class="sf-field-submit"><input type="submit" class="top-go" value="GO"><?php echo do_shortcode('[advance-search search_id="advanced-search"]'); ?></li>
</div>
<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 _e("SORT AND FILTER", 'msf'); ?>
</button>
......
......@@ -43,7 +43,24 @@ var Search = (function($) {
e.preventDefault();
$('.searchandfilter')[0].reset();
return false;
});
});
$(document).on("click", ".top-go", function(e){
e.preventDefault();
$('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
$('#search-sidebar [name="_sf_submit"]').click()
return false;
});
$(document).on("keydown", "#top-search", function(e){
if(e.keyCode == 13) {
e.preventDefault();
$('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
$('#search-sidebar [name="_sf_submit"]').click()
return false;
}
});
$(document).on("click", '#advance-search-modal [name="_sf_submit"]', function(e){
......
......@@ -294,7 +294,7 @@
opacity: 1 !important;
}
.modal-header .btn-close:hover {
.modal-header .btn-close-white:hover {
filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
}
......
input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit), optgroup, select, textarea {
input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit):not(.top-go), optgroup, select, textarea {
border:0.0625rem solid #707070 !important;
border-radius: 0px;
......
......@@ -12,6 +12,17 @@
width:100%;
}
}
.top-search{
.sf-field-search label:after{
top: 1rem !important;
@media screen and (max-width: 56.25rem) {
top: 0.5rem!important;
}
}
.advance-search-button{
margin-left: 20px;
}
}
.sh1 {
......@@ -109,6 +120,7 @@
}
// min-width: 20rem;
.sf-field-submit,
.sf-field-search {
display: none !important;
}
......@@ -283,7 +295,7 @@
}
.sf-field-search {
width: calc(100% - 7.5rem);
width: calc(100% - 11.5rem);
margin: 0 auto;
margin-bottom: 3.75rem;
position: relative;
......@@ -292,7 +304,7 @@
margin-left: 3.125rem;
@media screen and (max-width: 56.25rem) {
margin-bottom: 1.875rem;
width: calc(100% - 5rem);
width: calc(100% - 10rem);
margin-left: 1.25rem;
}
......@@ -314,13 +326,13 @@
width: 26px;
height: 26px;
left: -2rem !important;
top: 1.225rem !important;
}
}
}
#top-search,
input[name="_sf_search[]"] {
width: 100%;
border: 0;
......@@ -341,7 +353,7 @@
.sf-field-submit {
display: inline-block !important;
.top-go,
input[name="_sf_submit"] {
border-radius: 50% !important;
padding: 0;
......@@ -703,6 +715,7 @@ ul.sf_date_field {
width: 26px;
height: 26px;
left: -2rem;
top: 1.225rem !important;
}
}
......