francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Trip: enhance checklist items grid

Browse Source
This commit is contained in:
itskovacs 2025-10-12 16:18:25 +02:00
parent 51a36ea09c
commit b7f8937efd
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/src/app/components/trip/trip.component.html
View File

@ -638,7 +638,7 @@
<p-button (click)="addChecklistItem()" icon="pi pi-plus" label="Add item" text /> <p-button (click)="addChecklistItem()" icon="pi pi-plus" label="Add item" text />
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4"> <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2 pb-4">
@for (item of checklistItems; track item.id) { @for (item of checklistItems; track item.id) {
<div class="relative group flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5"> <div class="relative group flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
<label [for]="item.id" [pTooltip]="item.text" [class.line-through]="item.checked" <label [for]="item.id" [pTooltip]="item.text" [class.line-through]="item.checked"
@ -674,8 +674,10 @@
<div class="rounded-md py-1 min-w-0 hover:bg-gray-100 dark:hover:bg-white/5"> <div class="rounded-md py-1 min-w-0 hover:bg-gray-100 dark:hover:bg-white/5">
<label [for]="item.id" [pTooltip]="item.text" class="flex items-center gap-2 w-full"> <label [for]="item.id" [pTooltip]="item.text" class="flex items-center gap-2 w-full">
<div class="relative"> <div class="relative">
@if (item.status) {<div class="z-50 block absolute top-0 left-3 size-2.5 rounded-full" @if (item.status) {
[style.background]="item.status.color"></div>} <div class="z-50 block absolute top-0 left-3 size-2.5 rounded-full" [style.background]="item.status.color">
</div>
}
<p-checkbox disabled /> <p-checkbox disabled />
</div> </div>
<div class="truncate select-none"> <div class="truncate select-none">