cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-12-22 20:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #155 from snowball-tools/andrehadianto/T-4940-project-overview-mobile-layout

Browse Source 
[T-4940] project overview mobile layout
This commit is contained in:
Andre Hadianto 2024-03-06 09:02:02 +08:00 committed by GitHub
commit 46d44378c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/package.json
View File

@ -49,7 +49,7 @@
"siwe": "^2.1.4",
"tailwind-variants": "^0.2.0",
"typescript": "^4.9.5",
"usehooks-ts": "^2.10.0",
"usehooks-ts": "^2.15.1",
"vertical-stepper-nav": "^1.0.2",
"viem": "^2.7.11",
"wagmi": "^2.5.7",

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">

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

@ -2,7 +2,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
export const avatarTheme = tv(
{
base: ['relative', 'block', 'rounded-full', 'overflow-hidden'],
base: ['relative', 'block', 'rounded-full', 'overflow-hidden', 'shrink-0'],
slots: {
image: [
'h-full',

1
packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
View File

@ -71,6 +71,7 @@ export const tabsTheme = tv({
'gap-5',
'border-b',
'border-transparent',
'overflow-scroll',
// Horizontal – default
'data-[orientation=horizontal]:border-border-interactive/10',
// Vertical

24
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 />
@ -96,9 +107,6 @@ const Id = () => {
<Tabs.Trigger value="deployments">
<Link to="deployments">Deployments</Link>
</Tabs.Trigger>
<Tabs.Trigger value="database">
<Link to="database">Database</Link>
</Tabs.Trigger>
<Tabs.Trigger value="integrations">
<Link to="integrations">Integrations</Link>
</Tabs.Trigger>

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 />}>

2
yarn.lock
View File

@ -18209,7 +18209,7 @@ use-sync-external-store@1.2.0:
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
usehooks-ts@^2.10.0:
usehooks-ts@^2.15.1:
version "2.15.1"
resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-2.15.1.tgz#ede348c6f01b4b4fe981e240551624885a2fed83"
integrity sha512-AK29ODCt4FT9XleILNbkbjjmkRCNaQrgxQEkvqHjlnT76iPXzTFGvK2Y/s83JEdSxRp43YEnSa3bYBEV6HZ26Q==