mariano/nova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile reponsiveness

Browse Source
This commit is contained in:
buenosairesam
2026-04-16 20:09:41 -03:00
parent 1ae1456502
commit 1ed2ad06b8
6 changed files with 207 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ctrl/Tiltfile
View File

@@ -5,8 +5,14 @@
allow_k8s_contexts('kind-unt') allow_k8s_contexts('kind-unt')
# Create namespace first to avoid race conditions # Hard guard: Tilt deploys to whatever the shell's current kubectl context is,
local('kubectl create namespace unt --dry-run=client -o yaml | kubectl apply -f -') # and allow_k8s_contexts auto-permits any local-looking (kind-*) cluster.
# Fail early instead of silently landing the workload in the wrong cluster.
if k8s_context() != 'kind-unt':
fail("Wrong kubectl context: '%s'. Run: kubectl config use-context kind-unt" % k8s_context())
# Create namespace first to avoid race conditions (pin cluster explicitly)
local('kubectl --context kind-unt create namespace unt --dry-run=client -o yaml | kubectl --context kind-unt apply -f -')
# Apply k8s manifests via kustomize (dev overlay) # Apply k8s manifests via kustomize (dev overlay)
k8s_yaml(kustomize('k8s/overlays/dev')) k8s_yaml(kustomize('k8s/overlays/dev'))
@@ -42,7 +48,7 @@ docker_build(
# --- Resources --- # --- Resources ---
k8s_resource('api') k8s_resource('api')
k8s_resource('ui', resource_deps=['api'], port_forwards=['8040:80']) k8s_resource('ui', resource_deps=['api'])
# Group infra resources # Group infra resources
k8s_resource( k8s_resource(

56
docs/index.html
View File

@@ -228,6 +228,55 @@
vertical-align: top; vertical-align: top;
} }
.cmp-table tr:last-child td { border-bottom: none; } .cmp-table tr:last-child td { border-bottom: none; }
/* Mobile menu toggle — hidden on desktop */
.menu-toggle {
display: none;
background: transparent;
border: 1px solid #1e2a4a;
color: #e8eaf0;
padding: 6px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
cursor: pointer;
line-height: 1;
margin-left: auto;
}
.menu-toggle:hover { background: #1a2340; }
.nav-backdrop {
display: none;
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.layout.nav-open .nav-backdrop { display: block; }
@media (max-width: 720px) {
header { padding: 10px 12px; gap: 8px; }
header h1 { font-size: 16px; letter-spacing: 1px; }
header .subtitle { display: none; }
.menu-toggle { display: inline-block; }
.layout { position: relative; }
nav {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 220px;
z-index: 20;
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
}
.layout.nav-open nav { transform: translateX(0); }
main { padding: 16px; }
.graph-section h2 { font-size: 13px; }
.prose p, .prose ul { font-size: 13px; }
.cmp-table { font-size: 12px; }
.cmp-table th, .cmp-table td { padding: 6px 8px; }
}
</style> </style>
</head> </head>
<body> <body>
@@ -235,9 +284,11 @@
<header> <header>
<h1>STELLAR AIR</h1> <h1>STELLAR AIR</h1>
<span class="subtitle">NOVA Operations Platform — Architecture</span> <span class="subtitle">NOVA Operations Platform — Architecture</span>
<button class="menu-toggle" onclick="toggleNav()" aria-label="Toggle navigation">☰</button>
</header> </header>
<div class="layout"> <div class="layout">
<div class="nav-backdrop" onclick="toggleNav()"></div>
<nav> <nav>
<a class="active" onclick="show('walkthrough')">Walkthrough</a> <a class="active" onclick="show('walkthrough')">Walkthrough</a>
@@ -485,8 +536,13 @@ function show(id) {
document.getElementById(id).classList.add('active'); document.getElementById(id).classList.add('active');
var navLink = document.querySelector('nav a[onclick="show(\'' + id + '\')"]'); var navLink = document.querySelector('nav a[onclick="show(\'' + id + '\')"]');
if (navLink) navLink.classList.add('active'); if (navLink) navLink.classList.add('active');
// auto-close the mobile drawer after selecting
document.querySelector('.layout').classList.remove('nav-open');
} }
function toggleNav() {
document.querySelector('.layout').classList.toggle('nav-open');
}
</script> </script>
</body> </body>

29
ui/app/src/App.vue
View File

@@ -72,7 +72,9 @@ provide('showInternals', showInternals)
.app-header { .app-header {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 24px; gap: 24px;
row-gap: 8px;
padding: 12px 24px; padding: 12px 24px;
background: var(--surface-1); background: var(--surface-1);
border-bottom: var(--panel-border); border-bottom: var(--panel-border);
@@ -130,4 +132,31 @@ provide('showInternals', showInternals)
overflow: auto; overflow: auto;
padding: 24px; padding: 24px;
} }
@media (max-width: 720px) {
.app-header {
gap: 8px;
padding: 8px 12px;
}
.app-title h1 {
font-size: 15px;
letter-spacing: 1px;
}
.app-subtitle {
display: none;
}
.app-nav {
flex-wrap: wrap;
margin-left: 0;
width: 100%;
order: 2;
}
.app-nav a {
padding: 4px 10px;
font-size: 11px;
}
.app-main {
padding: 12px;
}
}
</style> </style>

9
ui/app/src/components/ScenarioSelector.vue
View File

@@ -67,4 +67,13 @@ select {
select:focus { select:focus {
outline: 1px solid var(--accent); outline: 1px solid var(--accent);
} }
@media (max-width: 720px) {
.scenario-selector {
gap: 4px;
margin-left: auto;
}
.scenario-selector label { display: none; }
.scenario-selector select { font-size: 11px; padding: 2px 6px; }
}
</style> </style>

103
ui/app/src/pages/OpsNotifications.vue
View File

@@ -96,9 +96,17 @@ onMounted(loadFlights)
</script> </script>
<template> <template>
<div :class="['ops-layout', { split: showOps && showInternals }]"> <div :class="['ops-layout', { split: showOps && showInternals, 'ops-collapsed': !showOps && showInternals }]">
<!-- Ops pane (left) --> <!-- Ops pane (left) -->
<div v-show="showOps" class="ops-pane"> <div class="ops-pane" :class="{ collapsed: !showOps && showInternals, solo: !showInternals }">
<div v-if="showInternals" class="pane-controls">
<button
class="ops-collapse-btn"
@click="showOps = false"
aria-label="Collapse ops pane"
title="Collapse"
>‹</button>
</div>
<Panel title="FCE — Behind Every Departure" :status="fceStatus"> <Panel title="FCE — Behind Every Departure" :status="fceStatus">
<template #actions> <template #actions>
<select v-model="selectedFlight" class="flight-select"> <select v-model="selectedFlight" class="flight-select">
@@ -125,6 +133,15 @@ onMounted(loadFlights)
</Panel> </Panel>
</div> </div>
<!-- Show-ops tab when ops is collapsed -->
<button
v-if="!showOps && showInternals"
class="ops-expand-tab"
@click="showOps = true"
aria-label="Show ops pane"
title="Show ops"
>›</button>
<!-- Internals pane (right) --> <!-- Internals pane (right) -->
<div v-show="showInternals" class="internals-pane"> <div v-show="showInternals" class="internals-pane">
<Panel title="Agent Graph" :status="agentStatus"> <Panel title="Agent Graph" :status="agentStatus">
@@ -172,8 +189,60 @@ onMounted(loadFlights)
overflow: auto; overflow: auto;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
transition: flex-grow 0.25s ease, max-width 0.25s ease, max-height 0.25s ease,
padding 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
position: relative;
} }
/* Collapsed state: slides off to the left, yields its flex space to internals. */
.ops-layout.ops-collapsed > .ops-pane.collapsed {
flex: 0 0 0;
max-width: 0;
opacity: 0;
transform: translateX(-100%);
padding: 0;
overflow: hidden;
}
.pane-controls {
display: flex;
justify-content: flex-end;
flex-shrink: 0;
margin-bottom: -16px; /* absorb into gap so it doesn't add visual height */
}
.ops-collapse-btn {
background: var(--surface-2);
color: var(--text-secondary);
border: var(--panel-border);
width: 22px;
height: 22px;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.ops-collapse-btn:hover { color: var(--text-primary); background: var(--surface-3); }
.ops-expand-tab {
position: absolute;
top: 4px;
left: 0;
z-index: 3;
background: var(--surface-2);
color: var(--text-secondary);
border: var(--panel-border);
width: 22px;
height: 48px;
font-family: var(--font-mono);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.ops-expand-tab:hover { color: var(--accent); background: var(--surface-3); }
.internals-pane { .internals-pane {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -282,4 +351,34 @@ onMounted(loadFlights)
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12px; font-size: 12px;
} }
@media (max-width: 720px) {
.ops-layout {
flex-direction: column;
height: calc(100vh - 130px); /* topbar wraps to ~2 rows on mobile */
gap: 12px;
}
.ops-layout.split > .internals-pane {
border-left: none;
padding-left: 0;
border-top: var(--panel-border);
padding-top: 12px;
}
.ops-pane { gap: 12px; }
/* Collapse shrinks vertical space in a column flex, still slides horizontally. */
.ops-layout.ops-collapsed > .ops-pane.collapsed {
max-width: none;
max-height: 0;
padding: 0;
}
.ops-expand-tab {
/* On mobile keep the tab at top-left of the stacked layout */
height: 32px;
}
.flight-select { font-size: 11px; padding: 4px 6px; max-width: 60%; }
.run-btn { font-size: 11px; padding: 4px 10px; }
}
</style> </style>

3
ui/framework/src/tokens.css
View File

@@ -42,6 +42,9 @@
--panel-radius: 6px; --panel-radius: 6px;
--panel-border: 1px solid var(--border); --panel-border: 1px solid var(--border);
--panel-header-height: 36px; --panel-header-height: 36px;
/* breakpoints — documentation anchor; write @media (max-width: 720px) directly */
--bp-mobile: 720px;
} }
/* Animated gradient outline for buttons in a waiting state. /* Animated gradient outline for buttons in a waiting state.