From 238e279435758a8202ffbed936b2d3a14ae2a414 Mon Sep 17 00:00:00 2001 From: Lobo Date: Sun, 18 Jan 2026 10:55:12 +0100 Subject: [PATCH] Fixed problem with project dialog --- angular.json | 2 +- .../dialog/project-dialog.component.html | 4 +- .../dialog/project-dialog.component.scss | 23 ++++++---- .../dialog/project-dialog.component.ts | 12 ++++- src/app/pages/projects/projects.component.ts | 45 +++++++++++++------ src/assets/i18n/de.json | 1 - src/assets/i18n/en.json | 1 - 7 files changed, 58 insertions(+), 30 deletions(-) diff --git a/angular.json b/angular.json index c39ce7d..779fd7c 100644 --- a/angular.json +++ b/angular.json @@ -46,7 +46,7 @@ "budgets": [ { "type": "initial", - "maximumWarning": "500kB", + "maximumWarning": "1MB", "maximumError": "1MB" }, { diff --git a/src/app/pages/projects/dialog/project-dialog.component.html b/src/app/pages/projects/dialog/project-dialog.component.html index 92d39f4..5559830 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.html +++ b/src/app/pages/projects/dialog/project-dialog.component.html @@ -1,5 +1,5 @@

{{ project.title | translate }}

- +

{{ project.introduction | translate }}

    @@ -28,7 +28,7 @@ /> @if (img.source) {
    - {{ 'PROJECTS.IMAGE_SOURCE' | translate }}: {{ img.source }} + {{ img.source }}
    } diff --git a/src/app/pages/projects/dialog/project-dialog.component.scss b/src/app/pages/projects/dialog/project-dialog.component.scss index e0b09e7..30f16d9 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.scss +++ b/src/app/pages/projects/dialog/project-dialog.component.scss @@ -18,7 +18,6 @@ } .my-swiper { - background-color: #222; border-radius: 12px; } @@ -26,24 +25,30 @@ bottom: 12px; } +swiper-slide { + border-radius: 12px; + overflow: hidden; + display: flex; + flex-direction: column; + background-color: #222; +} + .slide-img { width: 100%; height: auto; max-height: 512px !important; object-fit: contain; - border-radius: 12px; display: block; + flex-shrink: 0; } .slide-source { font-size: 0.75rem; - color: white; - background: rgba(0,0,0,.5); - padding: 0.25rem 0.5rem; - border-radius: 4px; - position: absolute; - bottom: 8px; - right: 8px; + color: #aaa; + background: #2a2a2a; + padding: 0.5rem; + text-align: right; + border-top: 1px solid #444; } ul { diff --git a/src/app/pages/projects/dialog/project-dialog.component.ts b/src/app/pages/projects/dialog/project-dialog.component.ts index 8a7f561..dcc95d0 100644 --- a/src/app/pages/projects/dialog/project-dialog.component.ts +++ b/src/app/pages/projects/dialog/project-dialog.component.ts @@ -1,4 +1,4 @@ -import {Component, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {AfterViewInit, Component, inject, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef} from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogActions, @@ -30,6 +30,14 @@ import {MatButton} from '@angular/material/button'; ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) -export class ProjectDialogComponent { +export class ProjectDialogComponent implements AfterViewInit { project: Projects = inject(MAT_DIALOG_DATA); + + @ViewChild('dialogContent') dialogContent: ElementRef | undefined; + + ngAfterViewInit(): void { + if (this.dialogContent) { + this.dialogContent.nativeElement.scrollTop = 0; + } + } } diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts index 3de7724..48cc346 100644 --- a/src/app/pages/projects/projects.component.ts +++ b/src/app/pages/projects/projects.component.ts @@ -1,14 +1,14 @@ -import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {MatCardModule} from '@angular/material/card'; -import {MatChipsModule} from '@angular/material/chips'; -import {MatIcon} from '@angular/material/icon'; -import {TranslatePipe, TranslateService} from '@ngx-translate/core'; -import {ActivatedRoute} from '@angular/router'; -import {AssetsConstants} from '../../constants/AssetsConstants'; -import {MatDialog} from '@angular/material/dialog'; -import {MatButtonModule} from '@angular/material/button'; -import {ProjectDialogComponent} from './dialog/project-dialog.component'; - +import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {Subscription} from "rxjs"; +import {MatCardModule} from "@angular/material/card"; +import {MatChipsModule} from "@angular/material/chips"; +import {MatIcon} from "@angular/material/icon"; +import {TranslatePipe} from "@ngx-translate/core"; +import {MatButtonModule} from "@angular/material/button"; +import {MatDialog} from "@angular/material/dialog"; +import {ProjectDialogComponent} from "./dialog/project-dialog.component"; +import {AssetsConstants} from "../../constants/AssetsConstants"; export interface Projects { identifier: string; @@ -32,6 +32,7 @@ export interface Projects { @Component({ selector: 'app-projects', + standalone: true, imports: [ MatCardModule, MatChipsModule, @@ -43,10 +44,12 @@ export interface Projects { styleUrl: './projects.component.scss', schemas: [CUSTOM_ELEMENTS_SCHEMA], }) -export class ProjectsComponent { +export class ProjectsComponent implements OnInit, OnDestroy { private readonly route = inject(ActivatedRoute); private readonly dialog = inject(MatDialog); + private readonly router = inject(Router); + private queryParamSub: Subscription | undefined; allProjects: Projects[] = [ { @@ -174,8 +177,20 @@ export class ProjectsComponent { featuredProject = computed(() => this.allProjects.find(p => p.isFeatured)); otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured)); - constructor() { - this.route.queryParamMap.subscribe(params => { + ngOnInit(): void { + window.scrollTo({ top: 0, behavior: 'smooth' }); + setTimeout(() =>{ this.dialogOpenFunction(); },10); + } + + ngOnDestroy(): void { + if (this.queryParamSub) { + this.queryParamSub.unsubscribe(); + } + } + + private dialogOpenFunction() : void + { + this.queryParamSub = this.route.queryParamMap.subscribe(params => { const projectIdentifier = params.get('project'); if (projectIdentifier) { const project = this.allProjects.find(p => p.identifier === projectIdentifier); @@ -191,6 +206,8 @@ export class ProjectsComponent { data: project, width: '90vw', maxWidth: '900px', + autoFocus: false, + restoreFocus: false }); } } diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json index 8edb1e2..efc920a 100644 --- a/src/assets/i18n/de.json +++ b/src/assets/i18n/de.json @@ -241,7 +241,6 @@ "READ_MORE": "Mehr erfahren", "LINK_TO_PROJECT": "Zum Projekt", "CLOSE": "Schließen", - "IMAGE_SOURCE": "Bildquelle", "PLAYGROUND": { "TITLE": "Playground Website", "SHORT_DESCRIPTION": "Hier geht es um diese Webseite.", diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 3297405..81d2fb2 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -241,7 +241,6 @@ "READ_MORE": "Read More", "LINK_TO_PROJECT": "To the project", "CLOSE": "Close", - "IMAGE_SOURCE": "Image source", "PLAYGROUND": { "TITLE": "Playground Website", "SHORT_DESCRIPTION": "This is about this website.",