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..74cb4250 100644 --- a/src/components/QuickstartTile.js +++ b/src/components/QuickstartTile.js @@ -8,22 +8,16 @@ 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 { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; + +import './fonts.scss'; const QuickstartTile = ({ id, title, - view, featured, name, fields, @@ -41,7 +35,6 @@ const QuickstartTile = ({ tessen.track({ eventName: 'instantObservability', category: 'GuidedInstallClick', - publicCatalogView: view, quickstartName: name, }); break; @@ -49,7 +42,6 @@ const QuickstartTile = ({ tessen.track({ eventName: 'instantObservability', category: 'BuildYourOwnQuickstartClick', - publicCatalogView: view, quickstartName: name, }); break; @@ -57,14 +49,11 @@ const QuickstartTile = ({ tessen.track({ eventName: 'instantObservability', category: 'QuickstartClick', - publicCatalogView: view, quickstartName: name, }); } }; - const isListView = () => view === VIEWS.LIST; - return ( handlePackClick(id)} > @@ -122,21 +119,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 +234,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..79ca7412 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,14 +26,9 @@ 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 TRIPLE_COLUMN_BREAKPOINT = '1420px'; const DOUBLE_COLUMN_BREAKPOINT = '1180px'; -const TRIPLE_COLUMN_BREAKPOINT = '1350px'; -const SINGLE_COLUMN_BREAKPOINT = LISTVIEW_BREAKPOINT; +const SINGLE_COLUMN_BREAKPOINT = '900px'; /** * Determines if one string is a substring of the other, case insensitive @@ -86,7 +78,6 @@ const filterByCategory = (category) => { }; const QuickstartsPage = ({ data, location }) => { - const [view] = useState(VIEWS.GRID); const tessen = useTessen(); const [search, setSearch] = useState(''); @@ -269,9 +260,10 @@ 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}) { @@ -280,6 +272,9 @@ const QuickstartsPage = ({ data, location }) => { grid-template-areas: 'main'; grid-template-rows: unset; } + @media screen and (max-width: 760px) { + margin: 500px auto; + } `} >