Use alternative item details page layout on mobile

SBence · Oct 25, 2024 · 931407c · 931407c
1 parent b1f2daf
commit 931407c
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 52 deletions.
diff --git a/src/components/ItemDetailsPage/ResponsivePaper.tsx b/src/components/ItemDetailsPage/ResponsivePaper.tsx
@@ -0,0 +1,27 @@
+import {
+  Box,
+  MantineSize,
+  Paper,
+  PaperProps,
+  PolymorphicComponentProps,
+} from "@mantine/core";
+import { ReactNode } from "react";
+
+export default function ResponsivePaper<C extends React.ElementType = "div">({
+  children,
+  showPaperFrom,
+  paperProps,
+}: {
+  children: ReactNode;
+  showPaperFrom: MantineSize | (string & {});
+  paperProps?: PolymorphicComponentProps<C, PaperProps>;
+}) {
+  return (
+    <>
+      <Box hiddenFrom={showPaperFrom}>{children}</Box>
+      <Paper {...paperProps} visibleFrom={showPaperFrom}>
+        {children}
+      </Paper>
+    </>
+  );
+}
diff --git a/src/config/styles.ts b/src/config/styles.ts
@@ -1,16 +1,27 @@
-import { MantineBreakpoint, MantineTransition } from "@mantine/core";
+import {
+  MantineBreakpoint,
+  MantineSize,
+  MantineTransition,
+} from "@mantine/core";
 
 export const ICON_STROKE = 1.5;
 export const HEADER_HEIGHT_MIN = 0;
-export const MOBILE_BREAKPOINT: MantineBreakpoint = "xs";
-export const TRANSITION_DURATION = 200;
-export const TRANSITION_MODAL_MOBILE: MantineTransition = "fade";
 
 // Max lines
 export const ITEM_PROPERTY_MAX_LINES = 2;
 export const RELATED_ITEMS_TITLE_MAX_LINES = 2;
 export const TABLE_MAX_LINES = 2;
 
+// Layout breakpoints
+export const ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT:
+  | MantineSize
+  | (string & {}) = "xs";
+export const MOBILE_BREAKPOINT: MantineBreakpoint = "xs";
+
+// Transitions
+export const TRANSITION_DURATION = 200;
+export const TRANSITION_MODAL_MOBILE: MantineTransition = "fade";
+
 // Z-index
 export const Z_INDEX_LOADER = 1;
 export const Z_INDEX_LAYOUT = 2;

diff --git a/src/routes/ItemDetailsPage.tsx b/src/routes/ItemDetailsPage.tsx
@@ -3,12 +3,15 @@ import ItemProperties from "@components/ItemDetailsPage/ItemProperties";
 import ItemPropertyBox from "@components/ItemDetailsPage/ItemPropertyBox";
 import NavBackButton from "@components/ItemDetailsPage/NavBackButton";
 import RelatedItemCard from "@components/ItemDetailsPage/RelatedItemCard";
+import ResponsivePaper from "@components/ItemDetailsPage/ResponsivePaper";
 import CustomHeader from "@components/shared/CustomHeader";
+import { ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT } from "@config/styles";
 import { ToolDto } from "@customTypes/api";
 import {
   Container,
+  Divider,
   Group,
-  Paper,
+  PaperProps,
   SimpleGrid,
   Stack,
   Text,
@@ -26,6 +29,11 @@ import ErrorPage from "./ErrorPage";
 
 import classes from "@styles/ItemDetailsPage.module.css";
 
+const paperProps: PaperProps = {
+  className: classes.detailsSectionPaper,
+  withBorder: true,
+};
+
 export default function ItemDetailsPage() {
   const data = useLoaderData() as { itemDetails: Promise<ToolDto> };
 
@@ -52,62 +60,89 @@ export default function ItemDetailsPage() {
             </CustomHeader>
             <Container size="xl" className={classes.pageContainer}>
               <Stack gap="lg">
-                <Paper className={classes.detailsSectionPaper} withBorder>
+                <ResponsivePaper
+                  showPaperFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                  paperProps={paperProps}
+                >
                   <Stack>
                     <Title order={4}>Properties</Title>
                     <ItemProperties itemDetails={itemDetails} />
                   </Stack>
-                </Paper>
+                </ResponsivePaper>
                 {!!itemDetails.contributors?.length && (
-                  <Paper className={classes.detailsSectionPaper} withBorder>
-                    <Stack>
-                      <Title order={4}>Contributors</Title>
-                      <SimpleGrid cols={ITEM_PROPERTIES_COLUMNS}>
-                        {itemDetails.contributors
-                          .filter(
-                            (contributor) =>
-                              !!contributor.actor || !!contributor.role,
-                          )
-                          .map((contributor) => (
-                            <ItemPropertyBox
-                              key={contributor.actor?.id}
-                              name={contributor.role?.label ?? ""}
-                              value={contributor.actor?.name ?? ""}
-                            />
-                          ))}
-                      </SimpleGrid>
-                    </Stack>
-                  </Paper>
+                  <>
+                    <Divider
+                      hiddenFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                    />
+                    <ResponsivePaper
+                      showPaperFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                      paperProps={paperProps}
+                    >
+                      <Stack>
+                        <Title order={4}>Contributors</Title>
+                        <SimpleGrid cols={ITEM_PROPERTIES_COLUMNS}>
+                          {itemDetails.contributors
+                            .filter(
+                              (contributor) =>
+                                !!contributor.actor || !!contributor.role,
+                            )
+                            .map((contributor) => (
+                              <ItemPropertyBox
+                                key={contributor.actor?.id}
+                                name={contributor.role?.label ?? ""}
+                                value={contributor.actor?.name ?? ""}
+                              />
+                            ))}
+                        </SimpleGrid>
+                      </Stack>
+                    </ResponsivePaper>
+                  </>
                 )}
                 {itemDetails.description && (
-                  <Paper className={classes.detailsSectionPaper} withBorder>
-                    <Stack>
-                      <Title order={4}>Description</Title>
-                      <Markdown options={markdownOptions}>
-                        {itemDetails.description}
-                      </Markdown>
-                    </Stack>
-                  </Paper>
+                  <>
+                    <Divider
+                      hiddenFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                    />
+                    <ResponsivePaper
+                      showPaperFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                      paperProps={paperProps}
+                    >
+                      <Stack>
+                        <Title order={4}>Description</Title>
+                        <Markdown options={markdownOptions}>
+                          {itemDetails.description}
+                        </Markdown>
+                      </Stack>
+                    </ResponsivePaper>
+                  </>
                 )}
                 {!!itemDetails.relatedItems?.length && (
-                  <Paper className={classes.detailsSectionPaper} withBorder>
-                    <Stack>
-                      <div>
-                        <Title order={4}>Related items</Title>
-                        <Text c="dimmed" size="sm">
-                          Click a card to show details
-                        </Text>
-                      </div>
-                      <SimpleGrid cols={ITEM_PROPERTIES_CARDS_COLUMNS}>
-                        {itemDetails.relatedItems.map((relatedItem) => (
-                          <RelatedItemCard
-                            key={relatedItem.id}
-                            item={relatedItem}
-                          />
-                        ))}
-                      </SimpleGrid>
-                    </Stack>
-                  </Paper>
+                  <>
+                    <Divider
+                      hiddenFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                    />
+                    <ResponsivePaper
+                      showPaperFrom={ITEM_DETAILS_COMPACT_LAYOUT_BREAKPOINT}
+                      paperProps={paperProps}
+                    >
+                      <Stack>
+                        <div>
+                          <Title order={4}>Related items</Title>
+                          <Text c="dimmed" size="sm">
+                            Click a card to show details
+                          </Text>
+                        </div>
+                        <SimpleGrid cols={ITEM_PROPERTIES_CARDS_COLUMNS}>
+                          {itemDetails.relatedItems.map((relatedItem) => (
+                            <RelatedItemCard
+                              key={relatedItem.id}
+                              item={relatedItem}
+                            />
+                          ))}
+                        </SimpleGrid>
+                      </Stack>
+                    </ResponsivePaper>
+                  </>
                 )}
               </Stack>
             </Container>