feat: update event card layout and accessibility features

ngsw-config.json

@@ -23,10 +23,25 @@
         "files": [
           "/assets/**",
           "/fonts/**",
-          "/*.(svg|cur|jpg|jpeg|png|webp|gif|otf|ttf|woff|woff2)"
+          "/*.(svg|cur|otf|ttf|woff|woff2)"
         ]
       }
     },
+    {
+      "name": "images",
+      "installMode": "lazy",
+      "updateMode": "lazy",
+      "resources": {
+        "files": ["/assets/images/**"],
+        "urls": ["/*.(png|jpg|jpeg|webp|gif)"]
+      },
+      "cacheConfig": {
+        "strategy": "performance",
+        "maxSize": 200,
+        "maxAge": "30d",
+        "timeout": "5s"
+      }
+    },
     {
       "name": "translations",
       "installMode": "prefetch",

public/manifest.webmanifest

@@ -1,7 +1,7 @@
 {
   "name": "1200 Jahre Radolfzell",
   "short_name": "Radolfzell",
-  "theme_color": "#3b4ea3",
+  "theme_color": "#c70d56",
   "background_color": "#fafafa",
   "display": "standalone",
   "scope": "./",

src/app/app.component.html

@@ -17,7 +17,8 @@
     <app-footer></app-footer>
   </footer>
   <app-bottom-nav></app-bottom-nav>
-
+  <app-pwa-install-banner></app-pwa-install-banner>
+
   <!-- Update-Benachrichtigung -->
   @if (updateAvailable) {
     <div

src/app/app.component.ts

@@ -10,10 +10,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { BottomNavComponent } from './component/bottom-nav/bottom-nav.component'
 import { UpdateService } from './pwa/update.service'
 import { SnackBarComponent } from './component/snack-bar/snack-bar.component'
+import { PwaInstallBannerComponent } from './component/pwa-install-banner/pwa-install-banner.component'
 
 @Component({
   selector: 'app-root',
-  imports: [TranslateModule, RouterOutlet, HeaderComponent, FooterComponent, BottomNavComponent, SnackBarComponent],
+  imports: [TranslateModule, RouterOutlet, HeaderComponent, FooterComponent, BottomNavComponent, SnackBarComponent, PwaInstallBannerComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/component/event-card-list/event-card-list.component.html

@@ -4,7 +4,7 @@
   <!-- Horizontaler Scroll-Container für Events -->
   @if ((sharedStateService.getSizeOfScreen() | async) === screenSize.SMALL) {
     <div class="scrollbar-hide card-snap mb-5 w-full snap-x snap-mandatory overflow-x-scroll scroll-smooth">
-      <div class="event-row flex min-w-max gap-4 px-2">
+      <div class="event-row flex min-w-max items-stretch gap-4 px-2">
         @for (event of events; track event.id?.id) {
           <app-event-card
             class="relative w-[calc(100vw-6rem)] max-w-[320px] snap-center"

src/app/component/event-card/event-card.component.html

@@ -1,63 +1,63 @@
-<a   
-  [routerLink]="['/event', event?.id?.id]"
-  [queryParams]="{ filterQuery: filterQuery ? filterQuery : null }"
-  class="card">
-<div
-  class="justify-top card aspect-[1/1]"
-  [attr.aria-label]="ariaLabel"
-  role="article"
-  [attr.aria-labelledby]="titleId"> 
-  <div class="relative h-[50%] w-full overflow-hidden bg-gray-100">
-    <div class="pointer-events-none absolute top-2 left-2 z-10">
-      <app-event-type-pill aria-hidden="true" class="text-xs" [event]="event" [disabled]="true"></app-event-type-pill>
-    </div>
-    @if (event?.['isPast']) {
-      <ul aria-hidden="true" class="pill-list pointer-events-none absolute top-2 right-2 z-10">
-        <li class="border-0 bg-gray-700 text-xs text-white">
-          {{ 'EVENTS.PAST_EVENT' | translate }}
-        </li>
-      </ul>
-    }
-    @if (mediaUrl) {
-      <img
-        [src]="mediaUrl"
-        [alt]="event?.name ? ('event-card.image-alt' | translate: { name: event?.name }) : ('event-card.placeholder-alt' | translate)"
-        class="h-full w-full object-cover"
-        [attr.loading]="'lazy'"
-      />
-    } @else {
-      <div class="flex h-full w-full items-center justify-center bg-gray-100">
+<a [routerLink]="['/event', event?.id?.id]" class="card">
+  <div class="justify-top card aspect-[1/1]" [attr.aria-label]="ariaLabel" role="article" [attr.aria-labelledby]="titleId">
+    <div class="relative lg:h-[40%] h-[50%] w-full overflow-hidden bg-gray-100">
+      <div class="pointer-events-none absolute top-2 left-2 z-10">
+        <app-event-type-pill aria-hidden="true" class="text-xs" [event]="event" [disabled]="true"></app-event-type-pill>
+      </div>
+      @if (event?.['isPast']) {
+        <ul aria-hidden="true" class="pill-list pointer-events-none absolute top-2 right-2 z-10">
+          <li class="border-0 bg-gray-700 text-xs text-white">
+            {{ 'EVENTS.PAST_EVENT' | translate }}
+          </li>
+        </ul>
+      }
+      @if (mediaUrl) {
         <img
-          src="/Logo_Radolfzell1200_Geschtern.Heit.Morge.jpg"
-          [alt]="'event-card.logo-alt' | translate"
-          class="h-3/4 w-3/4 object-contain opacity-30"
+          [src]="mediaUrl"
+          [alt]="
+            event?.name ? ('event-card.image-alt' | translate: { name: event?.name }) : ('event-card.placeholder-alt' | translate)
+          "
+          class="h-full w-full object-cover"
+          [attr.loading]="'lazy'"
         />
-      </div>
-    }
-  </div>
-  <div class="h-[50%] w-full pr-4 pl-4 text-left">
-    <div class="h-[40%] pt-1">
-      <h3 class="line-clamp-2 truncate text-base leading-tight font-semibold text-gray-800" [id]="titleId">
-        {{ event?.name || 'Event Name' }}
-      </h3>
+      } @else {
+        <div class="flex h-full w-full items-center justify-center bg-gray-100">
+          <img
+            src="/Logo_Radolfzell1200_Geschtern.Heit.Morge.jpg"
+            [alt]="'event-card.logo-alt' | translate"
+            class="h-3/4 w-3/4 object-contain opacity-30"
+          />
+        </div>
+      }
     </div>
-    <div class="h-[60%] w-full pb-2">
-      <div class="flex h-[35%] text-gray-700">
-        <app-icon name="calendar" class="mr-2 h-4 w-4" aria-hidden="true"></app-icon>
-        <span class="truncate text-sm">
-          {{ event?.date_start || null | dateTimeRange: event?.date_end || null }}
-        </span>
+    <div class="lg:h-[60%] h-[50%] w-full pr-4 pl-4 text-left">
+      <div class="h-auto pt-1 lg:h-[25%]">
+        <h3 class="line-clamp-2 truncate text-base leading-tight font-semibold text-gray-800" [id]="titleId">
+          {{ event?.name || 'Event Name' }}
+        </h3>
+      </div>
+
+      <div class="mt-auto pt-1 pb-3">
+        <div class="mb-1 flex items-center text-gray-700">
+          <app-icon name="calendar" class="mr-2 h-4 w-4" aria-hidden="true"></app-icon>
+          <span class="truncate text-sm">
+            {{ event?.date_start || null | dateTimeRange: event?.date_end || null }}
+          </span>
+        </div>
+        <div class="flex items-center text-gray-700">
+          <app-icon name="location" class="mr-2 h-4 w-4" aria-hidden="true"></app-icon>
+          <span class="truncate text-sm">{{ location?.name || 'Ort wird bekannt gegeben' }}</span>
+        </div>
       </div>
-      <div class="flex h-[65%] text-gray-700">
-        <app-icon name="location" class="mr-2 h-4 w-4" aria-hidden="true"></app-icon>
-        <span class="truncate text-sm">{{ location?.name || 'Ort wird bekannt gegeben' }}</span>
+      <div class="h-auto overflow-hidden lg:h-[45%]">
+        <app-event-topic-pill-list [event]="event" [eventCard]="true" />
       </div>
     </div>
+
+    <app-favorite-button
+      [eventId]="event?.id"
+      [isSmall]="true"
+      class="absolute top-2 right-2 rounded-full bg-white shadow-md transition-colors"
+    ></app-favorite-button>
   </div>
-  <app-favorite-button
-    [eventId]="event?.id"
-    [isSmall]="true"
-    class="absolute top-2 right-2 rounded-full bg-white shadow-md transition-colors"
-  ></app-favorite-button>
-</div>
 </a>

src/app/component/event-card/event-card.component.ts

@@ -15,6 +15,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { IconComponent } from '@app/component/icon/icon.component'
 import { EventTypePillComponent } from '@app/component/event-type-pill/event-type-pill.component'
 import { FavoriteButtonComponent } from '../favorite-button/favorite-button.component'
+import { EventTopicPillListComponent } from "../event-topic-pill-list/event-topic-pill-list.component";
 
 @Component({
   selector: 'app-event-card',
@@ -27,13 +28,13 @@ import { FavoriteButtonComponent } from '../favorite-button/favorite-button.comp
     IconComponent,
     EventTypePillComponent,
     FavoriteButtonComponent,
-  ],
+    EventTopicPillListComponent
+],
   templateUrl: './event-card.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EventCardComponent implements OnInit, OnDestroy, OnChanges {
   @Input() event: Event | null = null
-  @Input() filterQuery?: string | null = null
 
   location: Location | null = null
   eventType: EventType | null = null

src/app/component/event-topic-pill-list/event-topic-pill-list.component.html

@@ -8,6 +8,7 @@
         'background-color': pill.color || '#F3F4F6',
         'color': pill.textColor,
         'border-color': pill.color ? 'transparent' : '#E5E7EB',
+        'font-size': fontsize,
       }"
     >
       <a [routerLink]="['/kategorie', pill.slug]" class="max-w-[12rem] truncate focus-visible:outline-none">{{ pill.label }}</a>
@@ -23,6 +24,7 @@
           'background-color': accessibilityColor || '#F3F4F6',
           'color': accessibilityTextColor,
           'border-color': accessibilityColor ? 'transparent' : '#E5E7EB',
+          'font-size': fontsize,
         }"
       >
         <span class="max-w-[12rem] truncate">{{'COMMON.ACCESSIBILITY.WHEELCHAIR' | translate}}</span>
@@ -37,6 +39,7 @@
           'background-color': accessibilityColor || '#F3F4F6',
           'color': accessibilityTextColor,
           'border-color': accessibilityColor ? 'transparent' : '#E5E7EB',
+          'font-size': fontsize,
         }"
       >
         <span class="max-w-[12rem] truncate">{{'COMMON.ACCESSIBILITY.SEEING' | translate}}</span>
@@ -51,6 +54,7 @@
           'background-color': accessibilityColor || '#F3F4F6',
           'color': accessibilityTextColor,
           'border-color': accessibilityColor ? 'transparent' : '#E5E7EB',
+          'font-size': fontsize,
         }"
       >
         <span class="max-w-[12rem] truncate">{{'COMMON.ACCESSIBILITY.HEARING' | translate}}</span>

src/app/component/event-topic-pill-list/event-topic-pill-list.component.ts

@@ -21,8 +21,10 @@ interface Pill {
 })
 export class EventTopicPillListComponent implements OnChanges {
   @Input() event: Event | null = null
+  @Input() eventCard? = false 
 
   pills: Pill[] = []
+  fontsize = '20px'
 
   accessibility = false
   accessibilityLable = ''
@@ -36,6 +38,7 @@ export class EventTopicPillListComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['event']) {
       this.buildPills()
+      this.fontsize = this.eventCard ? '0.75rem' : ''
     }
   }
 

src/app/component/footer/footer.component.html

@@ -1,5 +1,5 @@
-<div class="bg-kultur flex min-h-[80px] w-full flex-col items-center justify-between px-6 pb-[80px] md:flex-row md:items-end">
-  <nav class="flex gap-5 py-4" aria-label="{{ 'NAV.FOOTER' | translate }}">
+<div role="contentinfo" class="bg-kultur flex min-h-[80px] w-full flex-col items-center justify-between px-6 pb-[80px] md:flex-row md:items-end">
+  <nav class="flex flex-col gap-3 py-4 md:flex-row md:gap-5" aria-label="{{ 'NAV.FOOTER' | translate }}">
     <a
       href="https://www.radolfzell.de/impressum"
       rel="external noopener noreferrer"
@@ -10,7 +10,7 @@
       {{ 'footer.impressum' | translate }}
       <span class="sr-only">({{ 'COMMON.EXTERNAL_LINK' | translate }})</span>
     </a>
-    <span class="text-gray-400">|</span>
+    <span class="hidden text-gray-400 md:inline">|</span>
     <a
       href="https://www.radolfzell.de/datenschutz"
       rel="external noopener noreferrer"
@@ -21,15 +21,15 @@
       {{ 'footer.datenschutz' | translate }}
       <span class="sr-only">({{ 'COMMON.EXTERNAL_LINK' | translate }})</span>
     </a>
-    <span class="text-gray-400">|</span>
+    <span class="hidden text-gray-400 md:inline">|</span>
     <a
       [routerLink]="['/barrierefreiheit']"
       routerLinkActive="router-link-active"
       ariaCurrentWhenActive="page"
       class="hover:underline focus-visible:ring-2 focus-visible:ring-[#3b4ea3] focus-visible:outline-none"
       >{{ 'footer.accessibility' | translate }}</a
     >
-    <span class="text-gray-400">|</span>
+    <span class="hidden text-gray-400 md:inline">|</span>
     <a
       href="https://www.instagram.com/Radolfzell1200"
       rel="external noopener noreferrer"
@@ -49,4 +49,4 @@
       <img src="sybit-logo.svg" alt="SYBIT Sponsoring Logo" class="h-6 max-w-[120px] object-contain" />
     </div>
   </a>
-</div>
+</div>

src/app/component/go-back-button/go-back-button.component.ts

@@ -16,11 +16,6 @@ export class GoBackComponent {
   @Input() goBackParams?: string | null = null
 
   goBack(): void {
-    if (this.goBackParams) {
-      this.router.navigate(['/all-events'], { queryParams: { filterQuery: this.goBackParams } })
-      return
-    }
-
     this.location.back()
   }
 }

src/app/component/icon/icons.provider.ts

@@ -34,6 +34,7 @@ function registerIcons(registry: IconRegistryService) {
   register('search', '/svg/search.svg')
   register('view_cozy', '/svg/view_cozy.svg')
   register('more', '/svg/more.svg')
+  register('add', '/svg/add.svg')
   register('create_event', '/svg/add.svg')
 
   // More-Menü Icons

src/app/component/pwa-install-banner/pwa-install-banner.component.html

@@ -0,0 +1,47 @@
+@if (show()) {
+  <div
+    class="fixed right-0 bottom-24 left-0 z-[9999] m-4 p-2 flex items-center justify-between rounded-2xl bg-[#3b4ea3]  text-white shadow-2xl backdrop-blur-xl transition-all duration-500 hover:opacity-100 md:top-4 md:mx-20 md:bottom-auto md:shadow-lg"
+    [class.opacity-0]="closing()"
+    [class.translate-y-6]="closing()"
+    [class.md\:-translate-y-6]="closing()"
+    [class.translate-y-4]="!closing()"
+    [class.md\:translate-y-\[-10px\]]="!closing()"
+  >
+    @switch (platform()) {
+      @case ('ios') {
+        <div class="flex items-center gap-3">
+          <app-icon name="share" class="h-6 w-6" />
+          <div>
+            <span class="text-lg font-semibold">{{ 'PWA.INSTALL.IOS_TITLE' | translate }}</span>
+            <p class="text-sm">{{ 'PWA.INSTALL.IOS_DESC' | translate }}</p>
+          </div>
+        </div>
+      }
+      @case ('android') {
+        <div class="flex items-center gap-3">
+          <app-icon name="add" class="h-6 w-6" />
+          <span class="text-lg font-semibold">{{ 'PWA.INSTALL.ANDROID_TITLE' | translate }}</span>
+        </div>
+        <button (click)="install()" class="mr-10 rounded-lg bg-white px-4 py-2 font-semibold text-blue-700 transition hover:bg-white/50">
+          {{ 'PWA.INSTALL.BUTTON' | translate }}
+        </button>
+      }
+      @default {
+        <div class="flex items-center gap-3">
+          <app-icon name="info-circle" class="h-6 w-6" />
+          <span class="text-lg font-semibold">{{ 'PWA.INSTALL.DESKTOP_TITLE' | translate }}</span>
+        </div>
+        <button (click)="install()" class="mr-10 rounded-lg bg-white px-4 py-2 font-semibold text-blue-700 transition hover:bg-white/50">
+          {{ 'PWA.INSTALL.BUTTON' | translate }}
+        </button>
+      }
+    }
+    <button
+      (click)="dismiss()"
+      aria-label="{{ 'PWA.INSTALL.CLOSE' | translate }}"
+      class="absolute top-2 right-2 w-6 h-6 rounded-full bg-white/30 p-1 text-white shadow-md backdrop-blur-md transition hover:bg-white/50"
+    >
+      <app-icon name="close" class="h-4 w-4" />
+    </button>
+  </div>
+}

src/app/component/pwa-install-banner/pwa-install-banner.component.scss

@@ -0,0 +1,3 @@
+:host {
+  @apply block;
+}