From 8e171c1741528d4b91576a4e62b5a4d346b61edf Mon Sep 17 00:00:00 2001 From: icaraps Date: Thu, 5 Oct 2023 11:38:28 +0400 Subject: [PATCH] WIP icons overhaul --- bin/leaderboard/leaders.json | 2 +- blocks/carousel/carousel.css | 2 +- blocks/columns/columns.js | 7 +- blocks/courses/courses.js | 10 +- blocks/footer/footer.js | 39 +--- blocks/gallery/gallery.js | 12 +- blocks/header/header.css | 40 +++- blocks/header/header.js | 224 ++++------------------ blocks/hero/hero.js | 8 +- blocks/loop/loop.js | 7 +- blocks/social-share/social-share.js | 21 +- blocks/tiger-cards/tiger-cards.css | 4 +- blocks/tiger-cards/tiger-cards.js | 8 +- blocks/trending-banner/trending-banner.js | 8 +- icons/arrow-icon.svg | 1 - icons/arrow-right.svg | 1 + icons/close.svg | 7 + icons/england.svg | 9 + icons/facebook-red.svg | 4 + icons/facebook.svg | 1 + icons/gd-logo.svg | 7 + icons/gd-plus-logo.svg | 67 ++----- icons/instagram-red.svg | 6 + icons/linkedin.svg | 1 + icons/menu.svg | 5 + icons/next.svg | 3 + icons/northern-ireland.svg | 14 ++ icons/play.svg | 1 + icons/prev.svg | 3 + icons/search.svg | 4 +- icons/south-korea.svg | 9 + icons/spain.svg | 9 + icons/trending.svg | 1 + icons/twitter-red.svg | 4 + icons/twitter.svg | 1 + icons/united-states-of-america.svg | 9 + icons/youtube-red.svg | 5 + package.json | 2 +- scripts/lib-franklin.js | 8 +- scripts/scripts.js | 2 +- styles/styles.css | 13 +- 41 files changed, 242 insertions(+), 347 deletions(-) delete mode 100644 icons/arrow-icon.svg create mode 100644 icons/arrow-right.svg create mode 100644 icons/close.svg create mode 100644 icons/england.svg create mode 100644 icons/facebook-red.svg create mode 100644 icons/facebook.svg create mode 100644 icons/gd-logo.svg create mode 100644 icons/instagram-red.svg create mode 100644 icons/linkedin.svg create mode 100644 icons/menu.svg create mode 100644 icons/next.svg create mode 100644 icons/northern-ireland.svg create mode 100644 icons/play.svg create mode 100644 icons/prev.svg create mode 100644 icons/south-korea.svg create mode 100644 icons/spain.svg create mode 100644 icons/trending.svg create mode 100644 icons/twitter-red.svg create mode 100644 icons/twitter.svg create mode 100644 icons/united-states-of-america.svg create mode 100644 icons/youtube-red.svg diff --git a/bin/leaderboard/leaders.json b/bin/leaderboard/leaders.json index 447eef28..315641cf 100644 --- a/bin/leaderboard/leaders.json +++ b/bin/leaderboard/leaders.json @@ -1 +1 @@ -{"data":[{"Position":"1","RoundsPlayed":"4","FirstName":"Rory","LastName":"McIlroy","TotalScoreToPar":"-17","PlayerCountryCode":"NIR","CountryFlag":"//golfdigest.sports.sndimg.com/discovery.divot/images/countryflags/northern-ireland.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-4","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-4","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-4","HolesPlayed":"F"}]},{"Position":"2","RoundsPlayed":"4","FirstName":"Kurt","LastName":"Kitayama","TotalScoreToPar":"-16","PlayerCountryCode":"USA","CountryFlag":"//golfdigest.sports.sndimg.com/discovery.divot/images/countryflags/united-states-of-america.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-6","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-1","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-4","HolesPlayed":"F"}]},{"Position":"3","RoundsPlayed":"4","FirstName":"Kyoung-Hoon","LastName":"Lee","TotalScoreToPar":"-15","PlayerCountryCode":"KOR","CountryFlag":"//golfdigest.sports.sndimg.com/discovery.divot/images/countryflags/south-korea.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-3","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-4","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-3","HolesPlayed":"F"}]},{"Position":"T4","RoundsPlayed":"4","FirstName":"Tommy","LastName":"Fleetwood","TotalScoreToPar":"-14","PlayerCountryCode":"ENG","CountryFlag":"//golfdigest.sports.sndimg.com/discovery.divot/images/countryflags/england.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"+2","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-6","HolesPlayed":"F"}]},{"Position":"T4","RoundsPlayed":"4","FirstName":"Jon","LastName":"Rahm","TotalScoreToPar":"-14","PlayerCountryCode":"ESP","CountryFlag":"//golfdigest.sports.sndimg.com/discovery.divot/images/countryflags/spain.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-2","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-9","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-1","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-2","HolesPlayed":"F"}]}]} \ No newline at end of file +{"data":[{"Position":"1","RoundsPlayed":"4","FirstName":"Rory","LastName":"McIlroy","TotalScoreToPar":"-17","PlayerCountryCode":"NIR","CountryFlag":"/icons/northern-ireland.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-4","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-4","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-4","HolesPlayed":"F"}]},{"Position":"2","RoundsPlayed":"4","FirstName":"Kurt","LastName":"Kitayama","TotalScoreToPar":"-16","PlayerCountryCode":"USA","CountryFlag":"/icons/united-states-of-america.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-6","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-1","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-4","HolesPlayed":"F"}]},{"Position":"3","RoundsPlayed":"4","FirstName":"Kyoung-Hoon","LastName":"Lee","TotalScoreToPar":"-15","PlayerCountryCode":"KOR","CountryFlag":"/icons/south-korea.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-3","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-4","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-3","HolesPlayed":"F"}]},{"Position":"T4","RoundsPlayed":"4","FirstName":"Tommy","LastName":"Fleetwood","TotalScoreToPar":"-14","PlayerCountryCode":"ENG","CountryFlag":"/icons/england.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"+2","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-5","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-6","HolesPlayed":"F"}]},{"Position":"T4","RoundsPlayed":"4","FirstName":"Jon","LastName":"Rahm","TotalScoreToPar":"-14","PlayerCountryCode":"ESP","CountryFlag":"/icons/spain.svg","Rounds":[{"RoundNumber":"1","RoundsScoreToPar":"-2","HolesPlayed":"F"},{"RoundNumber":"2","RoundsScoreToPar":"-9","HolesPlayed":"F"},{"RoundNumber":"3","RoundsScoreToPar":"-1","HolesPlayed":"F"},{"RoundNumber":"4","RoundsScoreToPar":"-2","HolesPlayed":"F"}]}]} diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index 5d8dfe1d..eb700ecb 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -801,7 +801,7 @@ height: 55px; border: none; border-radius: 0; - background: rgba(0 0 0 / 60%) url("/icons/arrow-icon.svg"); + background: rgba(0 0 0 / 60%) url("/icons/arrow-right.svg"); background-position: center center; background-size: 20px 30px; background-repeat: no-repeat; diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index eca8513d..344c1b43 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -5,7 +5,7 @@ import { } from '../../scripts/scripts.js'; import { - decorateBlock, loadBlock, + decorateBlock, decorateIcons, loadBlock, } from '../../scripts/lib-franklin.js'; export default async function decorate(block) { @@ -45,8 +45,7 @@ export default async function decorate(block) { const link = block.querySelector('.content-container a'); if (link) { - fetch('/icons/arrow-icon.svg').then((req) => req.text()).then((svg) => { - link.insertAdjacentHTML('afterbegin', `
${svg}
`); - }); + link.insertAdjacentHTML('afterbegin', '
'); + decorateIcons(link); } } diff --git a/blocks/courses/courses.js b/blocks/courses/courses.js index 0442c408..889e6d31 100644 --- a/blocks/courses/courses.js +++ b/blocks/courses/courses.js @@ -30,18 +30,10 @@ ratingElements.forEach((ratingElement, index) => { } }); -const arrowIcon = ` -
- - - -
-`; - const buttonElements = document.querySelectorAll('.courses-button'); buttonElements.forEach((button) => { - button.innerHTML += arrowIcon; + button.innerHTML += ''; }); // wrap courses info diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 04e2abc6..9a7f7bf6 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,16 +1,12 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; + const FOOTER_CONTENT_PATH = '/footer'; let templateDom = null; function getTemplate() { const footerTemplate = `
@@ -24,43 +20,26 @@ function getTemplate() { - - - + `; const parser = new DOMParser(); @@ -177,4 +156,6 @@ export default async function decorate(block) { footerContainer.innerHTML = html; decorateSections(block); decorateMobileFooter(block); + + decorateIcons(block); } diff --git a/blocks/gallery/gallery.js b/blocks/gallery/gallery.js index f0901f60..70d9d8ee 100644 --- a/blocks/gallery/gallery.js +++ b/blocks/gallery/gallery.js @@ -6,7 +6,7 @@ import { render, } from '../../scripts/scripts.js'; import { - buildBlock, decorateBlock, getMetadata, loadBlocks, + buildBlock, decorateBlock, decorateIcons, getMetadata, loadBlocks, } from '../../scripts/lib-franklin.js'; const generateNextUpInfo = ({ title, path }) => { @@ -192,17 +192,13 @@ export default async function decorate(block) { ${credit ? `
Photo By: ${credit}
` : ''} ${!isFirst ? ` ` : ''}
${index + 1}/${carouselItemsLength}
@@ -232,4 +228,6 @@ export default async function decorate(block) { // Inner block loading block.querySelectorAll('.social-share').forEach((innerBlock) => decorateBlock(innerBlock)); loadBlocks(document.querySelector('main')); + + decorateIcons(block); } diff --git a/blocks/header/header.css b/blocks/header/header.css index f648247f..2b4a04d6 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -65,6 +65,7 @@ .header a.header-logo { border: none; margin-bottom: 0; + overflow: hidden; } .landing-page.dark .header-logo svg path:nth-child(2), @@ -73,17 +74,21 @@ color: #FFF; } +.header .header-logo .icon { + display: flex; +} + .header .header-logo svg { width: 125px; height: auto; max-height: 100%; } -.home-page .header:not(.is-scrolling) .header-menu-button svg path { +.home-page .header:not(.is-scrolling) .header-menu-button svg { fill: #fff; } -.header .nav-menu .social-links a:hover svg path { +.header .nav-menu .social-links a:hover svg { stroke: #000; } @@ -114,6 +119,10 @@ height: 15px; } +.header .header-menu-button .icon { + display: flex; +} + .home-page .header:not(.is-scrolling) .header-menu-button { color: #fff; } @@ -125,6 +134,8 @@ .leaderboard .o-leaderboard-link-container-link svg { margin-left: 10px; + width: 6px; + height: 9px; } .header .nav-menu .header-logo svg { @@ -522,7 +533,7 @@ body:not(.landing-page) .header .header-bottom-bar { display: flex; } -.home-page .header-menu-button span { +.home-page .header-menu-button .label { margin-left: 25px; } @@ -543,8 +554,14 @@ body:not(.landing-page) .header .header-bottom-bar { transition: transform 0.3s, opacity 0.3s, width 0.3s; } -.home-page .header:not(.is-scrolling) .header-bottom-right .header-search-button svg path { - stroke: #fff; +.header .header-bottom-right .header-search-button svg, +.header .header-top-right .header-search-button svg { + height: 25px; + width: 25px; +} + +.home-page .header:not(.is-scrolling) .header-bottom-right .header-search-button svg { + fill: #fff; } @media (max-width: 769px) { @@ -662,7 +679,12 @@ body:not(.landing-page) .header .header-bottom-bar { opacity: 0.8; } -.home-page .header:not(.is-scrolling) .header-cancel-search-button > svg line { +.header .search-form-area .header-cancel-search-button svg { + width: 36px; + height: 35px; +} + +.home-page .header:not(.is-scrolling) .header-cancel-search-button > svg { stroke: #fff; } @@ -931,7 +953,7 @@ body:not(.landing-page) .header .header-bottom-bar { background-color: #f6f6f6; } -.header .nav-menu-nav-link button:hover svg * { +.header .nav-menu-nav-link button:hover svg { stroke: var(--link-hover-color); fill: var(--link-hover-color); } @@ -1438,11 +1460,11 @@ body:not(.landing-page) .header .header-bottom-bar { color: #FFF; } -.landing-page.dark .header:not(.is-scrolling) .header-menu-button svg path { +.landing-page.dark .header:not(.is-scrolling) .header-menu-button svg { fill: #FFF; color: #FFF; } -.landing-page.dark .header:not(.is-scrolling) .header-search-button svg path { +.landing-page.dark .header:not(.is-scrolling) .header-search-button svg { stroke: #FFF; } diff --git a/blocks/header/header.js b/blocks/header/header.js index 04bb8780..75536091 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,4 +1,4 @@ -import { getMetadata } from '../../scripts/lib-franklin.js'; +import { decorateIcons, getMetadata } from '../../scripts/lib-franklin.js'; import { createTag } from '../../scripts/scripts.js'; import leaderboard from './leaderboard.js'; @@ -6,8 +6,8 @@ const DEFAULT_NAV = '/golf-nav'; const isHomePage = document.body.classList.contains('home-page'); -const searchIcon = ''; -const searchForm = '
'; +const searchButton = ''; +const searchForm = '
'; const config = { setNavTop: true, @@ -37,25 +37,13 @@ function getNavTemplate() { const navTemplate = `
- +
@@ -84,48 +72,21 @@ function getNavTemplate() {
@@ -143,9 +104,7 @@ function getNavTemplate() {
See Full Leaderboard - - - +
@@ -167,67 +126,22 @@ function getHeaderTemplate() { title="Golf Digest Plus" aria-label="Golf Digest Plus Logo"> SUBSCRIBE TO - - Golf Digest Plus Logo - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + Golf Digest Plus + + + + + + + + + +