From 51d71d5777748ce8a91b5db5f3727a0cb9ea8358 Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Mon, 30 Oct 2023 12:16:45 -0500 Subject: [PATCH 1/2] Fix icons which are SVGs. --- blocks/info-mouseover/info-mouseover.css | 4 ++-- blocks/library-metadata/library-metadata.css | 1 + blocks/library-metadata/library-metadata.js | 1 + .../liveby-demographics.css | 2 +- blocks/liveby-schools/liveby-schools.css | 8 ++++++-- blocks/liveby-schools/liveby-schools.js | 20 +++++++++---------- 6 files changed, 21 insertions(+), 15 deletions(-) create mode 100644 blocks/library-metadata/library-metadata.css create mode 100644 blocks/library-metadata/library-metadata.js diff --git a/blocks/info-mouseover/info-mouseover.css b/blocks/info-mouseover/info-mouseover.css index 7b224c1b..dbf5106c 100644 --- a/blocks/info-mouseover/info-mouseover.css +++ b/blocks/info-mouseover/info-mouseover.css @@ -9,7 +9,7 @@ display: block; } -.info-mouseover.block span.icon svg { +.info-mouseover.block span.icon img { display: block; height: 13px; width: 13px; @@ -105,4 +105,4 @@ .info-mouseover.block .info-content-wrapper::after { left: 18px; } -} \ No newline at end of file +} diff --git a/blocks/library-metadata/library-metadata.css b/blocks/library-metadata/library-metadata.css new file mode 100644 index 00000000..91a4abfc --- /dev/null +++ b/blocks/library-metadata/library-metadata.css @@ -0,0 +1 @@ +/* Empty file for handling PSI checks on Block Library pages. */ diff --git a/blocks/library-metadata/library-metadata.js b/blocks/library-metadata/library-metadata.js new file mode 100644 index 00000000..24b2385a --- /dev/null +++ b/blocks/library-metadata/library-metadata.js @@ -0,0 +1 @@ +// Empty file for handling PSI checks on Block Library pages. diff --git a/blocks/liveby-demographics/liveby-demographics.css b/blocks/liveby-demographics/liveby-demographics.css index ef8acf04..32719a89 100644 --- a/blocks/liveby-demographics/liveby-demographics.css +++ b/blocks/liveby-demographics/liveby-demographics.css @@ -55,7 +55,7 @@ font-size: var(--body-font-size-xxl); } -.liveby-demographics.block > div .census-item .icon-bubble span.icon svg { +.liveby-demographics.block > div .census-item .icon-bubble span.icon img { font-size: var(--body-font-size-xxl); color: var(--primary-color); height: 1em; diff --git a/blocks/liveby-schools/liveby-schools.css b/blocks/liveby-schools/liveby-schools.css index e4d9f6dc..476ae0dc 100644 --- a/blocks/liveby-schools/liveby-schools.css +++ b/blocks/liveby-schools/liveby-schools.css @@ -41,9 +41,13 @@ main .section.liveby-schools-container p { .liveby-schools .school-lists section { margin: 1em 0; } +.liveby-schools .actions p.button-container { + text-align: center; +} .liveby-schools .actions p.button-container a { padding: .85em 1.15em; + margin: 0 auto; font-size: var(--body-font-size-m); color: var(--white); background-color: var(--primary-color); @@ -96,7 +100,7 @@ main .section.liveby-schools-container p { font-family: var(--font-family-georgia); font-weight: var(--font-weight-bold); font-size: var(--heading-font-size-xs); - line-height: var(--line-height-reg); + line-height: var(--line-height-m); border-bottom: none; } @@ -162,4 +166,4 @@ main .section.liveby-schools-container p { flex-basis: 33%; margin: 1em; } -} \ No newline at end of file +} diff --git a/blocks/liveby-schools/liveby-schools.js b/blocks/liveby-schools/liveby-schools.js index 51b60591..b677be87 100644 --- a/blocks/liveby-schools/liveby-schools.js +++ b/blocks/liveby-schools/liveby-schools.js @@ -50,7 +50,8 @@ const sortMap = { rating: ratingSort, }; -function buildSchoolList(type, schools, sort = ratingSort) { +async function buildSchoolList(type, schools, sort = ratingSort) { + const star = await fetch('/icons/liveby_rating.svg').then((resp) => (resp.ok ? resp.text() : '')); const sorted = schools.sort(sort); const section = document.createElement('section'); @@ -86,6 +87,7 @@ function buildSchoolList(type, schools, sort = ratingSort) { if (s.rating >= i) { span.classList.add('filled'); } + span.innerHTML = star; rating.append(span); } } else { @@ -95,8 +97,6 @@ function buildSchoolList(type, schools, sort = ratingSort) { item.append(rating); section.append(item); }); - - decorateIcons(section); return section; } @@ -152,9 +152,9 @@ export default async function decorate(block) { sections.classList.add('school-lists'); sections.append( - buildSchoolList('Elementary', elementary), - buildSchoolList('Middle', middle), - buildSchoolList('High', high), + await buildSchoolList('Elementary', elementary), + await buildSchoolList('Middle', middle), + await buildSchoolList('High', high), ); block.append(sections); @@ -173,14 +173,14 @@ export default async function decorate(block) { }); block.append(more); - block.querySelector('.sort select').addEventListener('change', (e) => { + block.querySelector('.sort select').addEventListener('change', async (e) => { e.preventDefault(); e.stopPropagation(); const resort = sortMap[e.target.value || 'name']; sections.replaceChildren( - buildSchoolList('Elementary', elementary, resort), - buildSchoolList('Middle', middle, resort), - buildSchoolList('High', high, resort), + await buildSchoolList('Elementary', elementary, resort), + await buildSchoolList('Middle', middle, resort), + await buildSchoolList('High', high, resort), ); }); } From 10addb1da632738e547d7e8b40e15184c7e63dc1 Mon Sep 17 00:00:00 2001 From: Bryan Stopp Date: Mon, 30 Oct 2023 12:21:35 -0500 Subject: [PATCH 2/2] Fix lint. --- blocks/info-mouseover/info-mouseover.css | 21 ++++++++++----------- blocks/liveby-schools/liveby-schools.css | 2 +- blocks/liveby-schools/liveby-schools.js | 1 - 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/blocks/info-mouseover/info-mouseover.css b/blocks/info-mouseover/info-mouseover.css index dbf5106c..e2f23a35 100644 --- a/blocks/info-mouseover/info-mouseover.css +++ b/blocks/info-mouseover/info-mouseover.css @@ -4,17 +4,6 @@ margin-left: 4px; } - -.info-mouseover.block span.icon { - display: block; -} - -.info-mouseover.block span.icon img { - display: block; - height: 13px; - width: 13px; -} - .info-mouseover.block .info-content-wrapper { display: block; position: absolute; @@ -93,6 +82,16 @@ width: 100%; } +.info-mouseover.block span.icon { + display: block; +} + +.info-mouseover.block span.icon img { + display: block; + height: 13px; + width: 13px; +} + @media screen and (min-width: 900px) { .info-mouseover.block .info-content-wrapper { left: -20px; diff --git a/blocks/liveby-schools/liveby-schools.css b/blocks/liveby-schools/liveby-schools.css index 476ae0dc..f5bed92b 100644 --- a/blocks/liveby-schools/liveby-schools.css +++ b/blocks/liveby-schools/liveby-schools.css @@ -41,6 +41,7 @@ main .section.liveby-schools-container p { .liveby-schools .school-lists section { margin: 1em 0; } + .liveby-schools .actions p.button-container { text-align: center; } @@ -94,7 +95,6 @@ main .section.liveby-schools-container p { opacity: .625; } - .liveby-schools .school-lists section .school-item .school-details h3 { margin: 0; font-family: var(--font-family-georgia); diff --git a/blocks/liveby-schools/liveby-schools.js b/blocks/liveby-schools/liveby-schools.js index b677be87..b994d59c 100644 --- a/blocks/liveby-schools/liveby-schools.js +++ b/blocks/liveby-schools/liveby-schools.js @@ -1,4 +1,3 @@ -import { decorateIcons } from '../../scripts/aem.js'; import { LIVEBY_API } from '../../scripts/scripts.js'; const ES_GRADES = ['PK', 'KG', '01', '02', '03', '04', '05', '06'];