From 164e819a53a2e7d76bda114e2a1f3e48641597bc Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Wed, 17 May 2023 11:12:44 +0530 Subject: [PATCH 1/9] 323 Applying solid colrs to the cards --- .../cards-solidcolors/cards-solidcolors.css | 287 ++++++++++++++++++ blocks/cards-solidcolors/cards-solidcolors.js | 35 +++ 2 files changed, 322 insertions(+) create mode 100644 blocks/cards-solidcolors/cards-solidcolors.css create mode 100644 blocks/cards-solidcolors/cards-solidcolors.js diff --git a/blocks/cards-solidcolors/cards-solidcolors.css b/blocks/cards-solidcolors/cards-solidcolors.css new file mode 100644 index 00000000..50e80a10 --- /dev/null +++ b/blocks/cards-solidcolors/cards-solidcolors.css @@ -0,0 +1,287 @@ +.cards-solidcolors-solidcolors > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: 1fr; +} + +.cards-solidcolors > ul > li { + padding: 28px; + height: 500px; +} + +/* cards-solidcolors side-by-side */ +.cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { + padding-left: 20px; + padding-right: 40px; + top: 5px; + color: white; + width: 85%; +} + +.cards.side-by-side > ul > li { + height: 380px; + display: block; +} + +/* cards-solidcolors side-by-side */ +.cards-solidcolors.side-by-side > ul > li a.button:any-link { + color: white; +} + +.cards-solidcolors.side-by-side > ul > li a.button:any-link:hover { + text-decoration: underline; + background: none; +} + +/* cards-solidcolors side-by-side */ +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h2, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 { + color: var(--c-white); +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 { + font-size: 30px; + margin-top: 130px; +} + +/* cards-solidcolors side-by-side */ +.cards-solidcolors.side-by-side > ul > li { + margin: 0; + padding: 0; + position: relative; + list-style: none; +} + +.cards-solidcolors.side-by-side > ul > li:hover { + cursor: pointer; +} + +.cards-solidcolors.side-by-side > ul > li:nth-last-child(2) > .cards-solidcolors-card-body { + padding-left: 20px; + padding-right: 40px; +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h2 a, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 a, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4 a, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 a { + color: var(--c-white); +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 a { + font-weight: 600; +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 a:hover, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4 a:hover, +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 a:hover{ + text-decoration: none; +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h2 { + font-size: 30px; + margin-top: 100px; + font-weight: 600; +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4 { + font-size: 18px; + margin-top: 0; +} + +.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 { + font-size: 13px; + margin-top: 10px; +} + +@media (min-width: 600px) { + /* cards-solidcolors side-by-side */ + .cards-solidcolors.side-by-side > ul { + list-style: none; + padding: 0; + display: flex; + flex-wrap: wrap; + } + + .cards-solidcolors.side-by-side > ul > li { + margin: 0; + padding: 0; + position: relative; + list-style: none; + flex: 0 0 50%; + } + + .cards-solidcolors.side-by-side > ul > li:last-child { + margin: 0; + padding: 0; + position: relative; + list-style: none; + flex: 0 0 100%; + height: 500px; + } + + .cards-solidcolors.side-by-side > ul > li:hover { + cursor: pointer; + } + + .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { + width: 260px; + } + + .cards-solidcolors.side-by-side > ul > li:nth-last-child(2) > .cards-solidcolors-card-body { + padding-left: 20px; + padding-right: 40px; + } + + .cards-solidcolors.side-by-side > ul > li:last-child > .cards-solidcolors-card-body { + width: 80%; + } + + .cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 { + font-size: 32px; + margin-top: 180px; + } +} + +@media (min-width: 750px) { + /* cards-solidcolors side-by-side */ + .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { + width: 320px; + } +} + +@media (min-width: 992px) { + /* cards-solidcolors side-by-side */ + .cards-solidcolors.side-by-side { + margin: 40px 0; + } + + .cards-solidcolors.side-by-side > ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + } + + .cards-solidcolors.side-by-side > ul > li { + margin: 0; + padding: 0; + position: relative; + list-style: none; + flex: 1; + transition: 1s; + } + + .cards-solidcolors.side-by-side > ul > li:last-child { + flex: 1; + transition: 1s; + } + + .cards-solidcolors.side-by-side > ul > li:hover { + cursor: pointer; + flex: 1.2; + } + + .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { + width: 280px; + } + + .cards-solidcolors.side-by-side > ul > li:last-child > .cards-solidcolors-card-body { + width: 280px; + } +} + +/* cards-solidcolors side-by-side */ +@media (min-width: 1000px) { + .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { + width: 250px; + } +} + +@media (min-width: 1200px) { + .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { + width: 300px; + } + + .cards-solidcolors.side-by-side > ul > li:last-child > .cards-solidcolors-card-body { + width: 300px; + } +} + +/* section highlights */ + +.section.light-plum .cards-solidcolors > ul > li { + background-color: var(--bg-text-light-plum); + color: var(--c-dark-plum); +} + +.section.light-blue .cards-solidcolors > ul > li { + background-color: var(--bg-text-light-plum); + color: var(--c-dark-blue); +} + +.section.dark-plum .cards-solidcolors > ul > li { + background-color: var(--bg-text-light-plum); + color: var(--c-dark-plum); +} + +/* solidcolors */ +.cards-solidcolors .dark-teal { + background-color: var(--c-dark-teal); +} + +.cards-solidcolors .mid-teal { + background-color: var(--c-mid-teal); +} + +.cards-solidcolors .light-teal { + background-color: var(--c-light-teal); +} + +.cards-solidcolors .dark-blue { + background-color: var(--c-dark-blue); +} + +.cards-solidcolors .light-blue { + background-color: var(--c-light-blue); + } + + .cards-solidcolors .mid-blue { + background-color: var(--c-mid-blue); + } + +.cards-solidcolors .dark-plum { + background-color: var(--c-dark-plum); + } + + .cards-solidcolors .light-plum { + background-color: var(--c-light-plum); + } + + .cards-solidcolors .mid-plum { + background-color: var(--c-mid-plum); + } + + .cards-solidcolors .light-grey{ + background-color: var(--c-light-gray); + } + + .cards-solidcolors .mid-grey{ + background-color: var(--c-mid-gray); + } + + .cards-solidcolors .dark-grey{ + background-color: var(--c-dark-gray); + } + + .config-hidden { + display: none; + } + + + \ No newline at end of file diff --git a/blocks/cards-solidcolors/cards-solidcolors.js b/blocks/cards-solidcolors/cards-solidcolors.js new file mode 100644 index 00000000..9a03a414 --- /dev/null +++ b/blocks/cards-solidcolors/cards-solidcolors.js @@ -0,0 +1,35 @@ +export default function decorate(block) { + /* change to ul, li */ + const ul = document.createElement('ul'); + [...block.children].forEach((row) => { + const li = document.createElement('li'); + li.innerHTML = row.innerHTML; + const stylerow = [...block.lastElementChild.children]; + const divdata = stylerow[1].textContent; + const arr = divdata.split(','); + [...ul.children].forEach(() => { + for (let i = 0; i < arr.length; i += 1) { + // eslint-disable-next-line prefer-destructuring + ul.children[0].className = arr[0]; + if (ul.children[1] !== undefined) { + // eslint-disable-next-line prefer-destructuring + ul.children[1].className = arr[1]; + if (ul.children[2] !== undefined) { + // eslint-disable-next-line prefer-destructuring + ul.children[2].className = arr[2]; + } + } + } + }); + [...li.children].forEach((div) => { + div.className = 'cards-solidcolors-card-body'; + if (div.innerHTML === 'style') { + div.parentNode.className = 'config-hidden'; + div.parentNode.innerHTML = ''; + } + }); + ul.append(li); + }); + block.textContent = ''; + block.append(ul); +} From f6f61edf3603db2076aa6f2d931890c35b432404 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Fri, 19 May 2023 16:29:04 +0530 Subject: [PATCH 2/9] 323 - Implement solid colors to crds with config li remove --- blocks/cards-solidcolors/cards-solidcolors.css | 15 ++++++++------- blocks/cards-solidcolors/cards-solidcolors.js | 3 ++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/blocks/cards-solidcolors/cards-solidcolors.css b/blocks/cards-solidcolors/cards-solidcolors.css index 50e80a10..71ee76fc 100644 --- a/blocks/cards-solidcolors/cards-solidcolors.css +++ b/blocks/cards-solidcolors/cards-solidcolors.css @@ -147,6 +147,13 @@ } } +@media (max-width: 600px) { + .cards-solidcolors > ul > li { + padding: 28px !important; + height: 380px !important; + } +} + @media (min-width: 750px) { /* cards-solidcolors side-by-side */ .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { @@ -230,7 +237,7 @@ color: var(--c-dark-plum); } -/* solidcolors */ +/* solidcolors backgrounds variations */ .cards-solidcolors .dark-teal { background-color: var(--c-dark-teal); } @@ -278,10 +285,4 @@ .cards-solidcolors .dark-grey{ background-color: var(--c-dark-gray); } - - .config-hidden { - display: none; - } - - \ No newline at end of file diff --git a/blocks/cards-solidcolors/cards-solidcolors.js b/blocks/cards-solidcolors/cards-solidcolors.js index 9a03a414..468e10c3 100644 --- a/blocks/cards-solidcolors/cards-solidcolors.js +++ b/blocks/cards-solidcolors/cards-solidcolors.js @@ -25,10 +25,11 @@ export default function decorate(block) { div.className = 'cards-solidcolors-card-body'; if (div.innerHTML === 'style') { div.parentNode.className = 'config-hidden'; - div.parentNode.innerHTML = ''; } }); ul.append(li); + const configHidden = ul.querySelector('.config-hidden'); + if (configHidden) configHidden.remove(); }); block.textContent = ''; block.append(ul); From 30c7bdca3ab91897405cf34c0e8f24f8230de8cf Mon Sep 17 00:00:00 2001 From: Andreas Haller Date: Mon, 22 May 2023 08:57:58 +0200 Subject: [PATCH 3/9] #323: moved solid colours to normal cards block --- blocks/cards/cards.css | 49 ++++++++++++++++++++++++++++++++++++++++++ blocks/cards/cards.js | 25 +++++++++++++++++++-- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index bca18da1..6ff938f1 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -421,3 +421,52 @@ background-color: var(--bg-text-light-plum); color: var(--c-dark-plum); } + +/* background colors */ +.cards-card-bg-dark-teal { + background-color: var(--c-dark-teal); +} + +.cards-card-bg-mid-teal { + background-color: var(--c-mid-teal); +} + +.cards-card-bg-light-teal { + background-color: var(--c-light-teal); +} + +.cards-card-bg-dark-blue { + background-color: var(--c-dark-blue); +} + +.cards-card-bg-light-blue { + background-color: var(--c-light-blue); +} + +.cards-card-bg-mid-blue { + background-color: var(--c-mid-blue); +} + +.cards-card-bg-dark-plum { + background-color: var(--c-dark-plum); +} + +.cards-card-bg-light-plum { + background-color: var(--c-light-plum); +} + +.cards-card-bg-mid-plum { + background-color: var(--c-mid-plum); +} + +.cards-card-bg-light-grey{ + background-color: var(--c-light-gray); +} + +.cards-card-bg-mid-grey{ + background-color: var(--c-mid-gray); +} + +.cards-card-bg-dark-grey{ + background-color: var(--c-dark-gray); +} diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 6ecb5227..7f3eb1f1 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -1,5 +1,20 @@ import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; +const supportedBackgroundColors = [ + 'dark-teal', + 'mid-teal', + 'light-teal', + 'dark-blue', + 'light-blue', + 'mid-blue', + 'dark-plum', + 'light-plum', + 'mid-plum', + 'light-gray', + 'mid-gray', + 'dark-gray', +]; + function getImageWidth(block) { if (block.matches('.icon-with-text')) { // scaling the images down to the actual size makes them blury @@ -16,8 +31,14 @@ export default function decorate(block) { const li = document.createElement('li'); li.innerHTML = row.innerHTML; [...li.children].forEach((div) => { - if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image'; - else div.className = 'cards-card-body'; + if (supportedBackgroundColors.indexOf(div.textContent) >= 0) { + li.removeChild(div); + li.classList.add(`cards-card-bg-${div.textContent}`); + } else if (div.children.length === 1 && div.querySelector('picture')) { + div.className = 'cards-card-image'; + } else { + div.className = 'cards-card-body'; + } }); ul.append(li); }); From 4267c1395eab7996978fb90af3c0d8b8e5783650 Mon Sep 17 00:00:00 2001 From: sonaldhekale <127213040+sonaldhekale@users.noreply.github.com> Date: Tue, 23 May 2023 18:02:08 +0530 Subject: [PATCH 4/9] Delete cards-solidcolors.css --- .../cards-solidcolors/cards-solidcolors.css | 288 ------------------ 1 file changed, 288 deletions(-) delete mode 100644 blocks/cards-solidcolors/cards-solidcolors.css diff --git a/blocks/cards-solidcolors/cards-solidcolors.css b/blocks/cards-solidcolors/cards-solidcolors.css deleted file mode 100644 index 71ee76fc..00000000 --- a/blocks/cards-solidcolors/cards-solidcolors.css +++ /dev/null @@ -1,288 +0,0 @@ -.cards-solidcolors-solidcolors > ul { - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: 1fr; -} - -.cards-solidcolors > ul > li { - padding: 28px; - height: 500px; -} - -/* cards-solidcolors side-by-side */ -.cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { - padding-left: 20px; - padding-right: 40px; - top: 5px; - color: white; - width: 85%; -} - -.cards.side-by-side > ul > li { - height: 380px; - display: block; -} - -/* cards-solidcolors side-by-side */ -.cards-solidcolors.side-by-side > ul > li a.button:any-link { - color: white; -} - -.cards-solidcolors.side-by-side > ul > li a.button:any-link:hover { - text-decoration: underline; - background: none; -} - -/* cards-solidcolors side-by-side */ -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h2, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 { - color: var(--c-white); -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 { - font-size: 30px; - margin-top: 130px; -} - -/* cards-solidcolors side-by-side */ -.cards-solidcolors.side-by-side > ul > li { - margin: 0; - padding: 0; - position: relative; - list-style: none; -} - -.cards-solidcolors.side-by-side > ul > li:hover { - cursor: pointer; -} - -.cards-solidcolors.side-by-side > ul > li:nth-last-child(2) > .cards-solidcolors-card-body { - padding-left: 20px; - padding-right: 40px; -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h2 a, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 a, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4 a, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 a { - color: var(--c-white); -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 a { - font-weight: 600; -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 a:hover, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4 a:hover, -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 a:hover{ - text-decoration: none; -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h2 { - font-size: 30px; - margin-top: 100px; - font-weight: 600; -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h4 { - font-size: 18px; - margin-top: 0; -} - -.cards-solidcolors.side-by-side .cards-solidcolors-card-body h5 { - font-size: 13px; - margin-top: 10px; -} - -@media (min-width: 600px) { - /* cards-solidcolors side-by-side */ - .cards-solidcolors.side-by-side > ul { - list-style: none; - padding: 0; - display: flex; - flex-wrap: wrap; - } - - .cards-solidcolors.side-by-side > ul > li { - margin: 0; - padding: 0; - position: relative; - list-style: none; - flex: 0 0 50%; - } - - .cards-solidcolors.side-by-side > ul > li:last-child { - margin: 0; - padding: 0; - position: relative; - list-style: none; - flex: 0 0 100%; - height: 500px; - } - - .cards-solidcolors.side-by-side > ul > li:hover { - cursor: pointer; - } - - .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { - width: 260px; - } - - .cards-solidcolors.side-by-side > ul > li:nth-last-child(2) > .cards-solidcolors-card-body { - padding-left: 20px; - padding-right: 40px; - } - - .cards-solidcolors.side-by-side > ul > li:last-child > .cards-solidcolors-card-body { - width: 80%; - } - - .cards-solidcolors.side-by-side .cards-solidcolors-card-body h3 { - font-size: 32px; - margin-top: 180px; - } -} - -@media (max-width: 600px) { - .cards-solidcolors > ul > li { - padding: 28px !important; - height: 380px !important; - } -} - -@media (min-width: 750px) { - /* cards-solidcolors side-by-side */ - .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { - width: 320px; - } -} - -@media (min-width: 992px) { - /* cards-solidcolors side-by-side */ - .cards-solidcolors.side-by-side { - margin: 40px 0; - } - - .cards-solidcolors.side-by-side > ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - } - - .cards-solidcolors.side-by-side > ul > li { - margin: 0; - padding: 0; - position: relative; - list-style: none; - flex: 1; - transition: 1s; - } - - .cards-solidcolors.side-by-side > ul > li:last-child { - flex: 1; - transition: 1s; - } - - .cards-solidcolors.side-by-side > ul > li:hover { - cursor: pointer; - flex: 1.2; - } - - .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { - width: 280px; - } - - .cards-solidcolors.side-by-side > ul > li:last-child > .cards-solidcolors-card-body { - width: 280px; - } -} - -/* cards-solidcolors side-by-side */ -@media (min-width: 1000px) { - .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { - width: 250px; - } -} - -@media (min-width: 1200px) { - .cards-solidcolors.side-by-side > ul > li > .cards-solidcolors-card-body { - width: 300px; - } - - .cards-solidcolors.side-by-side > ul > li:last-child > .cards-solidcolors-card-body { - width: 300px; - } -} - -/* section highlights */ - -.section.light-plum .cards-solidcolors > ul > li { - background-color: var(--bg-text-light-plum); - color: var(--c-dark-plum); -} - -.section.light-blue .cards-solidcolors > ul > li { - background-color: var(--bg-text-light-plum); - color: var(--c-dark-blue); -} - -.section.dark-plum .cards-solidcolors > ul > li { - background-color: var(--bg-text-light-plum); - color: var(--c-dark-plum); -} - -/* solidcolors backgrounds variations */ -.cards-solidcolors .dark-teal { - background-color: var(--c-dark-teal); -} - -.cards-solidcolors .mid-teal { - background-color: var(--c-mid-teal); -} - -.cards-solidcolors .light-teal { - background-color: var(--c-light-teal); -} - -.cards-solidcolors .dark-blue { - background-color: var(--c-dark-blue); -} - -.cards-solidcolors .light-blue { - background-color: var(--c-light-blue); - } - - .cards-solidcolors .mid-blue { - background-color: var(--c-mid-blue); - } - -.cards-solidcolors .dark-plum { - background-color: var(--c-dark-plum); - } - - .cards-solidcolors .light-plum { - background-color: var(--c-light-plum); - } - - .cards-solidcolors .mid-plum { - background-color: var(--c-mid-plum); - } - - .cards-solidcolors .light-grey{ - background-color: var(--c-light-gray); - } - - .cards-solidcolors .mid-grey{ - background-color: var(--c-mid-gray); - } - - .cards-solidcolors .dark-grey{ - background-color: var(--c-dark-gray); - } - \ No newline at end of file From 3ea309511cf8ed8e90f0493d3318481bda5909c9 Mon Sep 17 00:00:00 2001 From: sonaldhekale <127213040+sonaldhekale@users.noreply.github.com> Date: Tue, 23 May 2023 18:02:24 +0530 Subject: [PATCH 5/9] Delete cards-solidcolors.js --- blocks/cards-solidcolors/cards-solidcolors.js | 36 ------------------- 1 file changed, 36 deletions(-) delete mode 100644 blocks/cards-solidcolors/cards-solidcolors.js diff --git a/blocks/cards-solidcolors/cards-solidcolors.js b/blocks/cards-solidcolors/cards-solidcolors.js deleted file mode 100644 index 468e10c3..00000000 --- a/blocks/cards-solidcolors/cards-solidcolors.js +++ /dev/null @@ -1,36 +0,0 @@ -export default function decorate(block) { - /* change to ul, li */ - const ul = document.createElement('ul'); - [...block.children].forEach((row) => { - const li = document.createElement('li'); - li.innerHTML = row.innerHTML; - const stylerow = [...block.lastElementChild.children]; - const divdata = stylerow[1].textContent; - const arr = divdata.split(','); - [...ul.children].forEach(() => { - for (let i = 0; i < arr.length; i += 1) { - // eslint-disable-next-line prefer-destructuring - ul.children[0].className = arr[0]; - if (ul.children[1] !== undefined) { - // eslint-disable-next-line prefer-destructuring - ul.children[1].className = arr[1]; - if (ul.children[2] !== undefined) { - // eslint-disable-next-line prefer-destructuring - ul.children[2].className = arr[2]; - } - } - } - }); - [...li.children].forEach((div) => { - div.className = 'cards-solidcolors-card-body'; - if (div.innerHTML === 'style') { - div.parentNode.className = 'config-hidden'; - } - }); - ul.append(li); - const configHidden = ul.querySelector('.config-hidden'); - if (configHidden) configHidden.remove(); - }); - block.textContent = ''; - block.append(ul); -} From 20fc1b4003ba4c9218f5c59fd85a1c2cd71c91ae Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Wed, 24 May 2023 10:37:24 +0530 Subject: [PATCH 6/9] 323 - checking cards --- blocks/cards/cards.css | 49 ++++++++++++++++++++++++++++++++++++++++++ blocks/cards/cards.js | 25 +++++++++++++++++++-- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index bca18da1..cab10685 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -421,3 +421,52 @@ background-color: var(--bg-text-light-plum); color: var(--c-dark-plum); } + +/* background colors */ +.cards-card-bg-dark-teal { + background-color: var(--c-dark-teal); + } + + .cards-card-bg-mid-teal { + background-color: var(--c-mid-teal); + } + + .cards-card-bg-light-teal { + background-color: var(--c-light-teal); + } + + .cards-card-bg-dark-blue { + background-color: var(--c-dark-blue); + } + + .cards-card-bg-light-blue { + background-color: var(--c-light-blue); + } + + .cards-card-bg-mid-blue { + background-color: var(--c-mid-blue); + } + + .cards-card-bg-dark-plum { + background-color: var(--c-dark-plum); + } + + .cards-card-bg-light-plum { + background-color: var(--c-light-plum); + } + + .cards-card-bg-mid-plum { + background-color: var(--c-mid-plum); + } + + .cards-card-bg-light-grey{ + background-color: var(--c-light-gray); + } + + .cards-card-bg-mid-grey{ + background-color: var(--c-mid-gray); + } + + .cards-card-bg-dark-grey{ + background-color: var(--c-dark-gray); + } diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 6ecb5227..7f3eb1f1 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -1,5 +1,20 @@ import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; +const supportedBackgroundColors = [ + 'dark-teal', + 'mid-teal', + 'light-teal', + 'dark-blue', + 'light-blue', + 'mid-blue', + 'dark-plum', + 'light-plum', + 'mid-plum', + 'light-gray', + 'mid-gray', + 'dark-gray', +]; + function getImageWidth(block) { if (block.matches('.icon-with-text')) { // scaling the images down to the actual size makes them blury @@ -16,8 +31,14 @@ export default function decorate(block) { const li = document.createElement('li'); li.innerHTML = row.innerHTML; [...li.children].forEach((div) => { - if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image'; - else div.className = 'cards-card-body'; + if (supportedBackgroundColors.indexOf(div.textContent) >= 0) { + li.removeChild(div); + li.classList.add(`cards-card-bg-${div.textContent}`); + } else if (div.children.length === 1 && div.querySelector('picture')) { + div.className = 'cards-card-image'; + } else { + div.className = 'cards-card-body'; + } }); ul.append(li); }); From 0d4251cf340d259f051beed096ee9dc6e8900bde Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Wed, 24 May 2023 18:21:17 +0530 Subject: [PATCH 7/9] 323 - After cleaning PR --- blocks/cards/cards.css | 10 ++++++++++ blocks/cards/cards.js | 1 - 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index cab10685..7a85a251 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -142,6 +142,8 @@ padding: 0; position: relative; list-style: none; + height: 500px; + display: block; } .cards.icon-with-text > ul > li { @@ -268,6 +270,13 @@ } } +@media (max-width: 600px) { + .cards.side-by-side > ul > li { + height: 380px; + } + } + + @media (min-width: 750px) { .cards.icon-with-text > ul { grid-template-columns: 1fr 1fr; @@ -470,3 +479,4 @@ .cards-card-bg-dark-grey{ background-color: var(--c-dark-gray); } + diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 7f3eb1f1..df31bb86 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -20,7 +20,6 @@ function getImageWidth(block) { // scaling the images down to the actual size makes them blury return 150; } - return 750; } From a9b5a9b902337d634fa59e78c93312a9d3edf00d Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Thu, 25 May 2023 14:48:23 +0530 Subject: [PATCH 8/9] 323 - updating color varient according to color decisions --- blocks/cards/cards.css | 8 ++++++-- blocks/cards/cards.js | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 28bd7d6c..bcf56125 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -431,6 +431,10 @@ color: var(--c-dark-plum); } +:root { + --c-midnight-blue: #000048; +} + /* background colors */ .cards-card-bg-dark-teal { background-color: var(--c-dark-teal); @@ -452,8 +456,8 @@ background-color: var(--c-light-blue); } - .cards-card-bg-mid-blue { - background-color: var(--c-mid-blue); + .cards-card-bg-midnight-blue { + background-color: var(--c-midnight-blue); } .cards-card-bg-dark-plum { diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 47f58091..10ccc160 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -6,7 +6,7 @@ const supportedBackgroundColors = [ 'light-teal', 'dark-blue', 'light-blue', - 'mid-blue', + 'midnight-blue', 'dark-plum', 'light-plum', 'mid-plum', From b6bd08ba7e75432bf22ce39ecc85df7d0a1790b6 Mon Sep 17 00:00:00 2001 From: "sonal.dhekale" Date: Thu, 25 May 2023 15:29:44 +0530 Subject: [PATCH 9/9] 323 - resolve comment removed variable defination --- blocks/cards/cards.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index bcf56125..63288363 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -431,10 +431,6 @@ color: var(--c-dark-plum); } -:root { - --c-midnight-blue: #000048; -} - /* background colors */ .cards-card-bg-dark-teal { background-color: var(--c-dark-teal);