Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
e937510f by Jeff Balicki
Options

ADVANCED SEARCH 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent cab739a7
Inline Side-by-side
Showing 6 changed files with 155 additions and 60 deletions
......@@ -17569,7 +17569,7 @@ select {
}
[data-sf-field-input-type=multiselect] label {
max-width: 30ch;
max-width: 95%;
}
@media screen and (max-width: 56.25rem) {
[data-sf-field-input-type=multiselect] label {
......@@ -17582,7 +17582,7 @@ select {
grid-template-areas: "select";
align-items: center;
position: relative;
max-width: 30ch;
max-width: 95%;
padding: 0.506rem;
font-size: 1rem;
cursor: pointer;
......@@ -18079,11 +18079,17 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
#search-wrapper #search-sidebar .sf-field-post_date {
width: 100%;
}
#search-wrapper #search-sidebar .sf-field-post_date .sf_date_field li label {
width: calc(100% - 3.125rem) !important;
}
@media screen and (max-width: 90.625rem) {
#search-wrapper #search-sidebar .sf-field-post_date .sf_date_field li .sf-date-prefix {
display: block;
}
}
#search-wrapper #search-sidebar .sf-field-post_date .sf_date_field li .sf-datepicker {
width: calc(100% - 3.25rem) !important;
}
#search-wrapper #search-sidebar .select2-container--default .select2-selection--multiple,
#search-wrapper #search-sidebar .select2-selection__rendered {
background-color: #fff;
......@@ -18134,6 +18140,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
}
#search-wrapper .searchandfilter .sf-date-prefix {
width: 3.125rem;
padding-right: 10px;
}
#search-wrapper .search-filter-reset {
-webkit-appearance: none;
......@@ -18284,7 +18291,7 @@ table:not(.ui-datepicker-calendar):not(#relevant-resources) thead th:first-child
ul.sf_date_field {
width: 100%;
display: flex;
display: inline-block;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
......@@ -18321,7 +18328,7 @@ ul.sf_date_field .sf-datepicker {
}
@media screen and (max-width: 48rem) {
ul.sf_date_field .sf-datepicker {
width: 16rem;
width: calc(100% - 2.25rem);
}
}
......@@ -18438,7 +18445,7 @@ ul.sf_date_field .sf-datepicker {
max-width: 100% !important;
}
#advance-search-modal .sf-field-tag .select2-container--default .select2-search--inline .select2-search__field {
width: 93% !important;
width: 97.5% !important;
}
@media screen and (max-width: 1175px) {
#advance-search-modal .sf-field-tag .select2-container--default .select2-search--inline .select2-search__field {
......@@ -18545,7 +18552,8 @@ ul.sf_date_field .sf-datepicker {
}
}
#advance-search-modal .modal-dialog .searchandfilter {
width: calc(100% - 1.125rem);
width: 100%;
margin-left: 1%;
}
@media screen and (max-width: 56.25rem) {
#advance-search-modal .modal-dialog .searchandfilter {
......@@ -18589,7 +18597,7 @@ ul.sf_date_field .sf-datepicker {
}
#advance-search-modal .modal-dialog .searchandfilter .sf-field-search label {
margin-left: 3.125rem !important;
width: 95% !important;
width: 92% !important;
position: relative;
width: 100%;
}
......@@ -18654,6 +18662,9 @@ ul.sf_date_field .sf-datepicker {
#advance-search-modal .modal-dialog .searchandfilter .search-filter-reset-custom:hover {
background: #669999;
}
#advance-search-modal .modal-dialog .searchandfilter ul.sf_date_field label {
width: 100%;
}
#advance-search-modal .modal-dialog .searchandfilter ul.sf_date_field label::after {
height: 2.25rem;
width: 2.25rem;
......@@ -18674,14 +18685,12 @@ ul.sf_date_field .sf-datepicker {
width: 12.5rem;
}
}
#advance-search-modal .modal-dialog .searchandfilter .sf_date_field {
max-width: 36.4rem;
}
#advance-search-modal .modal-dialog .searchandfilter .sf_date_field li:first-of-type .sf-date-prefix {
width: 3.125rem !important;
}
#advance-search-modal .modal-dialog .searchandfilter .sf_date_field li:nth-of-type(2) .sf-date-prefix {
width: 2rem !important;
width: 2.5rem !important;
text-align: right;
}
@media screen and (max-width: 1175px) {
#advance-search-modal .modal-dialog .searchandfilter .sf_date_field li:nth-of-type(2) .sf-date-prefix {
......@@ -18731,8 +18740,10 @@ ul.sf_date_field .sf-datepicker {
display: none !important;
}
#advance-search-modal [data-sf-field-input-type=multiselect] {
margin-bottom: 0px !important;
#advance-search-modal ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#advance-search-modal ul.sf_date_field {
flex-direction: row;
......@@ -18741,6 +18752,7 @@ ul.sf_date_field .sf-datepicker {
margin-top: 0px;
text-transform: uppercase;
}
#advance-search-modal .sf-field-post-meta-document_year,
#advance-search-modal .sf-field-taxonomy-region,
#advance-search-modal .sf-field-taxonomy-country,
#advance-search-modal .sf-field-taxonomy-continent,
......@@ -18750,12 +18762,14 @@ ul.sf_date_field .sf-datepicker {
#advance-search-modal .sf-field-taxonomy-oc,
#advance-search-modal .sf-field-post-meta-msf_initiative,
#advance-search-modal .sf-field-taxonomy-document-format {
width: 33%;
display: inline-block !important;
vertical-align: top;
flex-basis: 33%;
display: flex !important;
margin-bottom: 10px;
flex-direction: column;
justify-content: flex-end;
}
@media screen and (max-width: 48rem) {
#advance-search-modal .sf-field-post-meta-document_year,
#advance-search-modal .sf-field-taxonomy-region,
#advance-search-modal .sf-field-taxonomy-country,
#advance-search-modal .sf-field-taxonomy-continent,
......@@ -18765,42 +18779,67 @@ ul.sf_date_field .sf-datepicker {
#advance-search-modal .sf-field-taxonomy-oc,
#advance-search-modal .sf-field-post-meta-msf_initiative,
#advance-search-modal .sf-field-taxonomy-document-format {
width: 100%;
flex-basis: 100%;
margin-bottom: 0px;
padding-bottom: 0px;
}
}
#advance-search-modal .sf-field-taxonomy-region,
#advance-search-modal .sf-field-taxonomy-continent,
#advance-search-modal .sf-field-taxonomy-country {
vertical-align: bottom;
#advance-search-modal ul.sf_date_field li {
display: inline-block;
width: 50%;
}
@media screen and (max-width: 48rem) {
#advance-search-modal ul.sf_date_field li {
width: 100%;
margin-bottom: 10px;
}
}
#advance-search-modal .sf-field-post_date {
width: 66%;
display: inline-block;
flex-basis: 66%;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 48rem) {
#advance-search-modal .sf-field-post_date {
width: 100%;
flex-basis: 100%;
}
}
#advance-search-modal #advance-search-modal .modal-dialog .searchandfilter .sf_date_field {
max-width: 36.875rem;
#advance-search-modal .sf_date_field {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
#advance-search-modal li.sf-field-post-meta-document_year {
display: inline-block !important;
width: 30%;
@media screen and (max-width: 48rem) {
#advance-search-modal .sf_date_field {
flex-direction: column;
}
}
#advance-search-modal .sf_date_field li {
padding: 0px !important;
}
#advance-search-modal .sf_date_field li label {
width: calc(100% - 3.125rem) !important;
}
#advance-search-modal .sf_date_field li .sf-datepicker {
width: calc(100% - 3.25rem) !important;
}
#advance-search-modal .sf_date_field li:nth-of-type(2) .sf-date-prefix {
text-align: right;
}
@media screen and (max-width: 48rem) {
#advance-search-modal li.sf-field-post-meta-document_year {
width: 100%;
#advance-search-modal .sf_date_field li:nth-of-type(2) .sf-date-prefix {
text-align: left !important;
}
}
#advance-search-modal #advance-search-modal .modal-dialog .searchandfilter .sf_date_field {
max-width: 36.875rem;
}
#advance-search-modal .sf-field-tag {
flex-basis: 100%;
margin-bottom: 0px !important;
}
#advance-search-modal .sf-field-submit {
margin-top: 10px !important;
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.
......@@ -625,7 +625,7 @@ select {
min-width: unset !important;
}
[data-sf-field-input-type="multiselect"] label{
max-width: 30ch;
max-width: 95%;
@media screen and (max-width: 56.25rem) {
max-width: unset;
}
......@@ -636,7 +636,7 @@ select {
grid-template-areas: "select";
align-items: center;
position: relative;
max-width: 30ch;
max-width: 95%;
padding: 0.506rem;
font-size: 1rem;
cursor: pointer;
......
......@@ -127,14 +127,23 @@
.sf_date_field {
li {
label{
width:calc(100% - 3.125rem) !important;
}
.sf-date-prefix {
@media screen and (max-width: 90.625rem) {
display: block;
}
}
.sf-datepicker{
width: calc(100% - 3.25rem) !important;
}
}
}
}
.select2-container--default .select2-selection--multiple,
.select2-selection__rendered{
background-color: #fff;
......@@ -201,6 +210,7 @@
.searchandfilter .sf-date-prefix {
width: 3.125rem;
padding-right: 10px;
}
.search-filter-reset {
......@@ -369,10 +379,12 @@ ul.sf_date_field label::after {
ul.sf_date_field {
li {
display: inline-block;
}
width: 100%;
display: flex;
display: inline-block;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
......@@ -406,7 +418,7 @@ ul.sf_date_field {
width: 12.625rem;
height: 2.25rem;
@media screen and (max-width: 48rem) {
width: 16rem;
width: calc( 100% - 2.25rem);
}
}
......@@ -520,7 +532,7 @@ ul.sf_date_field {
max-width:100% !important;
}
.select2-container--default .select2-search--inline .select2-search__field{
width: 93% !important;
width: 97.5% !important;
@media screen and (max-width: 1175px) {
width: 99% !important;
}
......@@ -624,7 +636,8 @@ ul.sf_date_field {
}
.searchandfilter {
width: calc(100% - 1.125rem);
width: 100% ;
margin-left: 1%;
@media screen and (max-width: 56.25rem) {
width: 100%;
}
......@@ -664,7 +677,7 @@ ul.sf_date_field {
label {
margin-left: 3.125rem !important;
width: 95% !important;
width: 92% !important;
position: relative;
@media screen and (max-width: 56.25rem) {
margin-left: 1.25rem!important;
......@@ -735,6 +748,9 @@ ul.sf_date_field {
}
ul.sf_date_field {
label{
width: 100%;
}
label::after {
height: 2.25rem;
width: 2.25rem;
......@@ -755,15 +771,16 @@ ul.sf_date_field {
}
.sf_date_field {
max-width: 36.4rem;
// max-width: 36.4rem;
}
.sf_date_field li:first-of-type .sf-date-prefix{
width: 3.125rem !important;
}
.sf_date_field li:nth-of-type(2) .sf-date-prefix{
width: 2rem!important;
width: 2.5rem!important;
text-align: right;
@media screen and (max-width: 1175px) {
width: 3.125rem !important;
}
......@@ -825,9 +842,12 @@ ul.sf_date_field {
}
}
#advance-search-modal{
[data-sf-field-input-type="multiselect"]{
margin-bottom: 0px !important;
ul{
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
ul.sf_date_field {
flex-direction: row;
}
......@@ -835,6 +855,7 @@ ul.sf_date_field {
margin-top: 0px;
text-transform: uppercase;
}
.sf-field-post-meta-document_year,
.sf-field-taxonomy-region,
.sf-field-taxonomy-country,
.sf-field-taxonomy-continent,
......@@ -844,12 +865,14 @@ ul.sf_date_field {
.sf-field-taxonomy-oc,
.sf-field-post-meta-msf_initiative,
.sf-field-taxonomy-document-format{
width: 33%;
display: inline-block !important;
vertical-align: top;
flex-basis: 33%;
display: flex !important;
margin-bottom: 10px;
flex-direction: column;
justify-content: flex-end;
@media screen and (max-width:48rem) {
width: 100%;
flex-basis: 100%;
margin-bottom: 0px;
padding-bottom: 0px;
}
......@@ -857,31 +880,64 @@ ul.sf_date_field {
.sf-field-taxonomy-region,
.sf-field-taxonomy-continent,
.sf-field-taxonomy-country{
vertical-align: bottom;
}
ul.sf_date_field {
li {
display: inline-block;
width: 50%;
@media screen and (max-width: 48rem) {
width: 100%;
margin-bottom: 10px;
}
}
}
.sf-field-post_date{
width: 66%;
display: inline-block;
flex-basis: 66%;
display: flex;
flex-direction: column;
@media screen and (max-width: 48rem) {
width: 100%;
flex-basis: 100%;
}
}
#advance-search-modal .modal-dialog .searchandfilter .sf_date_field{
max-width: 36.875rem;
}
li.sf-field-post-meta-document_year {
display: inline-block !important;
width: 30%;
.sf_date_field{
display: flex;
flex-direction: row;
justify-content: flex-start;
@media screen and (max-width: 48rem) {
width: 100%;
flex-direction: column;
}
li{
label{
width:calc(100% - 3.125rem) !important;
}
padding:0px !important;
.sf-datepicker{
width: calc(100% - 3.25rem) !important;
}
}
}
.sf_date_field li:nth-of-type(2) .sf-date-prefix{
text-align: right;
@media screen and (max-width:48rem) {
text-align: left !important;
}
}
#advance-search-modal .modal-dialog .searchandfilter .sf_date_field{
max-width: 36.875rem;
}
.sf-field-tag{
flex-basis: 100%;
margin-bottom: 0px !important;
}
.sf-field-submit{
margin-top: 10px !important;
margin-top: 20px !important;
}
.sf-field-reset{
margin-top: 10px !important;
......