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

💄 Update shared trip

Browse Source
This commit is contained in:
itskovacs 2025-10-12 16:19:01 +02:00
parent b7f8937efd
commit a018b6fd46
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/src/app/components/shared-trip/shared-trip.component.html
View File

@ -695,7 +695,7 @@
<p-dialog header="Checklist" [draggable]="false" [dismissableMask]="true" [modal]="true" <p-dialog header="Checklist" [draggable]="false" [dismissableMask]="true" [modal]="true"
[(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[50%] lg:w-[30%]"> [(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[50%] lg:w-[30%]">
<section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]"> <section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]">
<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" [class.line-through]="item.checked" <label [for]="item.id" [class.line-through]="item.checked"
@ -709,9 +709,21 @@
} }
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4"> <div class="flex items-center justify-center flex-wrap xl:justify-between gap-1 mt-4">
<div class="font-semibold tracking-tight text-md">Items with status</div>
<div class="flex justify-center md:justify-end gap-1">
@for (status of statuses; track status.label) {
<div class="relative">
<div class="z-50 block absolute top-0.5 left-1 size-2.5 rounded-full" [style.background]="status.color"></div>
<span [style.background]="status.color+'1A'" [style.color]="status.color"
class="text-xs md:text-sm font-medium me-2 px-2.5 py-1 rounded">{{ status.label }}</span>
</div>
}
</div>
</div>
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2 pb-4">
@for (item of getWatchlistData; track item.id) { @for (item of getWatchlistData; track item.id) {
<div class="flex items-center gap-3 rounded-md p-2 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" class="flex items-center gap-2 w-full"> <label [for]="item.id" class="flex items-center gap-2 w-full">
<div class="relative"> <div class="relative">
@if (item.status) { @if (item.status) {
@ -720,7 +732,7 @@
} }
<p-checkbox disabled /> <p-checkbox disabled />
</div> </div>
<div class="pr-6 md:pr-0 truncate select-none flex-1"> <div class="truncate select-none">
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</div> </div>
</label> </label>