fix: cluster card layout (#378)

Signed-off-by: zhaoxinxin <[email protected]>
dragonflyoss · Jul 10, 2024 · 78690c9 · 78690c9
1 parent 965dda8
commit 78690c9
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 18 deletions.
diff --git a/src/components/clusters/index.module.css b/src/components/clusters/index.module.css
@@ -128,3 +128,102 @@
 .buttonContent {
   padding: 0;
 }
+
+.clusterCard {
+  width: 20%;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+}
+
+.clusterCard:nth-of-type(5n) {
+  padding-right: 0;
+}
+
+@media screen and (max-width: 2560px) {
+  .clusterCard {
+    width: 20%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 0;
+  }
+}
+
+@media screen and (max-width: 2048px) {
+  .clusterCard {
+    width: 25%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 1920px) {
+  .clusterCard {
+    width: 25%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 1600px) {
+  .clusterCard {
+    width: 33.3333%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 1rem;
+  }
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  .clusterCard {
+    width: 33.3333%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx
@@ -339,24 +339,7 @@ export default function Clusters() {
             <></>
           ) : (
             allClusters.map((item) => (
-              <Box
-                key={item.id}
-                id="clusters"
-                sx={{
-                  maxWidth: '28rem',
-                  width: '33.333%',
-                  pr: '1rem',
-                  pb: '1rem',
-                  ':nth-of-type(3n)': {
-                    pr: '0rem ',
-                  },
-                  [theme.breakpoints.up('xl')]: {
-                    ':nth-of-type(3n)': {
-                      pr: '1rem !important',
-                    },
-                  },
-                }}
-              >
+              <Box key={item.id} id="clusters" className={styles.clusterCard}>
                 <Paper variant="outlined">
                   <Box className={styles.clusterListContent}>
                     <Box display="flex">