crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 16:07:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes top spacing discrepancies (#1101)

Browse Source
This commit is contained in:
Michael Novotny 2023-07-24 18:34:47 -05:00 committed by GitHub
parent 574e7eea9e
commit 88a035fb42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/search/layout.tsx
View File

@ -7,12 +7,12 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
<Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col px-4 py-6 text-black dark:text-white md:flex-row">
<div className="order-first flex-none md:pr-12 md:pt-6">
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
<div className="order-first w-full flex-none md:max-w-[125px]">
<Collections />
</div>
<div className="order-last min-h-screen w-full md:order-none">{children}</div>
<div className="order-none md:order-last md:flex-none md:pl-12 md:pt-6">
<div className="order-none flex-none md:order-last md:w-[125px]">
<FilterList list={sorting} title="Sort by" />
</div>
</div>

2
components/grid/index.tsx
View File

@ -2,7 +2,7 @@ import clsx from 'clsx';
function Grid(props: React.ComponentProps<'ul'>) {
return (
<ul {...props} className={clsx('grid grid-flow-row gap-4 py-5', props.className)}>
<ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
{props.children}
</ul>
);

4
components/grid/three-items.tsx
View File

@ -8,7 +8,7 @@ function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half
<div
className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
>
<Link className="block h-full p-2" href={`/product/${item.handle}`}>
<Link className="block h-full" href={`/product/${item.handle}`}>
<GridTileImage
src={item.featuredImage.url}
width={size === 'full' ? 1080 : 540}
@ -38,7 +38,7 @@ export async function ThreeItemGrid() {
const [firstProduct, secondProduct, thirdProduct] = homepageItems;
return (
<section className="mx-auto max-w-screen-2xl p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2">
<section className="mx-auto max-w-screen-2xl gap-4 pb-4 lg:grid lg:grid-cols-6 lg:grid-rows-2">
<ThreeItemGridItem size="full" item={firstProduct} />
<ThreeItemGridItem size="half" item={secondProduct} />
<ThreeItemGridItem size="half" item={thirdProduct} />

6
components/layout/search/filter/index.tsx
View File

@ -7,18 +7,18 @@ export type PathFilterItem = { title: string; path: string };
function FilterItemList({ list }: { list: ListItem[] }) {
return (
<div className="hidden md:block">
<>
{list.map((item: ListItem, i) => (
<FilterItem key={i} item={item} />
))}
</div>
</>
);
}
export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
return (
<>
<nav className="col-span-2 w-full flex-none">
<nav>
{title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
<ul className="hidden md:block">
<FilterItemList list={list} />