From bd3210cacb8ec6074a3fb9f5a8e14d4e92d4ba8b Mon Sep 17 00:00:00 2001 From: Lukas Merz Date: Thu, 16 Jan 2025 09:36:12 +0100 Subject: [PATCH] GB3-1685: Make discover maps generic as well --- .../link-grid-list-item.component.html | 47 +++++++++------ .../link-grid-list-item.component.scss | 24 ++++++-- .../link-grid-list-item.component.ts | 18 ++++++ .../discover-maps.component.html | 39 +++++------- .../discover-maps.component.scss | 60 ------------------- .../news-feed/news-feed.component.html | 2 +- 6 files changed, 83 insertions(+), 107 deletions(-) diff --git a/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.html b/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.html index e208a2938..c1a6b2ceb 100644 --- a/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.html +++ b/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.html @@ -1,19 +1,32 @@ -
  • - -
    -

    - @if (this.entryType) { - {{ this.entryType }} - } - @if (this.entryDate) { - {{ this.entryDate }} - } -

    +
  • + @if (this.internalLink) { + + + + } @else { + + + + } +
    • -

    {{ this.title }}

    -

    - -

    + + @if (this.imageUrl && this.size === 'large') { + + } +
    +
    + @if (this.entryType) { + {{ this.entryType }} + } + @if (this.entryDate) { + {{ this.entryDate }} + }
    - - + +
    {{ this.title }}
    +
    + +
    +
    +     diff --git a/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.scss b/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.scss index 32b983e00..6d48d6c1b 100644 --- a/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.scss +++ b/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.scss @@ -5,15 +5,20 @@ /// The border width around the link elements $border-width: 8px; // todo: make variable -/// Number of entries to be displayed -$number-of-entries: 3; - .link-grid-list-item { + --number-of-entries: 3; + --height: 310px; + + &--large { + --number-of-entries: 2; + --height: 649px; + } + @include collapsing-flexbox-list.list__item( $border-width: $border-width, $max-content-width: ktzh-variables.$zh-layout-max-content-width, - $number-of-entries: $number-of-entries, - $height: 310px + $number-of-entries: var(--number-of-entries), + $height: var(--height) ); .link-grid-list-item__wrapper { @@ -22,8 +27,17 @@ $number-of-entries: 3; color: ktzh-variables.$zh-black100 !important; } } + @include collapsing-flexbox-list.list__item__wrapper(ktzh-variables.$zh-white); + .link-grid-list-item__wrapper__image { + display: block; + width: 100%; + height: 327px; + object-fit: cover; + object-position: center; + } + .link-grid-list-item__wrapper__content { padding: 40px; diff --git a/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.ts b/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.ts index bb935c939..17ba8ebf1 100644 --- a/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.ts +++ b/src/app/shared/components/lists/link-grid-list/link-grid-list-item/link-grid-list-item.component.ts @@ -1,13 +1,31 @@ import {Component, Input} from '@angular/core'; +import {MainPage} from '../../../../enums/main-page.enum'; +import {RouterLink} from '@angular/router'; +import {NgTemplateOutlet} from '@angular/common'; +/** + * Can be used for internal and external links; if "internalLink" is set, "url" is ignored and a RouterLink is used. + * + * "imageUrl" is used as a hero image; it is only applicable if size is "large". + * + * If size is "small", a row contains up to 3 elements; if size is "large", a row contains up to 2 elements. + * + * EntryType and EntryDate are optional and displayed as smaller introductory text above the title; entryType is displayed in bold. + * + */ @Component({ selector: 'link-grid-list-item', templateUrl: './link-grid-list-item.component.html', styleUrls: ['./link-grid-list-item.component.scss'], + imports: [RouterLink, NgTemplateOutlet], }) export class LinkGridListItemComponent { @Input() public title!: string; @Input() public url!: string; + @Input() public internalLink?: MainPage; + @Input() public internalQueryParams?: Record; @Input() public entryType?: string; @Input() public entryDate?: string; + @Input() public size: 'small' | 'large' = 'small'; + @Input() public imageUrl?: string; } diff --git a/src/app/start-page/components/discover-maps/discover-maps.component.html b/src/app/start-page/components/discover-maps/discover-maps.component.html index c1a7a0c38..23988f992 100644 --- a/src/app/start-page/components/discover-maps/discover-maps.component.html +++ b/src/app/start-page/components/discover-maps/discover-maps.component.html @@ -3,28 +3,19 @@ loadingCompletedText="Fehler beim Laden der Karten zum Entdecken." loadingText="Lade neue Karten zum Entdecken..." > -
    -
      -
    • -
      -
      - -
      -

      - {{ discoverMapsEntry.title }} -

      -

      {{ discoverMapsEntry.description }}

      - Karte öffnen -
      -
      -
      -
      • -
    -
    + + @for (discoverMapsEntry of this.discoverMapsItems; track $index) { + +

    + {{ discoverMapsEntry.description }} +

    +     + } +

    Aktuell gibt es keine Empfehlungen.

    diff --git a/src/app/start-page/components/discover-maps/discover-maps.component.scss b/src/app/start-page/components/discover-maps/discover-maps.component.scss index 59067b7b4..e69de29bb 100644 --- a/src/app/start-page/components/discover-maps/discover-maps.component.scss +++ b/src/app/start-page/components/discover-maps/discover-maps.component.scss @@ -1,60 +0,0 @@ -@use 'functions/helper.function' as functions; -@use 'mixins/helpers.mixin' as mixins; -@use 'variables/ktzh-design-variables' as ktzh-variables; -@use 'mixins/collapsing-flexbox-list.mixin' as collapsing-flexbox-list; - -/// The border width around the link elements -$border-width: 8px; - -/// Number of entries to be displayed -$number-of-entries: 2; - -.discover-maps { - width: 100%; - - .discover-maps__list { - @include collapsing-flexbox-list.list($border-width); - - .discover-maps__list__item { - @include collapsing-flexbox-list.list__item( - $border-width: $border-width, - $max-content-width: ktzh-variables.$zh-layout-max-content-width, - $number-of-entries: $number-of-entries, - $height: 649px - ); - - .discover-maps__list__item__wrapper { - @include collapsing-flexbox-list.list__item__wrapper(ktzh-variables.$zh-white); - - &:hover { - & .discover-maps__list__item__wrapper__content__container__title { - color: ktzh-variables.$zh-black100 !important; // override title color on hover - } - } - - .discover-maps__list__item__wrapper__content { - .discover-maps__list__item__wrapper__content__image { - display: block; - width: 100%; - height: 327px; - object-fit: cover; - object-position: center; - } - - .discover-maps__list__item__wrapper__content__container { - padding: 40px; - - .discover-maps__list__item__wrapper__content__container__title { - @include mixins.multiline-ellipsis(2); - color: ktzh-variables.$zh-blue; - } - - .discover-maps__list__item__wrapper__content__container__text { - @include mixins.multiline-ellipsis(6); - } - } - } - } - } - } -} diff --git a/src/app/start-page/components/news-feed/news-feed.component.html b/src/app/start-page/components/news-feed/news-feed.component.html index b657b8f0c..a95e81727 100644 --- a/src/app/start-page/components/news-feed/news-feed.component.html +++ b/src/app/start-page/components/news-feed/news-feed.component.html @@ -6,7 +6,7 @@ > @for (newsEntry of this.news; track $index) { - + {{ newsEntry.teaserText }} }