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