dragonflyoss
/
console
mirror of https://github.com/dragonflyoss/console.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: cluster card layout (#378) 

Signed-off-by: zhaoxinxin <1186037180@qq.com>
This commit is contained in:
Zhaoxinxin 2024-07-10 20:00:45 +08:00 committed by GitHub
parent 965dda8c58
commit 78690c93b3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 100 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/clusters/index.module.css
View File

@ -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;
}
}

19
src/components/clusters/index.tsx
View File

@ -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">