From f60cb00846558faf6f4bc522fdedcfb20c0440cd Mon Sep 17 00:00:00 2001 From: Tero Elonen Date: Tue, 16 Jan 2024 19:05:04 +0200 Subject: [PATCH 1/2] UHF-9107: Styled custom unit search layouts to have the submit button after the form filters --- .../hdbt_subtheme/dist/css/styles.min.css | 2 +- .../custom/hdbt_subtheme/package-lock.json | 12 +- .../paragraphs/_unit-search-variants.scss | 113 +++++++++--------- 3 files changed, 66 insertions(+), 61 deletions(-) diff --git a/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css b/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css index 59809b4a..f0cf27bb 100644 --- a/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css +++ b/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css @@ -1 +1 @@ -.unit.unit--high-school-card,.unit.unit--vocational-school-card{margin-top:24px}@media(min-width: 576px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{padding-left:24px;width:50%}}@media(min-width: 992px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{width:33.3333%}}.unit.unit--high-school-card:first-child,.unit.unit--vocational-school-card:first-child{margin-top:0}@media(min-width: 576px){.unit.unit--high-school-card:nth-child(-n+2),.unit.unit--vocational-school-card:nth-child(-n+2){margin-top:0}}@media(min-width: 992px){.unit.unit--high-school-card:nth-child(-n+3),.unit.unit--vocational-school-card:nth-child(-n+3){margin-top:0}}.unit.unit--high-school-card .unit__link,.unit.unit--vocational-school-card .unit__link{background-color:#fff;height:100%;display:block;text-decoration:none}.unit.unit--high-school-card .unit__link:hover .unit__title,.unit.unit--vocational-school-card .unit__link:hover .unit__title{text-decoration:underline}.unit.unit--high-school-card .unit__link:hover .unit__arrow,.unit.unit--vocational-school-card .unit__link:hover .unit__arrow{padding-left:16px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{margin-top:0}.unit.unit--high-school-card .unit__image,.unit.unit--vocational-school-card .unit__image{margin-left:0;margin-right:0}.unit.unit--high-school-card .unit__text,.unit.unit--vocational-school-card .unit__text{padding:24px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{font-size:1.5rem;line-height:1.75rem;font-weight:500;margin-bottom:0}.unit.unit--high-school-card .unit__info-row,.unit.unit--vocational-school-card .unit__info-row{margin-top:8px}.unit.unit--high-school-card .unit__info-row p,.unit.unit--vocational-school-card .unit__info-row p{margin:0}.unit.unit--high-school-card .unit__info-row .address,.unit.unit--vocational-school-card .unit__info-row .address{display:inline;margin-top:0}.unit.unit--high-school-card .unit__info-row .address .address-line1::after,.unit.unit--high-school-card .unit__info-row .address .address-line2::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line1::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line2::after{content:","}.unit.unit--high-school-card .unit__short-desc,.unit.unit--vocational-school-card .unit__short-desc{font-size:1.125rem;line-height:1.75rem;margin-top:16px}.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{display:block;line-height:0;margin-top:16px;margin-left:-4px;padding-left:0;transition:all .3s;width:48px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{margin-left:-7px}}.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 32px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 48px}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form,.unit-search--vocational-school .views--unit-search .views-exposed-form{margin-left:-24px}}.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-actions .form-submit,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions .form-submit{margin-left:0}}.unit-search--high-school .views--unit-search .views-exposed-form label,.unit-search--vocational-school .views--unit-search .views-exposed-form label{display:block;font-weight:500;margin-bottom:4px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form,.unit-search--playground-search .bef-exposed-form,.unit-search--after-school-activity-search .bef-exposed-form{position:relative}}.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{margin-bottom:0;margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{width:auto}}.unit-search--daycare-search .bef-exposed-form>.form-item:first-child,.unit-search--playground-search .bef-exposed-form>.form-item:first-child,.unit-search--after-school-activity-search .bef-exposed-form>.form-item:first-child{margin-top:0}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item:first-child,.unit-search--playground-search .bef-exposed-form>.form-item:first-child,.unit-search--after-school-activity-search .bef-exposed-form>.form-item:first-child{margin-right:30%;width:70%}}.unit-search--daycare-search .fieldgroup,.unit-search--playground-search .fieldgroup,.unit-search--after-school-activity-search .fieldgroup{margin-bottom:0;margin-left:0;margin-right:0}.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{display:flex;flex-wrap:wrap;justify-content:flex-start}@media(min-width: 768px){.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{margin-bottom:16px}}.unit-search--daycare-search .bef-checkboxes .form-item,.unit-search--playground-search .bef-checkboxes .form-item,.unit-search--after-school-activity-search .bef-checkboxes .form-item{margin-bottom:0;margin-right:24px;margin-top:16px;width:auto}.unit-search--daycare-search .form-actions,.unit-search--playground-search .form-actions,.unit-search--after-school-activity-search .form-actions{margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .form-actions,.unit-search--playground-search .form-actions,.unit-search--after-school-activity-search .form-actions{position:absolute;right:0;top:4px}}.has-navigation .component--unit-search{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}@media(min-width: 992px){.has-navigation .component--unit-search{margin-left:0;margin-right:0}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:0}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:-24px}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px;padding-left:0;width:100%}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}.comprehensive-school__instruction-language::after{content:", "}.comprehensive-school__instruction-language:last-child::after{content:""}.hero-wrapper.has-first-gray-bg-block--desktop{background-color:#f7f7f8;margin-bottom:-64px;padding-bottom:48px}@media(min-width: 992px){.hero-wrapper.has-first-gray-bg-block--desktop{background-color:rgba(0,0,0,0);margin-bottom:0;padding-bottom:0}}.group-news__links{display:flex;justify-content:flex-start}@media(min-width: 768px){.group-news__links{justify-content:flex-end}}.news-archive .hds-pagination-container{max-width:860px}.unit__ontologyword-details h5{margin-bottom:16px}.unit__ontologyword-details__schoolyear{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word;--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:var(--line-height);display:block;padding-top:16px;margin-top:16px}@media(min-width: 992px){.unit__ontologyword-details__schoolyear{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.unit__ontologyword-details-row{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-bottom:16px}.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);align-items:flex-start;display:flex;margin-bottom:8px}@media(min-width: 992px){.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}} +.unit.unit--high-school-card,.unit.unit--vocational-school-card{margin-top:24px}@media(min-width: 576px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{padding-left:24px;width:50%}}@media(min-width: 992px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{width:33.3333%}}.unit.unit--high-school-card:first-child,.unit.unit--vocational-school-card:first-child{margin-top:0}@media(min-width: 576px){.unit.unit--high-school-card:nth-child(-n+2),.unit.unit--vocational-school-card:nth-child(-n+2){margin-top:0}}@media(min-width: 992px){.unit.unit--high-school-card:nth-child(-n+3),.unit.unit--vocational-school-card:nth-child(-n+3){margin-top:0}}.unit.unit--high-school-card .unit__link,.unit.unit--vocational-school-card .unit__link{background-color:#fff;height:100%;display:block;text-decoration:none}.unit.unit--high-school-card .unit__link:hover .unit__title,.unit.unit--vocational-school-card .unit__link:hover .unit__title{text-decoration:underline}.unit.unit--high-school-card .unit__link:hover .unit__arrow,.unit.unit--vocational-school-card .unit__link:hover .unit__arrow{padding-left:16px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{margin-top:0}.unit.unit--high-school-card .unit__image,.unit.unit--vocational-school-card .unit__image{margin-left:0;margin-right:0}.unit.unit--high-school-card .unit__text,.unit.unit--vocational-school-card .unit__text{padding:24px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{font-size:1.5rem;line-height:1.75rem;font-weight:500;margin-bottom:0}.unit.unit--high-school-card .unit__info-row,.unit.unit--vocational-school-card .unit__info-row{margin-top:8px}.unit.unit--high-school-card .unit__info-row p,.unit.unit--vocational-school-card .unit__info-row p{margin:0}.unit.unit--high-school-card .unit__info-row .address,.unit.unit--vocational-school-card .unit__info-row .address{display:inline;margin-top:0}.unit.unit--high-school-card .unit__info-row .address .address-line1::after,.unit.unit--high-school-card .unit__info-row .address .address-line2::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line1::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line2::after{content:","}.unit.unit--high-school-card .unit__short-desc,.unit.unit--vocational-school-card .unit__short-desc{font-size:1.125rem;line-height:1.75rem;margin-top:16px}.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{display:block;line-height:0;margin-top:16px;margin-left:-4px;padding-left:0;transition:all .3s;width:48px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{margin-left:-7px}}.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 32px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 48px}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form,.unit-search--vocational-school .views--unit-search .views-exposed-form{align-items:flex-end;grid-column-gap:24px;-moz-column-gap:24px;column-gap:24px;display:grid;grid-template-areas:"filter filter filter" "submit . .";grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;grid-row-gap:32px;row-gap:32px}}.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item{margin-bottom:32px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item{margin-bottom:0;width:100%}}.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{grid-area:submit;width:100%}.unit-search--high-school .views--unit-search .views-exposed-form .form-submit,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-submit{margin-top:0;max-width:280px;min-width:44px;width:100%}.unit-search--high-school .views--unit-search .views-exposed-form label,.unit-search--vocational-school .views--unit-search .views-exposed-form label{display:block;font-weight:500;margin-bottom:4px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form,.unit-search--playground-search .bef-exposed-form,.unit-search--after-school-activity-search .bef-exposed-form{position:relative}}.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{margin-bottom:0;margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item,.unit-search--playground-search .bef-exposed-form>.form-item,.unit-search--after-school-activity-search .bef-exposed-form>.form-item{width:auto}}.unit-search--daycare-search .bef-exposed-form>.form-item:first-child,.unit-search--playground-search .bef-exposed-form>.form-item:first-child,.unit-search--after-school-activity-search .bef-exposed-form>.form-item:first-child{margin-top:0}.unit-search--daycare-search .fieldgroup,.unit-search--playground-search .fieldgroup,.unit-search--after-school-activity-search .fieldgroup{margin-bottom:0;margin-left:0;margin-right:0}.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{display:flex;flex-wrap:wrap;justify-content:flex-start}@media(min-width: 768px){.unit-search--daycare-search .bef-checkboxes,.unit-search--playground-search .bef-checkboxes,.unit-search--after-school-activity-search .bef-checkboxes{margin-bottom:16px}}.unit-search--daycare-search .bef-checkboxes .form-item,.unit-search--playground-search .bef-checkboxes .form-item,.unit-search--after-school-activity-search .bef-checkboxes .form-item{margin-bottom:0;margin-right:24px;margin-top:16px;width:auto}.unit-search--daycare-search .form-actions,.unit-search--playground-search .form-actions,.unit-search--after-school-activity-search .form-actions{margin-top:16px;width:100%}.unit-search--daycare-search .form-actions .form-submit,.unit-search--playground-search .form-actions .form-submit,.unit-search--after-school-activity-search .form-actions .form-submit{display:inline-flex;margin-top:16px;max-width:280px;min-width:44px;width:100%}.has-navigation .component--unit-search{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}@media(min-width: 992px){.has-navigation .component--unit-search{margin-left:0;margin-right:0}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:0}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:-24px}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px;padding-left:0;width:100%}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}.comprehensive-school__instruction-language::after{content:", "}.comprehensive-school__instruction-language:last-child::after{content:""}.hero-wrapper.has-first-gray-bg-block--desktop{background-color:#f7f7f8;margin-bottom:-64px;padding-bottom:48px}@media(min-width: 992px){.hero-wrapper.has-first-gray-bg-block--desktop{background-color:rgba(0,0,0,0);margin-bottom:0;padding-bottom:0}}.group-news__links{display:flex;justify-content:flex-start}@media(min-width: 768px){.group-news__links{justify-content:flex-end}}.news-archive .hds-pagination-container{max-width:860px}.unit__ontologyword-details h5{margin-bottom:16px}.unit__ontologyword-details__schoolyear{-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word;--line-height: 1.3;font-size:1.25rem;font-weight:500;line-height:var(--line-height);display:block;padding-top:16px;margin-top:16px}@media(min-width: 992px){.unit__ontologyword-details__schoolyear{--line-height: 1.1666666667;font-size:1.5rem;font-weight:500}}.unit__ontologyword-details-row{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-bottom:16px}.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);align-items:flex-start;display:flex;margin-bottom:8px}@media(min-width: 992px){.unit__ontologyword-details-row .unit__ontologyword-details-row__label{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}} diff --git a/public/themes/custom/hdbt_subtheme/package-lock.json b/public/themes/custom/hdbt_subtheme/package-lock.json index 5591509e..37d46804 100644 --- a/public/themes/custom/hdbt_subtheme/package-lock.json +++ b/public/themes/custom/hdbt_subtheme/package-lock.json @@ -3343,9 +3343,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==", + "version": "1.0.30001577", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001577.tgz", + "integrity": "sha512-rs2ZygrG1PNXMfmncM0B5H1hndY5ZCC9b5TkFaVNfZ+AUlyqcMyVIQtc3fsezi0NUCk5XZfDf9WS6WxMxnfdrg==", "funding": [ { "type": "opencollective", @@ -13196,9 +13196,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==" + "version": "1.0.30001577", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001577.tgz", + "integrity": "sha512-rs2ZygrG1PNXMfmncM0B5H1hndY5ZCC9b5TkFaVNfZ+AUlyqcMyVIQtc3fsezi0NUCk5XZfDf9WS6WxMxnfdrg==" }, "chalk": { "version": "2.4.2", diff --git a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss index 16fd366d..03c7320a 100644 --- a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss +++ b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss @@ -1,34 +1,42 @@ -$card_spacing: $spacing-and-half; +.unit-search--high-school .views--unit-search .views-exposed-form, +.unit-search--vocational-school .views--unit-search .views-exposed-form { + @include breakpoint($breakpoint-m) { + align-items: flex-end; + column-gap: $spacing-and-half; + display: grid; + grid-template-areas: + 'filter filter filter' + 'submit . .'; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: auto auto; + row-gap: $spacing-double; + } + + .form-item { + margin-bottom: $spacing-double; -.unit-search--high-school .views--unit-search, -.unit-search--vocational-school .views--unit-search { - .views-exposed-form { @include breakpoint($breakpoint-m) { - margin-left: -$spacing-and-half; + margin-bottom: 0; + width: 100%; } + } - .form-item, - .form-actions { - margin-bottom: $spacing-double; - - @include breakpoint($breakpoint-m) { - margin-bottom: 0; - padding-left: $spacing-and-half; - width: 25%; - } - } + .form-actions { + grid-area: submit; + width: 100%; + } - .form-actions .form-submit { - @include breakpoint($breakpoint-m) { - margin-left: 0; - } - } + .form-submit { + margin-top: 0; + max-width: 280px; // Max-width for button from hds/designs. + min-width: 44px; // Min-width for button from hds/designs. + width: 100%; + } - label { - display: block; - font-weight: 500; - margin-bottom: $spacing-quarter; - } + label { + display: block; + font-weight: 500; + margin-bottom: $spacing-quarter; } } @@ -52,10 +60,6 @@ $card_spacing: $spacing-and-half; // Sort by distance to an address &:first-child { margin-top: 0; - @include breakpoint($breakpoint-m) { - margin-right: 30%; - width: 70%; - } } } } @@ -71,6 +75,7 @@ $card_spacing: $spacing-and-half; display: flex; flex-wrap: wrap; justify-content: flex-start; + // Compensate the checkboxes height so that it matches the select height. @include breakpoint($breakpoint-m) { margin-bottom: $spacing; @@ -86,13 +91,15 @@ $card_spacing: $spacing-and-half; // Submit button .form-actions { - margin-top: $spacing-and-half; + margin-top: $spacing; + width: 100%; - // The submit button needs to be next to the sort by distance element in the designs. - @include breakpoint($breakpoint-m) { - position: absolute; - right: 0; - top: 4px; // There is 4px gap since the element is slightly shorter than the sort by distance element. + .form-submit { + display: inline-flex; + margin-top: $spacing; + max-width: 280px; // Max-width for button from hds/designs. + min-width: 44px; // Min-width for button from hds/designs. + width: 100%; } } } @@ -111,29 +118,27 @@ $card_spacing: $spacing-and-half; // If there is sidebar on the basic page and the high school search is on the // upper content of the site the filters can't fit so they need to be adjusted. -.has-sidebar .components--upper .unit-search--high-school .views--unit-search { - .views-exposed-form { +.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form { + @include breakpoint($breakpoint-l) { + margin-left: 0; + } + + @include breakpoint($breakpoint-xl) { + margin-left: -$spacing-and-half; + } + + .form-item, + .form-actions { @include breakpoint($breakpoint-l) { - margin-left: 0; + margin-bottom: $spacing-double; + padding-left: 0; + width: 100%; } @include breakpoint($breakpoint-xl) { - margin-left: -$spacing-and-half; - } - - .form-item, - .form-actions { - @include breakpoint($breakpoint-l) { - margin-bottom: $spacing-double; - padding-left: 0; - width: 100%; - } - - @include breakpoint($breakpoint-xl) { - margin-bottom: 0; - padding-left: $spacing-and-half; - width: 25%; - } + margin-bottom: 0; + padding-left: $spacing-and-half; + width: 25%; } } } From 4cac7266bd75ec46ec4e416e17878c37156d067f Mon Sep 17 00:00:00 2001 From: Tero Elonen Date: Mon, 22 Jan 2024 16:29:57 +0200 Subject: [PATCH 2/2] UHF-9107: Change the order of filters on daycare search according to Ninas request --- conf/cmi/views.view.daycare_search.yml | 110 +++++++++++++------------ 1 file changed, 56 insertions(+), 54 deletions(-) diff --git a/conf/cmi/views.view.daycare_search.yml b/conf/cmi/views.view.daycare_search.yml index ce98ebfb..afce289f 100644 --- a/conf/cmi/views.view.daycare_search.yml +++ b/conf/cmi/views.view.daycare_search.yml @@ -416,60 +416,6 @@ display: default_group: All default_group_multiple: { } group_items: { } - tpr_provided_languages: - id: tpr_provided_languages - table: tpr_unit__provided_languages - field: tpr_provided_languages - relationship: none - group_type: group - admin_label: '' - entity_type: tpr_unit - plugin_id: tpr_provided_languages - operator: in - value: - fi: fi - sv: sv - se: se - group: 1 - exposed: true - expose: - operator_id: tpr_provided_languages_op - label: 'Choose the operating language' - description: '' - use_operator: false - operator: tpr_provided_languages_op - operator_limit_selection: false - operator_list: { } - identifier: languages - required: false - remember: false - multiple: true - remember_roles: - authenticated: authenticated - anonymous: '0' - read_only: '0' - daycare_editor: '0' - playground_editor: '0' - comprehensive_school_editor: '0' - school_editor: '0' - content_producer: '0' - editor: '0' - admin: '0' - debug_api: '0' - super_administrator: '0' - reduce: true - is_grouped: false - group_info: - label: '' - description: '' - identifier: '' - optional: true - widget: select - multiple: false - remember: false - default_group: All - default_group_multiple: { } - group_items: { } field_categories_value: id: field_categories_value table: tpr_unit__field_categories @@ -529,6 +475,60 @@ display: title: 'Playgroup clubs' operator: '=' value: 'club activities (child day care play activities)' + tpr_provided_languages: + id: tpr_provided_languages + table: tpr_unit__provided_languages + field: tpr_provided_languages + relationship: none + group_type: group + admin_label: '' + entity_type: tpr_unit + plugin_id: tpr_provided_languages + operator: in + value: + fi: fi + sv: sv + se: se + group: 1 + exposed: true + expose: + operator_id: tpr_provided_languages_op + label: 'Choose the operating language' + description: '' + use_operator: false + operator: tpr_provided_languages_op + operator_limit_selection: false + operator_list: { } + identifier: languages + required: false + remember: false + multiple: true + remember_roles: + authenticated: authenticated + anonymous: '0' + read_only: '0' + daycare_editor: '0' + playground_editor: '0' + comprehensive_school_editor: '0' + school_editor: '0' + content_producer: '0' + editor: '0' + admin: '0' + debug_api: '0' + super_administrator: '0' + reduce: true + is_grouped: false + group_info: + label: '' + description: '' + identifier: '' + optional: true + widget: select + multiple: false + remember: false + default_group: All + default_group_multiple: { } + group_items: { } filter_groups: operator: AND groups: @@ -593,6 +593,7 @@ display: - user - user.permissions tags: + - 'config:core.entity_view_display.tpr_unit.tpr_unit.after_school_activity_card' - 'config:core.entity_view_display.tpr_unit.tpr_unit.comprehensive_school_card' - 'config:core.entity_view_display.tpr_unit.tpr_unit.default' - 'config:core.entity_view_display.tpr_unit.tpr_unit.high_school_card' @@ -617,6 +618,7 @@ display: - user - user.permissions tags: + - 'config:core.entity_view_display.tpr_unit.tpr_unit.after_school_activity_card' - 'config:core.entity_view_display.tpr_unit.tpr_unit.comprehensive_school_card' - 'config:core.entity_view_display.tpr_unit.tpr_unit.default' - 'config:core.entity_view_display.tpr_unit.tpr_unit.high_school_card'