About

src/app/app-routing.module.ts

@@ -8,6 +8,10 @@ import { HomePageComponent } from './components/home-page/home-page.component';
 
 import { AboutComponent } from './components/about/about.component';
 import { AboutMoreComponent } from './components/about/about-more/about-more.component';
+import { FestivalsComponent } from './components/about/festivals/festivals.component';
+import { TheatreHistoryComponent } from './components/about/theatre-history/theatre-history.component';
+import { EpochComponent } from './components/about/epoch/epoch.component';
+import { VisitComponent } from './components/about/visit/visit.component';
 
 import { AdministrationComponent } from './components/team/administration/administration.component';
 import { ArtisticComponent } from './components/team/artistic/artistic.component';
@@ -41,8 +45,19 @@ const appRoutes: Routes = [
   {path: 'performance/:slug', component: PerformanceComponent},
   {path: 'news', component: NewsComponent},
   {path: 'news/:slug', component: ArticleComponent},
-  {path: 'about', component: AboutComponent},
-  {path: 'about/:slug', component: AboutMoreComponent},
+  {
+    path: 'about', component: AboutComponent,
+    children: [
+      {path: '', redirectTo: 'theatre-history', pathMatch: 'full'},
+      {path: 'theatre-history', component: TheatreHistoryComponent},
+      {path: 'epoch/persons', component: EpochComponent},
+      {path: 'festivals', component: FestivalsComponent},
+      {path: 'visit', component: VisitComponent},
+      {path: 'festivals/:slug', component: AboutMoreComponent}
+    ]
+  },
+  {path: 'about/:personId', component: PersonComponent},
+
   {
     path: 'persons', component: TeamComponent,
     children: [
@@ -52,10 +67,11 @@ const appRoutes: Routes = [
       {path: 'administration', component: AdministrationComponent},
       {path: 'administration/:slug', component: PersoneShowmoreComponent},
       {path: 'creative/:slug', component: PersoneShowmoreComponent},
-      {path: 'artistic/:slug', component: PersoneShowmoreComponent},
-      {path: ':personId', component: PersonComponent}
+      {path: 'artistic/:slug', component: PersoneShowmoreComponent}
     ]
   },
+  {path: 'persons/:personId', component: PersonComponent},
+
   {path: 'contacts', component: ContactsComponent},
   {path: 'board-trustees', component: BoardTrusteesComponent},
   {path: 'donate', component: DonateComponent},

src/app/app.component.html

@@ -1,7 +1,9 @@
 <app-header></app-header>
 <app-donate></app-donate>
 <app-visually-impaired></app-visually-impaired>
+
 <router-outlet></router-outlet>
+
 <app-footer></app-footer>
 
 

src/app/app.component.spec.ts

@@ -26,6 +26,8 @@ import { SpinnerModule } from './components/partials/spinner/spinner.module';
 import { AboutMoreComponent } from './components/about/about-more/about-more.component';
 import { DevTeamComponent } from './components/dev-team/dev-team.component';
 import { RolesComponent } from './components/person/roles/roles.component';
+import { FestivalsComponent } from './components/about/festivals/festivals.component';
+import { AboutHeaderComponent } from './components/about/about-header/about-header.component';
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -47,6 +49,8 @@ describe('AppComponent', () => {
         BoardTrusteesComponent,
         AboutMoreComponent,
         DevTeamComponent,
+        FestivalsComponent,
+        AboutHeaderComponent
       ],
       providers: [
         {provide: APP_BASE_HREF, useValue: '/'}

src/app/app.module.ts

@@ -27,6 +27,11 @@ import { HomePageComponent } from './components/home-page/home-page.component';
 import { BoardTrusteesComponent } from './components/board-trustees/board-trustees.component';
 import { SpinnerModule } from './components/partials/spinner/spinner.module';
 import { AboutMoreComponent } from './components/about/about-more/about-more.component';
+import { FestivalsComponent } from './components/about/festivals/festivals.component';
+import { TheatreHistoryComponent } from './components/about/theatre-history/theatre-history.component';
+import { AboutHeaderComponent } from './components/about/about-header/about-header.component';
+import { EpochComponent } from './components/about/epoch/epoch.component';
+import { VisitComponent } from './components/about/visit/visit.component';
 import { DevTeamComponent } from './components/dev-team/dev-team.component';
 import { RolesComponent } from './components/person/roles/roles.component';
 import { DonateComponent } from './components/donate/donate.component';
@@ -88,7 +93,12 @@ import { RepertoireNavHeaderComponent } from './components/repertoire/repertoire
     CreativeComponent,
     PersoneShowmoreComponent,
     ActorsSliderComponent,
-    SeasonsComponent
+    SeasonsComponent,
+    FestivalsComponent,
+    TheatreHistoryComponent,
+    AboutHeaderComponent,
+    EpochComponent,
+    VisitComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

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

@@ -0,0 +1,6 @@
+<div class="about_seconHeader_container">
+    <a class="item" routerLink="/about/theatre-history" routerLinkActive="active" i18n="@@theatreHistory">History of theatre</a>
+    <a class="item" routerLink="/about/festivals" routerLinkActive="active" i18n="@@festivals">Festivals</a> 
+    <a class="item" routerLink="/about/epoch/persons" [class]="selectedEpoch" routerLinkActive="active" i18n="@@epoch">Epoch</a>
+    <a class="item" routerLink="/about/visit" routerLinkActive="active" i18n="@@theatreVisit">Visit to the theatre</a>
+</div> 

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

@@ -0,0 +1,50 @@
+@import "~assets/styles/_variables";
+@import "~assets/styles/aboutStyles";
+
+.about_seconHeader_container {
+  background-color: $font-color-accent;
+  height: 56px;
+  display: flex;
+  flex-grow: 0;
+  justify-content: center;
+  object-fit: contain;
+
+  .item {
+    color: $font-color-black;
+    text-decoration: none;
+    font-family: $body-font-family;
+    font-size: $font-size-medium;
+    line-height: 1.5;
+    padding-left: 15px;
+    padding-right: 15px;
+    align-self: center;
+
+    &.active {
+      @include selectedI;
+    }
+  }
+
+  .item:hover {
+    height: 56px;
+    line-height: 1.39;
+    padding-top: 16px;
+    background-color: $background-on-hover;
+    font-weight: $font-weight-semi-bold;
+  }
+}
+
+.selected {
+  @include selectedI;
+}
+
+@media (max-width: $max-width-tablet) {
+  .about_seconHeader_container{
+    display: none;
+  }
+}
+
+@media (max-width: $max-width-mobile) {
+  .about_seconHeader_container{
+    display: none;
+  }
+}

src/app/components/about/about-header/about-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutHeaderComponent } from './about-header.component';
+
+describe('AboutHeaderComponent', () => {
+  let component: AboutHeaderComponent;
+  let fixture: ComponentFixture<AboutHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutHeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-about-header',
+  templateUrl: './about-header.component.html',
+  styleUrls: ['./about-header.component.scss']
+})
+export class AboutHeaderComponent implements OnInit {
+  @Input() PersonType;
+  selectedClass = 'selected';
+  selectedEpoch;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (this.PersonType && this.PersonType === 'epoch') {
+      this.selectedEpoch = this.selectedClass;
+    }
+  }
+}

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

@@ -1,23 +1,75 @@
 <div class="container">
   <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>
-      <p class="history-date">{{ history.created_at | date:"dd.MM.yyyy" }}</p>
     </div>
-    <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 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> {{ history.text }} </p></div>
     </div>
-    <div class="performance">
-      <ul class="performance-list" *ngIf="history.performances">
-        <li class="list-item" *ngFor="let item of history.performances" [routerLink]="[ '/performance', item.slug ]">
-          <img class="img" [src]="item.mainPicture.performance_big.url" alt="performance picture"
-               [title]="item.mainPicture.performance_big.properties.title">
-          <p class="title"><span class="span">{{ item.title }}</span></p>
-        </li>
-      </ul>
+
+    <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 class="post-text" [innerHtml]="history.text"></div>
+
   </div>
 </div>