diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx index 0f04c9ba8..f53dfc64e 100644 --- a/src/components/sections/ProductGallery/ProductGallery.tsx +++ b/src/components/sections/ProductGallery/ProductGallery.tsx @@ -11,6 +11,8 @@ import { import { useGalleryQuery } from './useGalleryQuery' import { useOrderedFacets } from './useOrderedFacets' +import './product-gallery.scss' + const GalleryPage = lazy(() => import('./ProductGalleryPage')) const Sort = lazy(() => import('src/components/search/Sort')) const Filter = lazy(() => import('src/components/search/Filter')) diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss new file mode 100644 index 000000000..c82e41239 --- /dev/null +++ b/src/components/sections/ProductGallery/product-gallery.scss @@ -0,0 +1,150 @@ +@import "../../../styles/scaffold.scss"; + +.product-listing { + padding-top: 0; + --product-listing-row-height: var(--space-6); + + @include media(">=notebook") { + padding-top: var(--page-padding-notebook); + } +} + +// Temporary till we have skeletons. +.product-listing__data-loading { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding-top: var(--space-5); +} + +.product-listing__content-grid { + display: flex; + flex-direction: column; + padding-right: 0; + padding-left: 0; + + @include media(">=notebook") { + display: grid; + grid-template-rows: var(--product-listing-row-height) auto; + grid-template-columns: repeat(12, 1fr); + padding-right: var(--page-padding-notebook); + padding-left: var(--page-padding-notebook); + column-gap: var(--space-4); + row-gap: var(--space-0); + } +} + +.product-listing__filters { + @include media(">=notebook") { + position: sticky; + top: var(--grid-gap-0); + grid-row: span 2; + grid-column: 1 / span 3; + align-self: start; + } +} + +.product-listing__sort { + display: flex; + align-items: center; + justify-content: space-between; + order: 1; + width: 100%; + min-height: rem(68px); + padding: var(--space-1) var(--space-3) var(--space-2); + background-color: var(--bg-neutral-lightest); + + @include media(">=notebook") { + grid-column: 6 / span 7; + justify-content: flex-end; + order: unset; + min-height: initial; + padding: 0; + } +} + +.product-listing__results-count { + display: flex; + align-items: center; + justify-content: center; + order: 2; + min-height: rem(45px); + padding: var(--space-2) var(--space-3); + background-color: var(--bg-neutral-light); + + @include media(">=notebook") { + grid-column: 4 /span 2; + justify-content: left; + order: unset; + min-height: initial; + padding: 0; + background-color: unset; + } +} + +.product-listing__results { + --padding: var(--space-1); + + order: 3; + padding: var(--padding) var(--padding) 0; + background-color: var(--bg-neutral-light); + + @include media(">=notebook") { + grid-column: 4 / span 9; + order: unset; + padding: 0; + background-color: unset; + } + + .product-card[data-store-card] { min-width: 100%; } +} + +.product-listing__results-sponsored { + margin: var(--space-1) calc(-1 * var(--padding)); + padding: var(--space-4) var(--space-3); + background-color: var(--bg-neutral-lightest); + + @include media(">=notebook") { + margin: var(--space-6) 0; + padding: 0; + + [data-store-tiles] { + column-gap: var(--grid-gap-0); + row-gap: 0; + } + } + + h3 { margin-bottom: var(--space-1); } +} + +.product-listing__pagination { + display: flex; + align-items: center; + justify-content: center; + min-height: var(--space-13); + margin-right: calc(-1 * var(--padding)); + margin-left: calc(-1 * var(--padding)); + padding: var(--space-4); + background-color: var(--bg-neutral-lightest); + + @include media(">=notebook") { + padding: var(--space-1) var(--space-2); + } + + &--top { + margin-bottom: var(--padding); + } + + &--bottom { + margin-top: var(--padding); + } + + [data-store-button] { + width: 100%; + + @include media(">=notebook") { + width: fit-content; + } + } +} diff --git a/src/components/ui/SROnly/SROnly.tsx b/src/components/ui/SROnly/SROnly.tsx index 918b13f50..8756c9cb2 100644 --- a/src/components/ui/SROnly/SROnly.tsx +++ b/src/components/ui/SROnly/SROnly.tsx @@ -1,13 +1,17 @@ +import type { ElementType } from 'react' import React from 'react' import './sr-only.scss' interface Props { text: string + as?: ElementType } -function SROnly({ text }: Props) { - return {text} +function SROnly({ text, as }: Props) { + const Component = as ?? 'span' + + return {text} } export default SROnly diff --git a/src/pages/s.tsx b/src/pages/s.tsx index f7d84c0b4..40566d26a 100644 --- a/src/pages/s.tsx +++ b/src/pages/s.tsx @@ -10,6 +10,7 @@ import type { SearchPageQueryQueryVariables, } from '@generated/graphql' import { GatsbySeo } from 'gatsby-plugin-next-seo' +import SROnly from 'src/components/ui/SROnly' export type Props = PageProps< SearchPageQueryQuery, @@ -26,7 +27,7 @@ function Page(props: Props) { const { locale } = useSession() const searchParams = useSearchParams(props.location) - const title = site?.siteMetadata?.title ?? '' + const title = 'Search Results | FastStore' if (!searchParams) { return null @@ -56,8 +57,7 @@ function Page(props: Props) { Sections: Components imported from '../components/sections' only. Do not import or render components from any other folder in here. */} -

{title}

- + ) diff --git a/src/styles/pages/product-listing.scss b/src/styles/pages/product-listing.scss index 7eec64d98..287798bb4 100644 --- a/src/styles/pages/product-listing.scss +++ b/src/styles/pages/product-listing.scss @@ -1,163 +1,14 @@ -@import "../scaffold.scss"; - -.product-listing { - padding-top: 0; - --product-listing-row-height: var(--space-6); - - @include media(">=notebook") { - padding-top: var(--page-padding-notebook); - } -} +@import "../vendors/include-media"; .product-listing__breadcrumb { padding-top: var(--space-3); padding-bottom: var(--space-3); } -// Temporary till we have skeletons. -.product-listing__data-loading { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding-top: var(--space-5); -} - .product-listing__hero { width: 100%; } -.product-listing__content-grid { - display: flex; - flex-direction: column; - padding-right: 0; - padding-left: 0; - - @include media(">=notebook") { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-templat-rows: var(--product-listing-row-height) auto; - padding-right: var(--page-padding-notebook); - padding-left: var(--page-padding-notebook); - column-gap: var(--space-4); - row-gap: var(--space-0); - } -} - -.product-listing__filters { - @include media(">=notebook") { - position: sticky; - top: var(--grid-gap-0); - grid-row: span 2; - grid-column: 1 / span 3; - align-self: start; - } -} - -.product-listing__sort { - display: flex; - align-items: center; - justify-content: space-between; - order: 1; - width: 100%; - min-height: rem(68px); - padding: var(--space-1) var(--space-3) var(--space-2); - background-color: var(--bg-neutral-lightest); - - @include media(">=notebook") { - grid-column: 6 / span 7; - justify-content: flex-end; - order: unset; - min-height: initial; - padding: 0; - } -} - -.product-listing__results-count { - display: flex; - align-items: center; - justify-content: center; - order: 2; - min-height: rem(45px); - padding: var(--space-2) var(--space-3); - background-color: var(--bg-neutral-light); - - @include media(">=notebook") { - grid-column: 4 /span 2; - justify-content: left; - order: unset; - min-height: initial; - padding: 0; - background-color: unset; - } -} - -.product-listing__results { - --padding: var(--space-1); - - order: 3; - padding: var(--padding) var(--padding) 0; - background-color: var(--bg-neutral-light); - - @include media(">=notebook") { - grid-column: 4 / span 9; - order: unset; - padding: 0; - background-color: unset; - } - - .product-card[data-store-card] { min-width: 100%; } -} - -.product-listing__results-sponsored { - margin: var(--space-1) calc(-1 * var(--padding)); - padding: var(--space-4) var(--space-3); - background-color: var(--bg-neutral-lightest); - - @include media(">=notebook") { - margin: var(--space-6) 0; - padding: 0; - - [data-store-tiles] { - column-gap: var(--grid-gap-0); - row-gap: 0; - } - } - - h3 { margin-bottom: var(--space-1); } -} - -.product-listing__pagination { - display: flex; - align-items: center; - justify-content: center; - min-height: var(--space-13); - margin-right: calc(-1 * var(--padding)); - margin-left: calc(-1 * var(--padding)); - padding: var(--space-4); - background-color: var(--bg-neutral-lightest); - - @include media(">=notebook") { - padding: var(--space-1) var(--space-2); - } - - &--top { - margin-bottom: var(--padding); - } - - &--bottom { - margin-top: var(--padding); - } - - [data-store-button] { - width: 100%; - - @include media(">=notebook") { - width: fit-content; - } - } -} - .product-listing__scroll-top { display: flex; justify-content: center;