From 729b61d46d871132df6c587b50429c832495a297 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 9 Jun 2021 17:05:11 -0700 Subject: [PATCH 1/7] fix: removed terminal warnings for student page --- src/pages/students.js | 18 +++++++------- src/pages/students.module.scss | 43 +++++++++++++++------------------- 2 files changed, 28 insertions(+), 33 deletions(-) diff --git a/src/pages/students.js b/src/pages/students.js index 98025b060..9f2308f06 100644 --- a/src/pages/students.js +++ b/src/pages/students.js @@ -199,7 +199,7 @@ const StudentsPage = ({ location }) => {

How do I access New Relic Student Edition?

-
+

New Relic offers the Student Edition exclusively through the GitHub Student Pack. To verify your account's eligibility, @@ -227,7 +227,7 @@ const StudentsPage = ({ location }) => {

Can I purchase Student Edition?

-

+

New Relic offers the Student Edition for FREE to students and educators.

@@ -236,7 +236,7 @@ const StudentsPage = ({ location }) => {

Can I share my Student Edition with friends?

-

+

The student edition comes with three full users. Your friends and classmates are also welcome to sign up for their own free account. @@ -247,7 +247,7 @@ const StudentsPage = ({ location }) => { Where can I check the status of my student verification with GitHub?

-

+

In your GitHub account settings, visit{' '} Applications > Authorized OAuth Apps to check whether you have authorized the New Relic OAuth app. If you @@ -260,7 +260,7 @@ const StudentsPage = ({ location }) => {

What if I already have a New Relic free account?

-

+

No problem! Just upgrade your account to the Student Edition. In the main menu, look for Student Edition and follow the instructions. @@ -271,7 +271,7 @@ const StudentsPage = ({ location }) => { What is the difference between the Student Edition and New Relic free account?

-
+

Check out this quick comparison chart

@@ -305,7 +305,7 @@ const StudentsPage = ({ location }) => {

I’m having trouble verifying my student status with GitHub.

-
+

Troubleshoot any GitHub verification related issues{' '} @@ -319,7 +319,7 @@ const StudentsPage = ({ location }) => {

Does my Student Edition expire?

-

+

You'll have access to the Student Edition for as long as you’re an active student in the GitHub Student pack.

@@ -328,7 +328,7 @@ const StudentsPage = ({ location }) => {

Can I upgrade my Student Edition account to a paid account?

-

+

Yes! Just enter your information and credit card details into the ‘Manage Plan’ screen, and you’ll convert your account to a paid account! diff --git a/src/pages/students.module.scss b/src/pages/students.module.scss index ee3d388f1..7e386923e 100644 --- a/src/pages/students.module.scss +++ b/src/pages/students.module.scss @@ -1,4 +1,4 @@ -.sectionz { +.section { &:not(:last-child) { margin-bottom: 4rem; } @@ -15,12 +15,12 @@ } .offerSection { - text-align: center; - margin: 6rem 0 2.5rem; + text-align: center; + margin: 6rem 0 2.5rem; - h2{ - text-align: center; - } + h2 { + text-align: center; + } } .stepsSection { @@ -32,27 +32,25 @@ } } - - .faqSection { margin: 6rem 0 3rem; - h2{ - text-align: center; - margin-bottom: 2rem; + h2 { + text-align: center; + margin-bottom: 2rem; } - .group{ + .group { margin: 0 0 3rem 0; - .question{ + .question { font-size: 1.3rem; font-weight: 600; - margin-bottom: .25rem; + margin-bottom: 0.25rem; } } - .chart{ + .chart { width: 450px; thead { border-bottom: 2px solid #000; - td{ + td { font-weight: 600; margin-bottom: 1.5rem; } @@ -72,10 +70,7 @@ display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); grid-gap: 1rem; - grid-auto-rows: minmax( - var(--guide-list-row-height, 150px), - auto - ); + grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto); align-items: stretch; width: 100%; @@ -92,7 +87,7 @@ padding: 1rem; transition: all 0.15s ease-out; } -.stepNumber{ +.stepNumber { position: absolute; top: -0.75rem; left: 0; @@ -113,11 +108,11 @@ border-color: var(--color-dark-100); } } -.stepHeader{ +.stepHeader { text-align: center; margin-top: 0.5rem; } -.stepDetail{ +.stepDetail { font-size: 0.875rem; margin-bottom: 1.5rem; color: var(--secondary-text-color); @@ -125,7 +120,7 @@ text-align: center; padding: 0; } -.stepButton{ +.stepButton { justify-self: center; &:hover { From 3789a4add45d597a81c803a0aad392f233f51bbf Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 9 Jun 2021 18:02:50 -0700 Subject: [PATCH 2/7] wip: simplified grid view --- src/images/new-relic-logo.png | Bin 0 -> 10341 bytes src/pages/observability-packs.js | 89 +++++++++++++++++++++++++++++-- 2 files changed, 84 insertions(+), 5 deletions(-) create mode 100644 src/images/new-relic-logo.png diff --git a/src/images/new-relic-logo.png b/src/images/new-relic-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..697a289c27d13b9c25a2678abc5eb9f5eed7b246 GIT binary patch literal 10341 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 literal 0 HcmV?d00001 diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index c5fa4b40b..d739ae7ab 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -3,15 +3,22 @@ import { graphql } from 'gatsby'; import React, { useState, useEffect } from 'react'; import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; -import PackGrid from '../components/PackGrid'; -import PackGridTile from '../components/PackGridTile'; -import PackListTile from '../components/PackListTile'; -import PackList from '../components/PackList'; +// import PackGrid from '../components/PackGrid'; +// import PackGridTile from '../components/PackGridTile'; +// import PackListTile from '../components/PackListTile'; +// import PackList from '../components/PackList'; import Select from '../components/Select'; import SegmentedControl from '../components/SegmentedControl'; -import { SearchInput } from '@newrelic/gatsby-theme-newrelic'; +import { + Icon, + Link, + SearchInput, + Surface, +} from '@newrelic/gatsby-theme-newrelic'; import { useQueryParam, StringParam } from 'use-query-params'; +import DEFAULT_IMAGE from '../images/new-relic-logo.png'; + const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity']; const packContentsFilterValues = [ 'Anything', @@ -27,6 +34,10 @@ const VIEWS = { LIST: 'List view', }; +const LEVELS = { + NEWRELIC: 'NEWRELIC', +}; + const ObservabilityPacksPage = ({ data, location }) => { const { allObservabilityPacks: { nodes: o11yPacks }, @@ -193,6 +204,73 @@ const ObservabilityPacksPage = ({ data, location }) => { onChange={(_e, view) => setView(view)} />

+ +
+ {filteredPacks.map((pack) => ( + + {pack.name} { + e.preventDefault(); + console.log('error'); + e.target.src = DEFAULT_IMAGE; + }} + css={css` + display: block; + width: 100%; + padding: 0 5%; + height: 200px; + background-color: var(--color-white); + margin: auto; + object-fit: scale-down; + `} + /> +
+

+ {pack.name}{' '} + {pack.level === LEVELS.NEWRELIC && ( + + )} +

+

+ {pack.description} +

+
+ + ))} +
+ + {/* START
{view === VIEWS.GRID ? ( @@ -236,6 +314,7 @@ const ObservabilityPacksPage = ({ data, location }) => { )}
+ {/* END */} ); }; From be3a10a7ee128d7afaab5086b09d9bee551c33bf Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 9 Jun 2021 18:16:07 -0700 Subject: [PATCH 3/7] chore: list view --- src/pages/observability-packs.js | 68 ++++++++++---------------------- 1 file changed, 20 insertions(+), 48 deletions(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index d739ae7ab..4d7347de0 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -64,7 +64,7 @@ const ObservabilityPacksPage = ({ data, location }) => { } }, [querySearch, queryFilter, querySort]); - const [view, setView] = useState(VIEWS.GRID); + const [view, setView] = useState(VIEWS.LIST); useEffect(() => { setView(view); @@ -215,6 +215,11 @@ const ObservabilityPacksPage = ({ data, location }) => { @media (max-width: 1450px) { grid-template-columns: repeat(3, 1fr); } + + ${view === VIEWS.LIST && + css` + display: initial; + `} `} > {filteredPacks.map((pack) => ( @@ -226,6 +231,12 @@ const ObservabilityPacksPage = ({ data, location }) => { interactive css={css` overflow: hidden; + + ${view === VIEWS.LIST && + css` + display: flex; + margin-bottom: 1em; + `} `} > { alt={pack.name} onError={(e) => { e.preventDefault(); - console.log('error'); e.target.src = DEFAULT_IMAGE; }} css={css` @@ -244,6 +254,14 @@ const ObservabilityPacksPage = ({ data, location }) => { background-color: var(--color-white); margin: auto; object-fit: scale-down; + + ${view === VIEWS.LIST && + css` + width: 25%; + padding: 0 1%; + max-height: 150px; + margin: 0; + `} `} />
{ ))}
- - {/* START -
- {view === VIEWS.GRID ? ( - - {filteredPacks.map((pack) => { - // TODO: Figure out what image should be shown - // if not added to API explicitly - return ( - - ); - })} - - ) : ( - - {filteredPacks.map((pack) => { - // TODO: Figure out what image should be shown - // if not added to API explicitly - return ( - - ); - })} - - )} -
- {/* END */} ); }; From bce170484c758c8636f80e9e8c77587c1ddbc9e9 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 9 Jun 2021 18:19:41 -0700 Subject: [PATCH 4/7] chore: mobile styles --- src/pages/observability-packs.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 4d7347de0..f0768c5db 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -64,7 +64,7 @@ const ObservabilityPacksPage = ({ data, location }) => { } }, [querySearch, queryFilter, querySort]); - const [view, setView] = useState(VIEWS.LIST); + const [view, setView] = useState(VIEWS.GRID); useEffect(() => { setView(view); @@ -216,6 +216,10 @@ const ObservabilityPacksPage = ({ data, location }) => { grid-template-columns: repeat(3, 1fr); } + @media (max-width: 1180px) { + grid-template-columns: repeat(1, 1fr); + } + ${view === VIEWS.LIST && css` display: initial; @@ -261,6 +265,10 @@ const ObservabilityPacksPage = ({ data, location }) => { padding: 0 1%; max-height: 150px; margin: 0; + + @media (max-width: 1080px) { + display: none; + } `} `} /> From 30b6ec622d7031a61d5ff4097819344649bf1282 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 9 Jun 2021 18:20:57 -0700 Subject: [PATCH 5/7] chore: removed duplicate code --- src/components/PackGrid.js | 35 -------- src/components/PackGridTile.js | 112 -------------------------- src/components/PackList.js | 25 ------ src/components/PackListTile.js | 141 --------------------------------- 4 files changed, 313 deletions(-) delete mode 100644 src/components/PackGrid.js delete mode 100644 src/components/PackGridTile.js delete mode 100644 src/components/PackList.js delete mode 100644 src/components/PackListTile.js diff --git a/src/components/PackGrid.js b/src/components/PackGrid.js deleted file mode 100644 index f6e004932..000000000 --- a/src/components/PackGrid.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { css } from '@emotion/react'; -import PropTypes from 'prop-types'; - -const PackGrid = ({ children, className }) => { - return ( -
- {children} -
- ); -}; - -PackGrid.propTypes = { - children: PropTypes.node.isRequired, - className: PropTypes.string, -}; - -export default PackGrid; diff --git a/src/components/PackGridTile.js b/src/components/PackGridTile.js deleted file mode 100644 index c5289a76d..000000000 --- a/src/components/PackGridTile.js +++ /dev/null @@ -1,112 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@emotion/react'; -import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic'; -import NewRelicIcon from '@newrelic/gatsby-theme-newrelic/src/icons/logo/newrelic.js'; - -const PackGridTile = ({ - name, - description, - featuredImageUrl, - supportLevel, - to, - className, -}) => ( - -
-
- {featuredImageUrl ? ( - Preview of the pack in action - ) : ( - - )} -
-
-
-

- {name}{' '} - {supportLevel === 'NEWRELIC' && ( - - - - )} -

-
-

- {description} -

-
-
- -); - -PackGridTile.propTypes = { - name: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - featuredImageUrl: PropTypes.string, - supportLevel: PropTypes.string, - to: PropTypes.string.isRequired, - className: PropTypes.string, -}; - -export default PackGridTile; diff --git a/src/components/PackList.js b/src/components/PackList.js deleted file mode 100644 index 2aec23f70..000000000 --- a/src/components/PackList.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { css } from '@emotion/react'; -import PropTypes from 'prop-types'; - -const PackList = ({ children, className }) => { - return ( -
- {children} -
- ); -}; - -PackList.propTypes = { - children: PropTypes.node.isRequired, - className: PropTypes.string, -}; - -export default PackList; diff --git a/src/components/PackListTile.js b/src/components/PackListTile.js deleted file mode 100644 index 59de4a075..000000000 --- a/src/components/PackListTile.js +++ /dev/null @@ -1,141 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@emotion/react'; -import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic'; -import NewRelicIcon from '@newrelic/gatsby-theme-newrelic/src/icons/logo/newrelic.js'; - -const PackListTile = ({ - name, - description, - featuredImageUrl, - supportLevel, - to, - className, -}) => ( - -
-
- {featuredImageUrl ? ( - Preview of the pack in action - ) : ( - - )} -
-
-
-

- {name}{' '} - {supportLevel === 'NEWRELIC' && ( - - - - )} -

-
-

- {description} -

-
-
- -); - -PackListTile.propTypes = { - name: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - featuredImageUrl: PropTypes.string, - supportLevel: PropTypes.string, - to: PropTypes.string.isRequired, - className: PropTypes.string, -}; - -export default PackListTile; From 74b880a0ab5f866f75b4175448b77392e51f12d2 Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Wed, 9 Jun 2021 18:21:05 -0700 Subject: [PATCH 6/7] chore: cleanup imports --- src/pages/observability-packs.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index f0768c5db..7d2991a24 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -3,10 +3,6 @@ import { graphql } from 'gatsby'; import React, { useState, useEffect } from 'react'; import DevSiteSeo from '../components/DevSiteSeo'; import { css } from '@emotion/react'; -// import PackGrid from '../components/PackGrid'; -// import PackGridTile from '../components/PackGridTile'; -// import PackListTile from '../components/PackListTile'; -// import PackList from '../components/PackList'; import Select from '../components/Select'; import SegmentedControl from '../components/SegmentedControl'; import { From e71b5f360ef1fcd56a6442724596dafad1347e9f Mon Sep 17 00:00:00 2001 From: Zack Stickles Date: Thu, 10 Jun 2021 13:56:24 -0700 Subject: [PATCH 7/7] chore: ensure that images are always the same width --- src/pages/observability-packs.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js index 7d2991a24..a80dfe9c9 100644 --- a/src/pages/observability-packs.js +++ b/src/pages/observability-packs.js @@ -248,19 +248,16 @@ const ObservabilityPacksPage = ({ data, location }) => { }} css={css` display: block; - width: 100%; - padding: 0 5%; height: 200px; background-color: var(--color-white); - margin: auto; object-fit: scale-down; + width: ${view === VIEWS.GRID ? 100 : 25}%; + padding: 0 ${view === VIEWS.GRID ? 5 : 1}%; + margin: ${view === VIEWS.GRID ? 'auto' : 0}; ${view === VIEWS.LIST && css` - width: 25%; - padding: 0 1%; max-height: 150px; - margin: 0; @media (max-width: 1080px) { display: none; @@ -271,6 +268,15 @@ const ObservabilityPacksPage = ({ data, location }) => {