💄 animations, 🎨 vars renaming
This commit is contained in:
itskovacs
parent
0505b1f403
commit
2084e5840f
@ -5,9 +5,7 @@ import {
|
||||
} from "@angular/core";
|
||||
import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
|
||||
import { provideRouter } from "@angular/router";
|
||||
|
||||
import { routes } from "./app.routes";
|
||||
|
||||
import { providePrimeNG } from "primeng/config";
|
||||
import { TripThemePreset } from "../mytheme";
|
||||
import { MessageService } from "primeng/api";
|
||||
@ -20,7 +18,7 @@ export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(routes),
|
||||
provideAnimationsAsync(),
|
||||
provideAnimationsAsync(), // primeng/issues/18978
|
||||
provideHttpClient(withInterceptors([Interceptor])),
|
||||
providePrimeNG({
|
||||
translation: {
|
||||
|
||||
@ -40,12 +40,12 @@
|
||||
</div>
|
||||
|
||||
<div class="absolute z-30 top-2 left-2 p-2 bg-white shadow rounded dark:bg-surface-900">
|
||||
<p-button (click)="gotoTrips()" label="Trips" severity="secondary" text icon="pi pi-bars" />
|
||||
<p-button (click)="navigateToTrips()" label="Trips" severity="secondary" text icon="pi pi-bars" />
|
||||
</div>
|
||||
|
||||
@if (viewMarkersList) {
|
||||
<section
|
||||
class="absolute left-2 right-2 top-4 bottom-4 md:max-w-md bg-white z-40 rounded-xl shadow-2xl p-4 flex flex-col dark:bg-surface-900">
|
||||
<section animate.enter="slide-x" animate.leave="a-slide-x"
|
||||
class="absolute left-2 right-2 top-2 bottom-4 md:max-w-md bg-white z-40 rounded-xl shadow p-4 flex flex-col dark:bg-surface-900">
|
||||
<div class="mt-1 p-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="font-semibold tracking-tight text-xl">Points</h1>
|
||||
@ -70,8 +70,8 @@
|
||||
|
||||
@for (p of visiblePlaces; track p.id) {
|
||||
<div
|
||||
class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
|
||||
(click)="gotoPlace(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()">
|
||||
class="group/item relative mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
|
||||
(click)="togglePlaceSelection(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()">
|
||||
<img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">
|
||||
|
||||
<div class="flex flex-col gap-1 truncate">
|
||||
@ -79,11 +79,8 @@
|
||||
<span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
|
||||
|
||||
<div class="flex gap-0.5">
|
||||
@if (p.allowdog) {
|
||||
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
|
||||
} @else {
|
||||
<span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
|
||||
}
|
||||
<span class=" text-sm me-2 px-2.5 py-0.5 rounded"
|
||||
[ngClass]="p.allowdog ? 'bg-green-100 text-green-800 dark:bg-green-100/85' : 'bg-red-100 text-red-800 dark:bg-red-100/85'">🐶</span>
|
||||
|
||||
@if (p.visited) {
|
||||
<span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
|
||||
@ -97,6 +94,11 @@
|
||||
class="text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
|
||||
class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="invisible absolute top-7 transition-all right-2 group-hover/item:visible group-hover/item:-translate-x-2">
|
||||
<p-button text icon="pi pi-pencil" (click)="editPlace(p); $event.stopPropagation()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @empty {
|
||||
@ -110,8 +112,8 @@
|
||||
}
|
||||
|
||||
@if (viewFilters) {
|
||||
<section
|
||||
class="absolute right-2 top-36 bg-white z-40 rounded-xl shadow-2xl p-8 max-w-screen md:max-w-md dark:bg-surface-900">
|
||||
<section animate.enter="slide-y" animate.leave="a-slide-y"
|
||||
class="absolute right-2 top-36 bg-white z-40 rounded-xl shadow p-8 max-w-screen md:max-w-md dark:bg-surface-900">
|
||||
|
||||
<div class="mt-1 flex justify-between items-center">
|
||||
<div>
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
@plugin 'tailwindcss-primeui';
|
||||
@variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer tailwind, primeng;
|
||||
|
||||
@layer tailwind {
|
||||
@import "tailwindcss";
|
||||
}
|
||||
@ -117,7 +115,7 @@ html {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.listHover {
|
||||
.list-hover {
|
||||
.custom-cluster {
|
||||
background-color: red;
|
||||
}
|
||||
@ -130,13 +128,14 @@ html {
|
||||
width: 2px;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.table-colored-resizer .p-datatable-column-resizer {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideYcenteredX {
|
||||
@keyframes slide-y-centered-x {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
@ -147,15 +146,29 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-x {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
}
|
||||
.place-box-dialog {
|
||||
animation: slide-y-centered-x 0.3s both;
|
||||
z-index: 999;
|
||||
min-height: 100px;
|
||||
max-height: 800px;
|
||||
width: 95%;
|
||||
max-width: 1200px;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: none;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.slide-x {
|
||||
animation: slide-x 0.3s both;
|
||||
&-content {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
@ -208,27 +221,40 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.place-box-dialog {
|
||||
animation: slideYcenteredX 0.3s both;
|
||||
z-index: 999;
|
||||
min-height: 100px;
|
||||
max-height: 800px;
|
||||
width: 95%;
|
||||
max-width: 1200px;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: none;
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@keyframes slide-x {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
width: 100%;
|
||||
@keyframes slide-y {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-x {
|
||||
animation: slide-x 0.3s both normal;
|
||||
}
|
||||
|
||||
.a-slide-x {
|
||||
animation: slide-x 0.3s both reverse;
|
||||
}
|
||||
|
||||
.slide-y {
|
||||
animation: slide-y 0.3s both normal;
|
||||
}
|
||||
|
||||
.a-slide-y {
|
||||
animation: slide-y 0.3s both reverse;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user