mirror of
https://github.com/firestar5683/StarPilot.git
synced 2026-11-12 23:43:44 +08:00
Split guided setup styles below the source size limit
This commit is contained in:
@@ -10,7 +10,7 @@ const assert = require('node:assert/strict')
|
||||
let enabled = false, parked = true
|
||||
page.on('pageerror', error => errors.push(error.message))
|
||||
await page.route('**/developer-settings-test', route => route.fulfill({ contentType: 'text/html', body:
|
||||
'<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
|
||||
'<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/setup.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
|
||||
await page.route('**/api/**', route => {
|
||||
const path = new URL(route.request().url()).pathname
|
||||
let data
|
||||
|
||||
@@ -37,7 +37,7 @@ print(json.dumps(dict(native=native,projection=projection)))
|
||||
}
|
||||
if (pathname.startsWith('/api/')) return route.fulfill({ json: pathname === '/api/starport/layout' ? fixtures.projection : fixtures.native })
|
||||
if (pathname === '/') return route.fulfill({ contentType: 'text/html', body: `
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css">
|
||||
<main class="gx-content"><div id="app"></div></main><script type="module">
|
||||
import {createApp} from '/vendor/vue/vue.esm-browser.js'; import {OnroadLayoutPage} from '/js/onroad-layout.js';
|
||||
window.editor=createApp(OnroadLayoutPage,{mode:'local',projection:location.search.includes('projection'),unauthorized(){}}).mount('#app');</script>` })
|
||||
|
||||
@@ -34,9 +34,9 @@ const status = { enabled: true, hasKey: true, isMetric: true, status: 'noDestina
|
||||
if (pathname.startsWith('/api/')) return route.fulfill({ json: status })
|
||||
if (pathname === '/' && new URL(request.url()).searchParams.has('shell')) return route.fulfill({ contentType: 'text/html', body:
|
||||
`<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/vendor/bootstrap-icons/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><div id="galaxy-app"></div><script type="module" src="/js/app.js"></script>` })
|
||||
<link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><div id="galaxy-app"></div><script type="module" src="/js/app.js"></script>` })
|
||||
if (pathname === '/') return route.fulfill({ contentType: 'text/html', body: `<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/vendor/bootstrap-icons/bootstrap-icons.min.css"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><main class="gx-content"><div id="app"></div></main>
|
||||
<link rel="stylesheet" href="/vendor/bootstrap-icons/bootstrap-icons.min.css"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css"><main class="gx-content"><div id="app"></div></main>
|
||||
<script type="module">import {createApp} from '/vendor/vue/vue.esm-browser.js';
|
||||
import {NavigationPage} from '/js/navigation.js';
|
||||
window.navigation = createApp(NavigationPage,{mode:'local',unauthorized:()=>{}}).mount('#app');</script>` })
|
||||
|
||||
@@ -25,7 +25,7 @@ const status = { enabled: true, hasKey: true, isMetric: true, status: 'noDestina
|
||||
}
|
||||
if (pathname.startsWith('/api/')) return route.fulfill({ json: status })
|
||||
if (pathname === '/') return route.fulfill({ contentType: 'text/html', body: `<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css">
|
||||
<link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><link rel="stylesheet" href="/css/navigation.css">
|
||||
<main class="gx-content"><div id="app"></div></main><script type="module">
|
||||
import {createApp} from '/vendor/vue/vue.esm-browser.js'; import {NavigationPage} from '/js/navigation.js';
|
||||
window.navigation = createApp(NavigationPage,{mode:'local',initialTab:'setup',unauthorized:()=>{}}).mount('#app');</script>` })
|
||||
|
||||
@@ -9,7 +9,7 @@ const { execFileSync } = require('node:child_process')
|
||||
const errors = []
|
||||
page.on('pageerror', error => errors.push(error.message))
|
||||
await page.route('**/settings-state-test', route => route.fulfill({ contentType: 'text/html', body:
|
||||
'<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
|
||||
'<link rel="stylesheet" href="css/galaxy.css"><link rel="stylesheet" href="css/setup.css"><link rel="stylesheet" href="css/settings.css"><div id="test"></div>' }))
|
||||
await page.goto((process.env.GALAXY_URL || 'http://127.0.0.1:8765/') + 'settings-state-test')
|
||||
const pages = await page.evaluate(async () => {
|
||||
const vue = await import('./vendor/vue/vue.esm-browser.js')
|
||||
|
||||
@@ -24,7 +24,7 @@ const projection = JSON.parse(execFileSync(process.env.PYTHON || 'python3', ['-c
|
||||
if (pathname === '/' && new URL(route.request().url()).searchParams.has('shell')) return route.fulfill({contentType:'text/html', body:
|
||||
readFileSync(path.join(web, 'index.html'))})
|
||||
if (pathname.startsWith('/api/')) return route.fulfill({json: pathname === '/api/starport/layout' ? projection : snapshot})
|
||||
if (pathname === '/') return route.fulfill({contentType:'text/html', body:`<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/settings.css"><main class="gx-content"><div id="app"></div></main><script type="module">
|
||||
if (pathname === '/') return route.fulfill({contentType:'text/html', body:`<meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="/css/galaxy.css"><link rel="stylesheet" href="/css/setup.css"><link rel="stylesheet" href="/css/settings.css"><main class="gx-content"><div id="app"></div></main><script type="module">
|
||||
import {createApp} from '/vendor/vue/vue.esm-browser.js';
|
||||
import {OnroadLayoutPage} from '/js/onroad-layout.js';
|
||||
window.editor = createApp(OnroadLayoutPage, {mode:'local', projection:new URLSearchParams(location.search).has('projection'), unauthorized:()=>{}}).mount('#app');
|
||||
|
||||
@@ -1858,61 +1858,3 @@ progress { max-width: 100%; accent-color: var(--primary); }
|
||||
.gx-tuner__diagnostics dd { margin-bottom: 12px; }
|
||||
}
|
||||
.gx-tuner__manual .gx-row { padding-inline: 0; }
|
||||
/* Guided setup layout and emphasis; shared rows, buttons, fields and notices keep Galaxy defaults. */
|
||||
.gx-card.gx-guided { display: grid; gap: var(--sp-5); padding: var(--panel-padding); background-image: radial-gradient(120% 38% at 50% 0, var(--primary-container), transparent 72%); }
|
||||
.gx-guided__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
|
||||
.gx-guided__step { position: relative; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
|
||||
.gx-guided__step::before, .gx-guided__step::after { content: ""; position: absolute; top: 15px; height: 2px; width: calc(50% - 8px); background: var(--outline); }
|
||||
.gx-guided__step::before { left: 0; }
|
||||
.gx-guided__step::after { right: 0; }
|
||||
.gx-guided__step:first-child::before, .gx-guided__step:last-child::after { display: none; }
|
||||
.gx-guided__step.is-done::before, .gx-guided__step.is-done::after, .gx-guided__step.is-current::before,
|
||||
.gx-guided__step.is-done + .gx-guided__step::before { background: var(--success); }
|
||||
.gx-guided__node { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--on-surface-variant); font-weight: var(--fw-bold); }
|
||||
.gx-guided__step.is-current .gx-guided__node { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 var(--sp-1) var(--primary-container), 0 var(--sp-1) var(--sp-4) var(--primary-glow); }
|
||||
.gx-guided__step.is-done .gx-guided__node { background: var(--success); color: var(--background); }
|
||||
.gx-guided__step-label, .gx-guided__hint { font-size: var(--fs-sm); color: var(--on-surface-variant); }
|
||||
.gx-guided__header, .gx-guided__section, .gx-guided__body { display: grid; gap: var(--sp-3); min-width: 0; }
|
||||
.gx-guided__header > *, .gx-guided__subhead, .gx-guided__hint { margin: 0; }
|
||||
.gx-guided__header { max-width: 34rem; gap: var(--sp-2); }
|
||||
.gx-guided__title { font-size: clamp(1.625rem, 2.5vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
|
||||
.gx-guided__lede { color: var(--on-surface-variant); font-size: var(--fs-base); line-height: 1.5; }
|
||||
.gx-guided__subhead { font-size: var(--fs-base); color: var(--on-surface-variant); }
|
||||
.gx-guided__body:empty { display: none; }
|
||||
.gx-guided__option { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch-target); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
|
||||
.gx-guided__option:hover:not(:has(:disabled)) { background: var(--glass-bg-hover); }
|
||||
.gx-guided__option:has(:checked) { background: var(--primary-container); color: var(--on-primary-container); }
|
||||
.gx-guided__option:has(:disabled), .gx-guided__choice:has(:disabled) { opacity: .6; cursor: default; }
|
||||
.gx-guided__option:focus-within, .gx-guided__choice:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
|
||||
.gx-guided__options { background: var(--surface-container); }
|
||||
.gx-guided__options > li + li { border-top: 1px solid var(--outline); }
|
||||
.gx-guided__option input { flex: none; order: 1; width: var(--sp-5); height: var(--sp-5); margin: 0; accent-color: var(--primary); }
|
||||
.gx-guided__option:has(:checked) .gx-guided__tile { background: var(--primary); color: var(--on-primary); }
|
||||
.gx-guided__segmented { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-sm); background: var(--surface-container-high); }
|
||||
.gx-guided__choice { flex: 1 1 7rem; min-width: 0; min-height: var(--touch-target); padding: var(--sp-2); border-radius: calc(var(--radius-sm) - var(--sp-1)); text-align: center; text-wrap: balance; box-shadow: none; background: transparent; color: var(--on-surface-variant); }
|
||||
.gx-guided__choice:has(:checked) { background: var(--primary); color: var(--on-primary); }
|
||||
.gx-guided__choice:has(:checked):hover { background: var(--primary-hover); }
|
||||
.gx-guided__tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-container); color: var(--primary); font-size: var(--fs-lg); }
|
||||
.gx-guided__checklist > .gx-starport-row { flex-wrap: nowrap; }
|
||||
.gx-guided__mark { flex: none; display: grid; place-items: center; width: 28px; font-size: var(--fs-lg); color: var(--on-surface-variant); }
|
||||
.gx-guided__checklist > li.is-done .gx-guided__mark, .gx-guided__checklist > li.is-worked .gx-guided__mark { color: var(--success); }
|
||||
.gx-guided__checklist > li.is-active .gx-guided__mark, .gx-guided__checklist > li.is-current .gx-guided__mark, .gx-guided__checklist > li.is-retry .gx-guided__mark { color: var(--primary); }
|
||||
.gx-guided__checklist > li.is-failed .gx-guided__mark { color: var(--error); }
|
||||
.gx-guided__callout { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0; padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--primary-container); }
|
||||
.gx-guided__callout--quiet { background: var(--surface-container); color: var(--on-surface-variant); }
|
||||
.gx-guided__footer { display: grid; gap: var(--sp-3); }
|
||||
.gx-guided .gx-starport-cta { min-height: calc(var(--touch-target) + var(--sp-2)); border-radius: var(--radius-md); font-size: var(--fs-base); }
|
||||
.gx-guided__footer .gx-guided__hint { text-align: center; }
|
||||
.gx-guided__link { justify-self: center; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--primary); font: inherit; cursor: pointer; }
|
||||
.gx-guided__link:hover:not(:disabled) { text-decoration: underline; }
|
||||
.gx-guided__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
||||
.gx-guided__link:disabled { opacity: .5; cursor: default; }
|
||||
|
||||
.gx-slider-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
|
||||
.gx-alert-preview { min-width: 118px; min-height: 44px; gap: 8px; white-space: nowrap; }
|
||||
.gx-alert-preview[aria-busy="true"] .bi { animation: gx-preview-pulse .7s ease-in-out infinite alternate; }
|
||||
.gx-alert-preview-note { margin: 0; font-size: var(--fs-xs); color: var(--on-surface-variant); line-height: 1.4; }
|
||||
@keyframes gx-preview-pulse { to { opacity: .35; } }
|
||||
@media (prefers-reduced-motion: reduce) { .gx-alert-preview[aria-busy="true"] .bi { animation: none; } }
|
||||
.gx-slider-header--preview { align-items: center; flex-wrap: wrap; }
|
||||
.gx-slider-header .gx-slider-actions .gx-setting-default { margin: 0; }
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
/* Guided setup layout and emphasis; shared rows, buttons, fields and notices keep Galaxy defaults. */
|
||||
.gx-card.gx-guided { display: grid; gap: var(--sp-5); padding: var(--panel-padding); background-image: radial-gradient(120% 38% at 50% 0, var(--primary-container), transparent 72%); }
|
||||
.gx-guided__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
|
||||
.gx-guided__step { position: relative; display: grid; justify-items: center; gap: var(--sp-2); text-align: center; }
|
||||
.gx-guided__step::before, .gx-guided__step::after { content: ""; position: absolute; top: 15px; height: 2px; width: calc(50% - 8px); background: var(--outline); }
|
||||
.gx-guided__step::before { left: 0; }
|
||||
.gx-guided__step::after { right: 0; }
|
||||
.gx-guided__step:first-child::before, .gx-guided__step:last-child::after { display: none; }
|
||||
.gx-guided__step.is-done::before, .gx-guided__step.is-done::after, .gx-guided__step.is-current::before,
|
||||
.gx-guided__step.is-done + .gx-guided__step::before { background: var(--success); }
|
||||
.gx-guided__node { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--surface-container-high); color: var(--on-surface-variant); font-weight: var(--fw-bold); }
|
||||
.gx-guided__step.is-current .gx-guided__node { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 var(--sp-1) var(--primary-container), 0 var(--sp-1) var(--sp-4) var(--primary-glow); }
|
||||
.gx-guided__step.is-done .gx-guided__node { background: var(--success); color: var(--background); }
|
||||
.gx-guided__step-label, .gx-guided__hint { font-size: var(--fs-sm); color: var(--on-surface-variant); }
|
||||
.gx-guided__header, .gx-guided__section, .gx-guided__body { display: grid; gap: var(--sp-3); min-width: 0; }
|
||||
.gx-guided__header > *, .gx-guided__subhead, .gx-guided__hint { margin: 0; }
|
||||
.gx-guided__header { max-width: 34rem; gap: var(--sp-2); }
|
||||
.gx-guided__title { font-size: clamp(1.625rem, 2.5vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
|
||||
.gx-guided__lede { color: var(--on-surface-variant); font-size: var(--fs-base); line-height: 1.5; }
|
||||
.gx-guided__subhead { font-size: var(--fs-base); color: var(--on-surface-variant); }
|
||||
.gx-guided__body:empty { display: none; }
|
||||
.gx-guided__option { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch-target); padding: var(--sp-3) var(--sp-4); cursor: pointer; }
|
||||
.gx-guided__option:hover:not(:has(:disabled)) { background: var(--glass-bg-hover); }
|
||||
.gx-guided__option:has(:checked) { background: var(--primary-container); color: var(--on-primary-container); }
|
||||
.gx-guided__option:has(:disabled), .gx-guided__choice:has(:disabled) { opacity: .6; cursor: default; }
|
||||
.gx-guided__option:focus-within, .gx-guided__choice:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
|
||||
.gx-guided__options { background: var(--surface-container); }
|
||||
.gx-guided__options > li + li { border-top: 1px solid var(--outline); }
|
||||
.gx-guided__option input { flex: none; order: 1; width: var(--sp-5); height: var(--sp-5); margin: 0; accent-color: var(--primary); }
|
||||
.gx-guided__option:has(:checked) .gx-guided__tile { background: var(--primary); color: var(--on-primary); }
|
||||
.gx-guided__segmented { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--radius-sm); background: var(--surface-container-high); }
|
||||
.gx-guided__choice { flex: 1 1 7rem; min-width: 0; min-height: var(--touch-target); padding: var(--sp-2); border-radius: calc(var(--radius-sm) - var(--sp-1)); text-align: center; text-wrap: balance; box-shadow: none; background: transparent; color: var(--on-surface-variant); }
|
||||
.gx-guided__choice:has(:checked) { background: var(--primary); color: var(--on-primary); }
|
||||
.gx-guided__choice:has(:checked):hover { background: var(--primary-hover); }
|
||||
.gx-guided__tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-container); color: var(--primary); font-size: var(--fs-lg); }
|
||||
.gx-guided__checklist > .gx-starport-row { flex-wrap: nowrap; }
|
||||
.gx-guided__mark { flex: none; display: grid; place-items: center; width: 28px; font-size: var(--fs-lg); color: var(--on-surface-variant); }
|
||||
.gx-guided__checklist > li.is-done .gx-guided__mark, .gx-guided__checklist > li.is-worked .gx-guided__mark { color: var(--success); }
|
||||
.gx-guided__checklist > li.is-active .gx-guided__mark, .gx-guided__checklist > li.is-current .gx-guided__mark, .gx-guided__checklist > li.is-retry .gx-guided__mark { color: var(--primary); }
|
||||
.gx-guided__checklist > li.is-failed .gx-guided__mark { color: var(--error); }
|
||||
.gx-guided__callout { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0; padding: var(--sp-4); border-radius: var(--radius-sm); background: var(--primary-container); }
|
||||
.gx-guided__callout--quiet { background: var(--surface-container); color: var(--on-surface-variant); }
|
||||
.gx-guided__footer { display: grid; gap: var(--sp-3); }
|
||||
.gx-guided .gx-starport-cta { min-height: calc(var(--touch-target) + var(--sp-2)); border-radius: var(--radius-md); font-size: var(--fs-base); }
|
||||
.gx-guided__footer .gx-guided__hint { text-align: center; }
|
||||
.gx-guided__link { justify-self: center; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--primary); font: inherit; cursor: pointer; }
|
||||
.gx-guided__link:hover:not(:disabled) { text-decoration: underline; }
|
||||
.gx-guided__link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
||||
.gx-guided__link:disabled { opacity: .5; cursor: default; }
|
||||
|
||||
.gx-slider-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
|
||||
.gx-alert-preview { min-width: 118px; min-height: 44px; gap: 8px; white-space: nowrap; }
|
||||
.gx-alert-preview[aria-busy="true"] .bi { animation: gx-preview-pulse .7s ease-in-out infinite alternate; }
|
||||
.gx-alert-preview-note { margin: 0; font-size: var(--fs-xs); color: var(--on-surface-variant); line-height: 1.4; }
|
||||
@keyframes gx-preview-pulse { to { opacity: .35; } }
|
||||
@media (prefers-reduced-motion: reduce) { .gx-alert-preview[aria-busy="true"] .bi { animation: none; } }
|
||||
.gx-slider-header--preview { align-items: center; flex-wrap: wrap; }
|
||||
.gx-slider-header .gx-slider-actions .gx-setting-default { margin: 0; }
|
||||
@@ -13,6 +13,7 @@
|
||||
<link rel="manifest" href="./manifest.webmanifest" crossorigin="use-credentials">
|
||||
<link rel="stylesheet" href="./vendor/bootstrap-icons/bootstrap-icons.min.css">
|
||||
<link rel="stylesheet" href="./css/galaxy.css">
|
||||
<link rel="stylesheet" href="./css/setup.css">
|
||||
<link rel="stylesheet" href="./css/settings.css">
|
||||
<link rel="stylesheet" href="./css/navigation.css">
|
||||
</head>
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
{"protected_inventory_sha256": "31ce110ba2691075ad8ce0928854106876165f405a7798693daa2542961b2967", "schema_version": 1}
|
||||
{"protected_inventory_sha256": "3ae90477c066ee82cc45593c3e6ed22c9222917eb9708bb9f303a6e00de0fb05", "schema_version": 1}
|
||||
|
||||
Reference in New Issue
Block a user