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

Improve titles and responsive layout

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-28 02:56:48 -05:00
parent 763919f8c5
commit 7d6c6ac627
1 changed files with 40 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
<div v-if="!sections.info" class="section-content-wrapper"> <div v-if="!sections.info" class="section-content-wrapper">
<div class="section-content"> <div class="section-content">
<div class="collapsed-section-header"> <div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Information</h6> <h6 class="card-title mb-0 metric-label">Cluster Information</h6>
</div> </div>
</div> </div>
<div class="toggle-column"> <div class="toggle-column">
@ -130,7 +130,7 @@
<div v-if="!sections.graphs" class="section-content-wrapper"> <div v-if="!sections.graphs" class="section-content-wrapper">
<div class="section-content"> <div class="section-content">
<div class="collapsed-section-header"> <div class="collapsed-section-header">
<h6 class="card-title mb-0 metric-label">Utilization</h6> <h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
</div> </div>
</div> </div>
<div class="toggle-column"> <div class="toggle-column">
@ -240,7 +240,7 @@
<!-- Health messages card --> <!-- Health messages card -->
<div class="metric-card"> <div class="metric-card">
<div class="card-header"> <div class="card-header">
<h6 class="card-title mb-0 metric-label">Messages</h6> <h6 class="card-title mb-0 metric-label">Health Messages</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="messages-list"> <div class="messages-list">
@ -1110,14 +1110,12 @@ const toggleSection = (section) => {
.metrics-row { .metrics-row {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
} }
.graphs-row { .graphs-row {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem; gap: 0.5rem;
width: 100%; width: 100%;
} }
@ -1215,51 +1213,59 @@ const toggleSection = (section) => {
text-shadow: 1px 1px 2px rgba(0,0,0,0.1); text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
} }
@media (max-width: 1500px) { @media (min-width: 1201px) {
.metrics-row { .metrics-row {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
/* 4x1 for health/utilization graphs in full width */
.graphs-row {
grid-template-columns: repeat(4, 1fr);
}
/* 3x1 for state graphs in full width */
.states-graphs-row {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 801px) and (max-width: 1200px) {
.metrics-row {
grid-template-columns: repeat(2, 1fr); /* 2 columns when between 800px and 1200px */
}
/* 2x2 for health/utilization graphs in medium width */
.graphs-row { .graphs-row {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
/* Match graphs: 2 across at this breakpoint */ /* 1x3 for state graphs in medium width (vertical stack) */
.messages-list { .states-graphs-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1148px) {
/* Match graphs: 1 across at this breakpoint */
.messages-list {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@media (max-width: 740px) { @media (max-width: 800px) {
.metrics-row, .graphs-row { .metrics-row {
grid-template-columns: 1fr; /* 1 column when <= 800px */
}
/* 1x4 for health/utilization graphs in narrow width */
.graphs-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
/* Allow messages to be narrower on very small screens */ /* 1x3 for state graphs in narrow width */
.messages-list { .states-graphs-row {
grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */ grid-template-columns: 1fr;
} }
}
/* Even on small screens, ensure messages have reasonable width */ /* Base styles for graphs-row and states-graphs-row */
.health-message { .graphs-row, .states-graphs-row {
min-width: 0; /* Allow shrinking */ display: grid;
white-space: normal; /* Allow text wrapping on small screens */ gap: 0.5rem;
} width: 100%;
.message-text {
white-space: normal; /* Allow text wrapping on small screens */
}
.metric-card {
min-width: 0;
}
} }
.status-maintenance { .status-maintenance {
@ -1392,38 +1398,6 @@ const toggleSection = (section) => {
padding: 0.5rem; /* Consistent padding on all sides */ padding: 0.5rem; /* Consistent padding on all sides */
} }
/* New row for the 3 state graphs with wider minimum width */
.states-graphs-row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 0.5rem;
width: 100%;
}
/* Responsive behavior for state graphs */
@media (max-width: 1500px) {
.states-graphs-row {
grid-template-columns: repeat(3, 1fr); /* Keep 3 columns at this breakpoint */
}
}
@media (max-width: 1148px) {
.states-graphs-row {
grid-template-columns: repeat(2, 1fr); /* 2 columns at medium size */
}
/* Make state graphs have a wider minimum width */
.states-graphs-row .metric-card {
min-width: 216px; /* 20% wider than the 180px for other cards */
}
}
@media (max-width: 740px) {
.states-graphs-row {
grid-template-columns: 1fr; /* 1 column at small size */
}
}
/* Darker legend text for better readability */ /* Darker legend text for better readability */
:deep(.chartjs-legend-item) { :deep(.chartjs-legend-item) {
color: #333 !important; color: #333 !important;