crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust layout to fit within mobile view

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2024-04-16 20:13:21 +07:00
parent b08cf040ce
commit af8739d695
No known key found for this signature in database
GPG Key ID: CFD53CE570D42DF5
6 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -35,7 +35,7 @@ export const metadata = {
export default async function RootLayout({ children }: { children: ReactNode }) { export default async function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" className={GeistSans.variable}> <html lang="en" className={GeistSans.variable}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white"> <body className="min-w-fit overflow-auto bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<header> <header>
<Banner /> <Banner />
<Navbar /> <Navbar />

2
components/banner.tsx
View File

@ -3,7 +3,7 @@ import Tooltip from './tooltip';
function Banner() { function Banner() {
return ( return (
<div className="flex h-10 w-full items-center justify-center gap-x-8 bg-primary text-sm font-medium text-dark"> <div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-dark md:flex-row md:p-0">
<span> <span>
Speak to a Specialist Now:{' '} Speak to a Specialist Now:{' '}
<a href={`tel:${8882422605}`} className="ml-1"> <a href={`tel:${8882422605}`} className="ml-1">

4
components/layout/footer.tsx
View File

@ -28,7 +28,7 @@ export default async function Footer() {
</a> </a>
<p className="ml-4">Monday - Friday 9:00am - 8:00pm EST</p> <p className="ml-4">Monday - Friday 9:00am - 8:00pm EST</p>
<p className="ml-4">Saturday 11:00am - 4:00pm EST</p> <p className="ml-4">Saturday 11:00am - 4:00pm EST</p>
<div className="ml-4 mt-3 flex flex-row items-center gap-4"> {/* <div className="ml-4 mt-3 flex flex-row items-center gap-4">
<a href="https://www.facebook.com/carpartplanet" target="_blank" rel="noreferrer"> <a href="https://www.facebook.com/carpartplanet" target="_blank" rel="noreferrer">
<Image alt="facebook" src="/icons/facebook.png" width={20} height={20} /> <Image alt="facebook" src="/icons/facebook.png" width={20} height={20} />
</a> </a>
@ -54,7 +54,7 @@ export default async function Footer() {
<a href="https://twitter.com/carpartplanet" target="_blank" rel="noreferrer"> <a href="https://twitter.com/carpartplanet" target="_blank" rel="noreferrer">
<Image alt="twitter" src="/icons/twitter.png" width={16} height={16} /> <Image alt="twitter" src="/icons/twitter.png" width={16} height={16} />
</a> </a>
</div> </div> */}
</div> </div>
<Suspense <Suspense
fallback={ fallback={

6
components/layout/navbar/index.tsx
View File

@ -29,7 +29,7 @@ export default async function Navbar() {
className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
> >
<LogoSquare /> <LogoSquare />
<div className="flex-none text-sm font-medium uppercase md:hidden lg:block"> <div className="flex-none text-sm font-medium uppercase md:hidden lg:block lg:text-lg">
{SITE_NAME} {SITE_NAME}
</div> </div>
</Link> </Link>
@ -39,7 +39,7 @@ export default async function Navbar() {
<Search /> <Search />
</Suspense> </Suspense>
</div> </div>
<div className="flex justify-end gap-3 md:w-1/3"> <div className="flex justify-end gap-5 pr-2 md:w-1/3">
<Suspense fallback={<OpenProfile />}> <Suspense fallback={<OpenProfile />}>
<Profile /> <Profile />
</Suspense> </Suspense>
@ -51,7 +51,7 @@ export default async function Navbar() {
{menu.length ? ( {menu.length ? (
<div className="hidden w-full items-center justify-center border-b py-3 md:flex"> <div className="hidden w-full items-center justify-center border-b py-3 md:flex">
<ul className="hidden gap-7 text-sm md:flex md:items-center"> <ul className="hidden gap-10 text-sm font-medium md:flex md:items-center lg:gap-16">
{menu.map((item: Menu) => ( {menu.map((item: Menu) => (
<li key={item.title}> <li key={item.title}>
<Link <Link

2
components/logo-square.tsx
View File

@ -4,7 +4,7 @@ import LogoIcon from './icons/logo';
export default function LogoSquare() { export default function LogoSquare() {
return ( return (
<div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}> <div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}>
<LogoIcon className="h-[16px] w-[16px]" /> <LogoIcon className="h-[20px] w-[20px] lg:h-[24px] lg:w-[24px]" />
</div> </div>
); );
} }

2
components/profile/popover.tsx
View File

@ -25,7 +25,7 @@ const ProfilePopover = ({ menu }: ProfilePopoverProps) => {
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel className="absolute right-0 z-10 mt-2 w-auto min-w-48 max-w-sm px-4 sm:px-0"> <Popover.Panel className="absolute -right-10 z-10 mt-2 w-72 max-w-lg px-4 sm:px-0 lg:right-0">
<div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 shadow-lg ring-1 ring-black/5"> <div className="flex flex-col gap-2 overflow-hidden rounded-md bg-white px-4 py-3 shadow-lg ring-1 ring-black/5">
<span className="text-sm font-medium">My Account</span> <span className="text-sm font-medium">My Account</span>
<a <a