From c08fed54842cfd269d5533c147cda069bb4e63f6 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Fri, 29 Sep 2023 12:40:15 +0300
Subject: [PATCH] mobile image section

---
 .../images/images-section.component.html      |  43 +++---
 .../images/images-section.component.scss      | 124 ++++++++++++------
 .../basic/images/images-section.component.ts  |   7 +-
 src/assets/images/icons/close_50.svg          |  16 +++
 src/assets/images/icons/left_50.svg           |  16 +++
 src/assets/images/icons/right_50.svg          |  16 +++
 6 files changed, 160 insertions(+), 62 deletions(-)
 create mode 100644 src/assets/images/icons/close_50.svg
 create mode 100644 src/assets/images/icons/left_50.svg
 create mode 100644 src/assets/images/icons/right_50.svg

diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html
index e25b153..4495b3f 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html
@@ -1,22 +1,22 @@
 <div *ngIf="items?.length">
 
   <div class="first" [ngClass]="imageClass">
-    <img class="" [src]="items[0].links.full"  (click)="show(items[0].id)"/>
+    <img class="" [src]="items[0].links.full"  (click)="show(0)"/>
   </div>
 
   <div *ngIf="imageType!=='carousel'&&!(imageType=='large-preview'&&items.length==1)" 
   class="items" [ngClass]="imageClass">  
-    <div class="item" *ngFor="let item of items">
-      <img [src]="item.links?.full" (click)="show(item.id)"/>
+    <div class="item" *ngFor="let item of items; let i = index">
+      <img [src]="item.links?.full" (click)="show(i)"/>
     </div>
   </div>  
 
 
   <div *ngIf="imageType==='carousel'" class="carousel" id="section-{{section.id}}">
     <div class="prev">
-      <img src="/assets/images/icons/chevron_left_48dp.svg"/>
+      <img src="/assets/images/icons/left_50.svg"/>
     </div>
-    <div class="center">
+    <div class="content">
       <swiper [config]="config">
         <ng-template ngFor let-item [ngForOf]="items">
           <ng-template swiperSlide>
@@ -28,24 +28,33 @@
       </swiper>
     </div>
     <div class="next">
-      <img src="/assets/images/icons/chevron_right_48dp.svg"/>
+      <img src="/assets/images/icons/right_50.svg"/>
     </div>
   </div>
 
 
   <div *ngIf="showFullscreen" class="fullscreen">
-    <div class="close"  (click)="showFullscreen = false"></div>
-    <div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
-      <img *ngIf="backId!==''" src="/assets/images/icons/chevron_left_white_48dp.svg"/>
-    </div>
-    <div class="center">
-      <div class="photo"><img [src]="photo"/></div>
-    </div>
-    <div *ngIf="items.length > 1" class="right" (click)="go('increment')">
-      <img *ngIf="nextId!==''" src="/assets/images/icons/chevron_right_white_48dp.svg"/>
-    </div>
-  </div>
 
+    <div class="content center">
+      <img [src]="photo"/>      
+    </div>
+    <div class="content between">
+      <div class="close"  (click)="showFullscreen = false">
+        <img src="/assets/images/icons/close_50.svg"/>
+      </div>
+      <div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
+        <img *ngIf="backId!==''" src="/assets/images/icons/left_50.svg"/>
+      </div>  
+      <div *ngIf="items.length > 1" class="right" (click)="go('increment')">
+        <img *ngIf="nextId!==''" src="/assets/images/icons/right_50.svg"/>
+      </div>
+    </div>
+    <div class="content center bottom">
+      <div class="thumbnails" *ngFor="let item of items; let i = index">
+        <img [src]="item.links?.full" (click)="show(i)"/>
+      </div>
+    </div>    
+  </div>
 </div>
 
   <!-- <span style="white-space: pre-wrap;">
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
index 16c2636..86311b0 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
@@ -2,18 +2,14 @@
   display: none;
   &.large-preview{
     display: block;
-    width: 663px;
-    height: 468px;
-    max-width: 80vw;
-    max-height: 49vw;
+    width: 100%;
+    max-width: 720px;
     margin-bottom: 8px;
     border-radius: 12px;
     border: 1px solid rgba(45, 45, 45, 0.27);
     overflow: hidden;
     img{
-      object-fit: cover;
       width: 100%;
-      height: 100%;
     }
   }
 }
@@ -140,46 +136,90 @@
   align-items: center;
   justify-content: center;
   background-color: rgba(37, 46, 52, 60%);
-  .close{
-    position: absolute;
-    top:24px;
+ 
+  .content {
+    position: fixed;
+    display: flex;
+    pointer-events: none;
+    
+    
+    width: calc(100vw - 2 * 24px);
+    height: calc(100vh - 2 * 24px);
+    left: 24px;
     right: 24px;
-    width: 48px;
-    height: 48px;
-    border-radius: 24px;
-    background: url('~src/assets/images/icons/close_blue_24dp.svg') center no-repeat;
-    background-color: #fff;
-    border: 2px solid var(--blue-1);
-  }
-  .left {
-    width: 72px;
-    flex-grow: 0;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-  }
-  .center {
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: calc(100% - 144px);
+    *{
+      pointer-events:all;
+    }
     img {
-      max-width: 100%;
-      width: auto;
-      height: 100%;
-      max-height: calc(100vh - 2 * 24px);
-      background-color: #fff;
+      object-fit: contain;
+      width: 100%;
+  height: 100%;
+    }
+    .close{
+      position: absolute;
+      top:24px;
+      right: 24px;
+    }
+    .left {
+      width: 72px;
+      flex-grow: 0;
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+    }
+    .right {
+      width: 72px;
+      flex-grow: 0;
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
     }
   }
-  .right {
-    width: 72px;
-    flex-grow: 0;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
+  .between{
+    justify-content:space-between;
+  }
+  .center{
+    justify-content:center;
+  }
+  .bottom{
+    align-items: flex-end;
+    gap: 8px;
+    .thumbnails{
+      position: static;
+      display: block;
+      width: 72px;
+      height: 52px;
+      border: 2px solid var(--blue-1);
+
+      img{
+        width: 100%;
+        height: 100%;
+        object-fit:cover;
+      };
+    };
+
+  }
+
+}
+
+@media screen and (max-width: 480px) {
+  .fullscreen {
+
+   
+    .content {
+      position: fixed;
+      display: flex;
+      pointer-events: none;
+      
+      
+      width: calc(100vw - 2 * 16px);
+      height: calc(100vh - 2 * 16px);
+      left: 16px;
+      right: 16px;
+    }
   }
 }
 
+
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
index d7815bd..f99b659 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
@@ -84,17 +84,18 @@ export class ImagesSectionComponent {
     })
   }
 
-  show(id: string): void {
+  show(i:number): void {
     this.parsedPhotos?.forEach((photo: any) => {
-      if (photo.id === id) {
+      if (photo.id === this.items[i].id) {
         this.photo = photo.links.full
         this.showFullscreen = true
       }
     })
+    this.activeIndex = i;
   }
 
   go(how: string) {
-    this.show(this.showId)
+    this.show(this.activeIndex)
     switch(how) {
       case 'decrement':
         this.activeIndex--
diff --git a/src/assets/images/icons/close_50.svg b/src/assets/images/icons/close_50.svg
new file mode 100644
index 0000000..1ba04c7
--- /dev/null
+++ b/src/assets/images/icons/close_50.svg
@@ -0,0 +1,16 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.65" filter="url(#filter0_d_1032_18617)">
+<path d="M17.5334 32.3327L15.6667 30.466L23.1334 22.9993L15.6667 15.5327L17.5334 13.666L25.0001 21.1327L32.4667 13.666L34.3334 15.5327L26.8667 22.9993L34.3334 30.466L32.4667 32.3327L25.0001 24.866L17.5334 32.3327Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1032_18617" x="3" y="3" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1032_18617"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1032_18617" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/images/icons/left_50.svg b/src/assets/images/icons/left_50.svg
new file mode 100644
index 0000000..4cca2b8
--- /dev/null
+++ b/src/assets/images/icons/left_50.svg
@@ -0,0 +1,16 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.65" filter="url(#filter0_d_1032_18583)">
+<path d="M24.966 6.99959C28.1373 6.99967 31.2374 7.94015 33.8742 9.7021C36.511 11.464 38.5661 13.9683 39.7796 16.8983C40.9931 19.8282 41.3106 23.0522 40.6918 26.1625C40.073 29.2729 38.5458 32.1299 36.3033 34.3723C33.2901 37.3491 29.2214 39.0128 24.9857 38.9999C20.75 38.9871 16.6915 37.2987 13.6964 34.3036C10.7013 31.3085 9.01293 27.25 9.00007 23.0143C8.98721 18.7786 10.6509 14.7099 13.6277 11.6967C15.1133 10.2031 16.8803 9.01896 18.8265 8.21272C20.7727 7.40648 22.8595 6.99415 24.966 6.99959ZM27.1197 33.03L29.4757 30.67L21.8253 23L29.4757 15.34L27.1197 12.98L17.0982 23L27.1197 33.03Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1032_18583" x="3" y="3" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1032_18583"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1032_18583" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/images/icons/right_50.svg b/src/assets/images/icons/right_50.svg
new file mode 100644
index 0000000..37436cf
--- /dev/null
+++ b/src/assets/images/icons/right_50.svg
@@ -0,0 +1,16 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.65" filter="url(#filter0_d_1032_18586)">
+<path d="M25.0348 7.00005C21.8636 7.00014 18.7635 7.94057 16.1267 9.70245C13.4899 11.4643 11.4347 13.9685 10.2211 16.8984C9.00742 19.8282 8.68979 23.0522 9.30835 26.1625C9.92691 29.2729 11.4539 32.13 13.6962 34.3726C16.7095 37.3495 20.7783 39.0132 25.0142 39.0004C29.25 38.9875 33.3087 37.2992 36.3039 34.304C39.2991 31.3088 40.9874 27.2501 41.0003 23.0143C41.0131 18.7784 39.3494 14.7096 36.3725 11.6963C34.8869 10.203 33.1199 9.01904 31.1739 8.21295C29.2278 7.40687 27.1412 6.99462 25.0348 7.00005ZM22.8801 33.03L20.525 30.67L28.1747 23L20.525 15.34L22.8801 12.98L32.9019 23L22.8801 33.03Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_1032_18586" x="3.00037" y="3" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1032_18586"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1032_18586" result="shape"/>
+</filter>
+</defs>
+</svg>