From fdd8089c4d6f20a31de3ccd9f5c7b4905593cc82 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 17 Jan 2024 13:47:09 +0300 Subject: [PATCH] swiper --- .../pages/menu/pages-menu.component.ts | 1 - .../types/basic/cards/cards-section.module.ts | 9 +- .../items/cards-section-items.component.html | 9 +- .../items/cards-section-items.component.ts | 17 +++ .../item/cards-section-item.component.html | 1 + .../default/cards-item-default.component.ts | 14 +- .../slides/cards-item-slides.component.html | 6 + .../slides/cards-item-slides.component.scss | 0 .../slides/cards-item-slides.component.ts | 46 ++++++ src/nir/css/_pages-section.scss | 134 ++++++++++++++++++ 10 files changed, 225 insertions(+), 12 deletions(-) create mode 100644 src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.html create mode 100644 src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.scss create mode 100644 src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.ts diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index 68a411c..fb0f5ed 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -28,7 +28,6 @@ export class PagesMenuComponent implements OnInit { resp=>{ let [currentPage, rootPages] = resp if(currentPage){ - console.log('current') let menuTree = currentPage.parents.data.reduceRight( (menuTree,item)=>{ let fothersSonID = item.children.data.findIndex( diff --git a/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts b/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts index 0aed597..f96b31e 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts +++ b/src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts @@ -6,15 +6,17 @@ import {CardsSectionItemComponent} from "@app/_modules/pages/sections/types/basi import {CardsItemPersonsComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component"; import {CardsItemPartnersComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component"; import {SortablejsModule} from "@dustfoundation/ngx-sortablejs"; +import {SwiperModule} from "swiper/angular"; import { WidjetModule } from '@app/_modules/widjet/widjet.module'; import { CardsItemDefaultComponent } from './items/item/types/default/cards-item-default.component'; - +import { CardsItemSlidesComponent } from './items/item/types/slides/cards-item-slides.component'; @NgModule({ imports: [ CommonModule, SortablejsModule, - WidjetModule + WidjetModule, + SwiperModule ], declarations: [ CardsSectionComponent, @@ -22,7 +24,8 @@ import { CardsItemDefaultComponent } from './items/item/types/default/cards-item CardsSectionItemComponent, CardsItemPersonsComponent, CardsItemPartnersComponent, - CardsItemDefaultComponent + CardsItemDefaultComponent, + CardsItemSlidesComponent ], exports: [ CardsSectionComponent diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.html b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.html index 8fa372a..67d02fb 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.html +++ b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.html @@ -1,6 +1,13 @@
-
+
+
+ + + + + +
diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.ts b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.ts index be35a39..ac292dd 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.ts +++ b/src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.ts @@ -2,6 +2,10 @@ import {Component, Input} from '@angular/core'; import {ObjectsService} from "@app/_services"; import {SortableOptions} from "sortablejs"; +import SwiperCore, {Navigation, SwiperOptions} from 'swiper'; +import { SwiperComponent } from "swiper/angular"; +SwiperCore.use([Navigation]); + @Component({ selector: 'cards-section-items', templateUrl: 'cards-section-items.component.html', @@ -18,6 +22,14 @@ export class CardsSectionItemsComponent { } }; + public config: SwiperOptions = { + slidesPerView: "auto", + spaceBetween: 24, + pagination: { + clickable: true, + }, + }; + constructor(private objectsService: ObjectsService) { } @@ -26,6 +38,11 @@ export class CardsSectionItemsComponent { } ngOnInit() { + console.log(this.type) + console.log(this.slides) + } + get slides(){ + return this.type.name == 'cards-section-slides' } move(event: any) { diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html index fd899a6..2d6d8a7 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html @@ -13,5 +13,6 @@ +

{{type?.name}} is undefined

diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts index 7bf0801..6c8b7e8 100644 --- a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts @@ -14,13 +14,13 @@ export class CardsItemDefaultComponent { @Input() card:any; ngOnInit(){ - console.log(this.card) - console.log(this.objectsService.getValue(this.card, 'card-style')) - console.log(this.objectsService.getValue(this.card, 'header')) - console.log(this.objectsService.getValue(this.card, 'subheader')) - console.log(this.objectsService.getValue(this.card, 'text')) - console.log(this.objectsService.getValue(this.card, 'image')) - console.log(this.objectsService.getValue(this.card, 'link')) + // console.log(this.card) + // console.log(this.objectsService.getValue(this.card, 'card-style')) + // console.log(this.objectsService.getValue(this.card, 'header')) + // console.log(this.objectsService.getValue(this.card, 'subheader')) + // console.log(this.objectsService.getValue(this.card, 'text')) + // console.log(this.objectsService.getValue(this.card, 'image')) + // console.log(this.objectsService.getValue(this.card, 'link')) } get style() { diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.html b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.html new file mode 100644 index 0000000..fa5bb05 --- /dev/null +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.html @@ -0,0 +1,6 @@ +
+
{{header}}
+
{{subheader}}
+
{{text}}
+ +
\ No newline at end of file diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.scss b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.ts b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.ts new file mode 100644 index 0000000..ff5d715 --- /dev/null +++ b/src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.ts @@ -0,0 +1,46 @@ +import { Component, Input } from '@angular/core'; +import {ObjectsService} from "@app/_services"; + + +@Component({ + selector: 'cards-item-slides', + templateUrl: './cards-item-slides.component.html', + styleUrls: ['./cards-item-slides.component.scss'] +}) +export class CardsItemSlidesComponent { + + constructor(private objectsService: ObjectsService) {} + + + @Input() card:any; + + + ngOnInit(){ + // console.log(this.card) + // console.log(this.objectsService.getValue(this.card, 'card-style')) + // console.log(this.objectsService.getValue(this.card, 'header')) + // console.log(this.objectsService.getValue(this.card, 'subheader')) + // console.log(this.objectsService.getValue(this.card, 'text')) + // console.log(this.objectsService.getValue(this.card, 'image')) + // console.log(this.objectsService.getValue(this.card, 'link')) + } + + get header() { + return this.objectsService.getValue(this.card, 'header'); + } + get subheader() { + return this.objectsService.getValue(this.card, 'subheader'); + } + get text() { + return this.objectsService.getValue(this.card, 'text'); + } + get image() { + return this.objectsService.getValue(this.card, 'image')?.links?.full+'?width=500'; + } + get link() { + return this.objectsService.getValue(this.card, 'link'); + } + + + +} diff --git a/src/nir/css/_pages-section.scss b/src/nir/css/_pages-section.scss index fd1d4b6..176f544 100644 --- a/src/nir/css/_pages-section.scss +++ b/src/nir/css/_pages-section.scss @@ -634,6 +634,102 @@ cards-section{ } } +.cards-section-slides.items{ + max-width: 588px; + margin-left: 0; + cards-section-item{ + margin-bottom: 40px; + height: 348px; + } + +} + +.cards-section-slides{ + width: 1200px; + max-width: 100vw; + margin-left: -50px; + padding-bottom: 32px ; + cursor: pointer; + .swiper-slide{ + display: flex; + width: 588px; + } + cards-section-item{ + display: flex; + width: 100%; + height: 274px; + padding: 24px; + border-radius: 16px; + border: 1px solid var(--light); + background: var(--bg); + overflow: hidden; + .card-slide{ + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + .card-header{ + font-family: PT Serif; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: 125%; + color: var(--bk66); + flex-basis: 100%; + margin-bottom: 16px; + } + .card-image{ + width: 120px; + height: 170px; + object-fit: cover; + display: block; + top: 56px; + border-radius: 8px; + border: 1px solid var(--bk22); + order: 1; + margin-bottom: -120px; + } + .card-text{ + order: 2; + flex-shrink: 1; + flex-basis: calc( 100% - 136px ); + color: var(--bk88); + font-family: PT Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 27px; + margin-inline-start: 16px; + } + .card-subheader{ + text-align: right; + font-family: PT Sans; + font-size: 16px; + font-style: italic; + font-weight: 400; + line-height: 24px; + color: var(--bk66); + order: 3; + white-space: pre-wrap; + } + } + } + + +} + +.swiper-wrapper{ + padding-bottom: 32px; +} + + .swiper-pagination-bullet{ + border: 1px solid var(--prime); + background-color: transparent !important; + opacity: 1 !important; + &.swiper-pagination-bullet-active{ + background-color: var(--prime) !important; + } + } + @media screen and (max-width: 767px) { .pagination { @@ -644,4 +740,42 @@ cards-section{ display: none; } } +} + +@media screen and (max-width: 1200px) { + + .cards-section-slides{ + width: 100vw; + margin-inline-start: -32px; + padding-bottom: 32px ; + .swiper-slide{ + max-width: calc( 100vw - 96px ); + margin-inline-start: 96px !important; + margin-inline-end: -72px !important; + &:first-child{ + margin-inline-start: 48px !important; + } + &:last-child{ + margin-inline-end: -24px !important; + } + + } + } + +} + +@media screen and (max-width: 1024px) { + + .cards-section-slides{ + margin-inline-start: -24px; + } + +} + +@media screen and (max-width: 720px) { + + .cards-section-slides{ + margin-inline-start: -16px; + } + } \ No newline at end of file