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

Merge pull request #157 from snowball-tools/andrehadianto/T-4944-layout-template-steps-layout

Browse Source 
[T-4944] layout template steps layout
This commit is contained in:
Andre Hadianto 2024-03-07 12:24:29 +08:00 committed by GitHub
commit 9b6cd9baae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/shared/Button/Button.theme.ts
View File

@ -20,7 +20,7 @@ export const buttonTheme = tv(
variants: { variants: {
size: { size: {
lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'], lg: ['gap-2', 'py-3.5', 'px-5', 'text-base', 'tracking-[-0.011em]'],
md: ['gap-2', 'py-3.25', 'px-5', 'text-sm', 'tracking-[-0.006em]'], md: ['gap-2', 'py-3', 'px-5', 'text-sm', 'tracking-[-0.006em]'],
sm: ['gap-1', 'py-2', 'px-3', 'text-xs'], sm: ['gap-1', 'py-2', 'px-3', 'text-xs'],
xs: ['gap-1', 'py-1', 'px-2', 'text-xs'], xs: ['gap-1', 'py-1', 'px-2', 'text-xs'],
}, },

4
packages/frontend/src/pages/org-slug/projects/Id.tsx
View File

@ -24,8 +24,8 @@ const Id = () => {
const client = useGQLClient(); const client = useGQLClient();
const location = useLocation(); const location = useLocation();
const isDesktopView = useMediaQuery('(min-width: 768px)'); // md: const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isDesktopView ? {} : { size: 'sm' as const }; const buttonSize = isTabletView ? {} : { size: 'sm' as const };
const [project, setProject] = useState<ProjectType | null>(null); const [project, setProject] = useState<ProjectType | null>(null);
const [repoUrl, setRepoUrl] = useState(''); const [repoUrl, setRepoUrl] = useState('');

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

@ -14,11 +14,15 @@ import {
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Heading } from 'components/shared/Heading'; import { Heading } from 'components/shared/Heading';
import { Steps } from 'components/shared/Steps'; import { Steps } from 'components/shared/Steps';
import { useMediaQuery } from 'usehooks-ts';
// TODO: Set dynamic route for template and load details from DB // TODO: Set dynamic route for template and load details from DB
const CreateWithTemplate = () => { const CreateWithTemplate = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const isDesktopView = useMediaQuery('(min-width: 960px)'); // lg:
const stepsOrientation = isDesktopView ? 'vertical' : 'horizontal';
const stepperValues = [ const stepperValues = [
{ {
step: 1, step: 1,
@ -47,8 +51,8 @@ const CreateWithTemplate = () => {
); );
return ( return (
<div className="flex flex-col items-center"> <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>
@ -69,11 +73,15 @@ const CreateWithTemplate = () => {
</a> </a>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 w-5/6 p-6"> <div className="grid grid-cols-3 p-0 lg:p-6 w-full gap-8 lg:gap-0">
<div> <div className="col-span-3 lg:col-span-1">
<Steps currentIndex={activeStep} steps={stepperValues} /> <Steps
orientation={stepsOrientation}
currentIndex={activeStep}
steps={stepperValues}
/>
</div> </div>
<div className="col-span-2"> <div className="col-span-3 lg:col-span-2">
<Outlet context={{ template }} /> <Outlet context={{ template }} />
</div> </div>
</div> </div>

6
packages/frontend/src/pages/org-slug/projects/create/template/index.tsx
View File

@ -3,6 +3,7 @@ import { useForm, SubmitHandler, Controller } from 'react-hook-form';
import { useNavigate, useOutletContext, useParams } from 'react-router-dom'; import { useNavigate, useOutletContext, useParams } from 'react-router-dom';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import assert from 'assert'; import assert from 'assert';
import { useMediaQuery } from 'usehooks-ts';
import { useOctokit } from '../../../../../context/OctokitContext'; import { useOctokit } from '../../../../../context/OctokitContext';
import { useGQLClient } from '../../../../../context/GQLClientContext'; import { useGQLClient } from '../../../../../context/GQLClientContext';
@ -28,6 +29,9 @@ const CreateRepo = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isTabletView ? { size: 'lg' as const } : {};
const navigate = useNavigate(); const navigate = useNavigate();
const [gitAccounts, setGitAccounts] = useState<string[]>([]); const [gitAccounts, setGitAccounts] = useState<string[]>([]);
@ -166,8 +170,8 @@ const CreateRepo = () => {
</div> </div>
<div> <div>
<Button <Button
{...buttonSize}
type="submit" type="submit"
size="lg"
disabled={!Boolean(template.repoFullName) || isLoading} disabled={!Boolean(template.repoFullName) || isLoading}
rightIcon={<ArrowRightCircleFilledIcon />} rightIcon={<ArrowRightCircleFilledIcon />}
> >