📱(frontend) docs mobile friendly

We adapt the docs component to be mobile friendly.
numerique-gouv · Oct 8, 2024 · 82a76a3 · 82a76a3
1 parent 7a84887
commit 82a76a3
Show file tree

Hide file tree

Showing 25 changed files with 662 additions and 318 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to
 - ✨(frontend) Activate versions feature #240
 - ✨(frontend) one-click document creation #275
 - ✨(frontend) edit title inline #275
+- 📱(frontend) mobile responsive #304
 - 🌐(frontend) Update translation #308
 
 ## Changed

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/common.ts b/src/frontend/apps/e2e/__tests__/app-impress/common.ts
@@ -113,13 +113,14 @@ export const goToGridDoc = async (
   const header = page.locator('header').first();
   await header.locator('h2').getByText('Docs').click();
 
-  const datagrid = page
-    .getByLabel('Datagrid of the documents page 1')
-    .getByRole('table');
+  const datagrid = page.getByLabel('Datagrid of the documents page 1');
+  const datagridTable = datagrid.getByRole('table');
 
-  await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+  await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+    timeout: 5000,
+  });
 
-  const rows = datagrid.getByRole('row');
+  const rows = datagridTable.getByRole('row');
   const row = title
     ? rows.filter({
         hasText: title,
@@ -132,7 +133,7 @@ export const goToGridDoc = async (
 
   expect(docTitle).toBeDefined();
 
-  await docTitleCell.click();
+  await row.getByRole('link').first().click();
 
   return docTitle as string;
 };

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts
@@ -18,12 +18,13 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    const datagrid = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table');
+    const datagrid = page.getByLabel('Datagrid of the documents page 1');
+    const datagridTable = datagrid.getByRole('table');
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden();
-    await expect(datagrid.getByText(docTitle)).toBeVisible({
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 5000,
+    });
+    await expect(datagridTable.getByText(docTitle)).toBeVisible({
       timeout: 5000,
     });
   });

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
@@ -117,7 +117,9 @@ test.describe('Documents Grid', () => {
           .getByRole('cell')
           .nth(cellNumber);
 
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 5000,
+        });
 
         // Initial state
         await expect(docNameRow1).toHaveText(/.*/);
@@ -134,7 +136,9 @@ test.describe('Documents Grid', () => {
         const responseOrderingAsc = await responsePromiseOrderingAsc;
         expect(responseOrderingAsc.ok()).toBeTruthy();
 
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 5000,
+        });
 
         await expect(docNameRow1).toHaveText(/.*/);
         await expect(docNameRow2).toHaveText(/.*/);
@@ -155,7 +159,9 @@ test.describe('Documents Grid', () => {
         const responseOrderingDesc = await responsePromiseOrderingDesc;
         expect(responseOrderingDesc.ok()).toBeTruthy();
 
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 5000,
+        });
 
         await expect(docNameRow1).toHaveText(/.*/);
         await expect(docNameRow2).toHaveText(/.*/);
@@ -244,3 +250,87 @@ test.describe('Documents Grid', () => {
     await expect(datagrid.getByText(docName!)).toBeHidden();
   });
 });
+
+test.describe('Documents Grid mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('it checks the grid when mobile', async ({ page }) => {
+    await page.route('**/documents/**', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET') && request.url().includes('page=')) {
+        await route.fulfill({
+          json: {
+            count: 1,
+            next: null,
+            previous: null,
+            results: [
+              {
+                id: 'b7fd9d9b-0642-4b4f-8617-ce50f69519ed',
+                title: 'My mocked document',
+                accesses: [
+                  {
+                    id: '8c1e047a-24e7-4a80-942b-8e9c7ab43e1f',
+                    user: {
+                      id: '7380f42f-02eb-4ad5-b8f0-037a0e66066d',
+                      email: '[email protected]',
+                      full_name: 'John Doe',
+                      short_name: 'John',
+                    },
+                    team: '',
+                    role: 'owner',
+                    abilities: {
+                      destroy: false,
+                      update: false,
+                      partial_update: false,
+                      retrieve: true,
+                      set_role_to: [],
+                    },
+                  },
+                ],
+                abilities: {
+                  attachment_upload: true,
+                  destroy: true,
+                  link_configuration: true,
+                  manage_accesses: true,
+                  partial_update: true,
+                  retrieve: true,
+                  update: true,
+                  versions_destroy: true,
+                  versions_list: true,
+                  versions_retrieve: true,
+                },
+                link_role: 'reader',
+                link_reach: 'public',
+                created_at: '2024-10-07T13:02:41.085298Z',
+                updated_at: '2024-10-07T13:30:21.829690Z',
+              },
+            ],
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    const datagrid = page.getByLabel('Datagrid of the documents page 1');
+    const tableDatagrid = datagrid.getByRole('table');
+
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 5000,
+    });
+
+    const rows = tableDatagrid.getByRole('row');
+    const row = rows.filter({
+      hasText: 'My mocked document',
+    });
+
+    await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
+    await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
+  });
+});
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
@@ -385,3 +385,35 @@ test.describe('Doc Header', () => {
     ).toBeHidden();
   });
 });
+
+test.describe('Documents Header mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('it checks the close button on Share modal', async ({ page }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: true, // Means owner
+        link_configuration: true,
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        manage_accesses: true,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    await expect(page.getByLabel('Share modal')).toBeVisible();
+    await page.getByRole('button', { name: 'close' }).click();
+    await expect(page.getByLabel('Share modal')).toBeHidden();
+  });
+});
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
@@ -23,7 +23,9 @@ test.describe('Doc Visibility', () => {
       .getByLabel('Datagrid of the documents page 1')
       .getByRole('table');
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 5000,
+    });
 
     await expect(datagrid.getByText(docTitle)).toBeVisible();
 

diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -507,6 +507,23 @@ input:-webkit-autofill:focus {
   overflow-y: auto;
 }
 
+@media screen and (width <= 420px) {
+  .c__modal__scroller {
+    padding: 0.7rem;
+  }
+
+  .c__modal__title h2 {
+    font-size: 1rem;
+  }
+}
+
+@media (width <= 576px) {
+  .c__modal__footer--sided {
+    gap: 0.5rem;
+    flex-direction: column-reverse;
+  }
+}
+
 /**
  * Toast
 */

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -18,10 +18,14 @@ import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 
-const cssEditor = `
+const cssEditor = (readonly: boolean) => `
   &, & > .bn-container, & .ProseMirror {
     height:100%
   };
+  & .bn-editor {
+    padding-right: 30px;
+    ${readonly && `padding-left: 30px;`}
+  };
   & .collaboration-cursor__caret.ProseMirror-widget{
     word-wrap: initial;
   }
@@ -30,6 +34,35 @@ const cssEditor = `
     padding: 2px;
     border-radius: 4px;
   }
+  @media screen and (width <= 560px) {
+    & .bn-editor {
+      padding-left: 40px;
+      padding-right: 10px;
+      ${readonly && `padding-left: 10px;`}
+    };
+    .bn-side-menu[data-block-type=heading][data-level="1"] {
+        height: 46px;
+    }
+    .bn-side-menu[data-block-type=heading][data-level="2"] {
+      height: 40px;
+    }
+    .bn-side-menu[data-block-type=heading][data-level="3"] {
+      height: 40px;
+    }
+    & .bn-editor h1 {
+      font-size: 1.6rem;
+    }
+    & .bn-editor h2 {
+      font-size: 1.35rem;
+    }
+    & .bn-editor h3 {
+      font-size: 1.2rem;
+    }
+    .bn-block-content[data-is-empty-and-focused][data-content-type="paragraph"] 
+      .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
+      font-size: 14px;
+    }
+  }
 `;
 
 interface BlockNoteEditorProps {
@@ -70,8 +103,9 @@ export const BlockNoteContent = ({
   const isVersion = doc.id !== storeId;
   const { userData } = useAuthStore();
   const { setStore, docsStore } = useDocStore();
-  const canSave = doc.abilities.partial_update && !isVersion;
-  useSaveDoc(doc.id, provider.document, canSave);
+
+  const readOnly = !doc.abilities.partial_update || isVersion;
+  useSaveDoc(doc.id, provider.document, !readOnly);
   const storedEditor = docsStore?.[storeId]?.editor;
   const {
     mutateAsync: createDocAttachment,
@@ -130,7 +164,7 @@ export const BlockNoteContent = ({
   }, [editor, resetHeadings, setHeadings]);
 
   return (
-    <Box $css={cssEditor}>
+    <Box $css={cssEditor(readOnly)}>
       {isErrorAttachment && (
         <Box $margin={{ bottom: 'big' }}>
           <TextErrors
@@ -144,7 +178,7 @@ export const BlockNoteContent = ({
       <BlockNoteView
         editor={editor}
         formattingToolbar={false}
-        editable={doc.abilities.partial_update && !isVersion}
+        editable={!readOnly}
         theme="light"
       >
         <BlockNoteToolbar />

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -9,6 +9,7 @@ import { useCunninghamTheme } from '@/cunningham';
 import { DocHeader } from '@/features/docs/doc-header';
 import { Doc } from '@/features/docs/doc-management';
 import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
+import { useResponsiveStore } from '@/stores';
 
 import { useHeadingStore } from '../stores';
 
@@ -25,6 +26,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
   } = useRouter();
   const { t } = useTranslation();
   const { headings } = useHeadingStore();
+  const { isMobile } = useResponsiveStore();
 
   const isVersion = versionId && typeof versionId === 'string';
 
@@ -51,11 +53,12 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
         $background={colorsTokens()['primary-bg']}
         $height="100%"
         $direction="row"
-        $margin={{ all: 'small', top: 'none' }}
+        $margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
         $css="overflow-x: clip;"
+        $position="relative"
       >
         <Card
-          $padding="big"
+          $padding={isMobile ? 'small' : 'big'}
           $css="flex:1;"
           $overflow="auto"
           $position="relative"
@@ -65,7 +68,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
           ) : (
             <BlockNoteEditor doc={doc} />
           )}
-          <IconOpenPanelEditor headings={headings} />
+          {!isMobile && <IconOpenPanelEditor headings={headings} />}
         </Card>
         <PanelEditor doc={doc} headings={headings} />
       </Box>