Improve dashboard header layout (centered title, grid) and ignore .omo/
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -140,3 +140,6 @@ dist
|
|||||||
|
|
||||||
# Deploy secrets
|
# Deploy secrets
|
||||||
deploy/.env
|
deploy/.env
|
||||||
|
|
||||||
|
# OpenCode agent session state
|
||||||
|
.omo/
|
||||||
|
|||||||
@@ -180,26 +180,42 @@ function inlineDashboard(passkeyEnabled: boolean): string {
|
|||||||
|
|
||||||
/* ── Header ── */
|
/* ── Header ── */
|
||||||
.header {
|
.header {
|
||||||
display: flex; align-items: center; gap: 14px;
|
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||||
|
align-items: center; gap: 14px;
|
||||||
padding: 20px 32px;
|
padding: 20px 32px;
|
||||||
background: rgba(15,23,42,.85);
|
background: rgba(15,23,42,.85);
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
border-bottom: 1px solid rgba(99,102,241,.25);
|
border-bottom: 1px solid rgba(99,102,241,.25);
|
||||||
position: sticky; top: 0; z-index: 10;
|
position: sticky; top: 0; z-index: 10;
|
||||||
}
|
}
|
||||||
.header img {
|
.header-side {
|
||||||
|
display: flex; align-items: center;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.header-side.right {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.header-logo-placeholder {
|
||||||
|
visibility: hidden;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
.header-logo-placeholder img {
|
||||||
height: 36px; width: auto;
|
height: 36px; width: auto;
|
||||||
background: #fff; border-radius: 8px; padding: 3px;
|
background: #fff; border-radius: 8px; padding: 3px;
|
||||||
}
|
}
|
||||||
|
.header-title {
|
||||||
|
text-align: center;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 22px; font-weight: 700; margin: 0;
|
font-size: 22px; font-weight: 700; margin: 0;
|
||||||
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
background: linear-gradient(90deg, #818cf8, #a78bfa);
|
||||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
.header .spacer { flex: 1; }
|
|
||||||
.header .status {
|
.header .status {
|
||||||
font-size: 12px; color: #94a3b8;
|
font-size: 12px; color: #94a3b8;
|
||||||
display: flex; align-items: center; gap: 6px;
|
display: flex; align-items: center; gap: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.header .status .dot {
|
.header .status .dot {
|
||||||
width: 8px; height: 8px; border-radius: 50%;
|
width: 8px; height: 8px; border-radius: 50%;
|
||||||
@@ -322,10 +338,15 @@ function inlineDashboard(passkeyEnabled: boolean): string {
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<img src="/favicon.ico" alt="MCPlet logo">
|
<div class="header-side">
|
||||||
<h1>MCPletA2A Dashboard</h1>
|
<span class="header-logo-placeholder" aria-hidden="true"><img src="/favicon.ico" alt=""></span>
|
||||||
<div class="spacer"></div>
|
</div>
|
||||||
<div class="status"><span class="dot"></span> Auto-refresh 10s</div>
|
<div class="header-title">
|
||||||
|
<h1>MCPletA2A Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
<div class="header-side right">
|
||||||
|
<div class="status"><span class="dot"></span> Auto-refresh 10s</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
Reference in New Issue
Block a user