dguiducci/Skald-Circle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: unify page headers into one shared page-header bar
Nightly Build / build (push) Successful in 7m17s
Details

Browse Source 
Every full-page view now renders the same sticky top bar (back button,
title, right-side actions) from the new web/css/page-header.css,
replacing a dozen per-page duplicates (.page-panel-header,
.project-page-header, .task-page-header, .llm-page-header, .um-header,
.apr-header, .llmr-header, .pv-header, .sa-header, .config-page-header,
.agents-page-header). Pages that padded the whole container (config,
agents, system-agents, llm-requests, models-hub) move that padding into
a body wrapper so the bar sits flush and stays pinned on scroll.
Back buttons are standardized to the icon-only .page-header-back.
This commit is contained in:
dguiducci
2026-07-29 12:36:24 +01:00
parent da8a835d70
commit 0ed94225b2
45 changed files with 389 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/llm-request-detail.js
+21 -15
View File
@@ -540,10 +540,12 @@ export class LlmRequestDetail extends LightElement {
render() {
if (this._loading) return html`
<div class="llmr-page">
<div class="llmr-detail-back">
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i> ${t('llmr.detail.back')}
</button>
<div class="page-header">
<div class="page-header-left">
<button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('llmr.detail.back')} @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i>
</button>
</div>
</div>
<div class="llmr-state">
<div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
@@ -554,10 +556,12 @@ export class LlmRequestDetail extends LightElement {
if (this._error) return html`
<div class="llmr-page">
<div class="llmr-detail-back">
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i> ${t('llmr.detail.back')}
</button>
<div class="page-header">
<div class="page-header-left">
<button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('llmr.detail.back')} @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i>
</button>
</div>
</div>
<div class="llmr-state llmr-state--error">
<i class="bi bi-exclamation-circle"></i>
@@ -586,15 +590,16 @@ export class LlmRequestDetail extends LightElement {
return html`
<div class="llmr-page">
<div class="llmr-detail-back">
<button class="btn btn-sm btn-outline-secondary" @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i> ${t('llmr.detail.back')}
</button>
<span class="llmr-detail-title">
<i class="bi bi-journal-code"></i> ${t('llmr.detail.request')} <span class="llmr-detail-id">#${d.id}</span>
</span>
<div class="page-header">
<div class="page-header-left">
<button class="btn btn-sm btn-outline-secondary page-header-back" title=${t('llmr.detail.back')} @click=${() => this._back()}>
<i class="bi bi-arrow-left"></i>
</button>
<h2 class="page-header-title"><i class="bi bi-journal-code"></i> ${t('llmr.detail.request')} <span class="llmr-detail-id">#${d.id}</span></h2>
</div>
</div>
<div class="llmr-body">
${this._renderStatBar(d)}
${payloadMissing ? html`
@@ -643,6 +648,7 @@ export class LlmRequestDetail extends LightElement {
</div>
`
) : nothing}
</div>
</div>
`;
}