feat: improve note card layout and filtering behavior

- Updated thumbnail sizing to be responsive (20x20 on mobile, 24x24 on larger screens) and centered vertically
- Changed background image sizing from fixed height to full coverage for better visual consistency
- Added automatic sort reset to "updated ascending" when filters change to ensure predictable ordering
- Removed truncation from description text to show full excerpts
This commit is contained in:
Bruno Charest 2025-11-04 13:28:24 -05:00
parent 7be20d05e0
commit f2049f672f
2 changed files with 17 additions and 5 deletions

View File

@ -151,12 +151,12 @@ import { takeUntil } from 'rxjs/operators';
<div class="title text-sm truncate">{{ note.title }}</div> <div class="title text-sm truncate">{{ note.title }}</div>
<div class="meta text-xs truncate">{{ note.filePath }}</div> <div class="meta text-xs truncate">{{ note.filePath }}</div>
<div *ngIf="getAuthorById(note.id) as a" class="text-xs text-gray-500 dark:text-gray-400 truncate"> {{ a }}</div> <div *ngIf="getAuthorById(note.id) as a" class="text-xs text-gray-500 dark:text-gray-400 truncate"> {{ a }}</div>
<div *ngIf="getDescriptionById(note.id) as d" class="text-xs text-muted truncate">{{ d }}</div> <div *ngIf="getDescriptionById(note.id) as d" class="text-xs excerpt">{{ d }}</div>
<div *ngIf="getUpdatedTimestampById(note) as ts" class="text-xs text-gray-500 dark:text-gray-400">🕓 {{ formatDateTime(ts) }}</div> <div *ngIf="getUpdatedTimestampById(note) as ts" class="text-xs text-gray-500 dark:text-gray-400">🕓 {{ formatDateTime(ts) }}</div>
</div> </div>
</div> </div>
<div class="flex-shrink-0 sm:ml-4 mt-2 sm:mt-0" *ngIf="getThumbnailSrcById(note) as imgSrc"> <div class="flex-shrink-0 sm:ml-4 mt-2 sm:mt-0 sm:self-center" *ngIf="getThumbnailSrcById(note) as imgSrc">
<img [src]="imgSrc" alt="" class="rounded-md shadow-sm object-cover w-24 h-24" /> <img [src]="imgSrc" alt="" class="rounded-md shadow-sm object-cover w-20 h-20 sm:w-24 sm:h-24" />
</div> </div>
</div> </div>
</li> </li>
@ -315,7 +315,7 @@ import { takeUntil } from 'rxjs/operators';
.action-buttons { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; } .action-buttons { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem; }
/* Enhanced note card with color indicator and action buttons */ /* Enhanced note card with color indicator and action buttons */
.note-card { transition: all 0.3s ease-in-out; background-repeat: no-repeat; background-size: 100% 120px; background-position: top center; } .note-card { transition: all 0.3s ease-in-out; background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; }
.note-card:hover { transform: translateY(-1px); } .note-card:hover { transform: translateY(-1px); }
/* Color dot indicator */ /* Color dot indicator */
@ -388,6 +388,18 @@ export class PaginatedNotesListComponent implements OnInit, OnDestroy {
@Output() clearQuickLinkFilter = new EventEmitter<void>(); @Output() clearQuickLinkFilter = new EventEmitter<void>();
@Output() clearFolderFilter = new EventEmitter<void>(); @Output() clearFolderFilter = new EventEmitter<void>();
// Enforce default sort (updated asc) when filters change
private resetSortOnFilterChange = effect(() => {
// Track dependencies
const _folder = this.folderFilter();
const _tag = this.tagFilter();
const _quick = this.quickLinkFilter();
const _tagsList = this.filter.tags();
// Apply default sort
this.state.setSortBy('updated');
this.state.setSortOrder('asc');
});
// Local state // Local state
private q = signal(''); private q = signal('');
selectedNoteId = signal<string | null>(null); selectedNoteId = signal<string | null>(null);

View File

@ -1,6 +1,6 @@
--- ---
excalidraw-plugin: parsed
updated: "2025-11-04T01:33:48.022Z" updated: "2025-11-04T01:33:48.022Z"
description: "Données d'un dessin Excalidraw, à consulter et modifier dans la vue Excalidraw."
--- ---
==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== ==⚠ Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==