books-in-hand/chorus
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add mobile-first kanban board view for Chorus triage #3

Merged
pyr0ball merged 9 commits from feat/chorus-triage-views into main 2026-07-15 20:14:53 -07:00
Conversation 0 Commits 9 Files changed 17 +15 -7
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit cee0dcd36a - Show all commits

22
frontend/src/components/KanbanBoard.vue
View file

@ -79,7 +79,7 @@ function labelFor(stage) {
</button>
</div>
<div class="mobile-breadcrumb" role="tabpanel" :id="`board-panel-${activeBoardKey}`">
<div class="mobile-breadcrumb">
{{ activeBoard.label }} &rsaquo; {{ labelFor(activeStage) }}
</div>
@ -97,16 +97,24 @@ function labelFor(stage) {
</button>
</div>
<div class="columns">
<div
v-for="board in BOARDS"
:key="board.key"
v-show="board.key === activeBoardKey"
role="tabpanel"
:id="`board-panel-${board.key}`"
:aria-labelledby="`board-tab-${board.key}`"
class="columns"
>
<div
v-for="stage in activeBoard.stages"
v-for="stage in board.stages"
:key="stage"
class="column"
:class="{ 'is-active-mobile': stage === activeStage }"
:class="{ 'is-active-mobile': stage === activeStage && board.key === activeBoardKey }"
>
<h3>{{ labelFor(stage) }} ({{ itemsForStage(activeBoardKey, stage).length }})</h3>
<h3>{{ labelFor(stage) }} ({{ itemsForStage(board.key, stage).length }})</h3>
<button
v-for="item in itemsForStage(activeBoardKey, stage)"
v-for="item in itemsForStage(board.key, stage)"
:key="item.id"
type="button"
class="card"
@ -117,7 +125,7 @@ function labelFor(stage) {
<p class="card-snippet">{{ item.raw_content.slice(0, 80) }}</p>
<p v-if="item.follow_up_date" class="card-followup">Follow up: {{ item.follow_up_date }}</p>
</button>
<p v-if="itemsForStage(activeBoardKey, stage).length === 0" class="column-empty">Nothing here</p>
<p v-if="itemsForStage(board.key, stage).length === 0" class="column-empty">Nothing here</p>
</div>
</div>
</div>