From 8d4bf1969981de6c9b4ac14cad11b7548be48b7f Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 2 May 2022 13:15:21 -0700 Subject: [PATCH 1/5] feat: add carousel settings to match screen breakpoints --- src/pages/index.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 79ca7412..c636da17 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -201,6 +201,7 @@ const QuickstartsPage = ({ data, location }) => { return found.displayName; }; + // Settings for Slick-Carousel const settings = { dots: false, infinite: false, @@ -209,27 +210,28 @@ const QuickstartsPage = ({ data, location }) => { slidesToScroll: 4, adaptiveHeight: false, adaptiveWidth: true, + mobileFirst: true, // necessary for breakpoints to work as expected responsive: [ { - breakpoint: 1081, + breakpoint: parseInt(TRIPLE_COLUMN_BREAKPOINT), settings: { - slidesToShow: 1, - slidesToScroll: 1, + slidesToShow: 3, + slidesToScroll: 3, infinite: true, dots: false, }, }, { - breakpoint: 760, + breakpoint: parseInt(DOUBLE_COLUMN_BREAKPOINT), settings: { - slidesToShow: 1, - slidesToScroll: 1, + slidesToShow: 2, + slidesToScroll: 2, infinite: true, dots: false, }, }, { - breakpoint: 480, + breakpoint: parseInt(SINGLE_COLUMN_BREAKPOINT), settings: { slidesToShow: 1, slidesToScroll: 1, From 091be5e3820d2c5027ed06dc8a75197b1c7e8d23 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 2 May 2022 15:00:02 -0700 Subject: [PATCH 2/5] wip --- src/components/styles.scss | 25 +++++++++++++++--- src/pages/index.jsx | 53 +++----------------------------------- 2 files changed, 24 insertions(+), 54 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 45833328..3cf866bc 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -55,14 +55,30 @@ input[type='text'] { .slide { height: 100%; } + +.slick-list{ + margin: 0 0px 0 -10px !important; +} + +.slick-dots li button { + height: 40px !important; +} + +.slick-next { + right: -4px !important; +} +.slick-prev { + z-index: 100; + left: -8px !important; +} .slick-prev:before, .slick-next:before { - color: var(--primary-text-color) !important; + color: red !important; + font-size: 40px !important; } .slick-initialized .slick-slide{ - justify-content: space-between; - padding:0 8px; + padding:0 0px; &:first-child { padding-left: 0; @@ -72,12 +88,13 @@ input[type='text'] { display: flex !important; margin-top:2px; flex-direction: row; + column-gap: 15px; flex-wrap: nowrap; align-items: flex-start; } .slick-slide { - height: inherit !important; + height: inherit !important; } @media only screen and (max-width: 425px){ #onetrust-banner-sdk.otFloatingRoundedCorner { diff --git a/src/pages/index.jsx b/src/pages/index.jsx index c636da17..bc9f4b8b 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -25,6 +25,7 @@ import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import '../components/fonts.scss'; +import '../components/styles.scss'; const TRIPLE_COLUMN_BREAKPOINT = '1420px'; const DOUBLE_COLUMN_BREAKPOINT = '1180px'; @@ -518,25 +519,7 @@ const QuickstartsPage = ({ data, location }) => { Most Popular -
+
{!loadComplete && } {loadComplete && ( { ))} @@ -589,25 +566,7 @@ const QuickstartsPage = ({ data, location }) => { Featured
-
+
{!loadComplete && } {loadComplete && ( @@ -615,12 +574,6 @@ const QuickstartsPage = ({ data, location }) => { ))} From 4fb3416650b43a56a4347afe4bd3d52b5f1bedeb Mon Sep 17 00:00:00 2001 From: Joe Gregory Date: Mon, 2 May 2022 16:08:57 -0700 Subject: [PATCH 3/5] chore: added carousel arrows --- .../gatsby-theme-newrelic/icons/feather.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js index e8b45c27..bd3b8d7d 100644 --- a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js +++ b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js @@ -110,6 +110,42 @@ const featherIcons = { ), zap: , + 'carousel-left': ( + <> + + + + + ), + 'carousel-right': ( + <> + + + + + ), }; export default featherIcons; From ce9efff0581acf31692f02464fad12f9104036bc Mon Sep 17 00:00:00 2001 From: Joe Gregory Date: Mon, 2 May 2022 16:09:24 -0700 Subject: [PATCH 4/5] chore: updated carousel arrows + styling --- src/components/styles.scss | 10 ++---- src/pages/index.jsx | 74 +++++++++++++++++++++++++++----------- 2 files changed, 56 insertions(+), 28 deletions(-) diff --git a/src/components/styles.scss b/src/components/styles.scss index 3cf866bc..d1cb75b4 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -65,17 +65,13 @@ input[type='text'] { } .slick-next { - right: -4px !important; + right: -5px !important; } .slick-prev { z-index: 100; left: -8px !important; } -.slick-prev:before, -.slick-next:before { - color: red !important; - font-size: 40px !important; -} + .slick-initialized .slick-slide{ padding:0 0px; @@ -95,7 +91,7 @@ input[type='text'] { .slick-slide { height: inherit !important; -} +} @media only screen and (max-width: 425px){ #onetrust-banner-sdk.otFloatingRoundedCorner { width: 100% !important; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index bc9f4b8b..0a2d147e 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,31 +1,30 @@ -import PropTypes from 'prop-types'; -import { graphql } from 'gatsby'; -import React, { useState, useEffect } from 'react'; -import IOSeo from '../components/IOSeo'; -import { css } from '@emotion/react'; -import Overlay from '../components/Overlay'; -import QuickstartTile from '../components/QuickstartTile'; -import IOBanner from '../components/IOBanner'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import '../components/fonts.scss'; +import '../components/styles.scss'; + import { - useTessen, Button, - Spinner, Icon, + Spinner, + useTessen, } from '@newrelic/gatsby-theme-newrelic'; -import { navigate } from '@reach/router'; +import React, { useEffect, useState } from 'react'; -import { useDebounce } from 'react-use'; -import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; -import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; import CATEGORIES from '../data/instant-observability-categories'; - -import SuperTiles from '../components/SuperTiles'; - +import IOBanner from '../components/IOBanner'; +import IOSeo from '../components/IOSeo'; +import Overlay from '../components/Overlay'; +import PropTypes from 'prop-types'; +import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants'; +import QuickstartTile from '../components/QuickstartTile'; import Slider from 'react-slick'; -import 'slick-carousel/slick/slick.css'; -import 'slick-carousel/slick/slick-theme.css'; -import '../components/fonts.scss'; -import '../components/styles.scss'; +import SuperTiles from '../components/SuperTiles'; +import { css } from '@emotion/react'; +import { graphql } from 'gatsby'; +import { navigate } from '@reach/router'; +import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; +import { useDebounce } from 'react-use'; const TRIPLE_COLUMN_BREAKPOINT = '1420px'; const DOUBLE_COLUMN_BREAKPOINT = '1180px'; @@ -202,6 +201,37 @@ const QuickstartsPage = ({ data, location }) => { return found.displayName; }; + const PrevArrow = ( + + ); + const NextArrow = ( + + ); + // Settings for Slick-Carousel const settings = { dots: false, @@ -212,6 +242,8 @@ const QuickstartsPage = ({ data, location }) => { adaptiveHeight: false, adaptiveWidth: true, mobileFirst: true, // necessary for breakpoints to work as expected + prevArrow: PrevArrow, + nextArrow: NextArrow, responsive: [ { breakpoint: parseInt(TRIPLE_COLUMN_BREAKPOINT), From 47d7abd63ba72d8e9f75e034df927a7aadf4d5c2 Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Mon, 2 May 2022 17:39:27 -0700 Subject: [PATCH 5/5] feat: update styles on Guided Install Tile -remove unused ImageSlider Component -add extra layout tweaks now that the whole design is coming together --- .../GuidedInstallTileMostPopular.js | 110 ++++++--- src/components/IOBanner.js | 3 + src/components/ImageSlider.js | 209 ------------------ src/components/QuickstartTile.js | 16 +- src/components/styles.scss | 11 +- src/pages/index.jsx | 33 +-- 6 files changed, 104 insertions(+), 278 deletions(-) delete mode 100644 src/components/ImageSlider.js diff --git a/src/components/GuidedInstallTileMostPopular.js b/src/components/GuidedInstallTileMostPopular.js index f20accdc..954f6484 100644 --- a/src/components/GuidedInstallTileMostPopular.js +++ b/src/components/GuidedInstallTileMostPopular.js @@ -5,11 +5,17 @@ import { Button, useInstrumentedHandler, } from '@newrelic/gatsby-theme-newrelic'; -import { SIGNUP_LINK, NR1_GUIDED_INSTALL_NERDLET } from '../data/constants'; +import { + SIGNUP_LINK, + NR1_GUIDED_INSTALL_NERDLET, + QUICKSTARTS_COLLAPSE_BREAKPOINT, +} from '../data/constants'; import { navigate } from 'gatsby'; import Cookies from 'js-cookie'; import { getGuidedInstallStackedNr1Url } from '../utils/get-pack-nr1-url'; +import './fonts.scss'; + const GuidedInstallTileMostPopular = () => { const isReturningUser = Boolean(Cookies.get('ajs_user_id')); @@ -35,49 +41,72 @@ const GuidedInstallTileMostPopular = () => {
- - First step -

Guided install

+ + First Step +
{ >

{ display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; - -webkit-line-clamp: 5; + -webkit-line-clamp: 3; `} > Many engineers start here. You'll install an agent with a single @@ -110,14 +144,24 @@ const GuidedInstallTileMostPopular = () => {

diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js index dfde6f50..ac93570c 100644 --- a/src/components/IOBanner.js +++ b/src/components/IOBanner.js @@ -146,6 +146,9 @@ const IOBanner = ({ search, setSearch, setIsSearchInputEmpty }) => { background: #1d252c; box-sizing: border-box; + @media (max-width: 1130px) { + --banner-height: 425px; + } @media (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { --banner-height: unset; } diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js deleted file mode 100644 index 5c50e18e..00000000 --- a/src/components/ImageSlider.js +++ /dev/null @@ -1,209 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { useState } from 'react'; -import { css } from '@emotion/react'; -import { Button, Icon } from '@newrelic/gatsby-theme-newrelic'; -import { Transition, animated } from 'react-spring'; - -const ImageSlider = ({ images, height }) => { - const [selectedImageIndex, setSelectedImageIndex] = useState(0); - const [forward, setForward] = useState(true); - - const handleClickNext = () => { - const nextImageIndex = selectedImageIndex + 1; - setSelectedImageIndex(nextImageIndex % images.length); - setForward(true); - }; - - const handleClickPrev = () => { - const prevImageIndex = selectedImageIndex - 1; - if (prevImageIndex < 0) { - setSelectedImageIndex(images.length - 1); - } else { - setSelectedImageIndex(prevImageIndex % images.length); - } - setForward(false); - }; - - const handleClickSpecificSlide = (indexValue) => { - setSelectedImageIndex(indexValue); - }; - - return ( - <> -
- {images.length > 1 && ( -
- - -
- )} - { - - {(styles, item) => ( - - - {`${item.split('/').slice(-1)}`} - - - )} - - } -
- {images.length > 1 && ( -
-
- {images.map((_, index) => ( - - ))} -
-
- )} - - ); -}; - -ImageSlider.propTypes = { - images: PropTypes.array.isRequired, - height: PropTypes.number.isRequired, -}; - -export default ImageSlider; diff --git a/src/components/QuickstartTile.js b/src/components/QuickstartTile.js index 74cb4250..0c0af6ec 100644 --- a/src/components/QuickstartTile.js +++ b/src/components/QuickstartTile.js @@ -75,7 +75,7 @@ const QuickstartTile = ({ box-shadow: none; @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { - padding: 0 32px 24px 32px; + padding: 0 32px 24px 32px; width: 100%; min-width: 250px; } @@ -89,11 +89,10 @@ const QuickstartTile = ({ font-weight: 600; @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { - width: 100%; - font-family: 'Söhne-Buch'; - font-weight: 400; - } - + width: 100%; + font-family: 'Söhne-Buch'; + font-weight: 400; + } } display: grid; @@ -105,11 +104,6 @@ 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)} > diff --git a/src/components/styles.scss b/src/components/styles.scss index d1cb75b4..655bea06 100644 --- a/src/components/styles.scss +++ b/src/components/styles.scss @@ -65,21 +65,14 @@ input[type='text'] { } .slick-next { - right: -5px !important; + right: -8px !important; } .slick-prev { z-index: 100; - left: -8px !important; + left: -7px !important; } -.slick-initialized .slick-slide{ - padding:0 0px; - - &:first-child { - padding-left: 0; - } -} .slick-track { display: flex !important; margin-top:2px; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 0a2d147e..5bf7ca46 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -288,7 +288,7 @@ const QuickstartsPage = ({ data, location }) => {
{ grid-template-rows: unset; } @media screen and (max-width: 760px) { - margin: 500px auto; + margin: 400px auto; } `} > @@ -532,15 +532,16 @@ const QuickstartsPage = ({ data, location }) => { font-size: 16px; color: var(--color-neutrals-800); align-text: center; + margin: 0 0 13px 4px; span { - color: var(--text-color); - /* target inner children of parent span */ - span, - strong { - } } strong { - color: var(--text-color); + font-family: 'Söhne-Leicht'; + font-size: 28px; + font-weight: 600; + line-height: 36px; + letter-spacing: -0.5px; + color: #1d252c; } @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { padding: 0 0 0.5rem; @@ -579,15 +580,15 @@ const QuickstartsPage = ({ data, location }) => { font-size: 16px; color: var(--color-neutrals-800); align-text: center; - span { - color: var(--text-color); - /* target inner children of parent span */ - span, - strong { - } - } + margin: 75px 0 35px 4px; + strong { - color: var(--text-color); + font-family: 'Söhne-Leicht'; + font-size: 28px; + font-weight: 600; + line-height: 36px; + letter-spacing: -0.5px; + color: #1d252c; } @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { padding: 0 0 0.5rem;