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

💄 animations, 🎨 vars renaming

Browse Source
This commit is contained in:
itskovacs 2025-10-06 18:20:17 +02:00
parent 0505b1f403
commit 2084e5840f
3 changed files with 75 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/src/app/app.config.ts
View File

@ -5,9 +5,7 @@ import {
} from "@angular/core"; } from "@angular/core";
import { provideAnimationsAsync } from "@angular/platform-browser/animations/async"; import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
import { provideRouter } from "@angular/router"; import { provideRouter } from "@angular/router";
import { routes } from "./app.routes"; import { routes } from "./app.routes";
import { providePrimeNG } from "primeng/config"; import { providePrimeNG } from "primeng/config";
import { TripThemePreset } from "../mytheme"; import { TripThemePreset } from "../mytheme";
import { MessageService } from "primeng/api"; import { MessageService } from "primeng/api";
@ -20,7 +18,7 @@ export const appConfig: ApplicationConfig = {
providers: [ providers: [
provideZoneChangeDetection({ eventCoalescing: true }), provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes), provideRouter(routes),
provideAnimationsAsync(), provideAnimationsAsync(), // primeng/issues/18978
provideHttpClient(withInterceptors([Interceptor])), provideHttpClient(withInterceptors([Interceptor])),
providePrimeNG({ providePrimeNG({
translation: { translation: {

26
src/src/app/components/dashboard/dashboard.component.html
View File

@ -40,12 +40,12 @@
</div> </div>
<div class="absolute z-30 top-2 left-2 p-2 bg-white shadow rounded dark:bg-surface-900"> <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> </div>
@if (viewMarkersList) { @if (viewMarkersList) {
<section <section animate.enter="slide-x" animate.leave="a-slide-x"
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"> 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 class="mt-1 p-4 flex items-center justify-between">
<div> <div>
<h1 class="font-semibold tracking-tight text-xl">Points</h1> <h1 class="font-semibold tracking-tight text-xl">Points</h1>
@ -70,8 +70,8 @@
@for (p of visiblePlaces; track p.id) { @for (p of visiblePlaces; track p.id) {
<div <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" 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)="gotoPlace(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()"> (click)="togglePlaceSelection(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()">
<img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit"> <img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">
<div class="flex flex-col gap-1 truncate"> <div class="flex flex-col gap-1 truncate">
@ -79,11 +79,8 @@
<span class="text-xs text-gray-500 truncate">{{ p.place }}</span> <span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
<div class="flex gap-0.5"> <div class="flex gap-0.5">
@if (p.allowdog) { <span class=" text-sm me-2 px-2.5 py-0.5 rounded"
<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> [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>
} @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>
}
@if (p.visited) { @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 <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="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> class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
</div> </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>
</div> </div>
} @empty { } @empty {
@ -110,8 +112,8 @@
} }
@if (viewFilters) { @if (viewFilters) {
<section <section animate.enter="slide-y" animate.leave="a-slide-y"
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"> 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 class="mt-1 flex justify-between items-center">
<div> <div>

94
src/src/styles.scss
View File

@ -2,8 +2,6 @@
@plugin 'tailwindcss-primeui'; @plugin 'tailwindcss-primeui';
@variant dark (&:where(.dark, .dark *)); @variant dark (&:where(.dark, .dark *));
@layer tailwind, primeng;
@layer tailwind { @layer tailwind {
@import "tailwindcss"; @import "tailwindcss";
} }
@ -117,7 +115,7 @@ html {
width: 24px; width: 24px;
} }
.listHover { .list-hover {
.custom-cluster { .custom-cluster {
background-color: red; background-color: red;
} }
@ -130,13 +128,14 @@ html {
width: 2px; width: 2px;
background-color: #999; background-color: #999;
} }
@media print { @media print {
.table-colored-resizer .p-datatable-column-resizer { .table-colored-resizer .p-datatable-column-resizer {
background-color: transparent; background-color: transparent;
} }
} }
@keyframes slideYcenteredX { @keyframes slide-y-centered-x {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateX(-50%) translateY(100px); transform: translateX(-50%) translateY(100px);
@ -147,15 +146,29 @@ html {
} }
} }
@keyframes slide-x { .place-box-dialog {
0% { animation: slide-y-centered-x 0.3s both;
opacity: 0; z-index: 999;
transform: translateX(-20px); 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 { &-content {
animation: slide-x 0.3s both; position: relative;
padding: 2rem;
border-radius: 8px 8px 0 0;
width: 100%;
}
} }
.custom-button { .custom-button {
@ -208,27 +221,40 @@ html {
} }
} }
.place-box-dialog { @keyframes slide-x {
animation: slideYcenteredX 0.3s both; 0% {
z-index: 999; opacity: 0;
min-height: 100px; transform: translateX(-20px);
max-height: 800px; }
width: 95%; 100% {
max-width: 1200px; opacity: 1;
position: fixed; transform: translateX(0);
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;
&-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;
}