Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
8a9aab4c by Jeff Balicki
Options

search 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent dd2fcd9d
Inline Side-by-side
Showing 7 changed files with 107 additions and 39 deletions
......@@ -16643,6 +16643,13 @@ html:lang(fr-FR) .fr-only {
}
}
#search-wrapper {
display: flex;
}
#search-wrapper .searchandfilter {
width: 90%;
display: inline-block;
}
#search-wrapper #main > article {
padding: 2rem 0;
border-top: 1px solid #bebebe;
......@@ -16700,7 +16707,6 @@ html:lang(fr-FR) .fr-only {
border-bottom: 1px solid #707070;
border-radius: 0;
}
#search-wrapper .btn.filter, #search-wrapper .wpcf7 input.filter[type=submit], .wpcf7 #search-wrapper input.filter[type=submit], #search-wrapper .woocommerce-notices-wrapper .woocommerce-message a.filter.button, .woocommerce-notices-wrapper .woocommerce-message #search-wrapper a.filter.button, #search-wrapper .woocommerce-info a.filter.button, .woocommerce-info #search-wrapper a.filter.button {
position: relative;
visibility: visible;
......@@ -16753,25 +16759,15 @@ html:lang(fr-FR) .fr-only {
#search-wrapper .search-form {
margin-left: 50px;
}
.search-result {
padding-left: 0px;
}
@media screen and (min-width: 768px) {
.search-result {
padding-left: 45px;
}
}
#search-wrapper {
display: flex;
}
#search-wrapper #search-sidebar {
flex-direction: column;
}
#search-wrapper #search-sidebar .sf-field-search {
display: none !important;
}
#search-wrapper #search-sidebar .searchandfilter {
width: 100%;
}
@media screen and (min-width: 768px) {
#search-wrapper .collapse:not(.show) {
display: block;
......@@ -16854,13 +16850,11 @@ html:lang(fr-FR) .fr-only {
}
ul.sf_date_field {
width: 110px;
display: inline-block;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
......@@ -16882,6 +16876,22 @@ ul.sf_date_field label::after {
display: inline-block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20.524" height="20.313" viewBox="0 0 20.524 20.313"><g id="Group_1957" data-name="Group 1957" transform="translate(-7.739 -7.232)"><rect id="Rectangle_228" data-name="Rectangle 228" width="2.685" height="1.987" transform="translate(12.369 17.139)" fill="%23fff"/><g id="Group_1956" data-name="Group 1956"><path id="Path_1397" data-name="Path 1397" d="M74.08,56.35V54.6H72.093V56.35h-6.7V54.6H63.406V56.35h-4.98V74.917H78.95V56.35Zm2.99,16.688H60.306V58.229H77.07Z" transform="translate(-50.688 -47.372)" fill="%23fff"/><rect id="Rectangle_225" data-name="Rectangle 225" width="2.685" height="1.987" transform="translate(12.369 13.739)" fill="%23fff"/><rect id="Rectangle_226" data-name="Rectangle 226" width="2.685" height="1.987" transform="translate(16.713 13.739)" fill="%23fff"/><rect id="Rectangle_227" data-name="Rectangle 227" width="2.685" height="1.987" transform="translate(21.056 13.739)" fill="%23fff"/><rect id="Rectangle_229" data-name="Rectangle 229" width="2.685" height="1.987" transform="translate(16.713 17.139)" fill="%23fff"/><rect id="Rectangle_230" data-name="Rectangle 230" width="2.685" height="1.987" transform="translate(21.056 17.139)" fill="%23fff"/><rect id="Rectangle_231" data-name="Rectangle 231" width="2.685" height="1.987" transform="translate(12.369 20.54)" fill="%23fff"/><rect id="Rectangle_232" data-name="Rectangle 232" width="2.685" height="1.987" transform="translate(16.713 20.54)" fill="%23fff"/></g></g></svg>');
}
ul.sf_date_field label:hover::after {
background-color: #669999;
}
ul.sf_date_field .sf-datepicker {
border: 1px solid #bebebe;
width: 90px;
}
.search-result {
padding-left: 0px;
}
@media screen and (min-width: 768px) {
.search-result {
padding-left: 45px;
}
}
[data-sf-field-input-type=checkbox] label {
vertical-align: super;
......@@ -16891,7 +16901,7 @@ ul.sf_date_field label::after {
display: none;
}
#search-wrapper .sf-field-search {
width: 90%;
width: 88%;
margin: 0 auto;
margin-bottom: 60px;
position: relative;
......@@ -16951,6 +16961,11 @@ ul.sf_date_field label::after {
#search-wrapper .sf-field-submit input[name=_sf_submit]:hover {
background: #669999;
}
#search-wrapper ul.sf_date_field label::after {
height: 28px;
width: 28px;
background-size: 16px;
}
.advance-search-button {
position: relative;
......@@ -16985,6 +17000,7 @@ ul.sf_date_field label::after {
}
#advance-search-modal .modal-content {
border: 0px solid #707070;
margin-top: 115px;
}
#advance-search-modal .modal-footer,
#advance-search-modal .modal-header,
......@@ -17027,20 +17043,36 @@ ul.sf_date_field label::after {
#advance-search-modal .modal-dialog .searchandfilter input[name=_sf_submit] {
background: #ee0000 0% 0% no-repeat padding-box;
color: #fff;
border-radius: 40px;
border-radius: 40px !important;
height: 44px;
width: 182px;
border: 0 !important;
margin-right: 24px;
margin-left: 0px;
}
#advance-search-modal .modal-dialog .searchandfilter input[name=_sf_submit]:hover {
background: #669999;
}
#advance-search-modal .modal-dialog .searchandfilter .search-filter-reset {
background: #000000 0% 0% no-repeat padding-box;
color: #fff;
border-radius: 40px;
border-radius: 40px !important;
height: 44px;
width: 182px;
border: 0 !important;
float: unset;
font-size: 1.125rem;
font-family: "PT Sans", sans-serif;
font-weight: 700;
}
#advance-search-modal .modal-dialog .searchandfilter .search-filter-reset:hover {
background: #669999;
}
#advance-search-modal .modal-dialog .searchandfilter ul.sf_date_field label::after {
height: 36px;
width: 36px;
padding: 7px;
background-size: 20px;
}
#advance-search-modal .modal-dialog .searchandfilter .sf-datepicker {
width: 200px;
......
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.
......@@ -19,7 +19,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<div class="<?php echo esc_attr( $container ); ?> container" id="content" tabindex="-1">
<h1 class="sh1"><?php _e("Search results for:", 'msf'); ?></h1>
<?php //get_search_form() ?>
<?php echo do_shortcode('[searchandfilter slug="what-are-you-looking-for-today"]'); ?>
<?php echo do_shortcode('[searchandfilter slug="what-are-you-looking-for-today"]'); echo do_shortcode('[advance-search search_id="112"]'); ?>
<?php //echo do_shortcode('[searchandfilter id="21964"]'); ?>
<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'); ?>
......
......@@ -17,7 +17,7 @@ if ( isset( $args['aria_label'] ) && ! empty( $args['aria_label'] ) ) {
}
?>
<div class="side-menu input-group">
<?php echo do_shortcode('[searchandfilter slug="what-are-you-looking-for-today"]'); ?>
<?php // echo do_shortcode('[searchandfilter slug="what-are-you-looking-for-today"]'); ?>
</div>
<!-- <form role="search" class="search-form" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" <?php echo $aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?>>
<label class="screen-reader-text" for="<?php echo $uid; ?>"><?php echo esc_html_x( 'Search for:', 'label', 'understrap' ); ?></label>
......
......@@ -76,6 +76,11 @@
}
#search-wrapper {
.searchandfilter{
width: 90%;
display:inline-block;
}
display: flex;
#main {
& > article {
padding: 2rem 0;
......@@ -137,8 +142,7 @@
border-bottom: 1px solid #707070;
border-radius: 0;
}
}
#search-wrapper {
.btn.filter {
position: relative;
visibility: visible;
......@@ -192,22 +196,17 @@
.search-form {
margin-left: 50px;
}
}
.search-result {
padding-left: 0px;
@media screen and (min-width: 768px) {
padding-left: 45px;
}
}
#search-wrapper {
display: flex;
#search-sidebar {
flex-direction: column;
.sf-field-search {
display: none !important;
}
.searchandfilter{
width: 100%;
}
}
@media screen and (min-width: 768px) {
.collapse:not(.show) {
......@@ -295,17 +294,15 @@
}
ul.sf_date_field {
width: 110px;
display: inline-block;
li {
display: inline-block;
}
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
......@@ -323,6 +320,20 @@
display: inline-block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20.524" height="20.313" viewBox="0 0 20.524 20.313"><g id="Group_1957" data-name="Group 1957" transform="translate(-7.739 -7.232)"><rect id="Rectangle_228" data-name="Rectangle 228" width="2.685" height="1.987" transform="translate(12.369 17.139)" fill="%23fff"/><g id="Group_1956" data-name="Group 1956"><path id="Path_1397" data-name="Path 1397" d="M74.08,56.35V54.6H72.093V56.35h-6.7V54.6H63.406V56.35h-4.98V74.917H78.95V56.35Zm2.99,16.688H60.306V58.229H77.07Z" transform="translate(-50.688 -47.372)" fill="%23fff"/><rect id="Rectangle_225" data-name="Rectangle 225" width="2.685" height="1.987" transform="translate(12.369 13.739)" fill="%23fff"/><rect id="Rectangle_226" data-name="Rectangle 226" width="2.685" height="1.987" transform="translate(16.713 13.739)" fill="%23fff"/><rect id="Rectangle_227" data-name="Rectangle 227" width="2.685" height="1.987" transform="translate(21.056 13.739)" fill="%23fff"/><rect id="Rectangle_229" data-name="Rectangle 229" width="2.685" height="1.987" transform="translate(16.713 17.139)" fill="%23fff"/><rect id="Rectangle_230" data-name="Rectangle 230" width="2.685" height="1.987" transform="translate(21.056 17.139)" fill="%23fff"/><rect id="Rectangle_231" data-name="Rectangle 231" width="2.685" height="1.987" transform="translate(12.369 20.54)" fill="%23fff"/><rect id="Rectangle_232" data-name="Rectangle 232" width="2.685" height="1.987" transform="translate(16.713 20.54)" fill="%23fff"/></g></g></svg>');
}
label:hover::after{
background-color: #669999;
}
.sf-datepicker {
border: 1px solid #bebebe;
width: 90px;
}
}
.search-result {
padding-left: 0px;
@media screen and (min-width: 768px) {
padding-left: 45px;
}
}
......@@ -336,7 +347,7 @@
}
.sf-field-search {
width: 90%;
width: 88%;
@media screen and (max-width: 768px) {
width: 80%;
}
......@@ -395,6 +406,11 @@
}
}
}
ul.sf_date_field label::after{
height: 28px;
width: 28px;
background-size: 16px;
}
}
.advance-search-button {
......@@ -429,6 +445,7 @@
}
.modal-content{
border: 0px solid #707070;
margin-top: 115px;
}
.modal-footer,
.modal-header,
......@@ -477,20 +494,39 @@
input[name="_sf_submit"] {
background: #ee0000 0% 0% no-repeat padding-box;
color: #fff;
border-radius: 40px;
border-radius: 40px !important;;
height: 44px;
width: 182px;
border: 0 !important;
margin-right: 24px;
margin-left: 0px;
&:hover {
background: #669999;
}
}
.search-filter-reset {
background: #000000 0% 0% no-repeat padding-box;
color: #fff;
border-radius: 40px;
border-radius: 40px !important;;
height: 44px;
width: 182px;
border: 0 !important;
float: unset;
font-size: 1.125rem;
font-family: "PT Sans",sans-serif;
font-weight: 700;
&:hover {
background: #669999;
}
}
ul.sf_date_field {
label::after{
height: 36px;
width: 36px;
padding: 7px;
background-size:20px ;
}
}
.sf-datepicker {
width: 200px;
......