Merge pull request #202 from valor-software/development

fix(main): fix expandable card visual, video double click to play

Author: andsonjosef

libs/common-docs/src/components/expandable-card/expandable-card.component.html

@@ -1,28 +1,32 @@
 <div class="lg:flex flex-column justify-between gap-4">
   <div *ngFor="let card of cards; let i = index" class="bg-grey lg:py-10 py-6 px-6 lg:mb-0 mb-4"
     [style.flex]="card.isExpanded ? '2.5' : '1'" (click)="selectCard(i)">
-    <div class="lg:flex-auto lg:flex flex-column justify-between align-center h-full items-center"
-      *ngIf="card.isExpanded">
+    <div class="lg:flex-auto lg:flex flex-col justify-between align-center h-full items-center" *ngIf="card.isExpanded">
       <div [@enterBigCard]>
-        <img [src]="card.imgSource" class="block lg:hidden w-2/4 h-2/4 md:w-1/3 lg:w-2/4 lg:h-2/4 md:h-1/3 m-auto mb-6" alt="slide img">
-        <h3 [innerHTML]="card.title" class="lg:text-large text-2xl text-light_title_col leading-28 lg:leading-44 mb-8">
-        </h3>
-        <ul class="list-disc text-grey_font_col pl-5 ">
-          <li *ngFor="let item of card.list" class="mb-4 ">{{item}}</li>
-        </ul>
-        <button class="flex justify-center lg:justify-between mt-10 w-full lg:w-auto">
-          <a [routerLink]="['articles']" class="btn-pink flex justify-center w-full">Visit blog <img
-              src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
-        </button>
-      </div>
-      <div class="hidden lg:block max-w-140 lg:max-w-full mb-6 lg:mb-0 h-full">
-        <img [src]="card.imgSource" class="w-full h-full" alt="slide img">
+        <div class="flex flex-row items-center">
+          <div class="flex-col">
+            <img [src]="card.imgSource"
+              class="block lg:hidden w-2/4 h-2/4 md:w-1/3 lg:w-2/4 lg:h-2/4 md:h-1/3 m-auto mb-6" alt="slide img">
+            <h3 [innerHTML]="card.title"
+              class="lg:text-large text-2xl text-light_title_col leading-28 lg:leading-44 mb-8">
+            </h3>
+            <ul class="list-disc text-grey_font_col pl-5 ">
+              <li *ngFor="let item of card.list" class="mb-4 ">{{item}}</li>
+            </ul>
+            <button class="flex justify-center lg:justify-between mt-10 w-full lg:w-auto">
+              <a [routerLink]="['articles']" class="btn-pink flex justify-center w-full">Visit blog <img
+                  src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+            </button>
+          </div>
+          <div class="hidden lg:block max-w-140 lg:max-w-full mb-6 lg:mb-0 h-full">
+            <img [src]="card.imgSource" class="w-full h-full" alt="slide img">
+          </div>
+        </div>
       </div>
     </div>
-
-    <div class="flex justify-between align-center md:h-full h-106 items-center gap-6"
-      *ngIf="!card.isExpanded" (click)="selectCard(i)" [@enterSmallCard]>
-      <div class="max-w-140 md:max-w-full mb-6 md:h-1/2 w-1/2 md:w-1/4 m-auto ">
+    <div class="flex justify-between align-center md:h-full h-106 items-center gap-6" *ngIf="!card.isExpanded"
+      (click)="selectCard(i)" [@enterSmallCard]>
+      <div class="lg:hidden block max-w-140 md:max-w-full mb-6 md:h-1/2 w-1/2 md:w-1/4 m-auto ">
         <img [src]="card.imgSource" class="w-full m-auto h-106" alt="slide img">
       </div>
       <div class="md:h-1/2 ">

libs/route-pages/ashes-page/src/lib/ashes-page.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="(project$ | async) as project">
+<ng-container *ngIf="project">
   <section class="first-section-half landing-section">
     <div class="container">
       <ng-container *ngIf="changeBreadCrumbTitle?.length">
@@ -201,9 +201,9 @@ <h1 class="main-title">Feedback</h1>
     </div>
   </section>
 
-  <div *ngIf="project.video" class="container cursor-pointer" (click)="activateFrame()">
-    <iframe [src]="getSafeUrl(project.video)" style=" width: 100%; height:80vh;" allowfullscreen
-      [style.pointer-events]="isFrameActive ? 'auto' : 'none'"></iframe>
+  <div class="container cursor-pointer">
+    <iframe [src]="videoUrl" style=" width: 100%; height:80vh;" allowfullscreen
+      allow="autoplay"></iframe>
   </div>
 
   <next-project></next-project>

libs/route-pages/ashes-page/src/lib/ashes-page.component.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectorRef, Component } from "@angular/core";
+import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
 import { GetPortfolioService, IPortfolio, MappedTechnology, Technologies, titleRefactoring } from "@valor-software/common-docs";
 import { Observable } from "rxjs";
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ITechnologiesCard, technologiesAndServices } from '@valor-software/common-docs';
 
 const ROUTE = 'ashes-of-creation';
@@ -36,15 +36,14 @@ type AshesPortfolio = IPortfolio & {
   selector: "ashes-page",
   templateUrl: "./ashes-page.component.html"
 })
-export class AshesPageComponent {
+export class AshesPageComponent implements OnInit {
   changeBreadCrumbTitle?: { path: string, title: string }[] = [{ path: ROUTE, title: "Ashes of Creation" }];
 
   imageSliderButtonClasses = 'bg-yellow_bg_col color-black';
 
   project$: Observable<AshesPortfolio> = this.getProjectsServ.getPortfolioRequest(ROUTE);
-
-  isFrameActive = false;
-
+  videoUrl: SafeResourceUrl = '';
+  project?: AshesPortfolio;
   technologiesCard: ITechnologiesCard[] = [
     {
       smJustify: "between",
@@ -95,6 +94,13 @@ export class AshesPageComponent {
   ) {
   }
 
+  ngOnInit(): void {
+    this.getProjectsServ.getPortfolioRequest(ROUTE).subscribe((project) => {
+      this.project = project;
+      this.videoUrl = this.getSafeUrl(this.project?.video);
+    });
+  }
+
   getRouteLink(link: string): string {
     return titleRefactoring(link);
   }
@@ -109,13 +115,6 @@ export class AshesPageComponent {
     this.cdr.detectChanges();
   }
 
-  activateFrame() {
-    // start from inactive iframe to allow scrolling over iframe
-    if (!this.isFrameActive) {
-      this.isFrameActive = true;
-    }
-  }
-
   getSafeUrl(url?: string) {
     if (!url) {
       return '';

libs/route-pages/blog-portfolio/src/article.component.html

@@ -21,8 +21,8 @@
         </div>
     </section>
     <section class="landing-section">
+        <h1 class="main-title">More Articles</h1>
         <div class="container">
-            <h1 class="main-title double">More Articles</h1>
             <blog-preview [currentArticle]="article"></blog-preview>
         </div>
     </section>