iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: monitoring node-cards grid

Browse Source
This commit is contained in:
0x1d
2025-10-14 18:17:08 +02:00
parent f77973a876
commit 6db56e470c
1 changed files with 11 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
public/styles/main.css
View File

@@ -4581,66 +4581,14 @@ html {
.nodes-grid {
display: grid;
gap: 1rem;
/* Default desktop grid shows 5 items per row */
grid-template-columns: repeat(5, 1fr);
/* Responsive grid: fit as many cards as possible with min-width constraint */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Dynamic grid layouts based on number of items */
.nodes-grid[data-item-count="1"] {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
}
.nodes-grid[data-item-count="2"] {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
}
.nodes-grid[data-item-count="3"] {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
}
.nodes-grid[data-item-count="4"] {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.nodes-grid[data-item-count="5"],
.nodes-grid[data-item-count="6"] {
grid-template-columns: repeat(5, 1fr);
}
.nodes-grid[data-item-count="7"],
.nodes-grid[data-item-count="8"] {
grid-template-columns: repeat(5, 1fr);
}
.nodes-grid[data-item-count="9"] {
grid-template-columns: repeat(5, 1fr);
}
.nodes-grid[data-item-count="10"],
.nodes-grid[data-item-count="11"],
.nodes-grid[data-item-count="12"] {
grid-template-columns: repeat(5, 1fr);
}
/* For more than 12 items, use auto-fit with reasonable minimum */
.nodes-grid[data-item-count="13"],
.nodes-grid[data-item-count="14"],
.nodes-grid[data-item-count="15"],
.nodes-grid[data-item-count="16"] {
grid-template-columns: repeat(5, 1fr);
}
.nodes-grid[data-item-count="17"] {
grid-template-columns: repeat(5, 1fr);
}
/* Responsive grid handles all item counts automatically */
.node-card {
background: var(--bg-tertiary);
@@ -4648,6 +4596,8 @@ html {
padding: 1.25rem;
border: 1px solid var(--border-primary);
transition: all 0.2s ease;
min-width: 280px;
width: 100%;
}
.node-card:hover {
@@ -4982,29 +4932,14 @@ html {
grid-template-columns: 1fr;
}
/* Mobile grid layouts - simplified for smaller screens but still maximize vertical space */
.nodes-grid[data-item-count="1"] {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
/* Mobile grid layouts - use responsive grid with smaller min-width */
.nodes-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.nodes-grid[data-item-count="2"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.nodes-grid[data-item-count="3"],
.nodes-grid[data-item-count="4"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.nodes-grid[data-item-count="5"],
.nodes-grid[data-item-count="6"],
.nodes-grid[data-item-count="7"],
.nodes-grid[data-item-count="8"],
.nodes-grid[data-item-count="9"],
.nodes-grid[data-item-count="10"],
.nodes-grid[data-item-count="11"],
.nodes-grid[data-item-count="12"],
.nodes-grid[data-item-count="13"],
.nodes-grid[data-item-count="14"],
.nodes-grid[data-item-count="15"],
.nodes-grid[data-item-count="16"],
.nodes-grid[data-item-count="17"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto-fit, 1fr); }
.node-card {
min-width: 240px;
}
.monitoring-header {
flex-direction: column;