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:
parent
7be20d05e0
commit
f2049f672f
@ -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);
|
||||||
|
|||||||
@ -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. ⚠==
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user