bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

Move Active Projects widget into tasks column, 3 cards across

Browse Source 
Projects now appear at the top of the tasks column directly above
the task sections, laid out in a fixed 3-column grid. The previous
full-width widget below the main grid has been removed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-03 19:48:32 -05:00
parent eac4c6d86a
commit ab0002f342
1 changed files with 54 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/HomeView.vue
+54 -53
View File
@@ -315,6 +315,53 @@ function clearDashboardResponse() {
<!-- Tasks column -->
<div class="col-tasks">
<!-- Active Projects (3 across, above tasks) -->
<div v-if="activeProjects.length" class="projects-inline">
<div class="col-header">
<h2>Active Projects</h2>
<router-link to="/projects" class="see-all">See all</router-link>
</div>
<div class="projects-strip-inline">
<router-link
v-for="project in activeProjects"
:key="project.id"
:to="`/projects/${project.id}`"
class="project-mini-card"
>
<div class="project-mini-title">{{ project.title }}</div>
<template v-if="project.summary?.milestone_summary?.length">
<div
v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
:key="ms.id"
class="ms-row"
>
<span class="ms-label">{{ ms.title }}</span>
<div class="ms-track">
<div
class="ms-fill"
:style="{ width: ms.pct + '%', background: milestoneColor(i) }"
></div>
</div>
<span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
</div>
</template>
<div v-else-if="project.summary" class="project-mini-counts">
<span v-if="project.summary.task_counts.in_progress">
{{ project.summary.task_counts.in_progress }} in progress
</span>
<span v-if="project.summary.task_counts.todo">
{{ project.summary.task_counts.todo }} todo
</span>
<span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
No open tasks
</span>
</div>
<div v-else class="project-mini-counts muted">Loading…</div>
</router-link>
</div>
</div>
<div class="col-header">
<h2>Tasks</h2>
<router-link to="/tasks" class="see-all">See all</router-link>
@@ -433,52 +480,6 @@ function clearDashboardResponse() {
</div>
<!-- Projects widget -->
<div v-if="activeProjects.length" class="projects-section">
<div class="col-header">
<h2>Active Projects</h2>
<router-link to="/projects" class="see-all">See all</router-link>
</div>
<div class="projects-strip">
<router-link
v-for="project in activeProjects"
:key="project.id"
:to="`/projects/${project.id}`"
class="project-mini-card"
>
<div class="project-mini-title">{{ project.title }}</div>
<template v-if="project.summary?.milestone_summary?.length">
<div
v-for="(ms, i) in project.summary.milestone_summary.filter(m => m.status !== 'archived')"
:key="ms.id"
class="ms-row"
>
<span class="ms-label">{{ ms.title }}</span>
<div class="ms-track">
<div
class="ms-fill"
:style="{ width: ms.pct + '%', background: milestoneColor(i) }"
></div>
</div>
<span class="ms-pct">{{ Math.round(ms.pct) }}%</span>
</div>
</template>
<div v-else-if="project.summary" class="project-mini-counts">
<span v-if="project.summary.task_counts.in_progress">
{{ project.summary.task_counts.in_progress }} in progress
</span>
<span v-if="project.summary.task_counts.todo">
{{ project.summary.task_counts.todo }} todo
</span>
<span v-if="!project.summary.task_counts.in_progress && !project.summary.task_counts.todo" class="muted">
No open tasks
</span>
</div>
<div v-else class="project-mini-counts muted">Loading…</div>
</router-link>
</div>
</div>
</main>
</template>
@@ -653,14 +654,14 @@ function clearDashboardResponse() {
gap: 0.6rem;
}
/* Projects widget */
.projects-section {
margin-top: 2rem;
/* Projects inline (inside tasks column) */
.projects-inline {
margin-bottom: 1.5rem;
}
.projects-strip {
.projects-strip-inline {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.75rem;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.project-mini-card {
display: block;
@@ -745,6 +746,6 @@ function clearDashboardResponse() {
@media (max-width: 768px) {
.dashboard-grid { grid-template-columns: 1fr; }
.notes-mini-grid { grid-template-columns: 1fr; }
.projects-strip { grid-template-columns: 1fr; }
.projects-strip-inline { grid-template-columns: 1fr; }
}
</style>