images section

angular.json

@@ -34,7 +34,10 @@
               "src/favicon.ico",
               "src/assets"
             ],
-            "styles": ["src/styles.scss"],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/swiper/swiper-bundle.css"
+            ],
             "stylePreprocessorOptions": {
               "includePaths": [
                 "src/assets/css"
@@ -106,7 +109,10 @@
                   "src/vniigaz-v2/css"
                 ]
               },
-              "styles": ["src/styles.scss"],
+              "styles": [
+                "src/styles.scss",
+                "node_modules/swiper/swiper-bundle.css"
+              ],
               "index": "src/vniigaz-v2/index.html"
             }
           },
@@ -146,7 +152,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/swiper/swiper-bundle.css"
             ],
             "scripts": []
           }

src/app/_modules/pages/menu/item/pages-menu-item.component.ts

@@ -90,7 +90,6 @@ export class PagesMenuItemComponent {
   }
 
   select(){
-    console.log(this.item)
     this.pagesService.menuSelectedLink = this.item.link
     if (this.item.type.name == 'nav-page'){
         this.toggle(!this.open)

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

@@ -1,9 +1,5 @@
 <div *ngIf="items?.length">
 
-  <div class="first" [ngClass]="imageClass">
-    <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; let i = index">
@@ -12,11 +8,11 @@
   </div>  
 
 
-  <div *ngIf="imageType==='carousel'" class="carousel" id="section-{{section.id}}">
+  <div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">
     <div class="prev">
       <img src="/assets/images/icons/left_50.svg"/>
     </div>
-    <div class="content">
+    <div class="center">
       <swiper [config]="config">
         <ng-template ngFor let-item [ngForOf]="items">
           <ng-template swiperSlide>

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

@@ -9,27 +9,8 @@
   top:24px;
   right: 24px;
 }
-.first{
-  display: none;
-  &.large-preview{
-    display: flex;    
-    width: 100%;
-    max-width: 720px;
-    margin-bottom: 8px;
-    border-radius: 12px;
-    border: 1px solid rgba(45, 45, 45, 0.27);
-    overflow: hidden;
-    padding: 0;
-    img{
-      width: 100%;
-    }
-  }
-}
-.large img{
-  
-  border-radius: 12px;
-  border: 1px solid rgba(45, 45, 45, 0.27);
-}
+
+
 
 .items {
   display: flex;
@@ -38,15 +19,16 @@
   width: 100%;
   gap: 8px;
 
-  &.small{
+  img{  
+    border: 1px solid var(--second-dis);
+  }
 
-    display: flex;
-    flex-direction: column;
+  &.small{
     .item{
       margin-bottom: 16px;
       img{
         max-height: 273px;
-        max-width: 273px;
+        max-width: 273px; 
       }
     }      
   }
@@ -65,21 +47,6 @@
     }      
   }
 
-  &.large-preview{
-    display: flex;
-    flex-direction: row;
-    .item{
-      width: 72px;
-      height: 52px;
-      border: 1px solid var(--prime);
-      img{
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-      }
-    }      
-  }
-
   .item {
     
     position: relative;
@@ -117,8 +84,8 @@
   .center {
     display: flex;
     overflow: hidden;
-    max-width: 548px;
     width: 100%;
+    height: 100%;
   }
 }
 
@@ -132,7 +99,7 @@
   img {
     display: block;
     width: 100%;
-    height: 300px;
+    height: 450px;
     object-fit: cover;
   }
 }

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

@@ -46,10 +46,11 @@ export class ImagesSectionComponent {
     return type.name;
   }
   get imageClass(){
+    console.log(this.imageType)
     return {
-      small : this.imageType=='small',
-      large : this.imageType=='large',
-      'large-preview': this.imageType=='large-preview'
+      small : this.imageType=='tiles',
+      large : this.imageType=='full-width',
+      carousel: this.imageType=='carousel'
     }
   }
   set photo(activePhoto: string) {

src/assets/css/_grid.scss

@@ -176,3 +176,6 @@ pages-menu-item{
   }
 }
 
+.pages{
+  width: 100%;
+}