From 04979ee9e92c8388a622f0eb1d4d5bef7a7d1a0b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 30 Jan 2025 13:40:33 +0100 Subject: [PATCH] Number of page layout adjustments --- package-lock.json | 11 +++--- package.json | 4 --- .../components/PageHeading/PageHeading.tsx | 34 ++++++++++++------- src/app/components/Table/Table.tsx | 2 ++ .../DocumentsTable/DocumentsTable.tsx | 4 +-- src/app/pages/SearchPage/SearchPage.tsx | 11 ++++-- src/app/pages/TasksPage/TaskPage.tsx | 18 ++++++---- src/app/styles/design-system-overrides.css | 4 +++ src/index.css | 2 +- vite.config.mts | 7 ++-- 10 files changed, 60 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a153cd..926be0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,7 @@ "name": "zwd-frontend", "version": "0.0.1", "dependencies": { - "@amsterdam/design-system-assets": "^0.3.0", - "@amsterdam/design-system-css": "^0.14.0", "@amsterdam/design-system-react": "^0.14.0", - "@amsterdam/design-system-react-icons": "^0.1.13", - "@amsterdam/design-system-tokens": "^0.14.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.get": "^4.4.9", "@types/qs": "^6.9.18", @@ -60,13 +56,15 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/@amsterdam/design-system-assets/-/design-system-assets-0.3.0.tgz", "integrity": "sha512-1r7vsZ7ZjeTLIDZtxLZA97Y5EXkiRyIewWvdocGHU/qNXSKvhUqa4Q0zTMwbbojrQ/rP8Qdi08EyVT5If3X/WA==", - "license": "SEE LICENSE IN LICENSE.md" + "license": "SEE LICENSE IN LICENSE.md", + "peer": true }, "node_modules/@amsterdam/design-system-css": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/@amsterdam/design-system-css/-/design-system-css-0.14.0.tgz", "integrity": "sha512-45TbbVtUgOPx5vojcpIhTjn+ZyHVuVTEvzmkaYG1pplMurMU51FKLFFTqawf9Y177cE12+xYbNAP59WyA5HA5w==", "license": "EUPL-1.2", + "peer": true, "peerDependencies": { "@amsterdam/design-system-assets": "0.3.0", "@amsterdam/design-system-tokens": "0.14.0" @@ -102,7 +100,8 @@ "version": "0.14.0", "resolved": "https://registry.npmjs.org/@amsterdam/design-system-tokens/-/design-system-tokens-0.14.0.tgz", "integrity": "sha512-SACpCctLNNiYPaXTRzijdr4fF84ytc4pqvqtktapOFdMRgvfQTWcCW+K1T+KG9JfRzoEd2O2LMwQ1BwTsJ+ZYg==", - "license": "SEE LICENSE IN LICENSE.md" + "license": "SEE LICENSE IN LICENSE.md", + "peer": true }, "node_modules/@babel/runtime": { "version": "7.26.0", diff --git a/package.json b/package.json index d11ba5c..50fcbb2 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,7 @@ "preview": "vite preview" }, "dependencies": { - "@amsterdam/design-system-assets": "^0.3.0", - "@amsterdam/design-system-css": "^0.14.0", "@amsterdam/design-system-react": "^0.14.0", - "@amsterdam/design-system-react-icons": "^0.1.13", - "@amsterdam/design-system-tokens": "^0.14.0", "@types/lodash.debounce": "^4.0.9", "@types/lodash.get": "^4.4.9", "@types/qs": "^6.9.18", diff --git a/src/app/components/PageHeading/PageHeading.tsx b/src/app/components/PageHeading/PageHeading.tsx index aab4431..5b403e6 100644 --- a/src/app/components/PageHeading/PageHeading.tsx +++ b/src/app/components/PageHeading/PageHeading.tsx @@ -8,31 +8,41 @@ type Props = { border?: boolean } -type Size = "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6" +type Size = + | "level-1" + | "level-2" + | "level-3" + | "level-4" + | "level-5" + | "level-6" const Wrapper = styled.div<{ $isBorder: boolean }>` - display: flex; + display: flex; padding-bottom: 8px; margin: 24px 0px; - border-bottom: ${ ({ $isBorder }) => $isBorder ? "1px solid #b4b4b4" : "none" }; + border-bottom: ${({ $isBorder }) => + $isBorder ? "1px solid #b4b4b4" : "none"}; ` const StyledIcon = styled(Icon)<{ level: number }>` margin-right: 8px; svg { - height: ${ ({ level }) => `${ 40 - (level * 4) }px` }; - width: ${ ({ level }) => `${ 40 - (level * 4) }px` }; + height: ${({ level }) => `${40 - level * 4}px`}; + width: ${({ level }) => `${40 - level * 4}px`}; } ` -export const PageHeading: React.FC = ({ label, level = 2, icon, border = false }) => { - const size: Size = `level-${ level }` +export const PageHeading: React.FC = ({ + label, + level = 2, + icon, + border = false +}) => { + const size: Size = `level-${level}` return ( - - { icon && } - - { label } - + + {icon && } + {label} ) } diff --git a/src/app/components/Table/Table.tsx b/src/app/components/Table/Table.tsx index fef67a6..b932cb0 100644 --- a/src/app/components/Table/Table.tsx +++ b/src/app/components/Table/Table.tsx @@ -12,6 +12,8 @@ import { TableType, SortingType, DESCEND } from "./types" const Wrap = styled.div` position: relative; + width: 100%; + overflow-x: auto; ` const StyledTable = styled.table` diff --git a/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx b/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx index c8e51f1..109d675 100644 --- a/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx +++ b/src/app/pages/CaseDetailsPage/Documents/DocumentsTable/DocumentsTable.tsx @@ -40,11 +40,11 @@ const DocumentsTable: React.FC = () => { return ( + /> ) } diff --git a/src/app/pages/SearchPage/SearchPage.tsx b/src/app/pages/SearchPage/SearchPage.tsx index 3ce74cc..df8ec16 100644 --- a/src/app/pages/SearchPage/SearchPage.tsx +++ b/src/app/pages/SearchPage/SearchPage.tsx @@ -4,6 +4,7 @@ import { SearchField } from "@amsterdam/design-system-react" import SearchResults from "./SearchResults/SearchResults" import { PageHeading } from "app/components" import { useURLState } from "app/hooks" +import { Grid } from "@amsterdam/design-system-react" const DELAY = 750 @@ -25,8 +26,11 @@ export const SearchPage: React.FC = () => { } return ( - <> - + + + + + e.preventDefault() } style={{ width: 600, marginBottom: "2rem" }}> { - + + ) } diff --git a/src/app/pages/TasksPage/TaskPage.tsx b/src/app/pages/TasksPage/TaskPage.tsx index c91fc8b..3e46bcf 100644 --- a/src/app/pages/TasksPage/TaskPage.tsx +++ b/src/app/pages/TasksPage/TaskPage.tsx @@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom" import { ColumnType, LinkButton, PageHeading, Table } from "app/components" import { useTasks } from "app/state/rest" import { formatDate } from "app/utils/dates" - +import { Grid } from "@amsterdam/design-system-react" const columns: ColumnType[] = [ { @@ -42,17 +42,21 @@ const columns: ColumnType[] = [ export const TasksPage: React.FC = () => { const [data, { isBusy }] = useTasks() const navigate = useNavigate() - + return ( - <> - -
+ + + + +
navigate(`/zaken/${ obj.case }`)} /> - + + ) } diff --git a/src/app/styles/design-system-overrides.css b/src/app/styles/design-system-overrides.css index 3726019..77875d5 100644 --- a/src/app/styles/design-system-overrides.css +++ b/src/app/styles/design-system-overrides.css @@ -1,5 +1,9 @@ /* This file is used to override the default design system styles */ +body, html { + padding: 0; +} + .ams-dialog { --ams-label-font-weight: normal; } diff --git a/src/index.css b/src/index.css index 800048e..073eea2 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ :root { font-family: "Amsterdam Sans", Arial, sans-serif; - padding: 0px 16px; + /* padding: 0px 16px; */ } \ No newline at end of file diff --git a/vite.config.mts b/vite.config.mts index d13e884..4789fb3 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -4,12 +4,15 @@ import react from "@vitejs/plugin-react-swc" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + css: { + devSourcemap: true + }, server: { open: true // Opens browser when running npm start - }, + }, resolve: { alias: { - "app": "/src/app" + app: "/src/app" } } })