make documents grid controls sticky

ibastawisi · Oct 30, 2024 · 361e23c · 361e23c
1 parent 839455d
commit 361e23c
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 11 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -124,6 +124,7 @@ body:has(#app-toolbar) .editor-container [id] {
   user-select: text;
   white-space: pre-wrap;
   word-break: break-word;
+  overflow: hidden;
 }
 
 .excalidraw.excalidraw-modal-container,

diff --git a/src/components/Documents.tsx b/src/components/Documents.tsx
@@ -142,10 +142,9 @@ const Documents: React.FC<{ staticDocuments: UserDocument[] }> = ({ staticDocume
         <Avatar sx={{ my: 2, bgcolor: 'primary.main' }}><PostAdd /></Avatar>
         <Button variant="outlined" component={RouterLink} prefetch={false} scroll={false} href="/new">New document</Button>
       </Box>
-      <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: { xs: "space-around", sm: "space-between" }, alignItems: "center", gap: 1, mb: 1 }}>
+      <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: { xs: "space-around", sm: "space-between" }, alignItems: "center", position: "sticky", top: { 'xs': 56, 'sm': 64 }, backgroundColor: 'var(--mui-palette-background-default)', zIndex: 2, py: 1 }}>
         <Typography variant="h6" component="h2" sx={{ display: { xs: 'none', sm: 'block' } }}>Documents</Typography>
         <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, justifyContent: "center", mb: 1 }}>
-          <DocumentSortControl value={sort} setValue={setSort} />
           <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, justifyContent: "center" }}>
             <Button variant="outlined" startIcon={<UploadFile />} component="label">
               Import
@@ -155,6 +154,7 @@ const Documents: React.FC<{ staticDocuments: UserDocument[] }> = ({ staticDocume
               Backup
             </Button>
           </Box>
+          <DocumentSortControl value={sort} setValue={setSort} />
         </Box>
         <DocumentFilterControl value={filter} setValue={setFilter} />
       </Box>
@@ -193,7 +193,7 @@ const DocumentsGrid: React.FC<{ documents: UserDocument[], user?: User, initiali
 
   return (
     <Box sx={{ display: 'flex', flexDirection: "column", flex: 1, justifyContent: 'space-between', mb: 2 }}>
-      <Grid container spacing={2} sx={{ mb: 2 }}>
+      <Grid container spacing={2}>
         {showSkeletons && Array.from({ length: 6 }).map((_, i) => <Grid key={i} size={{ xs: 12, sm: 6, md: 4 }}><DocumentCard /></Grid>)}
         {showEmpty && <Grid size={{ xs: 12 }} sx={{ display: 'flex', flexDirection: "column", alignItems: "center", my: 5, gap: 2 }}>
           <Pageview sx={{ width: 64, height: 64, fontSize: 64 }} />
@@ -203,7 +203,7 @@ const DocumentsGrid: React.FC<{ documents: UserDocument[], user?: User, initiali
           <DocumentCard userDocument={document} user={user} />
         </Grid>)}
       </Grid>
-      {pages > 1 && <Pagination count={pages} page={page} onChange={handlePageChange} sx={{ display: "flex", justifyContent: "center", width: "100%" }} />}
+      {pages > 1 && <Pagination count={pages} page={page} onChange={handlePageChange} sx={{ display: "flex", justifyContent: "center", width: "100%", position: "sticky", bottom: 0, backgroundColor: 'var(--mui-palette-background-default)', zIndex: 2, py: 2 }} />}
     </Box>
   );
 });

diff --git a/src/components/Layout/AppLayout.tsx b/src/components/Layout/AppLayout.tsx
@@ -25,7 +25,6 @@ const AppLayout = ({ children }: { children: React.ReactNode; }) => {
             my: 2,
             flex: 1,
             position: 'relative',
-            overflow: 'hidden',
           }}>
           {children}
         </Container>

diff --git a/src/components/User/UserDocuments.tsx b/src/components/User/UserDocuments.tsx
@@ -19,19 +19,19 @@ const UserDocuments: React.FC<{ documents?: UserDocument[] }> = ({ documents })
   const pageDocuments = sortedDocuments.slice((page - 1) * pageSize, page * pageSize);
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: "column", flex: 1, mt: 2 }}>
+    <Box sx={{ display: 'flex', flexDirection: "column", flex: 1 }}>
       {!showLoading && !showEmpty && <>
-        <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: 'space-between', alignItems: "center", gap: 1, mb: 1, minHeight: 40 }}>
+        <Box sx={{ display: "flex", flexWrap: "wrap", justifyContent: 'space-between', alignItems: "center", gap: 1, minHeight: 40, position: "sticky", top: { 'xs': 56, 'sm': 64 }, backgroundColor: 'var(--mui-palette-background-default)', zIndex: 2, py: 1 }}>
           <Typography variant="h6" component="h2" sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Published Documents</Typography>
           <DocumentSortControl value={sort} setValue={setSort} />
         </Box>
         <Box sx={{ display: 'flex', flexDirection: "column", flex: 1, justifyContent: 'space-between' }}>
-          <Grid container spacing={2} sx={{ mb: 2 }}>
+          <Grid container spacing={2}>
             {pageDocuments.map(document => <Grid key={document.id} size={{ xs: 12, sm: 6, md: 4 }}>
               <DocumentCard userDocument={document} />
             </Grid>)}
           </Grid>
-          {pages > 1 && <Pagination count={pages} page={page} onChange={handlePageChange} sx={{ display: "flex", justifyContent: "center" }} />}
+          {pages > 1 && <Pagination count={pages} page={page} onChange={handlePageChange} sx={{ display: "flex", justifyContent: "center", position: "sticky", bottom: 0, backgroundColor: 'var(--mui-palette-background-default)', zIndex: 2, py: 2 }} />}
         </Box>
       </>}
       {showEmpty && <Box sx={{ display: 'flex', flexDirection: "column", alignItems: "center", my: 5, gap: 2 }}>

diff --git a/src/editor/theme.css b/src/editor/theme.css
@@ -535,9 +535,8 @@ iframe {
 [type='page-break'] {
   position: relative;
   display: block;
-  width: calc(100% + 28 * 2);
   overflow: unset;
-  margin: 28px -28px;
+  margin: 24px -16px;
   border: none;
   border-top: 1px dashed #eeeeee;
   border-bottom: 1px dashed #eeeeee;
@@ -547,6 +546,12 @@ iframe {
   clear: both;
 }
 
+@media (min-width: 600px) {
+  [type='page-break'] {
+    margin: 24px -24px;
+  }
+}
+
 [type='page-break']::after {
   position: absolute;
   top: 50%;