Show list items in two columns on large screens

pkirilin · Mar 20, 2024 · ea1b54d · ea1b54d
1 parent 9bc3d25
commit ea1b54d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 39 deletions.
diff --git a/src/frontend/src/features/notes/ui/NotesList.tsx b/src/frontend/src/features/notes/ui/NotesList.tsx
@@ -1,4 +1,4 @@
-import { List, ListSubheader, Stack, Typography } from '@mui/material';
+import { Grid, List, ListItem, ListSubheader, Stack, Typography } from '@mui/material';
 import { useMemo, type FC } from 'react';
 import { getMealName, type MealType, type NoteItem } from '../models';
 import { AddNote } from './AddNote';
@@ -52,14 +52,20 @@ export const NotesList: FC<Props> = ({ pageId, mealType, notes }) => {
       }
       sx={{ width: '100%' }}
     >
-      {notes.map(note => (
-        <NotesListItem key={note.id} note={note} pageId={pageId} />
-      ))}
-      <AddNote
-        pageId={pageId}
-        mealType={mealType}
-        displayOrder={maxDisplayOrderForNotesGroup + 1}
-      />
+      <ListItem disableGutters disablePadding>
+        <Grid container columnSpacing={4} component={List} disablePadding>
+          {notes.map(note => (
+            <NotesListItem key={note.id} note={note} pageId={pageId} />
+          ))}
+        </Grid>
+      </ListItem>
+      <ListItem>
+        <AddNote
+          pageId={pageId}
+          mealType={mealType}
+          displayOrder={maxDisplayOrderForNotesGroup + 1}
+        />
+      </ListItem>
     </List>
   );
 };
diff --git a/src/frontend/src/features/notes/ui/NotesListItem.tsx b/src/frontend/src/features/notes/ui/NotesListItem.tsx
@@ -1,5 +1,5 @@
 import DeleteIcon from '@mui/icons-material/Delete';
-import { ListItem, IconButton, ListItemButton, ListItemText, Tooltip } from '@mui/material';
+import { ListItem, IconButton, ListItemButton, ListItemText, Tooltip, Grid } from '@mui/material';
 import { type FC } from 'react';
 import { type NoteItem } from '../models';
 import { DeleteNote } from './DeleteNote';
@@ -10,33 +10,35 @@ interface Props {
   pageId: number;
 }
 
-export const NotesListItem: FC<Props> = ({ note, pageId }) => {
-  return (
-    <ListItem
-      disablePadding
-      key={note.id}
-      secondaryAction={
-        <DeleteNote note={note} pageId={pageId}>
-          {toggleDeleteDialog => (
-            <Tooltip title="Delete note">
-              <IconButton edge="end" onClick={toggleDeleteDialog}>
-                <DeleteIcon />
-              </IconButton>
-            </Tooltip>
-          )}
-        </DeleteNote>
-      }
-    >
-      <EditNote note={note} pageId={pageId}>
-        {toggleEditDialog => (
-          <ListItemButton onClick={toggleEditDialog}>
-            <ListItemText
-              primary={note.productName}
-              secondary={`${note.productQuantity} g, ${note.calories} kcal`}
-            />
-          </ListItemButton>
+export const NotesListItem: FC<Props> = ({ note, pageId }) => (
+  <Grid
+    key={note.id}
+    item
+    xs={12}
+    md={6}
+    component={ListItem}
+    disablePadding
+    secondaryAction={
+      <DeleteNote note={note} pageId={pageId}>
+        {toggleDeleteDialog => (
+          <Tooltip title="Delete note">
+            <IconButton edge="end" onClick={toggleDeleteDialog}>
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
         )}
-      </EditNote>
-    </ListItem>
-  );
-};
+      </DeleteNote>
+    }
+  >
+    <EditNote note={note} pageId={pageId}>
+      {toggleEditDialog => (
+        <ListItemButton onClick={toggleEditDialog}>
+          <ListItemText
+            primary={note.productName}
+            secondary={`${note.productQuantity} g, ${note.calories} kcal`}
+          />
+        </ListItemButton>
+      )}
+    </EditNote>
+  </Grid>
+);