You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
3.7 KiB
76 lines
3.7 KiB
<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="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="row no-gutters gallery" *ngIf="galleryImages.length">
|
|
<div class="col-12" *ngFor="let image of galleryImages; let i = index"
|
|
[ngClass]="{'col-md-4': galleryImages.length < 4 && (galleryImages.length % 3) == 2,
|
|
'col-md-12': galleryImages.length < 4 && (galleryImages.length % 3) == 1,
|
|
'col-md-3': galleryImages.length >= 3}">
|
|
<div class="gallery-container">
|
|
<span class="gallery-title">{{image.title}}</span>
|
|
<img class="image" *ngIf="loadedImages[i]" src="/assets/images/loader.svg" alt="loading">
|
|
<img class="image" [hidden]="loadedImages[i]" (load)="onLoad(i)" [src]="image.url" (click)="openGallery(i)">
|
|
</div>
|
|
</div>
|
|
</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'">
|
|
<iframe class="iframe" [src]="video.embed"
|
|
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
<div class="vimeo" *ngIf="video.type == 'vimeo'">
|
|
<iframe class="iframe" title="vimeo-player" [src]="video.embed" src="https://player.vimeo.com/video/104753208"
|
|
frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="embed" *ngIf="video.type == 'embed'" [innerHTML]="video.embed"></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, exhibition.title)"
|
|
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, work.title)"
|
|
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>
|
|
|
|
<app-spinner [show]="!loaded"></app-spinner>
|