CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-52: responsive hub grid CSS — extract styles to SCSS, add 2-col desktop / 1-col mobile breakpoint

Browse Source
This commit is contained in:
cubecraft-agents[bot]
2026-04-27 12:40:29 +00:00
parent 8d0adeb2e9
commit c8ca182af0
2 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/app/pages/hub/hub-page.component.scss Normal file
View File

@@ -0,0 +1,28 @@
// ============================================================================
// Hub Page — Responsive AgentCard Grid
// Desktop (≥1024px): 2×2 grid
// Mobile (<1024px): single-column stack
// ============================================================================
.hub-page {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: var(--cc-section-padding, 16px);
min-height: 400px;
overflow-x: hidden;
}
.hub-page__placeholder {
color: var(--cc-on-surface-variant);
font-size: 16px;
text-align: center;
padding: 24px 0;
}
// Desktop / kiosk breakpoint — 2-column grid
@media (min-width: 1024px) {
.hub-page {
grid-template-columns: repeat(2, 1fr);
}
}

13
frontend/src/app/pages/hub/hub-page.component.ts
View File

@@ -9,18 +9,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
<p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p> <p class="hub-page__placeholder">Command Hub — Fleet status grid will render here</p>
</div> </div>
`, `,
styles: [` styleUrl: './hub-page.component.scss',
.hub-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
.hub-page__placeholder {
color: var(--cc-on-surface-variant);
font-size: 16px;
}
`],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class HubPageComponent {} export class HubPageComponent {}