Fixed problem with project dialog

angular.json

@@ -46,7 +46,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
+                  "maximumWarning": "1MB",
                   "maximumError": "1MB"
                 },
                 {

src/app/pages/projects/dialog/project-dialog.component.html

@@ -1,5 +1,5 @@
 <h2 mat-dialog-title>{{ project.title | translate }}</h2>
-<mat-dialog-content>
+<mat-dialog-content #dialogContent>
   <p>{{ project.introduction | translate }}</p>
 
   <ul>
@@ -28,7 +28,7 @@
           />
           @if (img.source) {
             <div class="slide-source">
-              {{ 'PROJECTS.IMAGE_SOURCE' | translate }}: {{ img.source }}
+              {{ img.source }}
             </div>
           }
         </swiper-slide>

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;
+  color: #aaa;
-  background: rgba(0,0,0,.5);
+  background: #2a2a2a;
-  padding: 0.25rem 0.5rem;
+  padding: 0.5rem;
-  border-radius: 4px;
+  text-align: right;
-  position: absolute;
+  border-top: 1px solid #444;
-  bottom: 8px;
-  right: 8px;
 }
 
 ul {

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;
+    }
+  }
 }

src/app/pages/projects/projects.component.ts

@@ -1,14 +1,14 @@
-import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit} from '@angular/core';
-import {MatCardModule} from '@angular/material/card';
+import {ActivatedRoute, Router} from '@angular/router';
-import {MatChipsModule} from '@angular/material/chips';
+import {Subscription} from "rxjs";
-import {MatIcon} from '@angular/material/icon';
+import {MatCardModule} from "@angular/material/card";
-import {TranslatePipe, TranslateService} from '@ngx-translate/core';
+import {MatChipsModule} from "@angular/material/chips";
-import {ActivatedRoute} from '@angular/router';
+import {MatIcon} from "@angular/material/icon";
-import {AssetsConstants} from '../../constants/AssetsConstants';
+import {TranslatePipe} from "@ngx-translate/core";
-import {MatDialog} from '@angular/material/dialog';
+import {MatButtonModule} from "@angular/material/button";
-import {MatButtonModule} from '@angular/material/button';
+import {MatDialog} from "@angular/material/dialog";
-import {ProjectDialogComponent} from './dialog/project-dialog.component';
+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() {
+  ngOnInit(): void {
-    this.route.queryParamMap.subscribe(params => {
+    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
     });
   }
 }

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.",

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.",