Merge pull request #179 from CivicDataLab/dev

make new dashboard layout responsive

apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx

@@ -46,7 +46,7 @@ export function EditLayout({ children, params }: LayoutProps) {
   return (
     <div className="flex flex-col h-full mt-8">
       <Header id={params.id} title={data?.dataset?.title} />
-      <div className="flex mt-4">
+      <div className="flex flex-col mt-4 lg:flex-row">
         <div>
           <Navigation id={params.id} pathItem={pathItem} />
         </div>
@@ -62,23 +62,26 @@ const Header = ({ id, title }: { id: string; title?: string }) => {
   return (
     <div className="flex gap-4 flex-wrap items-center justify-between">
       <div className="flex flex-wrap gap-4 items-center">
-        <Link href="/dataset">
+        <Link href="/dashboard/dataset">
           <Icon source={Icons.back} color="base" size="8" />
           <Text visuallyHidden>Go to dataset listing page</Text>
         </Link>
 
         <div className="flex items-center gap-2">
           {title ? (
-            <Text variant="headingLg" as="h2">
-              {title}
-            </Text>
+            <div className="text-clamp">
+              <Text variant="headingLg" as="h2">
+                {title}
+              </Text>
+            </div>
           ) : (
             <div className="min-w-[120px]">
               <SkeletonDisplayText />
             </div>
           )}
-
-          <Text color="subdued">ID #{id}</Text>
+          <div className="whitespace-nowrap">
+            <Text color="subdued">ID #{id}</Text>
+          </div>
         </div>
       </div>
       <Button url={`/dashboard/dataset/${id}/edit`} plain>
@@ -109,16 +112,23 @@ const Navigation = ({ id, pathItem }: { id: string; pathItem: string }) => {
   ];
 
   return (
-    <ul>
+    <ul className="flex overflow-x-auto max-w-[90vw] lg:block lg:overflow-x-visible lg:max-w-full">
       {links.map((link) => (
-        <li key={link.url}>
+        <li
+          className={cn(
+            link.disabled &&
+              'text-textDisabled cursor-no-drop hover:text-textDisabled focus:text-textDisabled'
+          )}
+          key={link.url}
+        >
           <Link
             className={cn(
-              'rounded-l-05 p-3 block relative w-full text-textSubdued min-w-[10rem]',
+              'rounded-l-05 p-3 block relative w-full text-textSubdued lg:min-w-[10rem] text-center',
+              'lg:text-start',
               'hover:text-text focus:text-text',
               link.selected &&
                 'bg-surface shadow-faint text-text pointer-events-none',
-              link.disabled && 'pointer-events-none text-textDisabled'
+              link.disabled && 'pointer-events-none'
             )}
             href={link.url}
           >
@@ -131,7 +141,8 @@ const Navigation = ({ id, pathItem }: { id: string; pathItem: string }) => {
             </Text>
             <span
               className={cn(
-                'bg-transparent rounded-l-1 w-[3px] h-full absolute right-0 top-0',
+                'rounded-t-1 h-[3px] w-full absolute right-0 bottom-0',
+                'bg-transparent lg:rounded-l-1 lg:w-[3px] lg:h-full right-0 lg:top-0',
                 link.selected && 'bg-decorativeIconFour'
               )}
             />

apps/www/app/[locale]/dashboard/dataset/[id]/edit/components/EditMetadata.tsx

@@ -125,7 +125,7 @@ export function EditMetadata({
           <div className="mt-8">
             <Divider />
           </div>
-          <div className="mt-4 flex items-center gap-2 justify-center">
+          <div className="mt-4 flex items-center gap-2 justify-center flex-wrap">
             <Button>Save & Exit</Button>
             <Button primary submit>
               Save & Proceed

apps/www/app/[locale]/dashboard/dataset/[id]/edit/page-layout.tsx

@@ -51,7 +51,10 @@ export function EditPage({ params }: { params: { id: string } }) {
     {
       onSuccess: (data) => {
         queryClient.invalidateQueries({
-          queryKey: [`dataset_${params.id}`, `dataset_layout_${params.id}`],
+          queryKey: [`dataset_${params.id}`],
+        });
+        queryClient.invalidateQueries({
+          queryKey: [`dataset_layout_${params.id}`],
         });
         router.push(
           `/dashboard/dataset/${data.patch_dataset?.dataset?.id}/edit/metadata`
@@ -67,7 +70,7 @@ export function EditPage({ params }: { params: { id: string } }) {
   return (
     <>
       <ActionBar
-        title={data?.dataset?.title || 'Untitled Dataset'}
+        title={data?.dataset?.title || 'Untitled Datasets'}
         primaryAction={{
           content: 'Save & Next',
           onAction: () => submitRef.current?.click(),

apps/www/app/[locale]/dashboard/dataset/components/action-bar.tsx

@@ -74,9 +74,11 @@ export function ActionBar(props: Props) {
           btn
         )}
 
-        <Text variant="headingLg" as="h2">
-          {props.title}
-        </Text>
+        <div className="text-clamp max-w-[900px]">
+          <Text variant="headingLg" as="h2">
+            {props.title}
+          </Text>
+        </div>
       </div>
 
       <div className="sm:hidden">

apps/www/app/[locale]/dashboard/dataset/components/loading-dataset.tsx

@@ -8,8 +8,8 @@ export default function DatasetLoading({
   previousPage?: boolean;
 }) {
   return (
-    <>
+    <div className="h-full">
       <Loading />
-    </>
+    </div>
   );
 }

apps/www/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { CreateDatasetInput, PatchDatasetInput } from '@/gql/generated/graphql';
 import { PatchDataset, CreateDataset as Props } from '@/types';
-import { IconSource } from '@opub-cdl/ui/dist/ts/components/Icon/Icon';
 import {
   Box,
   Checkbox,
@@ -11,6 +10,7 @@ import {
   RadioGroup,
   Text,
 } from '@opub-cdl/ui';
+import { IconSource } from '@opub-cdl/ui/dist/ts/components/Icon/Icon';
 
 import { Icons } from '@/components/icons';
 import { RadioCard } from '@/components/radio-card';
@@ -94,7 +94,7 @@ export function CreateDataset({
                 name="title"
                 label="Name of Dataset"
                 placeholder="example: Population of India"
-                maxLength={30}
+                maxLength={100}
                 showCharacterCount
                 autoComplete="off"
                 required

apps/www/app/[locale]/dashboard/dataset/new/page-layout.tsx

@@ -27,10 +27,6 @@ const createDatasetMutationDoc = graphql(`
 
 export const Page = () => {
   const router = usePRouter();
-  // React.useEffect(() => {
-  //   router.prefetch('/dashboard/dataset/1/edit/metadata');
-  // }, []);
-
   const submitRef = React.useRef<HTMLButtonElement>(null);
 
   const { mutate, isLoading } = useMutation(

apps/www/components/loading/loading.tsx

@@ -1,17 +1,6 @@
 export function Loading() {
   return (
-    <div
-      style={{
-        display: 'flex',
-        width: '100%',
-        height: '100%',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: 'var(--font-size-600)',
-        fontWeight: 'var(--font-weight-medium)',
-        color: 'var(--text)',
-      }}
-    >
+    <div className="flex h-[680px] w-full items-center justify-center text font-Medium text-600">
       Loading
     </div>
   );

apps/www/components/provider.tsx

@@ -10,11 +10,10 @@ import { SSRProvider } from 'react-aria';
 
 export default function Provider({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
-  const searchParams = useSearchParams();
 
   useEffect(() => {
     NProgress.done();
-  }, [pathname, searchParams]);
+  }, [pathname]);
 
   const [client] = React.useState(
     new QueryClient({

apps/www/styles/globals.css

@@ -38,3 +38,12 @@ a {
     --card-rgb: 100, 100, 100;
   }
 }
+
+.text-clamp {
+  line-height: 156%;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+}