|
|
|
|
<div class="component-detail container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-11 col-md-10 col-lg-12 content mx-auto">
|
|
|
|
|
<button class="back icon-back" (click)="back()"></button>
|
|
|
|
|
<h2 class="title">{{details.title}}</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row no-gutters gallery" *ngIf="details.gallery && details.gallery.length">
|
|
|
|
|
<div class="col-12" *ngFor="let image of details.gallery; let i = index"
|
|
|
|
|
[ngClass]="{'col-md-4': details.gallery.length < 4 && (details.gallery.length % 3) == 2,
|
|
|
|
|
'col-md-12': details.gallery.length < 4 && (details.gallery.length % 3) == 1,
|
|
|
|
|
'col-md-3': details.gallery.length >= 3}">
|
|
|
|
|
<div class="gallery-container">
|
|
|
|
|
<span class="gallery-title">{{image.title}}</span>
|
|
|
|
|
<img class="image" [src]="image.url" (click)="openGallery(i)">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="date-container" *ngIf="section == 'exhibitions'">
|
|
|
|
|
<span class="date-indication" *ngIf="details.date_from != details.date_to">from</span>
|
|
|
|
|
<span class="date-indication" *ngIf="details.date_from == details.date_to">on</span>
|
|
|
|
|
<span class="date">{{details.date_from | date}}</span>
|
|
|
|
|
<span class="date" *ngIf="details.date_from != details.date_to"> <span class="date-indication">to</span> {{details.date_to | date}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="text" [innerHTML]="details.content"></div>
|
|
|
|
|
|
|
|
|
|
<div class="row videos" *ngIf="details.videos && details.videos.length">
|
|
|
|
|
<div class="col-12" *ngFor="let video of details.videos"
|
|
|
|
|
[ngClass]="{'col-md-6': details.videos.length < 4 && (details.videos.length % 3) == 2,
|
|
|
|
|
'col-md-12': details.videos.length < 4 && (details.videos.length % 3) == 1,
|
|
|
|
|
'col-md-4': details.videos.length >= 3}">
|
|
|
|
|
<span class="video-title">{{video.title}}</span>
|
|
|
|
|
<div class="youtube" *ngIf="video.type == 'youtube'">
|
|
|
|
|
{{video.code}}
|
|
|
|
|
<iframe class="iframe" [src]="video.embed"
|
|
|
|
|
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
|
|
|
allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span class="tags" *ngIf="details.tags"><b>Tags:</b> {{details.tags}}</span>
|
|
|
|
|
|
|
|
|
|
<span class="links" *ngIf="details.exhibitions && details.exhibitions.length"><b>Exhibitions:</b>
|
|
|
|
|
<span class="link" *ngFor="let exhibition of details.exhibitions"
|
|
|
|
|
(click)="showDetails('exhibitions', exhibition.id)"
|
|
|
|
|
routerLink="/detail/exhibitions/{{exhibition.id}}">{{exhibition.title}} </span>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span class="links" *ngIf="details.works && details.works.length"><b>Works:</b>
|
|
|
|
|
<span class="link" *ngFor="let work of details.works"
|
|
|
|
|
(click)="showDetails('works', work.id)"
|
|
|
|
|
routerLink="/detail/works/{{work.id}}">{{work.title}} </span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ngx-image-gallery
|
|
|
|
|
[images]="galleryImages"
|
|
|
|
|
[conf]="conf"
|
|
|
|
|
(onOpen)="galleryOpened($event)"
|
|
|
|
|
(onClose)="galleryClosed()"
|
|
|
|
|
(onImageClicked)="galleryImageClicked($event)"
|
|
|
|
|
(onImageChange)="galleryImageChanged($event)"
|
|
|
|
|
(onDelete)="deleteImage($event)"
|
|
|
|
|
></ngx-image-gallery>
|
