cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests 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[];
}) => {
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">
<Heading className="text-lg leading-6 font-medium">Activity</Heading>
<Button variant="tertiary" size="sm">

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

@ -7,6 +7,7 @@ import {
useParams,
} from 'react-router-dom';
import { Project as ProjectType } from 'gql-client';
import { useMediaQuery } from 'usehooks-ts';
import { useGQLClient } from '../../../context/GQLClientContext';
import { useOctokit } from '../../../context/OctokitContext';
@ -23,6 +24,9 @@ const Id = () => {
const client = useGQLClient();
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 [repoUrl, setRepoUrl] = useState('');
@ -65,25 +69,32 @@ const Id = () => {
{project ? (
<>
<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
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"
leftIcon={<ChevronLeft />}
onClick={() => navigate(-1)}
/>
<Heading className="text-2xl font-medium">
<Heading className="text-2xl font-medium truncate">
{project?.name}
</Heading>
</div>
<div className="flex items-center justify-center gap-3">
<Link to={repoUrl} target="_blank">
<Button className="h-11 transition-colors" variant="tertiary">
<Button
{...buttonSize}
className="h-11 transition-colors"
variant="tertiary"
>
Open repo
</Button>
</Link>
<Button className="h-11 transition-colors">Go to app</Button>
<Button {...buttonSize} className="h-11 transition-colors">
Go to app
</Button>
</div>
</div>
<WavyBorder />

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

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