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

Merge pull request 'feat(CUB-52): Responsive Hub Grid CSS' (#12) from agent/rex/CUB-52-responsive-hub-grid into dev

Browse Source 
Reviewed-on: #12
Reviewed-by: Otto the Minion <otto@code.cubecraftcreations.com>
Reviewed-by: Joshua <joshua@cnjmail.com>
This commit was merged in pull request #12.
This commit is contained in:
Joshua
2026-04-27 16:06:34 -04:00
parent 8d0adeb2e9 c8ca182af0
commit 49a9a95086
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>
</div>
`,
styles: [`
.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;
}
`],
styleUrl: './hub-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HubPageComponent {}