💄 Dark mode fixes
This commit is contained in:
parent
2f73b4288e
commit
ff3f9e3e3b
@ -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">
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user