Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: adjust grid for mobile #231

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

feat: adjust grid for mobile #231

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
76b3310
feat: adjust grid for mobile
sofiiadan Apr 9, 2024
f98a8b6
Merge branch 'dev' into dev-367-mobile
aleksandr-gorbunov Jun 19, 2024
1228035
updated the layout of opportunities and keys for mobile
aleksandr-gorbunov Jun 20, 2024
fc9ab8e
Created new page template optimized for mobile
aleksandr-gorbunov Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/homebase_keys/_components/create-key-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export const CreateKeyButton = () => {
}
}}
>
<Plus className="mr-2" />
Add new key
<Plus className="mr-0 sm:mr-2" />
<span className="hidden sm:inline">Add new key</span>
</Button>
);
};
4 changes: 2 additions & 2 deletions app/homebase_keys/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default async function HomebaseKeys() {
return (
<section className="p-8">
<div className="mb-12 flex flex-col space-y-6">
<div className="flex justify-between">
<div className="flex items-center justify-between">
<div className="flex flex-col gap-3">
<Breadcrumbs title="Keys" />
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Expand All @@ -28,7 +28,7 @@ export default async function HomebaseKeys() {
</div>
</div>

<div className="grid gap-8 xl:grid-cols-2">
<div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
{keys.map((key) => (
<KeyCard
key={`key-${key.id}`}
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ interface Props {
export default function RootLayout({ children }: Props) {
return (
<html lang="en">
<body>
<body className="">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a redundant change, can be taken out.

<TRPCReactProvider>
<ThemeProvider
attribute="class"
Expand Down
2 changes: 1 addition & 1 deletion app/members/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default async function MembersPage() {

return (
<div className="space-y-8 p-8">
<div>
<div className="flex flex-col gap-3">
<Breadcrumbs title="Members" />
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Members list
Expand Down
6 changes: 3 additions & 3 deletions app/opportunities/[opportunity_id]/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default async function Dashboard({
<p>ID: {opportunity.id}</p>
<p className="mt-5 text-2xl">General Overview</p>

<div className="grid grid-cols-3 gap-4">
<div className="grid grid-cols-3 gap-4 sm:grid-cols-2">
<DetailedInfoCard
title="Total Applicants"
data="420"
Expand Down Expand Up @@ -113,7 +113,7 @@ export default async function Dashboard({

<div className="flex flex-col gap-4">
<p className="mt-5 text-2xl">Overview of phases</p>
<div className="grid grid-cols-6 gap-4">
<div className="grid grid-cols-6 gap-4 sm:grid-cols-5">
<Select value={selectedPhase}>
<SelectTrigger className="w-full">
<SelectValue />
Expand All @@ -126,7 +126,7 @@ export default async function Dashboard({
</Select>
<Button className="col-start-6">Visit</Button>
</div>
<div className="grid grid-cols-6 gap-4">
<div className="grid grid-cols-6 gap-4 sm:grid-cols-5">
<div className="col-span-1 flex flex-col gap-4">
<ClickableInfoCard data="30" description={"Screeners"} />
<ClickableInfoCard data="30" description={"Screeners"} />
Expand Down
2 changes: 1 addition & 1 deletion app/opportunities/[opportunity_id]/edit/_components/deleteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const DeleteButton = ({ title, id }: DeleteButtonProps) => {
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-2 xl:grid-col-3">
<Button asChild variant="outline">
<DialogClose>Cancel</DialogClose>
</Button>
Expand Down
2 changes: 1 addition & 1 deletion app/opportunities/[opportunity_id]/edit/_components/general/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function GeneralInformation() {
General information
</h2>

<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
<FormField
control={form.control}
name="generalInformation.title"
Expand Down
2 changes: 1 addition & 1 deletion app/opportunities/[opportunity_id]/edit/_components/tally/tallyFieldForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const TallyFieldForm = ({ field }: Props) => {
}, [opportunityForm, field.key]);

return (
<div key={field.key} className="grid w-full grid-cols-[2.5rem,_1fr] gap-6">
<div key={field.key} className="grid w-full grid-cols-[2.5rem,_1fr] gap-6 xl: grid-col-3">
<div>
{field.type === "DROPDOWN" && <ConditionPopover field={field} />}
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/opportunities/[opportunity_id]/edit/_components/tally/tallyForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const TallyForm = () => {
<p className="text-muted-foreground">
Create a form in tally that is sent to the applicants
</p>
<div className="mt-12 grid gap-8 md:grid-cols-3">
<div className="mt-12 grid gap-8 grid-cols-2 md:grid-cols-3">
<FormField
control={form.control}
name="id"
Expand Down
2 changes: 1 addition & 1 deletion app/opportunities/[opportunity_id]/review/[review_id]/reviewForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export const ReviewForm = ({
</div>
</div>

<div className="grid gap-4 lg:grid-cols-2">
<div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
<Card>
<CardHeader>
<CardTitle className="scroll-m-20 text-2xl font-semibold tracking-tight">
Expand Down
12 changes: 6 additions & 6 deletions app/opportunities/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,17 @@ export default async function OpportunitiesPage() {
return (
<div className="space-y-8 p-8">
<div className="flex flex-col gap-8">
<div className="flex justify-between">
<div>
<div className="flex items-end justify-between">
<div className="flex flex-col gap-3">
<Breadcrumbs title="Opportunities" />
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Opportunities
</h1>
</div>
<Link href="./opportunities/create">
<Button>
<Plus className="mr-2" />
Create new
<Button className="flex w-full items-center justify-center sm:h-auto sm:w-auto">
<Plus className="mr-0 sm:mr-2" />
<span className="hidden sm:inline">Create new</span>
</Button>
</Link>
</div>
Expand All @@ -63,7 +63,7 @@ export default async function OpportunitiesPage() {
</div>
)}
{!!opportunities.length && (
<div className="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
<div className="grid gap-8 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
{opportunities?.map((item, index) => {
return (
<OpportunityCard
Expand Down
73 changes: 38 additions & 35 deletions components/header/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,44 @@ import { Button } from "@components/ui/button";
export const Navigation = () => {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<Link href="/" passHref legacyBehavior>
<Button asChild variant="ghost">
<NavigationMenuLink className="flex items-center gap-2">
<Logo />
<p className="text-lg font-bold">space</p>
</NavigationMenuLink>
</Button>
</Link>
</NavigationMenuItem>

<NavigationMenuItem>
<Link href="/opportunities" passHref legacyBehavior>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Opportunities
</NavigationMenuLink>
</Link>
</NavigationMenuItem>

<NavigationMenuItem>
<Link href="/members" passHref legacyBehavior>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Members
</NavigationMenuLink>
</Link>
</NavigationMenuItem>

<NavigationMenuItem>
<Link href="/homebase_keys" passHref legacyBehavior>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Keys
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuList className="flex flex-col sm:flex-row sm:items-center">
<div className="order-1 flex w-full items-start gap-2">
<NavigationMenuItem>
<Link href="/" passHref legacyBehavior>
<Button asChild variant="ghost">
<NavigationMenuLink className="flex items-center gap-2">
<Logo />
<p className="text-lg font-bold">space</p>
</NavigationMenuLink>
</Button>
</Link>
</NavigationMenuItem>
</div>
<div className="order-2 mt-2 flex flex-col sm:mt-0 sm:flex-row sm:justify-start sm:space-x-4">
<div className="flex flex-row space-x-2">
<NavigationMenuItem>
<Link href="/opportunities" passHref legacyBehavior>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Opportunities
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/members" passHref legacyBehavior>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Members
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/homebase_keys" passHref legacyBehavior>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Keys
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</div>
</div>
</NavigationMenuList>
</NavigationMenu>
);
Expand Down
27 changes: 16 additions & 11 deletions components/header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,22 @@ async function Header() {

return (
<header className="w-full">
<div className="flex w-full justify-between px-2 py-4 md:px-8">
<Navigation />
{session?.user && <UserComponent user={session.user} />}
{!session?.user && (
<Button asChild className="flex gap-2">
<Link href="/auth">
<LogIn />
Sign in
</Link>
</Button>
)}
<div className="flex flex-row justify-between px-2 py-4 sm:gap-4 md:px-8">
<div className="order-1">
<Navigation />
</div>
<div className="order-2">
{session?.user ? (
<UserComponent user={session.user} />
) : (
<Button asChild className="flex gap-2">
<Link href="/auth">
<LogIn />
Sign in
</Link>
</Button>
)}
</div>
</div>
</header>
);
Expand Down
88 changes: 45 additions & 43 deletions components/ui/data-table-pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export function DataTablePagination<TData>({
}: DataTablePaginationProps<TData>) {
return (
<div className="flex items-center justify-between px-2">
<div className="flex items-center space-x-6 lg:space-x-8">
<div className="flex items-center space-x-2">
<div className="flex flex-col items-start sm:flex-row sm:space-x-6 lg:space-x-8">
<div className="flex w-full items-center space-x-2">
<p className="text-sm font-medium">Rows per page</p>
<Select
value={`${table.getState().pagination.pageSize}`}
Expand All @@ -45,47 +45,49 @@ export function DataTablePagination<TData>({
</SelectContent>
</Select>
</div>
<div className="flex w-[100px] items-center justify-center text-sm font-medium">
Page {table.getState().pagination.pageIndex + 1} of{" "}
{table.getPageCount()}
</div>
<div className="flex items-center space-x-2">
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
<DoubleArrowLeftIcon className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<ChevronLeftIcon className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<ChevronRightIcon className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
<DoubleArrowRightIcon className="h-4 w-4" />
</Button>
<div className="flex flex-row">
<div className="flex w-[100px] text-sm font-medium sm:items-center sm:justify-center">
Page {table.getState().pagination.pageIndex + 1} of{" "}
{table.getPageCount()}
</div>
<div className="flex items-center space-x-2">
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
<DoubleArrowLeftIcon className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<ChevronLeftIcon className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="h-8 w-8 p-0"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<ChevronRightIcon className="h-4 w-4" />
</Button>
<Button
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
<DoubleArrowRightIcon className="h-4 w-4" />
</Button>
</div>
</div>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are the default breakpoint widths, not needed.

Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ module.exports = {
center: true,
padding: "2rem",
screens: {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1400px",
},
},
Expand Down
Loading