💄 Dark mode fixes

This commit is contained in:
itskovacs 2025-08-28 20:27:23 +02:00
parent 2f73b4288e
commit ff3f9e3e3b
2 changed files with 14 additions and 12 deletions

View File

@ -1,12 +1,12 @@
@if (selectedPlace) { @if (selectedPlace) {
<div class="place-box-dialog"> <div class="place-box-dialog bg-white dark:bg-surface-900">
<div class="place-box-dialog-content"> <div class="place-box-dialog-content">
<div class="flex justify-between items-center mb-3"> <div class="flex justify-between items-center mb-3">
<div class="flex items-center gap-4 w-full max-w-full"> <div class="flex items-center gap-4 w-full max-w-full">
<img [src]="selectedPlace.image || selectedPlace.category.image" <img [src]="selectedPlace.image || selectedPlace.category.image"
class="object-cover rounded-full size-16"> class="object-cover rounded-full size-16">
<div class="flex grow min-w-0 md:flex-col"> <div class="flex grow min-w-0 md:flex-col">
<h1 class="text-gray-800 font-bold mb-0 truncate">{{ selectedPlace.name }} <h1 class="text-gray-800 dark:text-gray-200 font-bold mb-0 truncate">{{ selectedPlace.name }}
</h1> </h1>
<div class="hidden md:flex mt-2 gap-1"> <div class="hidden md:flex mt-2 gap-1">
@ -53,43 +53,44 @@
</div> </div>
<div class="border-l border-solid border-gray-700 h-4"></div> <div class="border-l border-solid border-gray-700 h-4"></div>
<p-button (click)="close()" text icon="pi pi-times" /> <p-button (click)="close()" severity="secondary" text icon="pi pi-times" />
</div> </div>
</div> </div>
</div> </div>
<div class="mt-4 grid grid-cols-2 md:grid-cols-5"> <div class="mt-4 grid grid-cols-2 md:grid-cols-5">
<div class="col-span-2 md:col-span-3 flex flex-col mb-4"> <div class="col-span-2 md:col-span-3 flex flex-col mb-4">
<span class="text-gray-500">Place</span> <span class="text-gray-500 dark:text-gray-400">Place</span>
<div class="line-clamp-2">{{ selectedPlace.place }}</div> <div class="line-clamp-2">{{ selectedPlace.place }}</div>
</div> </div>
<div class="grid grid-cols-2 col-span-2"> <div class="grid grid-cols-2 col-span-2">
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
<span class="text-gray-500">Latitude</span> <span class="text-gray-500 dark:text-gray-400">Latitude</span>
<span class="truncate">{{ selectedPlace.lat }}</span> <span class="truncate">{{ selectedPlace.lat }}</span>
</div> </div>
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
<span class="text-gray-500">Longitude</span> <span class="text-gray-500 dark:text-gray-400">Longitude</span>
<span class="truncate">{{ selectedPlace.lng }}</span> <span class="truncate">{{ selectedPlace.lng }}</span>
</div> </div>
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
<span class="text-gray-500">Price</span> <span class="text-gray-500 dark:text-gray-400">Price</span>
<span>{{ selectedPlace.price || '-' }} @if (selectedPlace.price) { {{ currency$ | async }} }</span> <span>{{ selectedPlace.price || '-' }} @if (selectedPlace.price) { {{ currency$ | async }} }</span>
</div> </div>
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
<span class="text-gray-500">Duration</span> <span class="text-gray-500 dark:text-gray-400">Duration</span>
<span>{{ selectedPlace.duration || '-' }}</span> <span>{{ selectedPlace.duration || '-' }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col mb-4 max-h-40 overflow-y-auto"> <div class="flex flex-col mb-4 max-h-40 overflow-y-auto">
<span class="text-gray-500">Description</span> <span class="text-gray-500 dark:text-gray-400">Description</span>
<span class="break-words" [innerHTML]="(selectedPlace.description || '-') | linkify"></span> <span class="break-words whitespace-pre-line"
[innerHTML]="(selectedPlace.description || '-') | linkify"></span>
</div> </div>
<div class="flex md:hidden mt-2 justify-center gap-1"> <div class="flex md:hidden mt-2 justify-center gap-1">

View File

@ -1,12 +1,13 @@
@if (selectedPlace) { @if (selectedPlace) {
<div class="place-box-dialog"> <div class="place-box-dialog bg-white dark:bg-surface-900">
<div class="place-box-dialog-content"> <div class="place-box-dialog-content">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex items-center gap-4 w-full max-w-full"> <div class="flex items-center gap-4 w-full max-w-full">
<img [src]="selectedPlace.image || selectedPlace.category.image" <img [src]="selectedPlace.image || selectedPlace.category.image"
class="object-cover rounded-full size-16"> class="object-cover rounded-full size-16">
<div class="flex grow min-w-0"> <div class="flex grow min-w-0">
<h1 class="text-gray-800 font-bold mb-0 truncate">Trace of {{ selectedPlace.name }}</h1> <h1 class="text-gray-800 dark:text-gray-200 font-bold mb-0 truncate">Trace of {{ selectedPlace.name
}}</h1>
</div> </div>
<div class="flex items-center justify-end gap-2"> <div class="flex items-center justify-end gap-2">