cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

⚡️ feat: mobile layout for project overview

Browse Source
This commit is contained in:
Andre H 2024-03-05 14:19:47 +08:00
parent f6db1e119b
commit 96f519d5e3
3 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
View File

@ -11,7 +11,7 @@ export const Activity = ({
activities: GitCommitWithBranch[]; activities: GitCommitWithBranch[];
}) => { }) => {
return ( return (
<div className="col-span-2 mr-1"> <div className="col-span-5 md:col-span-2 mr-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Heading className="text-lg leading-6 font-medium">Activity</Heading> <Heading className="text-lg leading-6 font-medium">Activity</Heading>
<Button variant="tertiary" size="sm"> <Button variant="tertiary" size="sm">

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

@ -7,6 +7,7 @@ import {
useParams, useParams,
} from 'react-router-dom'; } from 'react-router-dom';
import { Project as ProjectType } from 'gql-client'; import { Project as ProjectType } from 'gql-client';
import { useMediaQuery } from 'usehooks-ts';
import { useGQLClient } from '../../../context/GQLClientContext'; import { useGQLClient } from '../../../context/GQLClientContext';
import { useOctokit } from '../../../context/OctokitContext'; import { useOctokit } from '../../../context/OctokitContext';
@ -23,6 +24,9 @@ const Id = () => {
const client = useGQLClient(); const client = useGQLClient();
const location = useLocation(); const location = useLocation();
const isDesktopView = useMediaQuery('(min-width: 768px)'); // md:
const buttonSize = isDesktopView ? {} : { 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('');
@ -65,25 +69,32 @@ const Id = () => {
{project ? ( {project ? (
<> <>
<div className="px-6 py-4 flex justify-between items-center gap-4"> <div className="px-6 py-4 flex justify-between items-center gap-4">
<div className="flex items-center justify-center gap-4"> <div className="flex items-center justify-center gap-4 overflow-hidden">
<Button <Button
variant="tertiary" variant="tertiary"
className="rounded-full h-11 w-11 p-0" iconOnly
className="rounded-full h-11 w-11 p-0 shrink-0"
aria-label="Go back" aria-label="Go back"
leftIcon={<ChevronLeft />} leftIcon={<ChevronLeft />}
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
/> />
<Heading className="text-2xl font-medium"> <Heading className="text-2xl font-medium truncate">
{project?.name} {project?.name}
</Heading> </Heading>
</div> </div>
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<Link to={repoUrl} target="_blank"> <Link to={repoUrl} target="_blank">
<Button className="h-11 transition-colors" variant="tertiary"> <Button
{...buttonSize}
className="h-11 transition-colors"
variant="tertiary"
>
Open repo Open repo
</Button> </Button>
</Link> </Link>
<Button className="h-11 transition-colors">Go to app</Button> <Button {...buttonSize} className="h-11 transition-colors">
Go to app
</Button>
</div> </div>
</div> </div>
<WavyBorder /> <WavyBorder />

12
packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
View File

@ -115,8 +115,8 @@ const OverviewTabPanel = () => {
}, [project]); }, [project]);
return ( return (
<div className="grid grid-cols-5 gap-[72px]"> <div className="grid grid-cols-5 gap-6 md:gap-[72px]">
<div className="col-span-3"> <div className="col-span-5 md:col-span-3">
<div className="flex items-center gap-4 mb-6"> <div className="flex items-center gap-4 mb-6">
<Avatar <Avatar
size={48} size={48}
@ -124,13 +124,13 @@ const OverviewTabPanel = () => {
imageSrc={project.icon} imageSrc={project.icon}
type="blue" type="blue"
/> />
<div className="flex-1 space-y-1"> <div className="flex-1 space-y-1 overflow-hidden">
<Heading className="text-lg leading-6 font-medium"> <Heading className="text-lg leading-6 font-medium truncate">
{project.name} {project.name}
</Heading> </Heading>
<span className="text-sm text-elements-low-em tracking-tight"> <p className="text-sm text-elements-low-em tracking-tight truncate">
{project.subDomain} {project.subDomain}
</span> </p>
</div> </div>
</div> </div>
<OverviewInfo label="Domain" icon={<GlobeIcon />}> <OverviewInfo label="Domain" icon={<GlobeIcon />}>