fixed adaptive grid

PPLBandage · Sep 6, 2024 · 2c4ab82 · 2c4ab82
1 parent 77f448b
commit 2c4ab82
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/src/app/me/page.tsx b/src/app/me/page.tsx
@@ -108,6 +108,7 @@ const Main = () => {
                     <div style={elements ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }} className={styles.cont}>
                         <AdaptiveGrid
                             child_width={300}
+                            className={styles}
                             header={<Link className={styles.create} href="/workshop/create">
                                 <IconPlus />Создать
                             </Link>}>

diff --git a/src/app/modules/components/adaptiveGrid.module.tsx b/src/app/modules/components/adaptiveGrid.module.tsx
@@ -24,12 +24,13 @@ const AdaptiveGrid = ({ child_width, children, header, className }: AdaptiveGrid
 
     useEffect(() => {
         if (!children) return;
-        const result_arr = [];
+        let result_arr = [];
         for (let i = 1; i < columnCount + 1; i++) {
             const _children = children.filter((_, index) => (index + 1 - i) % columnCount === 0);
-            const column = <div key={i}>{_children}</div>;
+            const column = <div key={i} style={{ width: child_width }} className={className?.adaptive_grid_column}>{_children}</div>;
             result_arr.push(column);
         }
+        result_arr = result_arr.concat(new Array(columnCount - result_arr.length).fill(0));
         setColumns(result_arr);
     }, [children, columnCount])
 
@@ -44,10 +45,9 @@ const AdaptiveGrid = ({ child_width, children, header, className }: AdaptiveGrid
             <div id='layout_parent' style={{
                 width: '100%',
                 display: 'flex',
-                columnGap: '15px',
-                justifyContent: children?.length >= columnCount ? 'center' : 'flex-start',
-                flexDirection: columnCount === 1 ? 'column' : 'row',
-                alignItems: columnCount === 1 ? 'center' : 'normal'
+                columnGap: '1rem',
+                justifyContent: 'center',
+                flexDirection: 'row',
             }} className={`${style.adaptive_grid_parent} ${className?.adaptive_grid_parent}`}>
                 {columns}
             </div>

diff --git a/src/app/styles/me/me.module.css b/src/app/styles/me/me.module.css
@@ -193,4 +193,8 @@
         width: 100% !important;
         min-width: 300px !important;
     }
+
+    .adaptive_grid_column {
+        width: 100% !important;
+    }
 }
diff --git a/src/app/users/[name]/client_code.tsx b/src/app/users/[name]/client_code.tsx
@@ -50,7 +50,7 @@ const UsersClient = ({ user }: { user: Users }) => {
             <Me user_data={user}>
                 <div style={elements ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }} className={styles.cont}>
                     <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-                        <AdaptiveGrid child_width={300}>{elements}</AdaptiveGrid>
+                        <AdaptiveGrid child_width={300} className={styles}>{elements}</AdaptiveGrid>
                     </div>
                 </div>
             </Me>

diff --git a/src/app/workshop/page.tsx b/src/app/workshop/page.tsx
@@ -108,7 +108,7 @@ export default function Home() {
                 <div className={Style.center}>
                     <Search onSearch={setSearch} onChangeTake={setTake} categories={categories} onChangeSort={setSort} onChangeFilters={setFilters} />
                     <Paginator total_count={totalCount} take={take} onChange={setPage} />
-                    {elements && elements.length > 0 ? <AdaptiveGrid child_width={300}>{elements}</AdaptiveGrid> :
+                    {elements && elements.length > 0 ? <AdaptiveGrid child_width={300} className={styles_card}>{elements}</AdaptiveGrid> :
                         elements && elements.length === 0 ?
                             <>
                                 <p style={{