Skip to content
This repository has been archived by the owner on Dec 8, 2023. It is now read-only.

Commit

Permalink
feat: NR-1512 Quickstart Tiles UI Updates
Browse files Browse the repository at this point in the history 
- Update styles for quickstart tiles
- remove dark mode code in these components
- remove List vs Grid View code on homepage
  • Loading branch information
@tabathadelane
tabathadelane committed Apr 29, 2022
1 parent 542e51f commit 8de21b6
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 77 deletions.
35 changes: 30 additions & 5 deletions src/components/QuickstartTile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@ import {
import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants';
import QuickstartImg from './QuickstartImg';

import { QUICKSTARTS_COLLAPSE_BREAKPOINT } from '../data/constants';

import './fonts.scss';

const QuickstartTile = ({
id,
title,
view,
featured,
name,
fields,
Expand All @@ -34,23 +35,20 @@ const QuickstartTile = ({
tessen.track({
eventName: 'instantObservability',
category: 'GuidedInstallClick',
publicCatalogView: view,
quickstartName: name,
});
break;
case quickstartId === RESERVED_QUICKSTART_IDS.BUILD_YOUR_OWN_QUICKSTART:
tessen.track({
eventName: 'instantObservability',
category: 'BuildYourOwnQuickstartClick',
publicCatalogView: view,
quickstartName: name,
});
break;
default:
tessen.track({
eventName: 'instantObservability',
category: 'QuickstartClick',
publicCatalogView: view,
quickstartName: name,
});
}
Expand All @@ -76,16 +74,28 @@ const QuickstartTile = ({
border-radius: 8px;
box-shadow: none;
@media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
padding: 0 32px 24px 32px;
width: 80%;
min-width: 250px;
}
h4,
p,
span {
font-family: 'Söhne-Leicht';
letter-spacing: -0.5%;
color: #1d252c;
font-weight: 600;
@media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
width: 100%;
font-family: 'Söhne-Buch';
font-weight: 400;
}
}
/* Default grid view */
display: grid;
align-items: flex-start;
grid-gap: 0.2rem;
Expand All @@ -95,6 +105,11 @@ 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)}
>
Expand All @@ -120,6 +135,12 @@ const QuickstartTile = ({
object-fit: scale-down;
height: 45px;
margin: 35px 0 0;
@media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
margin: 20px 0 0;
height: 70px;
max-width: 240px;
}
`}
/>
</div>
Expand Down Expand Up @@ -158,6 +179,10 @@ const QuickstartTile = ({
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
@media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) {
-webkit-line-clamp: 2;
}
`}
>
{summary || 'No summary provided'}
Expand Down
105 changes: 33 additions & 72 deletions src/pages/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,11 +26,6 @@ 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 DOUBLE_COLUMN_BREAKPOINT = '1180px';
const TRIPLE_COLUMN_BREAKPOINT = '1350px';
const SINGLE_COLUMN_BREAKPOINT = QUICKSTARTS_COLLAPSE_BREAKPOINT;
Expand Down Expand Up @@ -86,7 +78,6 @@ const filterByCategory = (category) => {
};

const QuickstartsPage = ({ data, location }) => {
const [view] = useState(VIEWS.GRID);
const tessen = useTessen();

const [search, setSearch] = useState('');
Expand Down Expand Up @@ -272,9 +263,11 @@ const QuickstartsPage = ({ data, location }) => {
grid-gap: 70px;
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}) {
margin: 500px auto;
grid-gap: 0;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: 'main';
Expand Down Expand Up @@ -528,24 +521,16 @@ const QuickstartsPage = ({ data, location }) => {
padding: 10px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
${view === VIEWS.GRID &&
css`
@media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(1, 1fr);
}
`}
${view === VIEWS.LIST &&
css`
grid-auto-rows: 1fr;
grid-template-columns: 1fr;
grid-gap: 1.25rem;
`};
@media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(1, 1fr);
}
`}
>
{!loadComplete && <Spinner />}
Expand All @@ -560,7 +545,6 @@ const QuickstartsPage = ({ data, location }) => {
{mostPopularQuickStarts.map((pack) => (
<QuickstartTile
key={pack.id}
view={view}
featured={false}
css={css`
grid-template-rows:
Expand Down Expand Up @@ -608,24 +592,16 @@ const QuickstartsPage = ({ data, location }) => {
grid-gap: 1.25rem;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
${view === VIEWS.GRID &&
css`
@media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(1, 1fr);
}
`}
${view === VIEWS.LIST &&
css`
grid-auto-rows: 1fr;
grid-template-columns: 1fr;
grid-gap: 1.25rem;
`};
@media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(1, 1fr);
}
`}
>
{!loadComplete && <Spinner />}
Expand All @@ -634,7 +610,6 @@ const QuickstartsPage = ({ data, location }) => {
{featuredQuickStarts.map((pack) => (
<QuickstartTile
key={pack.id}
view={view}
featured={false}
css={css`
grid-template-rows:
Expand Down Expand Up @@ -704,36 +679,22 @@ const QuickstartsPage = ({ data, location }) => {
grid-gap: 1.25rem;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
${view === VIEWS.GRID &&
css`
@media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: ${TRIPLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: ${DOUBLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(1, 1fr);
}
`}
${view === VIEWS.LIST &&
css`
grid-auto-rows: 1fr;
grid-template-columns: 1fr;
grid-gap: 1.25rem;
`};
@media (max-width: ${SINGLE_COLUMN_BREAKPOINT}) {
grid-template-columns: repeat(1, 1fr);
}
`}
>
{!isSearchInputEmpty && <SuperTiles />}
{filteredQuickstarts.map((pack) => (
<QuickstartTile
key={pack.id}
view={view}
featured={false}
{...pack}
/>
<QuickstartTile key={pack.id} featured={false} {...pack} />
))}
</div>
</div>
Expand Down

0 comments on commit 8de21b6

Please sign in to comment.