Fix navigation in the lists

Author: kirjs

apps/codelab/src/app/admin/admin.module.ts

@@ -9,9 +9,6 @@ import { UsersModule } from './users/users.module';
 import { ContentModule } from './content/presentation-editor/content.module';
 import { PreviewModule } from './content/presentation-editor/preview/preview.module';
 import { PresentationListModule } from './content/presentation-list/presentation-list.module';
-import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
-import { environment } from "../../environments/environment";
-import { getFirestore, provideFirestore } from "@angular/fire/firestore";
 
 @NgModule({
   imports: [

apps/codelab/src/app/admin/content/presentation-editor/preview/slide-preview/small-slide-preview/small-slide-preview/small-slide-preview.component.css

@@ -13,6 +13,7 @@
 :host-context(.small)  slides-slide-preview {
   width: 500px;
   height: 410px;
+  transform: scale(0.2);
 }
 
 :host-context(.medium) {
@@ -24,11 +25,12 @@
 :host-context(.medium)  slides-slide-preview {
   width: 1050px;
   height: 780px;
+  transform: scale(0.25);
 }
 
 slides-slide-preview {
   display: block;
-  transform: scale(0.2);
+
   position: absolute;
   transform-origin: 0 0;
   width: 500px;

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -49,9 +49,6 @@ export class ContentService implements OnDestroy {
       return reducer(state, action);
     }, {}),
     shareReplay(1),
-    tap(() => {
-      console.log('kmon');
-    }),
   );
 
   constructor(

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/slide-html-editor/slide-html-editor.component.css

@@ -1,2 +1,7 @@
 @import url('https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css');
 @import url('https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/themes/default.css');
+
+:host {
+  font-size: 20px;
+  display: block;
+}

apps/codelab/src/app/admin/content/presentation-list/presentation-list.component.css

@@ -31,3 +31,8 @@
 }
 
 
+button {
+  background: transparent;
+  border: 0 solid;
+  text-align: start;
+}

apps/codelab/src/app/admin/content/presentation-list/presentation-list.component.html

@@ -19,9 +19,9 @@
       </button>
     </div>
 
-    <a class="first-slide"
+    <button class="first-slide"
        mat-list-item
-       [routerLink]="'./' + presentation.id + '/0'">
+       (click)="goToPresentation(presentation.id)">
       <ng-container *ngIf="presentation.slides[0] as slide else empty">
         <slides-small-slide-preview
           class="medium"
@@ -32,7 +32,7 @@
       <ng-template #empty>
         No value
       </ng-template>
-    </a>
+    </button>
   </div>
 </mat-nav-list>
 

apps/codelab/src/app/admin/content/presentation-list/presentation-list.component.ts

@@ -27,6 +27,9 @@ export class PresentationListComponent {
     this.contentService.addPresentation(presentation);
   }
 
+  goToPresentation(presentationId: string){
+    return this.navigationService.goToPresentation(presentationId)
+  }
   deletePresentation(presentationId: string) {
     this.contentService.deletePresentation(presentationId);
   }

apps/codelab/src/app/v2/presentation-list/presentation-list.component.css

@@ -27,3 +27,9 @@
   border: 1px #ddd solid;
 }
 
+
+button {
+  background: transparent;
+  border: 0 solid;
+  text-align: start;
+}

apps/codelab/src/app/v2/presentation-list/presentation-list.component.html

@@ -1,8 +1,8 @@
 <mat-nav-list class="wrapper">
-  <a
+  <button
     *ngFor="let presentation of presentations$ | async"
     mat-list-item
-    [routerLink]="'./' + presentation.id + '/0'"
+    (click)="goToPresentation(presentation.id)"
     class="presentation"
   >
     <div class="header">
@@ -17,5 +17,5 @@
         ></slides-small-slide-preview>
       </div>
     </div>
-  </a>
+  </button>
 </mat-nav-list>

apps/codelab/src/app/v2/presentation-list/presentation-list.component.ts

@@ -13,5 +13,10 @@ export class PresentationListComponent {
   constructor(
     private readonly contentService: ContentService,
     readonly navigationService: NavigationService
-  ) {}
+  ) {
+  }
+
+  goToPresentation(presentationId: string) {
+    return this.navigationService.goToPresentation(presentationId);
+  }
 }