From 492c767c69001b08fd97f75e122fce37bc7eace5 Mon Sep 17 00:00:00 2001 From: Clinton Date: Thu, 29 Jul 2021 17:09:29 -0700 Subject: [PATCH 01/15] refactor: drive form controls from query params --- src/pages/observability-packs.js | 168 +++++++++++++++++-------------- 1 file changed, 93 insertions(+), 75 deletions(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index fb5374b51..d5ae237b4 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -13,10 +13,11 @@ import { useTessen, useInstrumentedData, useKeyPress, + useQueryParams, ExternalLink, } from '@newrelic/gatsby-theme-newrelic'; -import { useQueryParam, StringParam } from 'use-query-params'; import { useDebounce } from 'react-use'; +import { navigate } from '@reach/router'; import BUILD_YOUR_OWN from '../images/build-your-own.svg'; const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity']; @@ -42,15 +43,45 @@ const ObservabilityPacksPage = ({ data, location }) => { } = data; const [filteredPacks, setFilteredPacks] = useState(o11yPacks); - const [containingFilterState, setContainingFilterState] = useState('All'); - const [sortState, setSortState] = useState('Alphabetical'); - const [searchTerm, setSearchTerm] = useState(''); - const [view, setView] = useState(VIEWS.GRID); const [searchExpanded, setSearchExpanded] = useState(false); - const [querySearch, setQuerySearch] = useQueryParam('search', StringParam); - const [queryFilter, setQueryFilter] = useQueryParam('filter', StringParam); - const [querySort, setQuerySort] = useQueryParam('sort', StringParam); + const { queryParams } = useQueryParams(); + + const [formState, setFormState] = useState({ + search: queryParams.get('search'), + packContains: queryParams.get('packContains'), + sort: queryParams.get('sort'), + }); + + const [view, setView] = useState(VIEWS.GRID); + + useEffect(() => { + setFormState({ + search: queryParams.get('search'), + packContains: queryParams.get('packContains'), + sort: queryParams.get('sort'), + }); + }, [queryParams]); + + const navigateToParams = (params) => { + Object.entries(params).forEach(([key, value]) => { + value ? queryParams.set(key, value) : queryParams.delete(key); + }); + + navigate(`?${queryParams}`); + }; + + useEffect(() => { + const handler = (e) => { + if (e.keyCode === 13) { + navigateToParams(formState); + } + }; + document.addEventListener('keydown', handler); + return () => { + document.removeEventListener('keydown', handler); + }; + }); const searchInputRef = useRef(); @@ -64,13 +95,13 @@ const ObservabilityPacksPage = ({ data, location }) => { ); useInstrumentedData( - { actionName: 'packSort', packSortState: sortState }, - { enabled: Boolean(sortState) } + { actionName: 'packSort', packSortState: formState.sort }, + { enabled: Boolean(formState.sort) } ); useInstrumentedData( - { actionName: 'packFilter', packFilterState: containingFilterState }, - { enabled: Boolean(containingFilterState) } + { actionName: 'packFilter', packFilterState: formState.packContains }, + { enabled: Boolean(formState.packContains) } ); const handleSearchButtonClick = () => { @@ -82,45 +113,28 @@ const ObservabilityPacksPage = ({ data, location }) => { }; const handleBlurSearch = () => { - if (!searchTerm) { + if (!formState.search) { setSearchExpanded(false); } }; useDebounce( () => { - if (searchTerm && searchTerm !== '') { + if (formState.search && formState.search !== '') { tessen.track('observabilityPack', `packSearch`, { - packSearchTerm: searchTerm, + packSearchTerm: formState.search, }); if (typeof window !== 'undefined' && window.newrelic) { window.newrelic.addPageAction('packSearch', { - packSearchTerm: searchTerm, + packSearchTerm: formState.search, }); } } }, 1000, - [searchTerm] + [formState.search] ); - useEffect(() => { - if (querySearch) { - setSearchTerm(querySearch); - setSearchExpanded(true); - } - if (queryFilter) { - setContainingFilterState(queryFilter); - } - if (querySort) { - setSortState(querySort); - } - }, [querySearch, queryFilter, querySort]); - - useEffect(() => { - setView(view); - }, [view]); - useEffect(() => { const duration = 500; searchExpanded @@ -129,50 +143,42 @@ const ObservabilityPacksPage = ({ data, location }) => { }, [searchExpanded]); useEffect(() => { - let tempFilteredPacks = o11yPacks.filter( - (pack) => - pack.name.toLowerCase().includes(searchTerm) || - pack.description.toLowerCase().includes(searchTerm) - ); - - if (containingFilterState !== 'All') { + let tempFilteredPacks = queryParams.has('search') + ? o11yPacks.filter( + (pack) => + pack.name.toLowerCase().includes(queryParams.get('search')) || + pack.description.toLowerCase().includes(queryParams.get('search')) + ) + : o11yPacks; + + if ( + queryParams.has('packContains') && + queryParams.get('packContains') !== 'All' + ) { tempFilteredPacks = tempFilteredPacks.filter( - (pack) => pack[containingFilterState.toLowerCase()]?.length > 0 + (pack) => + pack[queryParams.get('packContains').toLowerCase()]?.length > 0 ); } - if (sortState === 'Alphabetical') { + if (queryParams.has('sort') && queryParams.get('sort') === 'Alphabetical') { tempFilteredPacks = tempFilteredPacks.sort((a, b) => a.name.localeCompare(b.name) ); - } else if (sortState === 'Reverse') { + } else if ( + queryParams.has('sort') && + queryParams.get('sort') === 'Reverse' + ) { tempFilteredPacks = tempFilteredPacks.sort((a, b) => b.name.localeCompare(a.name) ); } - - if (searchTerm !== '') { - setQuerySearch(searchTerm); - setSearchExpanded(true); - } else { - setQuerySearch(undefined); - setSearchExpanded(false); - } - setQueryFilter(containingFilterState); - setQuerySort(sortState); setFilteredPacks(tempFilteredPacks); - }, [ - o11yPacks, - searchTerm, - containingFilterState, - sortState, - queryFilter, - querySort, - querySearch, - setQueryFilter, - setQuerySort, - setQuerySearch, - ]); + }, [queryParams, o11yPacks]); + + useEffect(() => { + setView(view); + }, [view]); const packContentsFilterValues = packContentsFilterGroups.map( (filterName) => { @@ -267,7 +273,7 @@ const ObservabilityPacksPage = ({ data, location }) => { )} { } `} onClear={() => { - setSearchTerm(''); + setFormState((state) => ({ + ...state, + search: null, + })); }} onChange={(e) => { - setSearchTerm(e.target.value.toLowerCase()); + setFormState((state) => ({ + ...state, + search: e.target.value.toLowerCase(), + })); }} - defaultValue={querySearch} onBlur={handleBlurSearch} /> @@ -301,9 +312,12 @@ const ObservabilityPacksPage = ({ data, location }) => { { - setContainingFilterState(e.target.value); + setFormState((state) => ({ + ...state, + packContains: e.target.value, + })); document.getElementById(e.target.id).blur(); tessen.track('observabilityPack', `packFilter`, { - packFilterState: containingFilterState, + packFilterState: formState.packContains, }); }} > @@ -348,6 +365,7 @@ const ObservabilityPacksPage = ({ data, location }) => { items={Object.values(VIEWS)} onChange={(_e, view) => { setView(view); + tessen.track('observabilityPack', `packViewToggle`, { packViewState: view, }); From a17f590158b97a2e6108ff675160bb530c6e5e3b Mon Sep 17 00:00:00 2001 From: Clinton Date: Thu, 29 Jul 2021 17:10:48 -0700 Subject: [PATCH 02/15] refactor: update placeholder to indicate how to search --- src/pages/observability-packs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index d5ae237b4..b14cc4f62 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -274,7 +274,7 @@ const ObservabilityPacksPage = ({ data, location }) => { Date: Tue, 24 Aug 2021 17:44:39 -0700 Subject: [PATCH 03/15] wip: add new layout context and apply to landing --- gatsby-node.js | 11 +++++++++++ src/layouts/index.js | 6 ++++++ 2 files changed, 17 insertions(+) diff --git a/gatsby-node.js b/gatsby-node.js index 8104a83ab..b50f55b8b 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -156,6 +156,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); }; +exports.onCreatePage = async ({ page, actions }) => { + const { createPage, deletePage } = actions; + const oldPage = { ...page }; + + if (page.path === '/observability-packs/') { + page.context.layout = 'QuickStartLayout'; + } + deletePage(oldPage); + createPage(page); +}; + exports.onCreateNode = ({ node, getNode, actions }) => { const { createNodeField } = actions; diff --git a/src/layouts/index.js b/src/layouts/index.js index ac0239cd9..77446599b 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -1,16 +1,22 @@ import React from 'react'; import MainLayout from './MainLayout'; import EmbedLayout from './EmbedLayout'; +import QuickStartLayout from './QuickStartLayout'; import PropTypes from 'prop-types'; const Layout = ({ children, pageContext }) => { const isEmbed = pageContext.layout && pageContext.layout === 'EmbedLayout'; + const isQuickStart = + pageContext.layout && pageContext.layout === 'QuickStartLayout'; if (pageContext.fileRelativePath.match(/404/)) { return children; } if (isEmbed) { return {children}; } + if (isQuickStart) { + return {children}; + } return {children}; }; From aa85250cb15586a014327c5dbf580809913e1651 Mon Sep 17 00:00:00 2001 From: Clinton Date: Tue, 24 Aug 2021 17:49:45 -0700 Subject: [PATCH 04/15] chore: commit file --- src/layouts/QuickStartLayout.js | 36 +++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/layouts/QuickStartLayout.js diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js new file mode 100644 index 000000000..6b9343d1d --- /dev/null +++ b/src/layouts/QuickStartLayout.js @@ -0,0 +1,36 @@ +import React, { useState } from 'react'; +import { + Layout, + GlobalHeader, + MobileHeader, + Navigation, + NavItem, +} from '@newrelic/gatsby-theme-newrelic'; +import PropTypes from 'prop-types'; +import { css } from '@emotion/react'; + +const EmbedLayout = ({ children }) => { + return ( + <> + + New sidebar here + + New sidebar here + + {children} + + + + ); +}; + +EmbedLayout.propTypes = { + children: PropTypes.node, +}; + +export default EmbedLayout; From 4606764a98281994855ade30ed6ebde372926a4c Mon Sep 17 00:00:00 2001 From: Clinton Date: Tue, 24 Aug 2021 17:58:19 -0700 Subject: [PATCH 05/15] wip: apply layout to details pages --- gatsby-node.js | 1 + src/layouts/QuickStartLayout.js | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index b50f55b8b..9064a4803 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -123,6 +123,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { component: path.resolve('./src/templates/ObservabilityPackDetails.js'), context: { id, + layout: 'QuickStartLayout', }, }); }); diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index 6b9343d1d..a0f824283 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -1,10 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Layout, GlobalHeader, MobileHeader, - Navigation, - NavItem, } from '@newrelic/gatsby-theme-newrelic'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; From d821ba9a0bef3dbfa33f2876e1c742892da3ce9f Mon Sep 17 00:00:00 2001 From: Clinton Date: Tue, 24 Aug 2021 18:02:01 -0700 Subject: [PATCH 06/15] chore: fix copy paste component name --- src/layouts/QuickStartLayout.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index a0f824283..eeec493cd 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -7,7 +7,7 @@ import { import PropTypes from 'prop-types'; import { css } from '@emotion/react'; -const EmbedLayout = ({ children }) => { +const QuickStartLayout = ({ children }) => { return ( <> @@ -27,8 +27,8 @@ const EmbedLayout = ({ children }) => { ); }; -EmbedLayout.propTypes = { +QuickStartLayout.propTypes = { children: PropTypes.node, }; -export default EmbedLayout; +export default QuickStartLayout; From 788ffb71dfedd7f7dd4a0b908e82c2971df6c685 Mon Sep 17 00:00:00 2001 From: Clinton Date: Fri, 27 Aug 2021 14:14:28 -0700 Subject: [PATCH 07/15] chore: update comopnent name --- src/pages/observability-packs.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 36cb7a55b..84b9e5862 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -213,6 +213,22 @@ const ObservabilityPacksPage = ({ data, location }) => { } `} > + { + setSearchTerm(''); + }} + onChange={(e) => { + setSearchTerm(e.target.value.toLowerCase()); + }} + defaultValue={querySearch} + onBlur={handleBlurSearch} + /> Showing {filteredPacks.length} results
Date: Fri, 27 Aug 2021 15:18:47 -0700 Subject: [PATCH 08/15] chore: remove test search input. remove forced light mode copied from embedlayout --- src/layouts/QuickStartLayout.js | 2 +- src/pages/observability-packs.js | 16 ---------------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index eeec493cd..5856899ef 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -6,6 +6,7 @@ import { } from '@newrelic/gatsby-theme-newrelic'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; +import '../components/styles.scss'; const QuickStartLayout = ({ children }) => { return ( @@ -18,7 +19,6 @@ const QuickStartLayout = ({ children }) => { css={css` min-height: 100vh; `} - className="light-mode" > {children} diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 3479a390b..dc9d42151 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -219,22 +219,6 @@ const ObservabilityPacksPage = ({ data, location }) => { } `} > - { - setSearchTerm(''); - }} - onChange={(e) => { - setSearchTerm(e.target.value.toLowerCase()); - }} - defaultValue={querySearch} - onBlur={handleBlurSearch} - /> Showing {filteredPacks.length} results
Date: Fri, 27 Aug 2021 15:29:44 -0700 Subject: [PATCH 09/15] chore: apply full width style for details page w/out sidebar --- src/layouts/QuickStartLayout.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index 5856899ef..35172168f 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -6,15 +6,22 @@ import { } from '@newrelic/gatsby-theme-newrelic'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; +import { useLocation } from '@reach/router'; import '../components/styles.scss'; const QuickStartLayout = ({ children }) => { + const location = useLocation(); + const isLanding = location.pathname === '/observability-packs/'; return ( <> New sidebar here - - New sidebar here + + {isLanding && New sidebar here} Date: Fri, 27 Aug 2021 16:55:53 -0700 Subject: [PATCH 10/15] chore: update layout per design --- src/layouts/QuickStartLayout.js | 7 +- src/pages/observability-packs.js | 405 +++++++++++++------------------ 2 files changed, 175 insertions(+), 237 deletions(-) diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index 35172168f..3a8bc58b8 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -6,22 +6,18 @@ import { } from '@newrelic/gatsby-theme-newrelic'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; -import { useLocation } from '@reach/router'; import '../components/styles.scss'; const QuickStartLayout = ({ children }) => { - const location = useLocation(); - const isLanding = location.pathname === '/observability-packs/'; return ( <> New sidebar here - {isLanding && New sidebar here} { > {children} + ); diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index dc9d42151..68db19320 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -8,11 +8,8 @@ import SegmentedControl from '../components/SegmentedControl'; import PackTile from '../components/PackTile'; import { SearchInput, - Icon, - Button, useTessen, useInstrumentedData, - useKeyPress, useQueryParams, ExternalLink, } from '@newrelic/gatsby-theme-newrelic'; @@ -22,15 +19,7 @@ import BUILD_YOUR_OWN from '../images/build-your-own.svg'; const { QUICKSTARTS_REPO } = require('../data/constants'); -const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity']; -const packContentsFilterGroups = [ - 'All', - 'Dashboards', - 'Alerts', - 'Visualizations', - 'Synthetics', - 'Nerdpacks', -]; +const packContentsFilterGroups = ['All', 'Dashboards', 'Alerts', 'Dat sources']; const VIEWS = { GRID: 'Grid view', @@ -45,14 +34,12 @@ const ObservabilityPacksPage = ({ data, location }) => { } = data; const [filteredPacks, setFilteredPacks] = useState(o11yPacks); - const [searchExpanded, setSearchExpanded] = useState(false); const { queryParams } = useQueryParams(); const [formState, setFormState] = useState({ search: queryParams.get('search'), packContains: queryParams.get('packContains'), - sort: queryParams.get('sort'), }); const [view, setView] = useState(VIEWS.GRID); @@ -61,7 +48,6 @@ const ObservabilityPacksPage = ({ data, location }) => { setFormState({ search: queryParams.get('search'), packContains: queryParams.get('packContains'), - sort: queryParams.get('sort'), }); }, [queryParams]); @@ -87,39 +73,16 @@ const ObservabilityPacksPage = ({ data, location }) => { const searchInputRef = useRef(); - useKeyPress('s', () => { - setSearchExpanded(!searchExpanded); - }); - useInstrumentedData( { actionName: 'packViewToggle', packViewState: view }, { enabled: Boolean(view) } ); - useInstrumentedData( - { actionName: 'packSort', packSortState: formState.sort }, - { enabled: Boolean(formState.sort) } - ); - useInstrumentedData( { actionName: 'packFilter', packFilterState: formState.packContains }, { enabled: Boolean(formState.packContains) } ); - const handleSearchButtonClick = () => { - setSearchExpanded(true); - tessen.track('observabilityPack', `packSearchButtonClick`); - if (typeof window !== 'undefined' && window.newrelic) { - window.newrelic.addPageAction('packSearchButtonClick'); - } - }; - - const handleBlurSearch = () => { - if (!formState.search) { - setSearchExpanded(false); - } - }; - useDebounce( () => { if (formState.search && formState.search !== '') { @@ -137,13 +100,6 @@ const ObservabilityPacksPage = ({ data, location }) => { [formState.search] ); - useEffect(() => { - const duration = 500; - searchExpanded - ? setTimeout(() => searchInputRef.current.focus(), duration) - : setTimeout(() => searchInputRef.current.blur(), duration); - }, [searchExpanded]); - useEffect(() => { let tempFilteredPacks = queryParams.has('search') ? o11yPacks.filter( @@ -163,18 +119,6 @@ const ObservabilityPacksPage = ({ data, location }) => { ); } - if (queryParams.has('sort') && queryParams.get('sort') === 'Alphabetical') { - tempFilteredPacks = tempFilteredPacks.sort((a, b) => - a.name.localeCompare(b.name) - ); - } else if ( - queryParams.has('sort') && - queryParams.get('sort') === 'Reverse' - ) { - tempFilteredPacks = tempFilteredPacks.sort((a, b) => - b.name.localeCompare(a.name) - ); - } setFilteredPacks(tempFilteredPacks); }, [queryParams, o11yPacks]); @@ -200,140 +144,48 @@ const ObservabilityPacksPage = ({ data, location }) => {
* { - margin: 0.5rem 0; - } + --sidebar-width: 300px; + + display: grid; + grid-template-columns: var(--sidebar-width) minmax(0, 1fr); + grid-template-areas: 'sidebar main'; + grid-template-rows: 1fr auto; + min-height: calc(100vh - var(--global-header-height)); + margin: 0 auto; + max-width: var(--site-max-width); + + @media screen and (max-width: 760px) { + grid-template-columns: minmax(0, 1fr); + grid-template-areas: 'main'; + grid-template-rows: unset; } `} > - Showing {filteredPacks.length} results -
* { - margin: 0 0.1rem; - } - @media screen and (max-width: 1180px) { - flex-direction: column; - align-items: normal; - > * { - margin: 0.5rem 0; - } + grid-area: sidebar; + border-right: 1px solid var(--divider-color); + height: calc(100vh - var(--global-header-height)); + position: sticky; + top: var(--global-header-height); + + @media screen and (max-width: 760px) { + display: none; } `} >
- {!searchExpanded && ( - - )} - { - setFormState((state) => ({ - ...state, - search: null, - })); - }} - onChange={(e) => { - setFormState((state) => ({ - ...state, - search: e.target.value.toLowerCase(), - })); - }} - onBlur={handleBlurSearch} - /> -
-
* { - margin: 0.5rem 0; - } - } + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: var(--site-content-padding); + overflow: auto; `} > - - - - -
- { - setView(view); - - tessen.track('observabilityPack', `packViewToggle`, { - packViewState: view, - }); - }} - /> -
-
- -
- +
- * { + margin: 0.5rem 0; + } + } + `} + > +
* { + margin: 0 0.1rem; + } + /* @media screen and (max-width: 1180px) { + flex-direction: column; + align-items: normal; + > * { + margin: 0.5rem 0; + } + } */ + `} + > +
+ { + setFormState((state) => ({ + ...state, + search: null, + })); + }} + onChange={(e) => { + setFormState((state) => ({ + ...state, + search: e.target.value.toLowerCase(), + })); + }} + /> +
+
+ { + setView(view); + + tessen.track('observabilityPack', `packViewToggle`, { + packViewState: view, + }); + }} + /> +
+
+
+
+ Showing {filteredPacks.length} results +
+
- - {filteredPacks.map((pack) => ( - - ))} + display: initial; + `} + `} + > + + + + {filteredPacks.map((pack) => ( + + ))} +
+
); From fa139a40590e7d1049e7e26d49fc24ce14a551e4 Mon Sep 17 00:00:00 2001 From: Clinton Date: Mon, 30 Aug 2021 11:09:27 -0700 Subject: [PATCH 11/15] fix: make slightly more responsive --- src/pages/observability-packs.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 68db19320..2c825dd2f 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -156,7 +156,9 @@ const ObservabilityPacksPage = ({ data, location }) => { @media screen and (max-width: 760px) { grid-template-columns: minmax(0, 1fr); - grid-template-areas: 'main'; + grid-template-areas: + 'sidebar' + 'main'; grid-template-rows: unset; } `} @@ -171,7 +173,10 @@ const ObservabilityPacksPage = ({ data, location }) => { top: var(--global-header-height); @media screen and (max-width: 760px) { - display: none; + display: block; + position: relative; + width: 100%; + height: 100%; } `} > @@ -184,6 +189,9 @@ const ObservabilityPacksPage = ({ data, location }) => { right: 0; padding: var(--site-content-padding); overflow: auto; + @media screen and (max-width: 760px) { + position: relative; + } `} > From 4ca6290fdfd20d713cf6227f6d9eee753d7bc73b Mon Sep 17 00:00:00 2001 From: Clinton Date: Mon, 30 Aug 2021 11:09:53 -0700 Subject: [PATCH 12/15] chore: remove unneeded mobile header in favor of one in the page --- src/layouts/QuickStartLayout.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index 3a8bc58b8..598066558 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -1,9 +1,5 @@ import React from 'react'; -import { - Layout, - GlobalHeader, - MobileHeader, -} from '@newrelic/gatsby-theme-newrelic'; +import { Layout, GlobalHeader } from '@newrelic/gatsby-theme-newrelic'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import '../components/styles.scss'; @@ -12,7 +8,6 @@ const QuickStartLayout = ({ children }) => { return ( <> - New sidebar here Date: Mon, 30 Aug 2021 15:52:34 -0700 Subject: [PATCH 13/15] chore: add copy to left sidebar --- src/pages/observability-packs.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 2c825dd2f..4989ce8a3 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -194,6 +194,10 @@ const ObservabilityPacksPage = ({ data, location }) => { } `} > +

+ A place to find quickstarts of resources like dashboards, + instrumentation, and alerts to help you monitor your environment. +