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

UI polish: notes/tasks list views

Browse Source 
- NotesListView: skeleton shimmer for grid and list modes; grid columns change from fixed 3 to auto-fill(260px)
- NoteCard compact: flat border-bottom row style instead of stacked mini-cards; gradient fade mask on grid preview text
- TaskCard compact: flat border-bottom row style; show up to 2 tags
- TasksListView: gradient + shadow on New Task button (matches NotesListView)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-10 22:39:05 -04:00
parent f755067cbd
commit 6e9ec26c8e
4 changed files with 89 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/NotesListView.vue
+42 -2
View File
@@ -139,7 +139,14 @@ function onOffsetUpdate(offset: number) {
<button class="clear-filters" @click="store.clearTagFilters()">Clear all</button>
</div>
<p v-if="store.loading">Loading...</p>
<div v-if="store.loading" class="note-list-skeleton">
<div v-if="viewMode === 'grid'" class="skeleton-grid">
<div class="skeleton-card" v-for="i in 6" :key="i"></div>
</div>
<div v-else class="skeleton-rows">
<div class="skeleton-row" v-for="i in 8" :key="i"></div>
</div>
</div>
<div v-else-if="store.notes.length === 0" class="empty-state">
<template v-if="store.searchQuery || store.activeTagFilters.length">
<p class="empty-title">No notes match your filters</p>
@@ -280,10 +287,43 @@ function onOffsetUpdate(offset: number) {
padding: 0;
}
/* Skeleton loading */
.note-list-skeleton {
margin-top: 1rem;
}
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.75rem;
}
.skeleton-card {
height: 140px;
border-radius: var(--radius-md);
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.skeleton-row {
height: 40px;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-border) 50%, var(--color-bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Grid layout */
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}