From 79597eecaec2ab233b4a1d5216d717a257236569 Mon Sep 17 00:00:00 2001 From: Joe Gregory Date: Fri, 7 Jan 2022 15:56:03 -0800 Subject: [PATCH] fix: switch JS styling to css styling --- src/components/PackTile.js | 60 ++++--- src/layouts/QuickStartLayout.js | 3 +- src/pages/instant-observability.js | 272 +++++++++++++++-------------- 3 files changed, 180 insertions(+), 155 deletions(-) diff --git a/src/components/PackTile.js b/src/components/PackTile.js index 5784fb2d2..261011cd2 100644 --- a/src/components/PackTile.js +++ b/src/components/PackTile.js @@ -10,7 +10,11 @@ import { Tag, Link, } from '@newrelic/gatsby-theme-newrelic'; -import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants'; +import { + SHIELD_LEVELS, + RESERVED_QUICKSTART_IDS, + LISTVIEW_BREAKPOINT, +} from '../data/constants'; import PackImg from './PackImg'; const VIEWS = { @@ -33,8 +37,6 @@ const PackTile = ({ }) => { const tessen = useTessen(); - const isMobile = useMobileDetect().isMobile(); - const handlePackClick = (quickstartId) => { switch (true) { case quickstartId === RESERVED_QUICKSTART_IDS.GUIDED_INSTALL: @@ -90,19 +92,21 @@ const PackTile = ({ 'summary summary' '. tag'; - /* List view */ - ${isListView() && - css` - grid-template-columns: 1fr 1fr 1fr; - grid-template-areas: - 'logo title title' - 'logo summary summary' - 'logo tag tag'; - grid-template-rows: auto; - `} - - ${isMobile && - css` + /* List view selected by control */ + ${ + isListView() && + css` + grid-template-columns: 1fr 1fr 1fr; + grid-template-areas: + 'logo title title' + 'logo summary summary' + 'logo tag tag'; + grid-template-rows: auto; + ` + } + + /* Breakpoint triggers List view */ + @media screen and (max-width: ${LISTVIEW_BREAKPOINT}){ grid-template-areas: 'logo title title' 'logo summary summary'; @@ -110,7 +114,7 @@ const PackTile = ({ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 0.5fr 1fr; padding: 0.2rem 0.5rem; - `} + } `} onClick={() => handlePackClick(id)} > @@ -122,6 +126,19 @@ const PackTile = ({ height: 100%; justify-content: center; 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}{' '} @@ -186,7 +202,9 @@ const PackTile = ({ } grid-area: tag; - ${isMobile && 'display: none'} + @media screen and (max-width: ${LISTVIEW_BREAKPOINT}) { + display: none; + } `} > {featured && ( diff --git a/src/layouts/QuickStartLayout.js b/src/layouts/QuickStartLayout.js index 68d327cd5..ebc7e835f 100644 --- a/src/layouts/QuickStartLayout.js +++ b/src/layouts/QuickStartLayout.js @@ -7,6 +7,7 @@ import { import PropTypes from 'prop-types'; import { css } from '@emotion/react'; import '../components/styles.scss'; +import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; const QuickStartLayout = ({ children }) => { const [sidebarWidth, setSidebarWidth] = useState(0); @@ -45,7 +46,7 @@ const QuickStartLayout = ({ children }) => { margin-left: calc(var(--sidebar-offset)); - @media screen and (max-width: 760px) { + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { margin-left: 0; } `} diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index 4a713a204..5f6a26338 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; import { graphql } from 'gatsby'; import React, { useState, useEffect } from 'react'; -import useMobileDetect from 'use-mobile-detect-hook'; import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; import SegmentedControl from '../components/SegmentedControl'; @@ -33,6 +32,10 @@ const VIEWS = { LIST: 'List view', }; +const DOUBLE_COLUMN_BREAKPOINT = '1180px'; +const TRIPLE_COLUMN_BREAKPOINT = '1350px'; +const SINGLE_COLUMN_BREAKPOINT = LISTVIEW_BREAKPOINT; + /** * Determines if one string is a substring of the other, case insensitive * @param {String} substring the substring to test against @@ -82,7 +85,6 @@ const filterByCategory = (category) => { const QuickstartsPage = ({ data, location }) => { const [view, setView] = useState(VIEWS.GRID); - const isMobile = useMobileDetect().isMobile(); const tessen = useTessen(); const [search, setSearch] = useState(''); @@ -95,14 +97,6 @@ const QuickstartsPage = ({ data, location }) => { const searchParam = params.get('search'); const categoryParam = params.get('category'); - // Forcing view to List View if device is < 1080px. - if (typeof window !== 'undefined') { - const width = window.innerWidth; - if (width < LISTVIEW_BREAKPOINT) { - setView(VIEWS.LIST); - } - } - setSearch(searchParam); setCategory(categoryParam || ''); if (searchParam || categoryParam) { @@ -250,38 +244,36 @@ const QuickstartsPage = ({ data, location }) => { } `} > - {!isMobile && ( - - - {categoriesWithCount.map(({ displayName, value, count }) => ( - - ))} - - )} + >{`(${count})`} + + ))} +
{ `} />
- {isMobile && ( -
+ + - - +

+ Category +

-

- Category -

-
- {categoriesWithCount.map( - ({ displayName, value, count }) => ( - - ) - )} -
-
+ {categoriesWithCount.map(({ displayName, value, count }) => ( -
+ ))}
- -
- )} +
+ +
+ + +
{ span { color: var(--text-color); + + /* target inner children of parent span */ + span, + strong { + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + display: none; + } + } } strong { color: var(--text-color); } + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + padding: 0 0 0.5rem; + } `} > - {!isMobile && ( - - Showing {filteredQuickstarts.length} results for:{' '} - {search || getDisplayName()} - - )} + + Showing {filteredQuickstarts.length} results + for: + {search || getDisplayName()} +
{ grid-auto-rows: 1fr; ${view === VIEWS.GRID && css` - @media (max-width: 1350px) { + @media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) { grid-template-columns: repeat(3, 1fr); } - @media (max-width: 1180px) { + @media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) { + grid-template-columns: repeat(2, 1fr); + } + + @media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) { grid-template-columns: repeat(1, 1fr); } `}