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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
<div v-if="!sections.info" class="section-content-wrapper">
<div class="section-content">
<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 class="toggle-column">
@@ -130,7 +130,7 @@
<div v-if="!sections.graphs" class="section-content-wrapper">
<div class="section-content">
<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 class="toggle-column">
@@ -240,7 +240,7 @@
<!-- Health messages card -->
<div class="metric-card">
<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 class="card-body">
<div class="messages-list">
@@ -1110,14 +1110,12 @@ const toggleSection = (section) => {
.metrics-row {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.5rem;
width: 100%;
}
.graphs-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
width: 100%;
}
@@ -1215,53 +1213,61 @@ const toggleSection = (section) => {
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
@media (max-width: 1500px) {
@media (min-width: 1201px) {
.metrics-row {
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 {
grid-template-columns: repeat(2, 1fr);
}
/* Match graphs: 2 across at this breakpoint */
.messages-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1148px) {
/* Match graphs: 1 across at this breakpoint */
.messages-list {
/* 1x3 for state graphs in medium width (vertical stack) */
.states-graphs-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 740px) {
.metrics-row, .graphs-row {
@media (max-width: 800px) {
.metrics-row {
grid-template-columns: 1fr; /* 1 column when <= 800px */
}
/* 1x4 for health/utilization graphs in narrow width */
.graphs-row {
grid-template-columns: 1fr;
}
/* Allow messages to be narrower on very small screens */
.messages-list {
grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
}
/* Even on small screens, ensure messages have reasonable width */
.health-message {
min-width: 0; /* Allow shrinking */
white-space: normal; /* Allow text wrapping on small screens */
}
.message-text {
white-space: normal; /* Allow text wrapping on small screens */
}
.metric-card {
min-width: 0;
/* 1x3 for state graphs in narrow width */
.states-graphs-row {
grid-template-columns: 1fr;
}
}
/* Base styles for graphs-row and states-graphs-row */
.graphs-row, .states-graphs-row {
display: grid;
gap: 0.5rem;
width: 100%;
}
.status-maintenance {
color: #0d6efd; /* Bootstrap blue */
}
@@ -1392,38 +1398,6 @@ const toggleSection = (section) => {
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 */
:deep(.chartjs-legend-item) {
color: #333 !important;