Update the layout to work better on smaller devices like phones. (#173)

gjong · web-flow · commit b8255d331e30 · 2025-02-23T15:47:01.000+01:00
diff --git a/src/assets/css/AccountOverview.scss b/src/assets/css/AccountOverview.scss
@@ -2,10 +2,6 @@
 
   .AccountRow {
     vertical-align: middle;
-
-    .ImageAttachment {
-      max-width: 2rem;
-    }
   }
 }
 
diff --git a/src/components/account/own-row.component.tsx b/src/components/account/own-row.component.tsx
@@ -34,17 +34,17 @@ const AccountRowComponent = ({ account, deleteCallback }: AccountRowProps) => {
     const accountArray = [account]
     return <tr onMouseLeave={ () => dropDownActions.close() }>
         <td>
-            <h2 className='text-lg'><Link to={ accountLink }>{ account.name }</Link></h2>
+            <h2 className='md:text-lg'><Link to={ accountLink }>{ account.name }</Link></h2>
 
-            <div className='text-muted pl-1 text-sm'>
+            <div className='text-muted md:pl-1 text-sm flex md:block flex-col'>
                 <label className='font-bold mr-1'><Translation label='Account.type'/>:</label>
-                <Translation label={ `AccountType.${ account.type }` }/>
+                <Translation className='md:px-0 px-2' label={ `AccountType.${ account.type }` }/>
             </div>
-            <div className='text-muted pl-1 text-sm'>
+            <div className='text-muted md:pl-1 text-sm flex md:block flex-col'>
                 <label className='font-bold mr-1'><Translation label='Account.lastActivity'/>:</label>
-                <DateComponent date={ account.history.lastTransaction }/>
+                <DateComponent className='md:px-0 px-2' date={ account.history.lastTransaction }/>
             </div>
-            <div className='mt-1 pl-1 text-muted text-sm'>{ account.description }</div>
+            <div className='hidden md:block mt-1 pl-1 text-muted text-sm'>{ account.description }</div>
         </td>
         <td className='hidden md:table-cell'>
             { account.account.iban && `${ account.account.iban }` }
diff --git a/src/components/account/transaction-list.component.tsx b/src/components/account/transaction-list.component.tsx
@@ -54,7 +54,7 @@ const TransactionList: FC<TransactionListProps> = ({ account, range }) => {
                 .reduce((a, t) => a + t.amount, 0)
 
             return <div key={key} className='flex flex-col gap-0.5 pb-1'>
-                <div className='flex gap-2 items-center border-b-[1px] py-0.5 mb-1 bg-blue-200/20 rounded-lg px-2'>
+                <div className='flex gap-2 items-center border-b-[1px] py-0.5 mb-1 px-2 md:rounded-lg bg-blue-300/10 md:bg-blue-200/20'>
                     <div className='font-bold text-lg[1.5em] text-muted'>
                         { date.getDate() }
                     </div>
diff --git a/src/components/breadcrumb/breadcrumb.component.tsx b/src/components/breadcrumb/breadcrumb.component.tsx
@@ -6,7 +6,7 @@ const BreadCrumbs = ({ children }: PropsWithChildren) => {
     const onMenuClick = () => window.dispatchEvent(new CustomEvent('hamburger-menu-click'));
 
     return <ol className='relative flex flex-wrap gap-1 border-b-separator
-                       mx-[-0.5rem] md:mx-[-1.25rem]
+                       md:mx-[-1.25rem]
                        max-h-[38px]
                        border-b-[1px] py-2 px-2 bg-background'>
         <li className='block md:hidden cursor-pointer'
diff --git a/src/components/budget/budget-detail.component.tsx b/src/components/budget/budget-detail.component.tsx
@@ -73,7 +73,7 @@ const BudgetDetailComponent = ({ range }: { range: DateRange }) => {
 
     if (!budget) return <Loading />
     return <>
-        <div className='flex flex-col'>
+        <div className='flex flex-col pl-16 md:pl-0'>
             <div className='flex'>
                 <Translation label='page.budget.group.budget.period'
                                           className='font-bold mr-2 min-w-[10em] after:content-[":"]'/>
@@ -102,7 +102,7 @@ const BudgetDetailComponent = ({ range }: { range: DateRange }) => {
                                   month={ range.month() }
                                   onChanges={ loadBudget }/>
 
-        <div className='flex justify-end'>
+        <div className='flex justify-end pr-2 md:pr-0'>
             { currentMonth.isSame(range.year(), range.month()) && <AddExpenseDialog onChange={ loadBudget } /> }
         </div>
     </>
diff --git a/src/components/category/category-row.component.tsx b/src/components/category/category-row.component.tsx
@@ -36,7 +36,7 @@ const CategoryRow = ({ category, deleteCallback = () => undefined }: CategoryRow
                                 href={ `${ category.id }/edit` }/>
             </td>
             <td>{ category.label }</td>
-            <td>{ category.description }</td>
+            <td className='hidden md:table-cell'>{ category.description }</td>
             <td><DateComponent date={ category.lastUsed }/></td>
         </tr>
     )
diff --git a/src/components/form/input/InputGroup.tsx b/src/components/form/input/InputGroup.tsx
@@ -1,4 +1,4 @@
-import React, {ChangeEventHandler, FC, FocusEvent, FocusEventHandler, ReactNode, useContext, useEffect} from "react";
+import React, {ChangeEventHandler, FC, ReactNode, useContext, useEffect} from "react";
 import Translation from "../../localization/translation.component";
 import HelpTranslation from "../../localization/help.component";
 
@@ -26,7 +26,7 @@ export const InputGroup: FC<InputGroupProps> = ({ id, help, title, required = fa
                 { help ? <HelpTranslation label={ help } className='font-normal text-end pr-1'/> : '' }
             </label>
         ) }
-        <div className={`flex-1 ${ inputClassName }`}>{ children }</div>
+        <div className={`px-1 md:px-0 md:flex-1 ${ inputClassName }`}>{ children }</div>
     </div>
 }
 
diff --git a/src/components/format/date.component.tsx b/src/components/format/date.component.tsx
@@ -1,12 +1,12 @@
 import useLocalStorage from "../../hooks/local-storage.hook";
 
-const _ = ({ date }: { date?: string }) => {
+const _ = ({ date, className = '' }: { date?: string, className?: string }) => {
     const [language] = useLocalStorage('language', 'en');
 
     if (date) {
         const formatted = new Intl.DateTimeFormat(language as string).format(new Date(date))
         return (
-            <span className='FormattedDate'>{formatted}</span>
+            <span className={`FormattedDate ${className}`}>{formatted}</span>
         )
     }
 
diff --git a/src/components/layout/card.component.tsx b/src/components/layout/card.component.tsx
@@ -31,7 +31,7 @@ const Card: FC<CardProps> = ({ title, actions, buttons, children, className = ''
                     {actions && <div className='font-normal text-sm flex gap-0.5'>{ actions }</div>}
                 </header>
             )}
-            <article className='bg-white p-4 first:rounded-t-lg last:rounded-b-lg'>
+            <article className='bg-white py-4 md:px-4 first:rounded-t-lg last:rounded-b-lg'>
                 { children }
             </article>
             { buttons &&
diff --git a/src/components/transaction/transaction-dialog.component.tsx b/src/components/transaction/transaction-dialog.component.tsx
@@ -25,9 +25,10 @@ const NewTransactionDialog: FC<NewTransactionDialogProps> = ({ variant, icon, ty
 
     return <>
         <Button label={ `page.transactions.${type}.add` }
-                        variant={ variant }
-                        onClick={ () => control.open() }
-                        icon={ icon }/>
+                variant={ variant }
+                className='[&>.Translation]:hidden text-xl md:text-sm md:[&>.Translation]:block'
+                onClick={ () => control.open() }
+                icon={ icon }/>
         <Form onSubmit={ onSelect } entity='transaction'>
             <Dialog
                 title='page.accounts.select'
diff --git a/src/components/transaction/transaction-list.component.tsx b/src/components/transaction/transaction-list.component.tsx
@@ -74,7 +74,7 @@ const TransactionOverview: FC<TransactionOverviewProps> = ({ range, transfers })
                 .reduce((a, t) => a + t.amount, 0)
 
             return <div key={key} className='flex flex-col gap-0.5 pb-3'>
-                <div className='flex gap-2 items-center border-b-[1px] pb-1 mb-1 px-2 rounded-lg bg-blue-200/20'>
+                <div className='flex gap-2 items-center border-b-[1px] pb-1 mb-1 px-2 md:rounded-lg bg-blue-300/10 md:bg-blue-200/20'>
                     <div className='font-bold text-lg[1.5em] text-muted'>
                         { date.getDate() }
                     </div>
diff --git a/src/components/upload/import-job-summary.component.tsx b/src/components/upload/import-job-summary.component.tsx
@@ -7,30 +7,30 @@ import Translation from "../localization/translation.component";
 const ImportJobSummaryComponent = ({ importJob }: { importJob: ImportJob }) => {
 
     return <>
-        <div className='flex gap-16 flex-wrap'>
-            <div className='p-5 rounded-xl bg-blue-100 flex-1
+        <div className='flex gap-5 md:gap-16 flex-wrap'>
+            <div className='p-5 rounded-xl bg-blue-100 flex-grow md:flex-1
                             flex flex-col gap-1 justify-center items-center'>
                 <Translation className='font-bold'
                              label='BatchImport.created'/>
                 <DateComponent date={ importJob.created }/>
             </div>
 
-            <div className='p-5 rounded-xl bg-gray-100 flex-1
+            <div className='p-5 rounded-xl bg-gray-100 flex-grow md:flex-1
                             flex flex-col gap-1 justify-center items-center'>
                 <Translation className='font-bold'
                              label='BatchImport.finished'/>
                 <DateComponent date={ importJob.finished }/>
             </div>
 
-            <div className='p-5 rounded-xl bg-red-100 flex-1
+            <div className='p-5 rounded-xl bg-red-100 flex-grow md:flex-1
                             flex flex-col gap-1 justify-center items-center'>
                 <Translation className='font-bold'
                              label='BatchImport.totalExpenses'/>
                 <BalanceComponent importSlug={ importJob.slug }
                                   income={ false }/>
             </div>
 
-            <div className='p-5 rounded-xl bg-green-100 flex-1
+            <div className='p-5 rounded-xl bg-green-100 flex-grow md:flex-1
                             flex flex-col gap-1 justify-center items-center'>
                 <Translation className='font-bold'
                              label='BatchImport.totalIncome'/>
diff --git a/src/core/attachment/image-attachment.tsx b/src/core/attachment/image-attachment.tsx
@@ -13,7 +13,7 @@ const ImageAttachment = ({ fileCode }: { fileCode: string }) => {
     }, [fileCode])
 
     if (data !== '') {
-        return <img src={data} className='ImageAttachment' alt='Attachment'/>
+        return <img src={data} className='max-w-[1rem] md:max-w-[2rem]' alt='Attachment'/>
     }
 
     return <div className='ImageAttachment not-found'/>
diff --git a/src/pages/account/account-details.tsx b/src/pages/account/account-details.tsx
@@ -92,7 +92,7 @@ const AccountDetailView: FC = () => {
         </> }
 
         <Card title='page.title.transactions.overview'>
-            { account && <ButtonBar className='pb-2 justify-center md:justify-end'>
+            { account && <ButtonBar className='pb-2 justify-center! md:justify-end! mb-2 md:mb-0'>
                 { (!Resolver.Account.isManaged(account) || Resolver.Account.isCreditor(account))
                     && <Button label='page.transactions.debit.add'
                                        href={ `${Resolver.Account.resolveUrl(account)}/transactions/add/debit`}
diff --git a/src/pages/account/default/index.tsx b/src/pages/account/default/index.tsx
@@ -35,18 +35,18 @@ const AccountRow = ({ account, deleteCallback }: AccountRowProps) => {
 
     return (
         <tr className='' onMouseLeave={ () => dropDownActions.close() }>
-            <td>
+            <td className='align-middle'>
                 { account.iconFileCode && <Attachment.Image fileCode={ account.iconFileCode }/> }
             </td>
             <td>
-                <h2 className='m-0 text-lg'><NavLink to={ `./${ account.id }/transactions` }>{ account.name }</NavLink></h2>
+                <h2 className='m-0 text-md md:text-lg'><NavLink to={ `./${ account.id }/transactions` }>{ account.name }</NavLink></h2>
                 <When condition={ account.history.lastTransaction !== null }>
                     <div className='text-muted'>
                         <Translation label='Account.lastActivity' className='font-semibold'/>:
                         <DateComponent date={ account.history.lastTransaction }/>
                     </div>
                 </When>
-                <div className='Description Text Muted'>{ account.description }</div>
+                <div className='hidden md:block mt-1 pl-1 text-muted text-sm'>{ account.description }</div>
             </td>
             <td className='hidden md:table-cell'>
                 { account.account.iban && `${ account.account.iban }` }
@@ -109,10 +109,10 @@ const AccountOverview = () => {
                     <table className='Table'>
                         <thead>
                         <tr>
-                            <th className='w-[30px]'/>
+                            <th className='md:w-[30px]'/>
                             <th><Translation label='Account.name'/></th>
                             <th className='hidden md:table-cell w-[160px]'><Translation label='Account.number'/></th>
-                            <th className='w-[120px]'><Translation label='common.account.saldo'/></th>
+                            <th className='md:w-[120px]'><Translation label='common.account.saldo'/></th>
                             <th className='w-[20px]'/>
                         </tr>
                         </thead>
diff --git a/src/pages/account/own/index.tsx b/src/pages/account/own/index.tsx
@@ -40,7 +40,7 @@ const OwnAccountsView = () => {
                 <tr>
                     <th><Translation label='Account.name'/></th>
                     <th className='w-48 hidden md:table-cell'><Translation label='Account.number'/></th>
-                    <th className='w-40'><Translation label='common.account.saldo'/></th>
+                    <th className='md:w-40'><Translation label='common.account.saldo'/></th>
                     <th className='w-7'/>
                 </tr>
                 </thead>
diff --git a/src/pages/category/index.tsx b/src/pages/category/index.tsx
@@ -45,9 +45,9 @@ const CategoryListing = () => {
             <table className='Table'>
                 <thead>
                 <tr>
-                    <th className='w-[60px]'/>
+                    <th className='md:w-[60px]'/>
                     <th><Translation label='Category.label'/></th>
-                    <th><Translation label='Category.description'/></th>
+                    <th className='hidden md:table-cell'><Translation label='Category.description'/></th>
                     <th><Translation label='Category.lastActivity'/></th>
                 </tr>
                 </thead>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
@@ -29,7 +29,7 @@ function Login() {
     return <div className='flex justify-center h-[100vh] items-center'>
         <Form entity='UserAccount' onSubmit={ onSubmit }>
             <Card title='page.login.title'
-                  className='min-w-[30rem]'
+                  className='min-w-[100vw] md:min-w-[30rem]'
                   actions={ [
                       <Dropdown icon={ mdiWeb }
                                          className='[&>div]:bg-white [&>div]:px-4 [&>div]:rounded-sm [&>div]:border-separator [&>div]:border-[1px]'
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
@@ -28,11 +28,12 @@ const Register = () => {
         .catch(setException)
 
     return (
-        <div className="RegisterCard">
+        <div className="flex h-[100vh] items-center justify-center">
             <span/>
             <Form onSubmit={onSubmit}
                   entity='UserAccount'>
                 <Card title='page.title.register'
+                      className=''
                              buttons={[
                                  <SubmitButton key='login'
                                                label='page.register.register'
diff --git a/src/pages/transaction/income-expense.tsx b/src/pages/transaction/income-expense.tsx
@@ -20,8 +20,6 @@ const TransactionGlobalView = () => {
     const onDateChange = (year: number, month: number) =>
         navigate(`/transactions/income-expense/${ year }/${ month }`)
 
-    console.log(range)
-
     return <div className='TransactionOverview'>
         <BreadCrumbs>
             <BreadCrumbItem label='page.nav.accounting'/>
diff --git a/src/pledger-io.tsx b/src/pledger-io.tsx
@@ -120,7 +120,7 @@ function AuthenticatedComponent() {
     return <>
         <Sidebar logoutCallback={ logout }/>
         <MobileSidebar logoutCallback={ logout }/>
-        <main className='Main px-2 md:px-5 h-[100vh] flex flex-col overflow-y-auto'>
+        <main className='Main md:px-2 md:px-5 h-[100vh] flex flex-col overflow-y-auto'>
             <NotificationCenter/>
             <Suspense fallback={ <SuspenseLoading/> }>
                 <Outlet/>
diff --git a/vite.config.mts b/vite.config.mts
@@ -22,7 +22,10 @@ export default defineConfig({
         environment: 'jsdom',
         setupFiles: './src/setupTests.js',
         css: true,
-        reporters: ['verbose'],
+        reporters: ['verbose', 'junit'],
+        outputFile: {
+            junit: 'coverage/junit-report.xml'
+        },
         coverage: {
             reporter: ['json-summary', 'json'],
             include: ['src/**/*'],

Original file line number	Diff line number	Diff line change
`@@ -2,10 +2,6 @@`
`2`	`2`
`3`	`3`	`.AccountRow {`
`4`	`4`	`vertical-align: middle;`
`5`		`-`
`6`		`- .ImageAttachment {`
`7`		`- max-width: 2rem;`
`8`		`- }`
`9`	`5`	`}`
`10`	`6`	`}`
`11`	`7`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ const CategoryRow = ({ category, deleteCallback = () => undefined }: CategoryRow`
`36`	`36`	href={ `${ category.id }/edit` }/>
`37`	`37`	`</td>`
`38`	`38`	`<td>{ category.label }</td>`
`39`		`- <td>{ category.description }</td>`
	`39`	`+ <td className='hidden md:table-cell'>{ category.description }</td>`
`40`	`40`	`<td><DateComponent date={ category.lastUsed }/></td>`
`41`	`41`	`</tr>`
`42`	`42`	`)`
Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,12 @@`
`1`	`1`	`import useLocalStorage from "../../hooks/local-storage.hook";`
`2`	`2`
`3`		`-const _ = ({ date }: { date?: string }) => {`
	`3`	`+const _ = ({ date, className = '' }: { date?: string, className?: string }) => {`
`4`	`4`	`const [language] = useLocalStorage('language', 'en');`
`5`	`5`
`6`	`6`	`if (date) {`
`7`	`7`	`const formatted = new Intl.DateTimeFormat(language as string).format(new Date(date))`
`8`	`8`	`return (`
`9`		`- <span className='FormattedDate'>{formatted}</span>`
	`9`	+ <span className={`FormattedDate ${className}`}>{formatted}</span>
`10`	`10`	`)`
`11`	`11`	`}`
`12`	`12`