From f6f615506fad7c81e2ef136090f6842beb4a2543 Mon Sep 17 00:00:00 2001 From: Tero Elonen Date: Wed, 22 Jan 2025 11:27:42 +0200 Subject: [PATCH] UHF-11098: Fix layout issues on job listing search after hds 4.1.0 update --- public/themes/custom/hdbt_subtheme/dist/css/styles.min.css | 2 +- public/themes/custom/hdbt_subtheme/package-lock.json | 6 +++--- .../scss/06_components/paragraphs/_job-listing-search.scss | 4 ++++ 3 files changed, 8 insertions(+), 4 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 99808543..1359e64a 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 @@ -.job-listing__organization-name{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);display:flex;margin-top:16px}@media(min-width: 768px){.job-listing__organization-name{margin-top:24px}}.organization{display:flex;margin-right:8px;position:relative}.organization::after{content:","}.organization:last-child{margin-right:0}.organization:last-child::after{display:none}.job-listing__item{padding-left:16px;padding-right:16px}@media(min-width: 768px){.job-listing__item{padding-left:32px;padding-right:32px}}.job-listing__link-wrapper{margin-top:16px}@media(min-width: 768px){.job-listing__link-wrapper{margin-top:24px}}.job-listing__link-wrapper.job-listing__link-wrapper--last{margin-top:32px}@media(min-width: 768px){.job-listing__link-wrapper.job-listing__link-wrapper--last{margin-top:48px}}.job-listing__link{width:100%}@media(min-width: 768px){.job-listing__link{width:auto}}.job-listing__job-description{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-top:16px}@media(min-width: 768px){.job-listing__job-description{margin-top:48px}}.job-listing__job-description p:first-child{margin-top:0}.job-listing__salary-class__content{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height)}.job-listing__sidebar{background-color:var(--hdbt-color-palette--secondary)}.job-listing__organization-information,.job-listing__city-description{padding:24px}.job-listing__image img{display:block;height:auto;max-width:100%;overflow:hidden}.job-listing__image .image-placeholder{padding-bottom:66.67%}.job-listing__organization,.job-listing__city-description-title{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);letter-spacing:.0125rem;margin-top:0}@media(min-width: 992px){.job-listing__organization,.job-listing__city-description-title{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.job-listing__organization-description,.job-listing__city-description-text{--line-height: 1.5;font-size:1rem;font-weight:400;line-height:var(--line-height);margin-top:8px}.job-listing__organization-description p:first-child,.job-listing__city-description-text p:first-child{margin-top:0}.node--type-job-listing .component--remote-video{margin-top:32px}@media(min-width: 992px){.node--type-job-listing .component--remote-video{margin-top:48px}}.node--type-job-listing.node--view-mode-full .content-tags{margin-top:24px}.block--of-interest{background-color:#e6e6e6;padding:80px 0;margin-top:64px;margin-bottom:calc((50px + 48px)*-1)}.block--of-interest .block--of-interest__content-container{max-width:1296px;padding-left:16px;padding-right:16px;margin:auto}@media(min-width: 768px){.block--of-interest .block--of-interest__content-container{max-width:1328px}}@media(min-width: 768px){.block--of-interest .block--of-interest__content-container{padding-left:32px;padding-right:32px}}.block--of-interest h2{margin-bottom:48px;margin-top:0}.block--of-interest .block--of-interest__more-link{margin-top:48px}.component--job-listing-search{background-color:#f7f7f8}.layout-main-wrapper>*:last-child .component--job-listing-search:last-child{margin-bottom:-115px;padding-bottom:55px}.job-listing-search__result-actions{align-items:flex-end;display:flex;justify-content:space-between}.component--job-listing-search .component__container{padding-bottom:32px;padding-top:32px}@media(min-width: 768px){.component--job-listing-search .component__container{padding-bottom:64px;padding-top:64px}}.job-listing-search__sort{min-width:283px}.job-listing-search__result--list{margin-top:24px}@media(min-width: 768px){.job-listing-search__result--list{margin-top:32px}}.job-search-form{margin-bottom:32px}.job-search-form__title{margin-bottom:32px}@media(min-width: 992px){.job-search-form__dropdowns__upper{margin-left:-12px;margin-right:-12px;display:flex}.job-search-form__dropdowns__upper>*{margin-left:12px;margin-right:12px}}.job-search-form__dropdown li+li{margin-top:0}@media(min-width: 992px){.job-search-form__dropdown--upper{width:50%}}.job-search-form__filter{margin-bottom:16px;width:100%}@media(min-width: 992px){.job-search-form__filter{margin-bottom:24px}}.job-search-form__checkboxes{border:none;margin-bottom:16px;padding:0}@media(min-width: 992px){.job-search-form__checkboxes{display:flex}}fieldset .job-search-form__checkbox{--background-selected: var(--hdbt-color-black)}fieldset .job-search-form__checkbox:not(:first-of-type){margin-top:32px}@media(min-width: 992px){fieldset .job-search-form__checkbox:not(:first-of-type){margin-left:16px;margin-top:0}}.job-search-form__checkboxes-legend,.job-search__no-results__heading{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);letter-spacing:.0125rem;margin-bottom:16px}@media(min-width: 992px){.job-search-form__checkboxes-legend,.job-search__no-results__heading{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.job-search-form__selections-container{list-style-type:none}button.job-search-form__remove-selection-button:not(:disabled){background-color:rgba(0,0,0,0);border:1px solid #000;border-radius:48px;padding:12px 20px 12px;--color-hover-focus: var(--hdbt-text-color);color:var(--hdbt-color-black)}button.job-search-form__remove-selection-button:not(:disabled):hover,button.job-search-form__remove-selection-button:not(:disabled):active{background-color:#000;border-color:#000;color:#fff}button.job-search-form__remove-selection-button:not(:disabled):focus,button.job-search-form__remove-selection-button:not(:disabled):active{border-color:#000;outline:2px solid #000;outline-offset:2px}.job-search-form__remove-selection-button span{padding:0}.job-search-form__selections-wrapper button.job-search-form__remove-selection-button>div{margin-right:0}.job-search-form__clear-all{margin-top:0}.job-search-form__clear-all .job-search-form__clear-all-button{--background-color-hover: transparent;--background-color-focus: transparent;--background-color-hover-focus: transparent;--border-color-hover: var(--hdbt-color-black);--border-color-focus: var(--hdbt-color-black);--border-color-hover-focus: var(--hdbt-color-black);--color: var(--hdbt-color-black);--color-hover: var(--hdbt-color-black);--color-focus: var(--hdbt-color-black);--color-hover-focus: var(--hdbt-color-black);--focus-outline-color: var(--hdbt-color-black)}.job-search-form__search-monitor{margin-bottom:32px}.job-search-form__search-monitor div[role=heading]{flex:0 1 auto}.job-search-form__search-monitor{background-color:var(--color-fog-light);padding:32px}.job-search-form__search-monitor__heading{margin-top:0}.job-search-form__search-monitor__heading.focus-visible{outline:2px solid #000;outline-offset:8px}.job-search-form__search-monitor__heading:focus-visible{outline:2px solid #000;outline-offset:8px}.job-search-form__search-monitor__content>p{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-top:24px}.job-search-form__search-monitor__content[aria-hidden=true]{display:none}.job-search-form__search-monitor__content__heading{margin-top:32px}.job-search-form__search-monitor__terms-link{--line-height: 1.5;font-size:1rem;font-weight:400;line-height:var(--line-height)}.job-search-form__search-monitor__terms-link.focus-visible{outline:2px solid #000;outline-offset:4px}.job-search-form__search-monitor__terms-link:focus-visible{outline:2px solid #000;outline-offset:4px}.job-search-form__search-monitor__terms::after{content:"*";margin-left:4px}.job-search-form__search-monitor__error{margin-top:32px}.job-search-form__search-monitor__error>div.focus-visible{outline:3px solid #000;outline-offset:8px}.job-search-form__search-monitor__error>div:focus-visible{outline:3px solid #000;outline-offset:8px}.hakuvahti-confirmation .components{margin-top:24px}.hakuvahti-confirmation p{--line-height: 1.5;font-size:1.25rem;font-weight:400;line-height:var(--line-height)}@media(min-width: 992px){.hakuvahti-confirmation p{--line-height: 1.5;font-size:1.375rem;font-weight:400}}.hakuvahti-confirmation p:first-child{margin-top:0}.hakuvahti-confirmation .page-divider{padding-left:0}.hakuvahti-confirmation .form-submit{margin-top:32px}@media(min-width: 768px){.hakuvahti-confirmation .form-submit{margin-top:64px}} +.job-listing__organization-name{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);display:flex;margin-top:16px}@media(min-width: 768px){.job-listing__organization-name{margin-top:24px}}.organization{display:flex;margin-right:8px;position:relative}.organization::after{content:","}.organization:last-child{margin-right:0}.organization:last-child::after{display:none}.job-listing__item{padding-left:16px;padding-right:16px}@media(min-width: 768px){.job-listing__item{padding-left:32px;padding-right:32px}}.job-listing__link-wrapper{margin-top:16px}@media(min-width: 768px){.job-listing__link-wrapper{margin-top:24px}}.job-listing__link-wrapper.job-listing__link-wrapper--last{margin-top:32px}@media(min-width: 768px){.job-listing__link-wrapper.job-listing__link-wrapper--last{margin-top:48px}}.job-listing__link{width:100%}@media(min-width: 768px){.job-listing__link{width:auto}}.job-listing__job-description{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-top:16px}@media(min-width: 768px){.job-listing__job-description{margin-top:48px}}.job-listing__job-description p:first-child{margin-top:0}.job-listing__salary-class__content{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height)}.job-listing__sidebar{background-color:var(--hdbt-color-palette--secondary)}.job-listing__organization-information,.job-listing__city-description{padding:24px}.job-listing__image img{display:block;height:auto;max-width:100%;overflow:hidden}.job-listing__image .image-placeholder{padding-bottom:66.67%}.job-listing__organization,.job-listing__city-description-title{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);letter-spacing:.0125rem;margin-top:0}@media(min-width: 992px){.job-listing__organization,.job-listing__city-description-title{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.job-listing__organization-description,.job-listing__city-description-text{--line-height: 1.5;font-size:1rem;font-weight:400;line-height:var(--line-height);margin-top:8px}.job-listing__organization-description p:first-child,.job-listing__city-description-text p:first-child{margin-top:0}.node--type-job-listing .component--remote-video{margin-top:32px}@media(min-width: 992px){.node--type-job-listing .component--remote-video{margin-top:48px}}.node--type-job-listing.node--view-mode-full .content-tags{margin-top:24px}.block--of-interest{background-color:#e6e6e6;padding:80px 0;margin-top:64px;margin-bottom:calc((50px + 48px)*-1)}.block--of-interest .block--of-interest__content-container{max-width:1296px;padding-left:16px;padding-right:16px;margin:auto}@media(min-width: 768px){.block--of-interest .block--of-interest__content-container{max-width:1328px}}@media(min-width: 768px){.block--of-interest .block--of-interest__content-container{padding-left:32px;padding-right:32px}}.block--of-interest h2{margin-bottom:48px;margin-top:0}.block--of-interest .block--of-interest__more-link{margin-top:48px}.component--job-listing-search{background-color:#f7f7f8}.layout-main-wrapper>*:last-child .component--job-listing-search:last-child{margin-bottom:-115px;padding-bottom:55px}.job-listing-search__result-actions{align-items:flex-end;display:flex;justify-content:space-between}.component--job-listing-search .component__container{padding-bottom:32px;padding-top:32px}@media(min-width: 768px){.component--job-listing-search .component__container{padding-bottom:64px;padding-top:64px}}.job-listing-search__sort{min-width:283px}.job-listing-search__result--list{margin-top:24px}@media(min-width: 768px){.job-listing-search__result--list{margin-top:32px}}.job-search-form{margin-bottom:32px}.job-search-form__title{margin-bottom:32px}@media(min-width: 992px){.job-search-form__dropdowns__upper{margin-left:-12px;margin-right:-12px;display:flex}.job-search-form__dropdowns__upper>*{margin-left:12px;margin-right:12px}}.job-search-form__dropdown li+li{margin-top:0}@media(min-width: 992px){.job-search-form__dropdown--upper{width:50%}}.job-search-form__dropdown--upper .job-search-form__dropdown{max-width:none;max-width:initial}.job-search-form__filter{margin-bottom:16px;width:100%}@media(min-width: 992px){.job-search-form__filter{margin-bottom:24px}}.job-search-form__checkboxes{border:none;margin-bottom:16px;padding:0}@media(min-width: 992px){.job-search-form__checkboxes{display:flex}}fieldset .job-search-form__checkbox{--background-selected: var(--hdbt-color-black)}fieldset .job-search-form__checkbox:not(:first-of-type){margin-top:32px}@media(min-width: 992px){fieldset .job-search-form__checkbox:not(:first-of-type){margin-left:16px;margin-top:0}}.job-search-form__checkboxes-legend,.job-search__no-results__heading{--line-height: 1.5;font-size:1rem;font-weight:700;line-height:var(--line-height);letter-spacing:.0125rem;margin-bottom:16px}@media(min-width: 992px){.job-search-form__checkboxes-legend,.job-search__no-results__heading{--line-height: 1.5555555556;font-size:1.125rem;font-weight:700}}.job-search-form__selections-container{list-style-type:none}button.job-search-form__remove-selection-button:not(:disabled){background-color:rgba(0,0,0,0);border:1px solid #000;border-radius:48px;padding:12px 20px 12px;--color-hover-focus: var(--hdbt-text-color);color:var(--hdbt-color-black)}button.job-search-form__remove-selection-button:not(:disabled):hover,button.job-search-form__remove-selection-button:not(:disabled):active{background-color:#000;border-color:#000;color:#fff}button.job-search-form__remove-selection-button:not(:disabled):focus,button.job-search-form__remove-selection-button:not(:disabled):active{border-color:#000;outline:2px solid #000;outline-offset:2px}.job-search-form__remove-selection-button span{padding:0}.job-search-form__selections-wrapper button.job-search-form__remove-selection-button>div{margin-right:0}.job-search-form__clear-all{margin-top:0}.job-search-form__clear-all .job-search-form__clear-all-button{--background-color-hover: transparent;--background-color-focus: transparent;--background-color-hover-focus: transparent;--border-color-hover: var(--hdbt-color-black);--border-color-focus: var(--hdbt-color-black);--border-color-hover-focus: var(--hdbt-color-black);--color: var(--hdbt-color-black);--color-hover: var(--hdbt-color-black);--color-focus: var(--hdbt-color-black);--color-hover-focus: var(--hdbt-color-black);--focus-outline-color: var(--hdbt-color-black)}.job-search-form__search-monitor{margin-bottom:32px}.job-search-form__search-monitor div[role=heading]{flex:0 1 auto}.job-search-form__search-monitor{background-color:var(--color-fog-light);padding:32px}.job-search-form__search-monitor__heading{margin-top:0}.job-search-form__search-monitor__heading.focus-visible{outline:2px solid #000;outline-offset:8px}.job-search-form__search-monitor__heading:focus-visible{outline:2px solid #000;outline-offset:8px}.job-search-form__search-monitor__content>p{--line-height: 1.5555555556;font-size:1.125rem;font-weight:400;line-height:var(--line-height);margin-top:24px}.job-search-form__search-monitor__content[aria-hidden=true]{display:none}.job-search-form__search-monitor__content__heading{margin-top:32px}.job-search-form__search-monitor__terms-link{--line-height: 1.5;font-size:1rem;font-weight:400;line-height:var(--line-height)}.job-search-form__search-monitor__terms-link.focus-visible{outline:2px solid #000;outline-offset:4px}.job-search-form__search-monitor__terms-link:focus-visible{outline:2px solid #000;outline-offset:4px}.job-search-form__search-monitor__terms::after{content:"*";margin-left:4px}.job-search-form__search-monitor__error{margin-top:32px}.job-search-form__search-monitor__error>div.focus-visible{outline:3px solid #000;outline-offset:8px}.job-search-form__search-monitor__error>div:focus-visible{outline:3px solid #000;outline-offset:8px}.hakuvahti-confirmation .components{margin-top:24px}.hakuvahti-confirmation p{--line-height: 1.5;font-size:1.25rem;font-weight:400;line-height:var(--line-height)}@media(min-width: 992px){.hakuvahti-confirmation p{--line-height: 1.5;font-size:1.375rem;font-weight:400}}.hakuvahti-confirmation p:first-child{margin-top:0}.hakuvahti-confirmation .page-divider{padding-left:0}.hakuvahti-confirmation .form-submit{margin-top:32px}@media(min-width: 768px){.hakuvahti-confirmation .form-submit{margin-top:64px}} diff --git a/public/themes/custom/hdbt_subtheme/package-lock.json b/public/themes/custom/hdbt_subtheme/package-lock.json index d59e785a..55e68363 100644 --- a/public/themes/custom/hdbt_subtheme/package-lock.json +++ b/public/themes/custom/hdbt_subtheme/package-lock.json @@ -3344,9 +3344,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001692", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz", - "integrity": "sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==", + "version": "1.0.30001695", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz", + "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==", "funding": [ { "type": "opencollective", diff --git a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_job-listing-search.scss b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_job-listing-search.scss index d9d2b812..84cb7c97 100644 --- a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_job-listing-search.scss +++ b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_job-listing-search.scss @@ -63,6 +63,10 @@ $sort-minimum-width: 283px; @include breakpoint($breakpoint-l) { width: 50%; } + .job-search-form__dropdown { + // HDS has 420px max-width set for selects. This is OK when the form is limited to 860px width but not here. + max-width: unset; + } } .job-search-form__filter {