From 542e51f1ca843019f6e7b2d508dc889fc8c875e6 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Fri, 29 Apr 2022 14:20:15 -0700 Subject: [PATCH 1/5] wip --- .../components/GlobalFooter.js | 4 +- .../gatsby-theme-newrelic/icons/feather.js | 12 ++ src/components/QuickstartTile.js | 183 ++++++++---------- src/data/constants.js | 1 - src/pages/index.jsx | 11 +- 5 files changed, 107 insertions(+), 104 deletions(-) diff --git a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js index 6625fdfe..9629eda2 100644 --- a/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js +++ b/src/@newrelic/gatsby-theme-newrelic/components/GlobalFooter.js @@ -94,14 +94,14 @@ const GlobalFooter = ({ className }) => { }} > Build your own ), + 'arrow-left': ( + <> + + + + ), + 'arrow-right': ( + <> + + + + ), circle: ( <> diff --git a/src/components/QuickstartTile.js b/src/components/QuickstartTile.js index 24e8767e..173cb35e 100644 --- a/src/components/QuickstartTile.js +++ b/src/components/QuickstartTile.js @@ -8,17 +8,10 @@ import { Tag, Link, } from '@newrelic/gatsby-theme-newrelic'; -import { - SHIELD_LEVELS, - RESERVED_QUICKSTART_IDS, - LISTVIEW_BREAKPOINT, -} from '../data/constants'; +import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants'; import QuickstartImg from './QuickstartImg'; -const VIEWS = { - GRID: 'Grid view', - LIST: 'List view', -}; +import './fonts.scss'; const QuickstartTile = ({ id, @@ -63,8 +56,6 @@ const QuickstartTile = ({ } }; - const isListView = () => view === VIEWS.LIST; - return ( handlePackClick(id)} > @@ -122,21 +104,8 @@ const QuickstartTile = ({ display: flex; grid-area: logo; height: 100%; - justify-content: center; + justify-content: flex-start; margin-bottom: 1rem; - - .dark-mode & { - background: var(--color-white); - } - - ${isListView() && - css` - margin-right: 0.5rem; - `} - - @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) { - margin-right: 0.5rem; - } `} >
-

- {title}{' '} - {SHIELD_LEVELS.includes(level) && } -

+

+ {title}{' '} + {SHIELD_LEVELS.includes(level) && } +

+ +
+

+ {summary || 'No summary provided'} +

+
+
-

- {summary || 'No summary provided'} -

+ Read more +
- {featured && ( - - Featured - - )} +
); @@ -221,7 +209,6 @@ const QuickstartTile = ({ QuickstartTile.propTypes = { id: PropTypes.string.isRequired, - view: PropTypes.oneOf(Object.values(VIEWS)).isRequired, name: PropTypes.string.isRequired, title: PropTypes.string.isRequired, fields: PropTypes.shape({ diff --git a/src/data/constants.js b/src/data/constants.js index 489deabd..f119989a 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -39,4 +39,3 @@ export const RESERVED_QUICKSTART_IDS = { }; export const QUICKSTARTS_COLLAPSE_BREAKPOINT = '760px'; -export const LISTVIEW_BREAKPOINT = '1080px'; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 64145954..c0293027 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -36,7 +36,7 @@ const VIEWS = { const DOUBLE_COLUMN_BREAKPOINT = '1180px'; const TRIPLE_COLUMN_BREAKPOINT = '1350px'; -const SINGLE_COLUMN_BREAKPOINT = LISTVIEW_BREAKPOINT; +const SINGLE_COLUMN_BREAKPOINT = QUICKSTARTS_COLLAPSE_BREAKPOINT; /** * Determines if one string is a substring of the other, case insensitive @@ -393,7 +393,7 @@ const QuickstartsPage = ({ data, location }) => { transform: rotate(-90deg); margin: -4px; `} - name="chevron-left" + name="fe-chevron-left" size="120%" /> @@ -655,7 +655,7 @@ const QuickstartsPage = ({ data, location }) => { --text-color: var(--primary-text-color); padding: 1.25rem 0; - font-size: 16px; + font-size: 18px; color: var(--color-neutrals-800); display: flex; justify-content: space-between; @@ -668,6 +668,9 @@ const QuickstartsPage = ({ data, location }) => { /* target inner children of parent span */ span, strong { + font-family: 'Söhne-Leicht'; + + letter-space: -0.5px; @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { display: none; } @@ -680,6 +683,8 @@ const QuickstartsPage = ({ data, location }) => { text-overflow: ellipsis; overflow-x: hidden; whitespace: nowrap; + font-weight: 100; + font-size: 28px; } @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { From 8de21b6f1a11b96ecb88e6728fc6f10f00cea114 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Fri, 29 Apr 2022 15:26:31 -0700 Subject: [PATCH 2/5] feat: NR-1512 Quickstart Tiles UI Updates - Update styles for quickstart tiles - remove dark mode code in these components - remove List vs Grid View code on homepage --- src/components/QuickstartTile.js | 35 +++++++++-- src/pages/index.jsx | 105 ++++++++++--------------------- 2 files changed, 63 insertions(+), 77 deletions(-) diff --git a/src/components/QuickstartTile.js b/src/components/QuickstartTile.js index 173cb35e..faa91a21 100644 --- a/src/components/QuickstartTile.js +++ b/src/components/QuickstartTile.js @@ -11,12 +11,13 @@ import { import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants'; import QuickstartImg from './QuickstartImg'; +import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; + import './fonts.scss'; const QuickstartTile = ({ id, title, - view, featured, name, fields, @@ -34,7 +35,6 @@ const QuickstartTile = ({ tessen.track({ eventName: 'instantObservability', category: 'GuidedInstallClick', - publicCatalogView: view, quickstartName: name, }); break; @@ -42,7 +42,6 @@ const QuickstartTile = ({ tessen.track({ eventName: 'instantObservability', category: 'BuildYourOwnQuickstartClick', - publicCatalogView: view, quickstartName: name, }); break; @@ -50,7 +49,6 @@ const QuickstartTile = ({ tessen.track({ eventName: 'instantObservability', category: 'QuickstartClick', - publicCatalogView: view, quickstartName: name, }); } @@ -76,6 +74,12 @@ const QuickstartTile = ({ border-radius: 8px; box-shadow: none; + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + padding: 0 32px 24px 32px; + width: 80%; + min-width: 250px; + } + h4, p, span { @@ -83,9 +87,15 @@ const QuickstartTile = ({ letter-spacing: -0.5%; color: #1d252c; font-weight: 600; + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + width: 100%; + font-family: 'Söhne-Buch'; + font-weight: 400; + } + } - /* Default grid view */ display: grid; align-items: flex-start; grid-gap: 0.2rem; @@ -95,6 +105,11 @@ const QuickstartTile = ({ 'logo logo' 'text text' 'tag arrow'; + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + grid-template-rows: 125px; 152px auto; + } + `} onClick={() => handlePackClick(id)} > @@ -120,6 +135,12 @@ const QuickstartTile = ({ object-fit: scale-down; height: 45px; margin: 35px 0 0; + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + margin: 20px 0 0; + height: 70px; + max-width: 240px; + } `} /> @@ -158,6 +179,10 @@ const QuickstartTile = ({ text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + -webkit-line-clamp: 2; + } `} > {summary || 'No summary provided'} diff --git a/src/pages/index.jsx b/src/pages/index.jsx index c0293027..4883c526 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -16,10 +16,7 @@ import { navigate } from '@reach/router'; import { useDebounce } from 'react-use'; import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; -import { - QUICKSTARTS_COLLAPSE_BREAKPOINT, - LISTVIEW_BREAKPOINT, -} from '../data/constants'; +import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; import CATEGORIES from '../data/instant-observability-categories'; import SuperTiles from '../components/SuperTiles'; @@ -29,11 +26,6 @@ import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import '../components/fonts.scss'; -const VIEWS = { - GRID: 'Grid view', - LIST: 'List view', -}; - const DOUBLE_COLUMN_BREAKPOINT = '1180px'; const TRIPLE_COLUMN_BREAKPOINT = '1350px'; const SINGLE_COLUMN_BREAKPOINT = QUICKSTARTS_COLLAPSE_BREAKPOINT; @@ -86,7 +78,6 @@ const filterByCategory = (category) => { }; const QuickstartsPage = ({ data, location }) => { - const [view] = useState(VIEWS.GRID); const tessen = useTessen(); const [search, setSearch] = useState(''); @@ -272,9 +263,11 @@ const QuickstartsPage = ({ data, location }) => { grid-gap: 70px; min-height: calc(100vh - var(--global-header-height)); margin: var(--banner-height) auto; + max-width: var(--site-max-width); @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + margin: 500px auto; grid-gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main'; @@ -528,24 +521,16 @@ const QuickstartsPage = ({ data, location }) => { padding: 10px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; - ${view === VIEWS.GRID && - css` - @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(3, 1fr); - } - @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(2, 1fr); - } - @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(1, 1fr); - } - `} - ${view === VIEWS.LIST && - css` - grid-auto-rows: 1fr; - grid-template-columns: 1fr; - grid-gap: 1.25rem; - `}; + + @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(3, 1fr); + } + @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(2, 1fr); + } + @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(1, 1fr); + } `} > {!loadComplete && } @@ -560,7 +545,6 @@ const QuickstartsPage = ({ data, location }) => { {mostPopularQuickStarts.map((pack) => ( { grid-gap: 1.25rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; - ${view === VIEWS.GRID && - css` - @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(3, 1fr); - } - @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(2, 1fr); - } - @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(1, 1fr); - } - `} - ${view === VIEWS.LIST && - css` - grid-auto-rows: 1fr; - grid-template-columns: 1fr; - grid-gap: 1.25rem; - `}; + + @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(3, 1fr); + } + @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(2, 1fr); + } + @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(1, 1fr); + } `} > {!loadComplete && } @@ -634,7 +610,6 @@ const QuickstartsPage = ({ data, location }) => { {featuredQuickStarts.map((pack) => ( { grid-gap: 1.25rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; - ${view === VIEWS.GRID && - css` - @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(3, 1fr); - } + @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(3, 1fr); + } - @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(2, 1fr); - } + @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(2, 1fr); + } - @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { - grid-template-columns: repeat(1, 1fr); - } - `} - ${view === VIEWS.LIST && - css` - grid-auto-rows: 1fr; - grid-template-columns: 1fr; - grid-gap: 1.25rem; - `}; + @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(1, 1fr); + } `} > {!isSearchInputEmpty && } {filteredQuickstarts.map((pack) => ( - + ))} From 35cb085e6e0ad9f0808f5ac9d541b213ad26efea Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Fri, 29 Apr 2022 15:34:54 -0700 Subject: [PATCH 3/5] fix font weight --- src/pages/index.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 4883c526..d622f3e4 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -300,9 +300,9 @@ const QuickstartsPage = ({ data, location }) => { overflow: auto; label { - font-family: 'Söhne-Buch'; + font-family: 'Söhne-Leicht'; font-size: 28px; - font-weight: 400; + font-weight: 600; line-height: 36px; margin-bottom: 12px; letter-spacing: -0.5px; @@ -322,9 +322,9 @@ const QuickstartsPage = ({ data, location }) => { onClick={() => handleCategory(value)} css={css` padding: 8px 12px; - font-family: 'Söhne-Buch'; + font-family: 'Söhne-Leicht'; font-size: 18px; - font-weight: 400; + font-weight: 600; line-height: 54px; width: 100%; display: flex; From f077aa9c8cf29bddc4ae2107180e45f7326ead3d Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Fri, 29 Apr 2022 16:35:45 -0700 Subject: [PATCH 4/5] fix column breakpoints --- src/components/QuickstartTile.js | 2 +- src/pages/index.jsx | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/QuickstartTile.js b/src/components/QuickstartTile.js index faa91a21..a1713747 100644 --- a/src/components/QuickstartTile.js +++ b/src/components/QuickstartTile.js @@ -76,7 +76,7 @@ const QuickstartTile = ({ @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { padding: 0 32px 24px 32px; - width: 80%; + width: 100%; min-width: 250px; } diff --git a/src/pages/index.jsx b/src/pages/index.jsx index d622f3e4..8b697236 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -26,9 +26,9 @@ import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import '../components/fonts.scss'; -const DOUBLE_COLUMN_BREAKPOINT = '1180px'; -const TRIPLE_COLUMN_BREAKPOINT = '1350px'; -const SINGLE_COLUMN_BREAKPOINT = QUICKSTARTS_COLLAPSE_BREAKPOINT; +const DOUBLE_COLUMN_BREAKPOINT = '1160px'; +const TRIPLE_COLUMN_BREAKPOINT = '1420px'; +const SINGLE_COLUMN_BREAKPOINT = '900px'; /** * Determines if one string is a substring of the other, case insensitive @@ -260,19 +260,21 @@ const QuickstartsPage = ({ data, location }) => { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-areas: 'sidebar main'; grid-template-rows: 1fr auto; - grid-gap: 70px; + grid-gap: 20px; min-height: calc(100vh - var(--global-header-height)); margin: var(--banner-height) auto; max-width: var(--site-max-width); @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { - margin: 500px auto; grid-gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main'; grid-template-rows: unset; } + @media screen and (max-width: 760px) { + margin: 500px auto; + } `} >