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/tasks/cron.js
+6 -4
View File
@@ -122,10 +122,12 @@ export class CronJobsSection extends LightElement {
render() {
return html`
<div class="task-page">
<div class="task-page-header">
<h2 class="task-page-title"><i class="bi bi-repeat"></i> ${t('cron.title')}</h2>
<div style="font-size:0.82rem;color:var(--bs-secondary-color)">
${t(this._jobs.length === 1 ? 'cron.count_one' : 'cron.count_other', { n: this._jobs.length })}
<div class="page-header">
<div class="page-header-left">
<h2 class="page-header-title"><i class="bi bi-repeat"></i> ${t('cron.title')}</h2>
</div>
<div class="page-header-actions">
<span class="page-header-count">${t(this._jobs.length === 1 ? 'cron.count_one' : 'cron.count_other', { n: this._jobs.length })}</span>
</div>
</div>
web/components/tasks/history.js
+6 -4
View File
@@ -83,10 +83,12 @@ export class TaskHistorySection extends LightElement {
render() {
return html`
<div class="task-page">
<div class="task-page-header">
<h2 class="task-page-title"><i class="bi bi-journal-text"></i> History</h2>
<div style="font-size:0.82rem;color:var(--bs-secondary-color)">
${this._runs.length} run${this._runs.length !== 1 ? 's' : ''}
<div class="page-header">
<div class="page-header-left">
<h2 class="page-header-title"><i class="bi bi-journal-text"></i> History</h2>
</div>
<div class="page-header-actions">
<span class="page-header-count">${this._runs.length} run${this._runs.length !== 1 ? 's' : ''}</span>
</div>
</div>
web/components/tasks/running.js
+6 -4
View File
@@ -124,10 +124,12 @@ export class RunningTasksSection extends LightElement {
void this._tick; // drives re-render every second for live elapsed time
return html`
<div class="task-page">
<div class="task-page-header">
<h2 class="task-page-title"><i class="bi bi-activity"></i> Running Tasks</h2>
<div style="font-size:0.82rem;color:var(--bs-secondary-color)">
${this._jobs.length} running
<div class="page-header">
<div class="page-header-left">
<h2 class="page-header-title"><i class="bi bi-activity"></i> Running Tasks</h2>
</div>
<div class="page-header-actions">
<span class="page-header-count">${this._jobs.length} running</span>
</div>
</div>
web/components/tasks/scheduled.js
+6 -4
View File
@@ -99,10 +99,12 @@ export class ScheduledTasksSection extends LightElement {
render() {
return html`
<div class="task-page">
<div class="task-page-header">
<h2 class="task-page-title"><i class="bi bi-clock"></i> Scheduled Tasks</h2>
<div style="font-size:0.82rem;color:var(--bs-secondary-color)">
${this._jobs.length} task${this._jobs.length !== 1 ? 's' : ''}
<div class="page-header">
<div class="page-header-left">
<h2 class="page-header-title"><i class="bi bi-clock"></i> Scheduled Tasks</h2>
</div>
<div class="page-header-actions">
<span class="page-header-count">${this._jobs.length} task${this._jobs.length !== 1 ? 's' : ''}</span>
</div>
</div>