Skip to content

Commit 96b8fe6

Browse files
bhavabhuthibhavabhuthi
authored
Merge pull request #129 from CivicDataLab/128-make-provider-dashboard-responsive
128 make provider dashboard responsive
2 parents 2ef292d + afc4cfa commit 96b8fe6

7 files changed

Lines changed: 39 additions & 52 deletions

File tree

‎app/[locale]/dashboard/components/mobile-dashboard-nav.tsx‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ import { usePathname } from 'next/navigation';
66
import { useOnClickOutside } from '@/hooks/use-on-click-outside';
77
import { SidebarNavItem } from '@/types';
88
import { IconMenu, IconX } from '@tabler/icons-react';
9-
import { Icon, Text } from 'opub-ui';
9+
import { Button, Icon, Sheet, Text } from 'opub-ui';
1010
import { twMerge } from 'tailwind-merge';
1111

12-
import { cn } from '@/lib/utils';
1312
import { Icons } from '@/components/icons';
1413
import dashboardStyles from '../dashboard.module.scss';
15-
import styles from './styles.module.scss';
1614

1715
interface DashboardNavProps {
1816
items: SidebarNavItem[];
@@ -39,20 +37,19 @@ export function MobileDashboardNav({
3937

4038
return (
4139
<>
42-
<button
43-
onClick={() => {
44-
setIsOpened(!isOpened);
45-
}}
46-
className={cn(styles.NavButton, isOpened && styles.NavButtonOpen)}
47-
>
48-
<Icon source={isOpened ? IconX : IconMenu} />
49-
<Text visuallyHidden>Trigger Menu</Text>
50-
</button>
51-
<aside
52-
ref={asideRef}
53-
className={cn(styles.Aside, isOpened && styles.AsideOpen)}
54-
>
55-
<nav className={styles.MobileNavContainer}>
40+
<Sheet open={isOpened}>
41+
<Sheet.Trigger>
42+
<Button onClick={() => setIsOpened(!isOpened)} kind="tertiary">
43+
<Icon source={IconMenu} />
44+
<Text visuallyHidden>Trigger Menu</Text>
45+
</Button>
46+
</Sheet.Trigger>
47+
<Sheet.Content side="left" size="narrow" className="pr-4 pt-4">
48+
<div className="mb-4 flex justify-end">
49+
<Button onClick={() => setIsOpened(!isOpened)} kind="tertiary">
50+
<Icon source={IconX} />
51+
</Button>
52+
</div>
5653
<ul>
5754
{items.map((item) => {
5855
const icon = Icons[item.icon || 'arrowRight'];
@@ -93,8 +90,8 @@ export function MobileDashboardNav({
9390
);
9491
})}
9592
</ul>
96-
</nav>
97-
</aside>
93+
</Sheet.Content>
94+
</Sheet>
9895
</>
9996
);
10097
}

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -350,8 +350,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
350350
</Button>
351351
</Sheet.Trigger>
352352
<Sheet.Content side="bottom">
353-
<div className=" flex flex-col gap-6 p-10">
354-
<div className="flex items-center justify-between">
353+
<div className=" flex flex-col gap-6 p-10">
354+
<div className="flex flex-wrap items-center justify-between gap-3">
355355
<Text variant="bodyLg">Select Resource</Text>
356356
<div className="flex items-center gap-3">
357357
<Button
@@ -422,8 +422,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
422422
)}
423423
</div>
424424
<div className="flex flex-col gap-6">
425-
<div className="flex gap-6">
426-
<div className=" w-4/5">
425+
<div className="flex flex-wrap gap-6">
426+
<div className="w-full lg:w-4/5">
427427
<TextField
428428
value={accessModelData.name}
429429
onChange={(e) => handleChange('name', e)}
@@ -435,7 +435,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
435435
/>
436436
</div>
437437
<Select
438-
className=" w-1/6"
438+
className="w-full lg:w-1/6"
439439
name={'permissions'}
440440
options={[
441441
{ label: 'Public', value: 'PUBLIC' },
@@ -460,10 +460,9 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
460460
/>
461461
</div>
462462

463-
<div className="flex items-end gap-6">
464-
<div className={cn(' w-3/4', styles.combobox)}>
463+
<div className="flex flex-wrap items-end gap-6">
464+
<div className={cn('w-full lg:w-3/4', styles.combobox)}>
465465
<Combobox
466-
// displaySelected
467466
label={'Select Fields of the Resource'}
468467
list={availableResources}
469468
selectedValue={selectedFields}

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/EditLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export function EditLayout({ children, params }: LayoutProps) {
110110
}
111111

112112
return (
113-
<div className="mt-8 flex h-full flex-col">
113+
<div className="flex h-full flex-col lg:mt-8">
114114
{getDatasetTitleRes.isLoading ? (
115115
<div className="flex flex-row items-center justify-center">
116116
<Spinner size={24} />

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -147,9 +147,9 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
147147
</span>
148148
</Button>
149149
</div>
150-
<div className="flex flex-wrap gap-6 px-8">
150+
<div className="flex flex-wrap gap-6 lg:px-8 ">
151151
<div className="flex w-full flex-col gap-4 2xl:w-3/5">
152-
<div className="relative mr-4 flex items-center">
152+
<div className="relative mr-4 flex flex-wrap items-center">
153153
<div className={cn('mt-1 w-full', styles.combobox)}>
154154
<Combobox
155155
displaySelected
@@ -161,7 +161,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
161161
onChange={(e: any) => handleFieldSelection(e)}
162162
/>
163163
</div>
164-
<div className="absolute right-0" style={{ top: '1px' }}>
164+
<div className="right-0 lg:absolute" style={{ top: '1px' }}>
165165
<Checkbox
166166
name="Select All Fields"
167167
checked={selectAllFields}
@@ -185,7 +185,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
185185
Select All
186186
</Checkbox>
187187
</div>
188-
<div className={cn('flex gap-6', styles.accessModelEdit)}>
188+
<div className={cn('flex flex-wrap gap-6', styles.accessModelEdit)}>
189189
<TextField type="number" label="From Row Number" name="fromRow" />
190190
<TextField type="number" label="To Row Number" name="toRow" />
191191
</div>

‎app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/publish/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -302,14 +302,14 @@ const Page = () => {
302302
key={index}
303303
>
304304
<Text
305-
className=" basis-1/6"
305+
className="lg:basis-1/6"
306306
variant="bodyMd"
307307
>
308308
{item.label}:
309309
</Text>
310310
<Text
311311
variant="bodyMd"
312-
className=" basis-4/5"
312+
className="lg:basis-4/5"
313313
>
314314
{item.value}
315315
</Text>
@@ -319,20 +319,20 @@ const Page = () => {
319319

320320
{item?.data?.map((item: any, index: any) => (
321321
<div className="flex flex-wrap gap-2" key={index}>
322-
<Text className=" basis-1/6" variant="bodyMd">
322+
<Text className="lg:basis-1/6" variant="bodyMd">
323323
{toTitleCase(item.metadataItem.label)}:
324324
</Text>
325-
<Text variant="bodyMd" className=" basis-4/5">
325+
<Text variant="bodyMd" className="lg:basis-4/5">
326326
{' '}
327327
{item.value}
328328
</Text>
329329
</div>
330330
))}
331331
<div className="flex flex-wrap gap-2">
332-
<Text className=" basis-1/6" variant="bodyMd">
332+
<Text className="lg:basis-1/6" variant="bodyMd">
333333
Tags:
334334
</Text>
335-
<div className=" basis-4/5">
335+
<div className="lg:basis-4/5">
336336
{data?.datasets[0].tags.map(
337337
(item: any, index: any) => (
338338
<Tag key={index}>{item.value}</Tag>

‎app/[locale]/dashboard/organization/[organizationId]/layout.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
5151
/>
5252
<div
5353
className={cn(
54-
'relative grid grow grid-cols-[8px_1fr] gap-1',
55-
' bg-surfaceDefault py-4 pl-10 pr-4 md:flex'
54+
'relative flex flex-col md:flex-row',
55+
' bg-surfaceDefault p-4 md:flex'
5656
)}
5757
>
5858
<DashboardNav items={orgSidebarNav} organizationId={organizationId} />
@@ -64,9 +64,7 @@ export default function OrgDashboardLayout({ children }: DashboardLayoutProps) {
6464
items={orgSidebarNav}
6565
/>
6666
</div>
67-
<div className={cn(styles.Main, isOpened && styles.MainOpened)}>
68-
{children}
69-
</div>
67+
<div className={cn(styles.Main)}>{children}</div>
7068
</div>
7169
</>
7270
);

‎app/[locale]/dashboard/user/layout.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
4040
</div>
4141
<div className="m-auto w-11/12">
4242
<DashboardHeader currentPath={pathname} />
43-
<div
44-
className={cn(
45-
'relative grid grow grid-cols-[8px_1fr] gap-1',
46-
'md:flex'
47-
)}
48-
>
43+
<div className="flex flex-col md:flex-row">
4944
<DashboardNav items={dashboardConfig.sidebarNav} />
5045
<div className="z-1 basis-2 md:hidden">
5146
<MobileDashboardNav
@@ -54,9 +49,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
5449
items={dashboardConfig.sidebarNav}
5550
/>
5651
</div>
57-
<div className={cn(styles.Main, isOpened && styles.MainOpened)}>
58-
{children}
59-
</div>
52+
<div className={cn(styles.Main)}>{children}</div>
6053
</div>
6154
</div>
6255
</div>

0 commit comments

Comments
 (0)