cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🔧 chore: change media query to lg

Browse Source
This commit is contained in:
Andre H 2024-03-06 14:29:28 +08:00
parent f23c757de9
commit 226d02ea59
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/pages/org-slug/projects/create/Template.tsx
View File

@ -20,7 +20,7 @@ import { useMediaQuery } from 'usehooks-ts';
const CreateWithTemplate = () => { const CreateWithTemplate = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const isDesktopView = useMediaQuery('(min-width: 720px)'); // md: const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal'; const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
const stepperValues = [ const stepperValues = [
@ -51,8 +51,8 @@ const CreateWithTemplate = () => {
); );
return ( return (
<div className="flex flex-col items-center gap-6 md:gap-10"> <div className="flex flex-col items-center gap-6 lg:gap-10 mx-auto w-full lg:w-5/6">
<div className="flex flex-col lg:flex-row justify-between w-5/6 my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center"> <div className="flex flex-col lg:flex-row justify-between w-full my-4 bg-base-bg-alternate rounded-xl p-6 gap-3 items-start lg:items-center">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<TemplateIcon type={template?.icon as TemplateIconType} size={48} /> <TemplateIcon type={template?.icon as TemplateIconType} size={48} />
<Heading className="font-medium">{template?.name}</Heading> <Heading className="font-medium">{template?.name}</Heading>
@ -73,15 +73,15 @@ const CreateWithTemplate = () => {
</a> </a>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 w-5/6 p-0 md:p-6 gap-8 md:gap-0"> <div className="grid grid-cols-3 p-0 lg:p-6 w-full gap-8 lg:gap-0">
<div className="col-span-3 md:col-span-1"> <div className="col-span-3 lg:col-span-1">
<Steps <Steps
orientation={stepsOrientation} orientation={stepsOrientation}
currentIndex={activeStep} currentIndex={activeStep}
steps={stepperValues} steps={stepperValues}
/> />
</div> </div>
<div className="col-span-3 md:col-span-2"> <div className="col-span-3 lg:col-span-2">
<Outlet context={{ template }} /> <Outlet context={{ template }} />
</div> </div>
</div> </div>