From 2bcd76b469fbaec017e6f7716f43394383859c7c Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Tue, 19 Sep 2023 12:47:22 +0100 Subject: [PATCH 1/7] Ready to make a difference block Fixes #16 --- blocks/career-apply/career-apply.css | 73 ++++++++++++++++++++++++++++ blocks/career-apply/career-apply.js | 38 +++++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 blocks/career-apply/career-apply.css create mode 100644 blocks/career-apply/career-apply.js diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css new file mode 100644 index 00000000..801dd20e --- /dev/null +++ b/blocks/career-apply/career-apply.css @@ -0,0 +1,73 @@ +.career-apply-wrapper { + background-color: var(--primary); +} + +.career-apply { + color: var(--white); + text-align: left; + max-width: unset; + padding-inline: 16px; + padding-block: 48px; +} + +.career-apply h2 { + color: var(--white); + font-size: 28px; + margin-bottom: 16px; +} + +.career-apply p { + line-height: 24px; + margin-bottom: 24px; +} + +.career-apply .button-container { + display: inline-flex; + flex-direction: column; +} + +.career-apply a { + margin: 8px 0; +} + +.career-apply a.button.primary.linkedin { + background-color: var(--primary); + border: 1px solid white; + padding-left: 40px; +} + +.career-apply span.icon-linkedin { + margin-left: 10px; + margin-right: 16px; + height: 32px; + width: 34px; +} + +.career-apply span.icon-linkedin svg { + /* This is needed as otherwise the icon is shown twice */ + display: none; +} + +@media (min-width: 62rem) { + .career-apply { + max-width: 720px; + text-align: center; + padding-block: 80px; + } + + .career-apply h2 { + font-size: var(--heading-font-size-mxl); + } + + .career-apply p { + margin-bottom: 50px; + } + + .career-apply .button-container { + flex-direction: row; + } + + .career-apply a { + margin: 0 8px; + } +} \ No newline at end of file diff --git a/blocks/career-apply/career-apply.js b/blocks/career-apply/career-apply.js new file mode 100644 index 00000000..93d1c259 --- /dev/null +++ b/blocks/career-apply/career-apply.js @@ -0,0 +1,38 @@ +import { getLanguage } from '../../scripts/scripts.js'; +import { decorateIcons, fetchPlaceholders } from '../../scripts/lib-franklin.js'; + +export default async function decorate(block) { + const placeholders = await fetchPlaceholders(getLanguage()); + + const section = document.querySelector('.section.career-apply-container'); + if (section) { + section.classList.add('full-width'); + } + + const title = document.createElement('h2'); + title.innerText = placeholders['career-apply-title']; + block.appendChild(title); + + const msg = document.createElement('p'); + msg.innerText = placeholders['career-apply-msg']; + block.appendChild(msg); + + const buttonBar = document.createElement('p'); + buttonBar.classList.add('button-container'); + const search = document.createElement('a'); + search.innerText = placeholders['career-apply-search']; + search.classList.add('button', 'primary'); + search.href = '#'; + buttonBar.appendChild(search); + + const linkedin = document.createElement('a'); + linkedin.innerText = placeholders['career-apply-linkedin']; + linkedin.classList.add('button', 'primary', 'linkedin'); + linkedin.href = '#'; + const sprite = document.createElement('span'); + sprite.classList.add('icon', 'icon-linkedin'); + linkedin.appendChild(sprite); + decorateIcons(linkedin); + buttonBar.append(linkedin); + block.appendChild(buttonBar); +} From cfe182cf2116103a7b61916ac8e49f79c5fbd59d Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Wed, 20 Sep 2023 11:56:25 +0100 Subject: [PATCH 2/7] Pick up button links from placeholders --- blocks/career-apply/career-apply.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/career-apply/career-apply.js b/blocks/career-apply/career-apply.js index 93d1c259..1dd5d881 100644 --- a/blocks/career-apply/career-apply.js +++ b/blocks/career-apply/career-apply.js @@ -22,13 +22,13 @@ export default async function decorate(block) { const search = document.createElement('a'); search.innerText = placeholders['career-apply-search']; search.classList.add('button', 'primary'); - search.href = '#'; + search.href = placeholders['career-apply-search-href']; buttonBar.appendChild(search); const linkedin = document.createElement('a'); linkedin.innerText = placeholders['career-apply-linkedin']; linkedin.classList.add('button', 'primary', 'linkedin'); - linkedin.href = '#'; + linkedin.href = placeholders['career-apply-linkedin-href']; const sprite = document.createElement('span'); sprite.classList.add('icon', 'icon-linkedin'); linkedin.appendChild(sprite); From c9f12d8aee3f77c1c195dc6ccbb0ced2406abe9c Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Wed, 20 Sep 2023 12:01:14 +0100 Subject: [PATCH 3/7] Add hover effect on career social button --- blocks/career-apply/career-apply.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css index 801dd20e..a28bb413 100644 --- a/blocks/career-apply/career-apply.css +++ b/blocks/career-apply/career-apply.css @@ -36,6 +36,10 @@ padding-left: 40px; } +.career-apply a.button.primary.linkedin:hover { + opacity: 0.7; +} + .career-apply span.icon-linkedin { margin-left: 10px; margin-right: 16px; From 71c528e57d3194ec7c880f6ead31c4e9d4bbfc57 Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Wed, 20 Sep 2023 12:08:18 +0100 Subject: [PATCH 4/7] Convert px to rem --- blocks/career-apply/career-apply.css | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css index a28bb413..74c7d965 100644 --- a/blocks/career-apply/career-apply.css +++ b/blocks/career-apply/career-apply.css @@ -6,19 +6,19 @@ color: var(--white); text-align: left; max-width: unset; - padding-inline: 16px; - padding-block: 48px; + padding-inline: 1rem; + padding-block: 3rem; } .career-apply h2 { color: var(--white); font-size: 28px; - margin-bottom: 16px; + margin-bottom: 1rem; } .career-apply p { line-height: 24px; - margin-bottom: 24px; + margin-bottom: 1.5rem; } .career-apply .button-container { @@ -27,13 +27,13 @@ } .career-apply a { - margin: 8px 0; + margin: 0.5rem 0; } .career-apply a.button.primary.linkedin { background-color: var(--primary); border: 1px solid white; - padding-left: 40px; + padding-left: 2.5rem; } .career-apply a.button.primary.linkedin:hover { @@ -41,10 +41,10 @@ } .career-apply span.icon-linkedin { - margin-left: 10px; - margin-right: 16px; - height: 32px; - width: 34px; + margin-left: 0.625rem; + margin-right: 1rem; + height: 2rem; + width: 2.125rem; } .career-apply span.icon-linkedin svg { @@ -54,9 +54,9 @@ @media (min-width: 62rem) { .career-apply { - max-width: 720px; + max-width: 34rem; text-align: center; - padding-block: 80px; + padding-block: 5rem; } .career-apply h2 { @@ -64,7 +64,7 @@ } .career-apply p { - margin-bottom: 50px; + margin-bottom: 3.125rem; } .career-apply .button-container { @@ -72,6 +72,6 @@ } .career-apply a { - margin: 0 8px; + margin: 0 0.5rem; } } \ No newline at end of file From 9cac667aadd110ef591872af56fe961074bc663c Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Wed, 20 Sep 2023 12:46:01 +0100 Subject: [PATCH 5/7] Fix incorrectly converted value --- blocks/career-apply/career-apply.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css index 74c7d965..e3803845 100644 --- a/blocks/career-apply/career-apply.css +++ b/blocks/career-apply/career-apply.css @@ -54,7 +54,7 @@ @media (min-width: 62rem) { .career-apply { - max-width: 34rem; + max-width: 45rem; text-align: center; padding-block: 5rem; } From 0dbdae4c94d998301443c3a2d5355064d720ab51 Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Wed, 20 Sep 2023 15:57:35 +0100 Subject: [PATCH 6/7] Fix rendering of icon on social career button --- blocks/career-apply/career-apply.css | 5 ----- blocks/career-apply/career-apply.js | 3 +-- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css index e3803845..a6052900 100644 --- a/blocks/career-apply/career-apply.css +++ b/blocks/career-apply/career-apply.css @@ -47,11 +47,6 @@ width: 2.125rem; } -.career-apply span.icon-linkedin svg { - /* This is needed as otherwise the icon is shown twice */ - display: none; -} - @media (min-width: 62rem) { .career-apply { max-width: 45rem; diff --git a/blocks/career-apply/career-apply.js b/blocks/career-apply/career-apply.js index 1dd5d881..d370117b 100644 --- a/blocks/career-apply/career-apply.js +++ b/blocks/career-apply/career-apply.js @@ -1,5 +1,5 @@ import { getLanguage } from '../../scripts/scripts.js'; -import { decorateIcons, fetchPlaceholders } from '../../scripts/lib-franklin.js'; +import { fetchPlaceholders } from '../../scripts/lib-franklin.js'; export default async function decorate(block) { const placeholders = await fetchPlaceholders(getLanguage()); @@ -32,7 +32,6 @@ export default async function decorate(block) { const sprite = document.createElement('span'); sprite.classList.add('icon', 'icon-linkedin'); linkedin.appendChild(sprite); - decorateIcons(linkedin); buttonBar.append(linkedin); block.appendChild(buttonBar); } From 5fec9356f6c2d90444dc865d37a4d285a157abc6 Mon Sep 17 00:00:00 2001 From: David Bosschaert Date: Thu, 21 Sep 2023 10:41:44 +0100 Subject: [PATCH 7/7] Remove unneccesary max-width setting --- blocks/career-apply/career-apply.css | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/career-apply/career-apply.css b/blocks/career-apply/career-apply.css index a6052900..4e85d5ae 100644 --- a/blocks/career-apply/career-apply.css +++ b/blocks/career-apply/career-apply.css @@ -5,7 +5,6 @@ .career-apply { color: var(--white); text-align: left; - max-width: unset; padding-inline: 1rem; padding-block: 3rem; }