diff --git a/src/app/components/observation/observation/observation.component.css b/src/app/components/observation/observation/observation.component.css index 7af4cdfed..682c69e32 100644 --- a/src/app/components/observation/observation/observation.component.css +++ b/src/app/components/observation/observation/observation.component.css @@ -2,7 +2,6 @@ display: block; max-width: var(--desktop-max-width); margin: 0 auto; - margin-top: 16px; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /** diff --git a/src/app/pages/observation-list/image-list/image-list.component.css b/src/app/pages/observation-list/image-list/image-list.component.css index c522a678b..31bf4273e 100644 --- a/src/app/pages/observation-list/image-list/image-list.component.css +++ b/src/app/pages/observation-list/image-list/image-list.component.css @@ -26,6 +26,11 @@ ion-content::part(scroll) { padding-right: 8px; } +.grid > :last-child { + padding-bottom: 32px; + grid-column: 1 / -1; +} + app-grid-image { width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); diff --git a/src/app/pages/observation-list/image-list/image-list.component.html b/src/app/pages/observation-list/image-list/image-list.component.html index 6a46ad71c..a855e04e3 100644 --- a/src/app/pages/observation-list/image-list/image-list.component.html +++ b/src/app/pages/observation-list/image-list/image-list.component.html @@ -26,9 +26,13 @@ } } + + + + - - - - diff --git a/src/app/pages/observation-list/image-list/image-list.component.ts b/src/app/pages/observation-list/image-list/image-list.component.ts index 2ed362057..c48962b6e 100644 --- a/src/app/pages/observation-list/image-list/image-list.component.ts +++ b/src/app/pages/observation-list/image-list/image-list.component.ts @@ -21,7 +21,7 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core'; import { UpdateObservationsService } from 'src/app/modules/side-menu/components/update-observations/update-observations.service'; import { ObservationImageCarouselComponent } from 'src/app/components/observation/observation-image-carousel/observation-image-carousel.component'; import { AttachmentViewModel, SearchService } from 'src/app/modules/common-regobs-api'; - +import { ListEndInfoComponent } from '../list-end-info/list-end-info.component'; /** * Bildesøk */ @@ -38,6 +38,7 @@ import { AttachmentViewModel, SearchService } from 'src/app/modules/common-regob ListControlsComponent, GridImageComponent, TranslatePipe, + ListEndInfoComponent, ], templateUrl: './image-list.component.html', styleUrl: './image-list.component.css', @@ -76,7 +77,7 @@ export class ImageListComponent { isLoading = toSignal(this.searchHandler.isFetching$, { initialValue: false }); maxItemsFetched = toSignal(this.searchHandler.maxItemsFetched$, { initialValue: false }); error = toSignal(this.searchHandler.error$, { initialValue: { hasError: false } }); - + count = this.searchHandler.count.asReadonly(); constructor() { this.updateObservationsService.refreshRequested$?.pipe(takeUntilDestroyed()).subscribe(() => { this.refresh(); // oppfrisk sida når bruker trykker på oppfrisk-knappen i menyen diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.html b/src/app/pages/observation-list/list-end-info/list-end-info.component.html new file mode 100644 index 000000000..78586013b --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.html @@ -0,0 +1,13 @@ +@let endText = + maxItemsFetched + ? "OBSERVATION_LIST.MAX_COUNT_REACHED" + : registrationsLength && registrationsLength <= registrationsCount + ? "OBSERVATION_LIST.NO_MORE_OBS_IN_VIEW" + : ""; + +@if (endText) { + + + {{ endText | translate }} + +} diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.scss b/src/app/pages/observation-list/list-end-info/list-end-info.component.scss new file mode 100644 index 000000000..b1e730360 --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.scss @@ -0,0 +1,15 @@ +.list-end-info { + margin-top: 32px; + display: flex; + gap: 4px; + align-items: flex-start; + align-self: center; + justify-content: center; + color: var(--ion-background-color-step-850); + ion-icon { + font-size: 1.5rem; + } + p { + margin: 0; + } +} diff --git a/src/app/pages/observation-list/list-end-info/list-end-info.component.ts b/src/app/pages/observation-list/list-end-info/list-end-info.component.ts new file mode 100644 index 000000000..4f0c87cc7 --- /dev/null +++ b/src/app/pages/observation-list/list-end-info/list-end-info.component.ts @@ -0,0 +1,23 @@ +import { Component, Input } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; +import { TranslatePipe } from '@ngx-translate/core'; +import { addIcons } from 'ionicons'; +import { informationCircleOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-list-end-info', + templateUrl: './list-end-info.component.html', + styleUrls: ['./list-end-info.component.scss'], + imports: [IonIcon, TranslatePipe], +}) +/** + * Viser informasjonstekster i bunnen av observasjonslister + */ +export class ListEndInfoComponent { + @Input() maxItemsFetched = false; + @Input() registrationsLength = 0; + @Input() registrationsCount = 0; + constructor() { + addIcons({ informationCircleOutline }); + } +} diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.css b/src/app/pages/observation-list/observation-list/observation-list.component.css index cf13da887..66d312749 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.css +++ b/src/app/pages/observation-list/observation-list/observation-list.component.css @@ -12,10 +12,23 @@ .list { height: 100%; width: 100%; + display: flex; + flex-direction: column; + gap: 1rem; max-width: var(--desktop-max-width); margin: 0 auto; } +.list > :last-child { + padding-bottom: 32px; +} + +@media screen and (max-width: 600px) { + .list > :last-child { + padding-bottom: 64px; + } +} + ion-content { --padding-start: 8px; --padding-end: 8px; diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.html b/src/app/pages/observation-list/observation-list/observation-list.component.html index f61e0ee15..c695ed2b7 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.html +++ b/src/app/pages/observation-list/observation-list/observation-list.component.html @@ -27,5 +27,10 @@ + diff --git a/src/app/pages/observation-list/observation-list/observation-list.component.ts b/src/app/pages/observation-list/observation-list/observation-list.component.ts index e0f3d81d2..6f12e4798 100644 --- a/src/app/pages/observation-list/observation-list/observation-list.component.ts +++ b/src/app/pages/observation-list/observation-list/observation-list.component.ts @@ -18,6 +18,7 @@ import { ListControlsComponent } from '../list-controls/list-controls.component' import { TranslatePipe } from '@ngx-translate/core'; import { BreakpointService } from 'src/app/core/services/breakpoint.service'; import { UpdateObservationsService } from 'src/app/modules/side-menu/components/update-observations/update-observations.service'; +import { ListEndInfoComponent } from '../list-end-info/list-end-info.component'; @Component({ selector: 'app-observation-list', @@ -32,6 +33,7 @@ import { UpdateObservationsService } from 'src/app/modules/side-menu/components/ EmptyStateComponent, ListControlsComponent, TranslatePipe, + ListEndInfoComponent, ], templateUrl: './observation-list.component.html', styleUrl: './observation-list.component.css', diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index c2655a4c0..965186571 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -290,8 +290,8 @@ "FORMS": "Forms", "IMAGES_DESCRIPTION": "Shows all images from all filtered observations.", "LOADING": "Loading observations", - "MAX_COUNT_REACHED_HEADER": "No more observations", - "MAX_COUNT_REACHED_TEXT": "We show max {{ maxCount }} observations here. If you didn't find what you looked for you may try to zoom in or narrow the period you want to see observations from.", + "MAX_COUNT_REACHED": "The list can only show 100 observations, try changing the map area or filter to limit.", + "NO_MORE_OBS_IN_VIEW": "Try changing the map area or filter to see more observations.", "NO_IMAGES": "No images", "NO_IMAGES_TEXT": "There are no images found in the map section, try to change the view or expand the period you want to see observations from", "NO_OBSERVATIONS": "No observations", diff --git a/src/assets/i18n/nb.json b/src/assets/i18n/nb.json index 00bfa7aa8..576da053f 100644 --- a/src/assets/i18n/nb.json +++ b/src/assets/i18n/nb.json @@ -296,8 +296,8 @@ "FORMS": "Skjemaer", "IMAGES_DESCRIPTION": "Viser alle bilder fra alle filtrerte observasjoner.", "LOADING": "Laster observasjoner", - "MAX_COUNT_REACHED_HEADER": "Ingen flere observasjoner", - "MAX_COUNT_REACHED_TEXT": "Vi viser maks {{ maxCount }} observasjoner her. Hvis du ikke fant det du lette etter, prøv å zoome inn på kartet eller snevre inn perioden du vil se observasjoner fra.", + "MAX_COUNT_REACHED": "Lista kan kun vise 100 observasjoner, prøv å endre kartutsnitt eller filter for å begrense.", + "NO_MORE_OBS_IN_VIEW": "Prøv å endre kartutsnitt eller filter for å se flere observasjoner.", "NO_IMAGES": "Ingen bilder", "NO_IMAGES_TEXT": "Det er ingen observasjoner med bilder i kartutsnittet. Forsøk å endre utsnittet eller utvid perioden du vil se observasjoner fra.", "NO_OBSERVATIONS": "Ingen observasjoner",