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] { ...@@ -17012,7 +17012,7 @@ select[multiple] {
17012 padding-right: 0; 17012 padding-right: 0;
17013 } 17013 }
17014 17014
17015 input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit), optgroup, select, textarea { 17015 input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit):not(.top-go), optgroup, select, textarea {
17016 border: 0.0625rem solid #707070 !important; 17016 border: 0.0625rem solid #707070 !important;
17017 border-radius: 0px; 17017 border-radius: 0px;
17018 } 17018 }
...@@ -18035,6 +18035,18 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18035,6 +18035,18 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18035 } 18035 }
18036 } 18036 }
18037 18037
18038 .top-search .sf-field-search label:after {
18039 top: 1rem !important;
18040 }
18041 @media screen and (max-width: 56.25rem) {
18042 .top-search .sf-field-search label:after {
18043 top: 0.5rem !important;
18044 }
18045 }
18046 .top-search .advance-search-button {
18047 margin-left: 20px;
18048 }
18049
18038 .sh1 { 18050 .sh1 {
18039 font-size: 24px; 18051 font-size: 24px;
18040 font-weight: bold !important; 18052 font-weight: bold !important;
...@@ -18120,6 +18132,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18120,6 +18132,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18120 width: 100%; 18132 width: 100%;
18121 } 18133 }
18122 } 18134 }
18135 #search-wrapper #search-sidebar .sf-field-submit,
18123 #search-wrapper #search-sidebar .sf-field-search { 18136 #search-wrapper #search-sidebar .sf-field-search {
18124 display: none !important; 18137 display: none !important;
18125 } 18138 }
...@@ -18262,7 +18275,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18262,7 +18275,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18262 display: none; 18275 display: none;
18263 } 18276 }
18264 #search-wrapper .sf-field-search { 18277 #search-wrapper .sf-field-search {
18265 width: calc(100% - 7.5rem); 18278 width: calc(100% - 11.5rem);
18266 margin: 0 auto; 18279 margin: 0 auto;
18267 margin-bottom: 3.75rem; 18280 margin-bottom: 3.75rem;
18268 position: relative; 18281 position: relative;
...@@ -18273,7 +18286,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18273,7 +18286,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18273 @media screen and (max-width: 56.25rem) { 18286 @media screen and (max-width: 56.25rem) {
18274 #search-wrapper .sf-field-search { 18287 #search-wrapper .sf-field-search {
18275 margin-bottom: 1.875rem; 18288 margin-bottom: 1.875rem;
18276 width: calc(100% - 5rem); 18289 width: calc(100% - 10rem);
18277 margin-left: 1.25rem; 18290 margin-left: 1.25rem;
18278 } 18291 }
18279 } 18292 }
...@@ -18295,9 +18308,9 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18295,9 +18308,9 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18295 width: 26px; 18308 width: 26px;
18296 height: 26px; 18309 height: 26px;
18297 left: -2rem !important; 18310 left: -2rem !important;
18298 top: 1.225rem !important;
18299 } 18311 }
18300 } 18312 }
18313 #search-wrapper .sf-field-search #top-search,
18301 #search-wrapper .sf-field-search input[name="_sf_search[]"] { 18314 #search-wrapper .sf-field-search input[name="_sf_search[]"] {
18302 width: 100%; 18315 width: 100%;
18303 border: 0; 18316 border: 0;
...@@ -18310,6 +18323,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18310,6 +18323,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18310 padding: 0.375rem 0.75rem; 18323 padding: 0.375rem 0.75rem;
18311 } 18324 }
18312 @media screen and (max-width: 56.25rem) { 18325 @media screen and (max-width: 56.25rem) {
18326 #search-wrapper .sf-field-search #top-search,
18313 #search-wrapper .sf-field-search input[name="_sf_search[]"] { 18327 #search-wrapper .sf-field-search input[name="_sf_search[]"] {
18314 padding: 0; 18328 padding: 0;
18315 font-size: 1.5rem !important; 18329 font-size: 1.5rem !important;
...@@ -18318,6 +18332,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18318,6 +18332,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18318 #search-wrapper .sf-field-submit { 18332 #search-wrapper .sf-field-submit {
18319 display: inline-block !important; 18333 display: inline-block !important;
18320 } 18334 }
18335 #search-wrapper .sf-field-submit .top-go,
18321 #search-wrapper .sf-field-submit input[name=_sf_submit] { 18336 #search-wrapper .sf-field-submit input[name=_sf_submit] {
18322 border-radius: 50% !important; 18337 border-radius: 50% !important;
18323 padding: 0; 18338 padding: 0;
...@@ -18336,11 +18351,13 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child ...@@ -18336,11 +18351,13 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
18336 display: inline-block !important; 18351 display: inline-block !important;
18337 } 18352 }
18338 @media screen and (max-width: 56.25rem) { 18353 @media screen and (max-width: 56.25rem) {
18354 #search-wrapper .sf-field-submit .top-go,
18339 #search-wrapper .sf-field-submit input[name=_sf_submit] { 18355 #search-wrapper .sf-field-submit input[name=_sf_submit] {
18340 height: 2.5rem; 18356 height: 2.5rem;
18341 width: 2.5rem; 18357 width: 2.5rem;
18342 } 18358 }
18343 } 18359 }
18360 #search-wrapper .sf-field-submit .top-go:hover,
18344 #search-wrapper .sf-field-submit input[name=_sf_submit]:hover { 18361 #search-wrapper .sf-field-submit input[name=_sf_submit]:hover {
18345 background: #669999; 18362 background: #669999;
18346 } 18363 }
...@@ -18683,6 +18700,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -18683,6 +18700,7 @@ ul.sf_date_field .sf-datepicker {
18683 width: 26px; 18700 width: 26px;
18684 height: 26px; 18701 height: 26px;
18685 left: -2rem; 18702 left: -2rem;
18703 top: 1.225rem !important;
18686 } 18704 }
18687 } 18705 }
18688 #advance-search-modal .modal-dialog .searchandfilter .sf-field-reset, 18706 #advance-search-modal .modal-dialog .searchandfilter .sf-field-reset,
...@@ -20589,7 +20607,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -20589,7 +20607,7 @@ ul.sf_date_field .sf-datepicker {
20589 opacity: 1 !important; 20607 opacity: 1 !important;
20590 } 20608 }
20591 20609
20592 .modal-header .btn-close:hover { 20610 .modal-header .btn-close-white:hover {
20593 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important; 20611 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
20594 } 20612 }
20595 20613
......
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 @@ ...@@ -20697,6 +20697,20 @@
20697 $('.searchandfilter')[0].reset(); 20697 $('.searchandfilter')[0].reset();
20698 return false; 20698 return false;
20699 }); 20699 });
20700 $(document).on("click", ".top-go", function (e) {
20701 e.preventDefault();
20702 $('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
20703 $('#search-sidebar [name="_sf_submit"]').click();
20704 return false;
20705 });
20706 $(document).on("keydown", "#top-search", function (e) {
20707 if (e.keyCode == 13) {
20708 e.preventDefault();
20709 $('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
20710 $('#search-sidebar [name="_sf_submit"]').click();
20711 return false;
20712 }
20713 });
20700 $(document).on("click", '#advance-search-modal [name="_sf_submit"]', function (e) { 20714 $(document).on("click", '#advance-search-modal [name="_sf_submit"]', function (e) {
20701 $('#advance-search-modal .searchandfilter').hide(); 20715 $('#advance-search-modal .searchandfilter').hide();
20702 $('[data-sf-form-id="399"]').trigger("submit"); 20716 $('[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(); ...@@ -17,7 +17,11 @@ get_header();
17 <div class="<?php echo esc_attr( $container ); ?> container search-content" id="content" tabindex="-1"> 17 <div class="<?php echo esc_attr( $container ); ?> container search-content" id="content" tabindex="-1">
18 <h1 class="sh1"><?php _e("Search results for:", 'msf'); ?></h1> 18 <h1 class="sh1"><?php _e("Search results for:", 'msf'); ?></h1>
19 <?php //get_search_form() ?> 19 <?php //get_search_form() ?>
20 <?php echo do_shortcode('[searchandfilter slug="top-search"]'); echo do_shortcode('[advance-search search_id="advanced-search"]'); ?> 20 <div class="top-search">
21 <li class="sf-field-search"><label>
22 <input placeholder="Search …" id="top-search" class="sf-input-text" type="text" value="<?php echo $_GET["_sf_s"]; ?>" title=""></label></li>
23 <li class="sf-field-submit"><input type="submit" class="top-go" value="GO"><?php echo do_shortcode('[advance-search search_id="advanced-search"]'); ?></li>
24 </div>
21 <button class="btn btn-primary filter" data-bs-toggle="collapse" data-bs-target="#search-sidebar" role="button" aria-expanded="false" aria-controls="search-sidebar" > 25 <button class="btn btn-primary filter" data-bs-toggle="collapse" data-bs-target="#search-sidebar" role="button" aria-expanded="false" aria-controls="search-sidebar" >
22 <?php _e("SORT AND FILTER", 'msf'); ?> 26 <?php _e("SORT AND FILTER", 'msf'); ?>
23 </button> 27 </button>
......
...@@ -43,7 +43,24 @@ var Search = (function($) { ...@@ -43,7 +43,24 @@ var Search = (function($) {
43 e.preventDefault(); 43 e.preventDefault();
44 $('.searchandfilter')[0].reset(); 44 $('.searchandfilter')[0].reset();
45 return false; 45 return false;
46 }); 46 });
47
48 $(document).on("click", ".top-go", function(e){
49 e.preventDefault();
50 $('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
51 $('#search-sidebar [name="_sf_submit"]').click()
52 return false;
53 });
54
55 $(document).on("keydown", "#top-search", function(e){
56 if(e.keyCode == 13) {
57 e.preventDefault();
58 $('#search-sidebar [name="_sf_search[]"]').val($('#top-search').val());
59 $('#search-sidebar [name="_sf_submit"]').click()
60 return false;
61 }
62 });
63
47 64
48 65
49 $(document).on("click", '#advance-search-modal [name="_sf_submit"]', function(e){ 66 $(document).on("click", '#advance-search-modal [name="_sf_submit"]', function(e){
......
...@@ -294,7 +294,7 @@ ...@@ -294,7 +294,7 @@
294 opacity: 1 !important; 294 opacity: 1 !important;
295 } 295 }
296 296
297 .modal-header .btn-close:hover { 297 .modal-header .btn-close-white:hover {
298 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important; 298 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
299 } 299 }
300 300
......
1 1
2 input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit), optgroup, select, textarea { 2 input:not(.search-field):not(.sf-input-text):not(input[name=_sf_submit]):not(.wpcf7-submit):not(.top-go), optgroup, select, textarea {
3 border:0.0625rem solid #707070 !important; 3 border:0.0625rem solid #707070 !important;
4 border-radius: 0px; 4 border-radius: 0px;
5 5
......
...@@ -12,6 +12,17 @@ ...@@ -12,6 +12,17 @@
12 width:100%; 12 width:100%;
13 } 13 }
14 } 14 }
15 .top-search{
16 .sf-field-search label:after{
17 top: 1rem !important;
18 @media screen and (max-width: 56.25rem) {
19 top: 0.5rem!important;
20 }
21 }
22 .advance-search-button{
23 margin-left: 20px;
24 }
25 }
15 26
16 27
17 .sh1 { 28 .sh1 {
...@@ -109,6 +120,7 @@ ...@@ -109,6 +120,7 @@
109 } 120 }
110 121
111 // min-width: 20rem; 122 // min-width: 20rem;
123 .sf-field-submit,
112 .sf-field-search { 124 .sf-field-search {
113 display: none !important; 125 display: none !important;
114 } 126 }
...@@ -283,7 +295,7 @@ ...@@ -283,7 +295,7 @@
283 } 295 }
284 296
285 .sf-field-search { 297 .sf-field-search {
286 width: calc(100% - 7.5rem); 298 width: calc(100% - 11.5rem);
287 margin: 0 auto; 299 margin: 0 auto;
288 margin-bottom: 3.75rem; 300 margin-bottom: 3.75rem;
289 position: relative; 301 position: relative;
...@@ -292,7 +304,7 @@ ...@@ -292,7 +304,7 @@
292 margin-left: 3.125rem; 304 margin-left: 3.125rem;
293 @media screen and (max-width: 56.25rem) { 305 @media screen and (max-width: 56.25rem) {
294 margin-bottom: 1.875rem; 306 margin-bottom: 1.875rem;
295 width: calc(100% - 5rem); 307 width: calc(100% - 10rem);
296 margin-left: 1.25rem; 308 margin-left: 1.25rem;
297 309
298 } 310 }
...@@ -314,13 +326,13 @@ ...@@ -314,13 +326,13 @@
314 width: 26px; 326 width: 26px;
315 height: 26px; 327 height: 26px;
316 left: -2rem !important; 328 left: -2rem !important;
317 top: 1.225rem !important; 329
318 330
319 } 331 }
320 332
321 } 333 }
322 } 334 }
323 335 #top-search,
324 input[name="_sf_search[]"] { 336 input[name="_sf_search[]"] {
325 width: 100%; 337 width: 100%;
326 border: 0; 338 border: 0;
...@@ -341,7 +353,7 @@ ...@@ -341,7 +353,7 @@
341 353
342 .sf-field-submit { 354 .sf-field-submit {
343 display: inline-block !important; 355 display: inline-block !important;
344 356 .top-go,
345 input[name="_sf_submit"] { 357 input[name="_sf_submit"] {
346 border-radius: 50% !important; 358 border-radius: 50% !important;
347 padding: 0; 359 padding: 0;
...@@ -703,6 +715,7 @@ ul.sf_date_field { ...@@ -703,6 +715,7 @@ ul.sf_date_field {
703 width: 26px; 715 width: 26px;
704 height: 26px; 716 height: 26px;
705 left: -2rem; 717 left: -2rem;
718 top: 1.225rem !important;
706 } 719 }
707 } 720 }
708 721
......