From 679dd430620eeadba455bfdbc64cecaa98e3099b Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Wed, 1 Nov 2023 20:24:24 +0200 Subject: [PATCH 1/2] Docs: improve nested tables examples layout --- ...NestedTablesAsyncSortingExample.module.css | 9 +++---- .../NestedTablesAsyncSortingExample.tsx | 25 ++++++++++-------- .../NestedTablesAsyncExample.module.css | 9 +++---- .../NestedTablesAsyncExample.tsx | 25 ++++++++++-------- .../NestedTablesExample.module.css | 9 +++---- .../nested-tables/NestedTablesExample.tsx | 26 ++++++++++--------- 6 files changed, 51 insertions(+), 52 deletions(-) diff --git a/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.module.css b/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.module.css index 707ebdb3f..d942ba560 100644 --- a/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.module.css +++ b/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.module.css @@ -1,7 +1,8 @@ .icon { - margin-top: rem(-2px); - width: rem(14px); + width: rem(13px); height: auto; + vertical-align: rem(-1px); + margin-right: rem(8px); } .expandIcon { @@ -11,7 +12,3 @@ .expandIconRotated { transform: rotate(90deg); } - -.employeeName { - margin-left: calc(var(--mantine-spacing-xl) * 2); -} diff --git a/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.tsx b/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.tsx index efae7028b..304feabe4 100644 --- a/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.tsx +++ b/app/examples/nested-tables-with-async-data-loading-and-sorting/NestedTablesAsyncSortingExample.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Group } from '@mantine/core'; +import { Box } from '@mantine/core'; import { IconBuilding, IconChevronRight, IconUser, IconUsers } from '@tabler/icons-react'; import { DataTable, DataTableSortStatus } from '__PACKAGE__'; import clsx from 'clsx'; @@ -25,13 +25,14 @@ function EmployeesTable({ departmentId, sortStatus }: { departmentId: string; so columns={[ { accessor: 'name', + noWrap: true, render: ({ firstName, lastName }) => ( - + -
+ {firstName} {lastName} -
- + + ), }, { @@ -59,16 +60,17 @@ function DepartmentsTable({ companyId, sortStatus }: { companyId: string; sortSt columns={[ { accessor: 'name', + noWrap: true, render: ({ id, name }) => ( - + -
{name}
- + {name} + ), }, { accessor: 'employees', textAlign: 'right', width: 200 }, @@ -104,16 +106,17 @@ export function NestedTablesAsyncSortingExample() { accessor: 'name', sortable: true, title: 'Company / Department / Employee', + noWrap: true, render: ({ id, name }) => ( - + <> -
{name}
- + {name} + ), }, { diff --git a/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.module.css b/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.module.css index 707ebdb3f..d942ba560 100644 --- a/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.module.css +++ b/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.module.css @@ -1,7 +1,8 @@ .icon { - margin-top: rem(-2px); - width: rem(14px); + width: rem(13px); height: auto; + vertical-align: rem(-1px); + margin-right: rem(8px); } .expandIcon { @@ -11,7 +12,3 @@ .expandIconRotated { transform: rotate(90deg); } - -.employeeName { - margin-left: calc(var(--mantine-spacing-xl) * 2); -} diff --git a/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.tsx b/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.tsx index a0a3021ab..2a3e52b60 100644 --- a/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.tsx +++ b/app/examples/nested-tables-with-async-data-loading/NestedTablesAsyncExample.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Group } from '@mantine/core'; +import { Box } from '@mantine/core'; import { IconBuilding, IconChevronRight, IconUser, IconUsers } from '@tabler/icons-react'; import { DataTable } from '__PACKAGE__'; import clsx from 'clsx'; @@ -21,13 +21,14 @@ function EmployeesTable({ departmentId }: { departmentId: string }) { columns={[ { accessor: 'name', + noWrap: true, render: ({ firstName, lastName }) => ( - + -
+ {firstName} {lastName} -
- + + ), }, { @@ -55,16 +56,17 @@ function DepartmentsTable({ companyId }: { companyId: string }) { columns={[ { accessor: 'name', + noWrap: true, render: ({ id, name }) => ( - + -
{name}
- + {name} + ), }, { accessor: 'employees', textAlign: 'right', width: 200 }, @@ -92,16 +94,17 @@ export function NestedTablesAsyncExample() { { accessor: 'name', title: 'Company / Department / Employee', + noWrap: true, render: ({ id, name }) => ( - + <> -
{name}
- + {name} + ), }, { accessor: 'employees', title: 'Employees / Birth date', textAlign: 'right', width: 200 }, diff --git a/app/examples/nested-tables/NestedTablesExample.module.css b/app/examples/nested-tables/NestedTablesExample.module.css index 707ebdb3f..d942ba560 100644 --- a/app/examples/nested-tables/NestedTablesExample.module.css +++ b/app/examples/nested-tables/NestedTablesExample.module.css @@ -1,7 +1,8 @@ .icon { - margin-top: rem(-2px); - width: rem(14px); + width: rem(13px); height: auto; + vertical-align: rem(-1px); + margin-right: rem(8px); } .expandIcon { @@ -11,7 +12,3 @@ .expandIconRotated { transform: rotate(90deg); } - -.employeeName { - margin-left: calc(var(--mantine-spacing-xl) * 2); -} diff --git a/app/examples/nested-tables/NestedTablesExample.tsx b/app/examples/nested-tables/NestedTablesExample.tsx index e1b5e558d..8f393fd12 100644 --- a/app/examples/nested-tables/NestedTablesExample.tsx +++ b/app/examples/nested-tables/NestedTablesExample.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Group } from '@mantine/core'; +import { Box } from '@mantine/core'; import { IconBuilding, IconChevronRight, IconUser, IconUsers } from '@tabler/icons-react'; import { DataTable } from '__PACKAGE__'; import clsx from 'clsx'; @@ -23,16 +23,17 @@ export function NestedTablesExample() { { accessor: 'name', title: 'Company / Department / Employee', + noWrap: true, render: ({ id, name }) => ( - + <> -
{name}
- + {name} + ), }, { accessor: 'employees', title: 'Employees / Birth date', textAlign: 'right', width: 200 }, @@ -48,16 +49,17 @@ export function NestedTablesExample() { columns={[ { accessor: 'name', + noWrap: true, render: ({ id, name }) => ( - + - -
{name}
- + + {name} + ), }, { accessor: 'employees', textAlign: 'right', width: 200 }, @@ -74,12 +76,12 @@ export function NestedTablesExample() { { accessor: 'name', render: ({ firstName, lastName }) => ( - + -
+ {firstName} {lastName} -
- + + ), }, { From fb1df68e807065de53caf0e5e23a89637f500404 Mon Sep 17 00:00:00 2001 From: Ionut-Cristian Florescu Date: Wed, 1 Nov 2023 20:45:54 +0200 Subject: [PATCH 2/2] Docs: improve app icons --- app/manifest.webmanifest/route.ts | 20 +++++++------------- public/icon-maskable-192.png | Bin 0 -> 1748 bytes public/icon-maskable-512.png | Bin 0 -> 3963 bytes 3 files changed, 7 insertions(+), 13 deletions(-) create mode 100644 public/icon-maskable-192.png create mode 100644 public/icon-maskable-512.png diff --git a/app/manifest.webmanifest/route.ts b/app/manifest.webmanifest/route.ts index 3486a545a..0d2e31fa9 100644 --- a/app/manifest.webmanifest/route.ts +++ b/app/manifest.webmanifest/route.ts @@ -25,24 +25,12 @@ const data: MetadataRoute.Manifest = { sizes: 'any', purpose: 'any', }, - { - src: `${urlPrefix}/icon.svg`, - type: 'image/svg+xml', - sizes: 'any', - purpose: 'maskable', - }, { src: `${urlPrefix}/icon-192.png`, type: 'image/png', sizes: '192x192', purpose: 'any', }, - { - src: `${urlPrefix}/icon-192.png`, - type: 'image/png', - sizes: '192x192', - purpose: 'maskable', - }, { src: `${urlPrefix}/icon-512.png`, type: 'image/png', @@ -50,7 +38,13 @@ const data: MetadataRoute.Manifest = { purpose: 'any', }, { - src: `${urlPrefix}/icon-512.png`, + src: `${urlPrefix}/icon-maskable-192.png`, + type: 'image/png', + sizes: '192x192', + purpose: 'maskable', + }, + { + src: `${urlPrefix}/icon-maskable-512.png`, type: 'image/png', sizes: '512x512', purpose: 'maskable', diff --git a/public/icon-maskable-192.png b/public/icon-maskable-192.png new file mode 100644 index 0000000000000000000000000000000000000000..a7046c2fa7396d6cf53ed7aca1f858cf75f82520 GIT binary patch literal 1748 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