parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make cards responsive to width

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 19:07:02 -05:00
parent 1ce1813da0
commit 770de7bf60
1 changed files with 31 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
pvc-vue/src/components/ClusterOverview.vue
View File

@ -525,14 +525,14 @@ const chartOptions = {
.graphs-row {
display: grid;
grid-template-columns: repeat(4, calc(25% - 0.375rem)); /* Equal 1/4 width minus gap spacing */
grid-template-columns: repeat(4, 1fr); /* Equal width columns */
gap: 0.5rem;
width: 100%;
}
.metrics-row {
display: grid;
grid-template-columns: 1fr minmax(auto, 1.2fr) repeat(6, 1fr); /* Version card (2nd) gets more space */
grid-template-columns: repeat(8, 1fr); /* Start with 8 equal columns */
gap: 0.5rem;
width: 100%;
}
@ -641,6 +641,7 @@ const chartOptions = {
}
.metric-card {
min-width: 180px; /* Prevents cards from becoming too small */
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
@ -712,24 +713,45 @@ const chartOptions = {
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
@media (max-width: 1400px) {
.messages-grid {
grid-template-columns: repeat(3, 1fr); /* 3 messages per row */
@media (max-width: 1500px) {
.metrics-row {
grid-template-columns: repeat(4, 1fr); /* 4 cards per row */
}
}
@media (max-width: 992px) {
.graphs-row {
grid-template-columns: repeat(2, 1fr); /* 2 graphs per row */
}
.messages-grid {
grid-template-columns: repeat(2, 1fr); /* 2 messages per row */
}
}
@media (max-width: 576px) {
@media (max-width: 1148px) {
.metrics-row {
grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
}
.graphs-row {
grid-template-columns: 1fr; /* 1 graph per row */
}
.messages-grid {
grid-template-columns: 1fr; /* 1 message per row */
}
}
/* Fine-tune for very small screens */
@media (max-width: 740px) {
.metrics-row, .graphs-row, .messages-grid {
grid-template-columns: 1fr; /* Everything in single column */
}
.metric-card {
min-width: 0; /* Allow cards to shrink further on very small screens */
}
}
.status-maintenance {
color: #0d6efd; /* Bootstrap blue */
}