images-section styling

src/app/_modules/layout/header/user-bar/header-user-bar.component.ts

@@ -23,7 +23,7 @@ export class HeaderUserBarComponent {
   }
 
   ngOnInit() {
-    console.log(this.user)
+    
   }
 
 

src/app/_modules/pages/sections/types/basic/images/images-section.component.html

@@ -1,8 +1,11 @@
-<div *ngIf="imageType!=='carousel'" class="items">
-  <div class="item {{imageType}}" *ngFor="let item of items">
+<div class="first" [ngClass]="imageClass">
+  <img class="" [src]="items[0].links.full"  (click)="show(items[0].id)"/>
+</div>
+<div *ngIf="imageType!=='carousel'" class="items" [ngClass]="imageClass">  
+  <div class="item" *ngFor="let item of items">
     <img [src]="item.links?.full" (click)="show(item.id)"/>
   </div>
-</div>
+</div>  
 
 <div *ngIf="imageType==='carousel'" class="carousel" id="section-{{section.id}}">
   <div class="prev">
@@ -35,5 +38,3 @@
     <img *ngIf="nextId!==''" src="/assets/images/icons/chevron_right_white_48dp.svg"/>
   </div>
 </div>
-
-

src/app/_modules/pages/sections/types/basic/images/images-section.component.scss

@@ -1,18 +1,74 @@
+.first{
+  display: none;
+  &.large-preview{
+    display: block;
+    width: 663px;
+    height: 468px;
+    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%;
+    }
+  }
+}
+
+
 .items {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
-  gap: 20px;
-  margin-bottom: 20px;
+  gap: 8px;
+
+  &.small{
+
+    display: flex;
+    flex-direction: column;
+    .item{
+      margin-bottom: 16px;
+      img{
+        max-height: 273px;
+        max-width: 273px;
+      }
+    }      
+  }
+
+  &.large{
+    display: flex;
+    flex-direction: column;
+    .item{
+      margin-bottom: 32px;
+      img{
+        max-height: 468px;
+        max-width: 900px;
+      }
+    }      
+  }
+
+  &.large-preview{
+    display: flex;
+    flex-direction: row;
+    .item{
+      width: 72px;
+      height: 52px;
+      border: 1px solid var(--blue-1);
+      img{
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+    }      
+  }
 
   .item {
+    
     position: relative;
 
     img {
-      width: 128px;
-      height: 128px;
-      object-fit: cover;
       cursor: pointer;
     }
 

src/app/_modules/pages/sections/types/basic/images/images-section.component.ts

@@ -38,7 +38,6 @@ export class ImagesSectionComponent {
     }, 300)
   }
 
-
   get items() {
     return this.objectsService.getValue(this.section, 'images-required');
   }
@@ -46,6 +45,13 @@ export class ImagesSectionComponent {
     let type = this.objectsService.getValue(this.section, 'image-type');
     return type.name;
   }
+  get imageClass(){
+    return {
+      small : this.imageType=='small',
+      large : this.imageType=='large',
+      'large-preview': this.imageType=='large-preview'
+    }
+  }
   set photo(activePhoto: string) {
     this.activePhoto = activePhoto
   }
@@ -54,6 +60,8 @@ export class ImagesSectionComponent {
   }
 
 
+
+
   parsed(): void {
     this.tmpNumber = 0
     this.parsedPhotos = this.items || []

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.vniigazv2.lc',
   clientId: 2,
-  clientSecret: '5Q8Pe95YrQBwa7o7XDDIatg30ELu3dpS40Uo6jHi',
+  clientSecret: 'Mq5VXetkQ0XifT5Tao019rupEq5dQFbAhaw29Ei4',
 };
 
 /*