single perforance fecstival page

src/app/components/about/about-more/about-more.component.html

@@ -0,0 +1,80 @@
+<app-spinner name="about-more"></app-spinner>
+
+<h2 class="festTitle" i18n="@@festival">Festival</h2>
+
+<div class="history" *ngIf="history">
+  <div class="history-title">
+    <h2 class="page-title history-heading">{{ history.title }}</h2>
+  </div>
+
+  <div class="history-fest-contain">
+    <div class="history-main_img">
+      <img
+        class="img"
+        [src]="history.mainPicture.reference.url"
+        [alt]="history.mainPicture.reference.properties.alt"
+        [title]="history.mainPicture.reference.properties.title"
+      />
+    </div>
+
+    <div class="post-text"><p [innerHTML]="history.text"></p></div>
+  </div>
+
+  <div *ngIf="history.performances.length > 0">
+    <div class="wrapped">
+      <h2 class="performansesListTitle" i18n="@@performances">Performance</h2>
+
+      <ngu-carousel
+        #myCarousel
+        [inputs]="carouselTile"
+        [dataSource]="history.performances"
+        class="slider"
+      >
+        <ngu-tile *nguCarouselDef="let item">
+          <div
+            class="image"
+            [routerLink]="['/performance', item.slug]"
+            [style.background]="
+              'url(' + item.mainPicture.performance_big.url + ')'
+            "
+          ></div>
+        </ngu-tile>
+        <ul class="myPoint" NguCarouselPoint>
+          <li
+            *ngFor="let j of myCarousel.pointNumbers; let i = index"
+            [class.active]="j === myCarousel.activePoint"
+            (click)="myCarousel.moveTo(i)"
+          ></li>
+        </ul>
+        <div NguCarouselPrev class="left">
+          <img alt="chevron-left" src="assets/images/slider/chevron-left.svg" />
+        </div>
+        <div NguCarouselNext class="right">
+          <img
+            alt="chevron-rigth"
+            src="assets/images/slider/chevron-right.svg"
+          />
+        </div>
+      </ngu-carousel>
+    </div>
+  </div>
+
+  <div class="mobile_performances">
+    <div *ngIf="history.performances.length > 0">
+      <h2 class="performansesListTitle" i18n="@@performances">Performance</h2>
+      <div class="performance-list">
+        <ng-template ngFor let-item [ngForOf]="history.performances">
+          <a
+            class="performance-route"
+            [routerLink]="['/performance', item.slug]"
+          >
+            <img
+              src="{{ item.mainPicture.performance_big.url }}"
+              alt="performances"
+            />
+          </a>
+        </ng-template>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/about/about-more/about-more.component.scss

@@ -0,0 +1,152 @@
+@import "~assets/styles/_variables";
+@import "~assets/styles/aboutStyles";
+@import "~assets/styles/_sliderMixins";
+
+.festTitle {
+  margin-top: 40px;
+  @include about-title;
+}
+
+.history-title {
+  height: $font-size-xxx-large;
+  font-family: $body-font-family;
+  font-size: $font-size-xxx-large;
+  line-height: 1.5;
+  letter-spacing: 0.8px;
+  text-align: center;
+  color: $background-color-white;
+}
+
+.history-fest-contain {
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  justify-content: center;
+  margin-left: 12%;
+  margin-right: 12%;
+  margin-top: 100px;
+
+  .post-text {
+    margin-left: 5%;
+    font-family: $body-font-family;
+    font-size: 18px;
+    line-height: 1.5;
+    text-align: left;
+    color: $secondary-background-color;
+  }
+}
+
+a {
+  color: $font-color-accent;
+  text-decoration: none;
+}
+
+.title {
+  height: 60px;
+  font-family: $body-font-family;
+  font-size: $font-size-xxx-large;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.8px;
+  text-align: center;
+  color: $background-color-white;
+}
+
+.performansesListTitle {
+  @include flex-center;
+  font-family: $body-font-family;
+  font-size: $font-size-xxx-large;
+  font-weight: $font-weight-semi-bold;
+  margin-top: 30px;
+}
+
+.wrapped {
+  justify-content: center;
+  margin-left: 10%;
+  margin-right: 10%;
+  background-color: $background-colors;
+}
+
+a {
+  color: $dots-active-color;
+  text-decoration: none;
+}
+
+.title {
+  height: 60px;
+  font-family: $body-font-family;
+  font-size: $font-size-xxx-large;
+  line-height: 1.5;
+  letter-spacing: 0.8px;
+  @include flex-center;
+  color: $background-color-white;
+}
+
+.all-prersons {
+  @include display;
+}
+
+.link-persons {
+  width: 170px;
+  height: 25px;
+  line-height: 1.39;
+}
+
+.image {
+  background-size: cover !important;
+  height: 470px;
+  margin-left: 16px;
+  margin-right: 16px;
+  cursor: pointer;
+}
+
+.left {
+  @include display;
+  @include gradient;
+  @include opacity;
+  position: $position;
+  align-items: center;
+  cursor: pointer;
+  bottom: 0;
+  width: 70px;
+  z-index: 1;
+  height: 100%;
+}
+
+.left:hover {
+  @include hover_opacity;
+}
+
+.right {
+  @include display;
+  @include opacity;
+  @include gradient;
+  position: $position;
+  align-items: center;
+  bottom: 0;
+  width: 70px;
+  height: 100%;
+  right: 5px;
+  z-index: 1;
+}
+
+.right:hover {
+  @include hover_opacity;
+}
+
+.myPoint {
+  @include myPoint;
+}
+
+.myPoint li {
+  @include myPoint-li;
+}
+
+.myPoint li.active {
+  @include myPoint-li__active;
+}
+
+.mobile_performances{
+  display: none;
+}

src/app/components/about/about-more/about-more.component.ts

@@ -1,23 +1,66 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, AfterContentChecked, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { NguCarouselConfig } from '@ngu/carousel';
+
 import { GatewayService } from '../../../services/gateway.service';
+import { History } from '../../../store/history/History';
 import { LoaderService } from '../../partials/spinner/loader.service';
 
+
 @Component({
   selector: 'app-about-more',
   templateUrl: './about-more.component.html',
   styleUrls: ['./about-more.component.scss']
 })
-export class AboutMoreComponent implements OnInit  {
+export class AboutMoreComponent implements OnInit, AfterContentChecked  {
+  history: History;
+
+  carouselTile: NguCarouselConfig = {
+    grid: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6, all: 0 },
+    gridBreakpoints: {
+      sm: 1100,
+      md: 1500,
+      lg: 1800,
+      xl: 2200,
+    },
+    slide: 1,
+    speed: 250,
+    point: {
+      visible: true
+    },
+    loop: false,
+    load: 2,
+    velocity: 0,
+    touch: false,
+    easing: 'cubic-bezier(0, 0, 0.2, 1)'
+  };
 
   constructor(
+    private _cdr: ChangeDetectorRef,
     private route: ActivatedRoute,
     private gateway: GatewayService,
     private loaderService: LoaderService
   ) { }
 
+  ngAfterContentChecked(): void {
+    this._cdr.detectChanges();
+  }
+
   ngOnInit(): void {
+    const slug = this.route.snapshot.params.slug;
     this.loaderService.start('about-more');
+    this.gateway
+      .getHistoryBySlug(slug)
+      .subscribe(
+        (res) => {
+          this.history = res;
+          this.loaderService.stop('about-more');
+          this.gateway.updateMeta(this.history.title,
+            this.history.text,
+            this.history.mainPicture.history_small.url);
+        },
+        err => this.loaderService.stop('about-more')
+      );
     this.gateway.updateCanonicalURL();
   }
 }