pigallery2/frontend/app/gallery/gallery.component.html

<app-gallery-lightbox #lightbox (onLastElement)="onLightboxLastElement()"></app-gallery-lightbox>
<app-frame>

  <ng-container navbar>

    <li class="nav-item" *ngIf="countDown">
      <span class="navbar-text">
        <ng-container i18n>Link availability</ng-container>
        : {{countDown.day}}
        <ng-container i18n>days</ng-container>
        ,
        {{("0"+countDown.hour).slice(-2)}}:{{("0"+countDown.minute).slice(-2)}}:{{("0"+countDown.second).slice(-2)}}
      </span>
    </li>
    <li class="nav-item" *ngIf="showSearchBar">
      <app-gallery-search #search></app-gallery-search>
    </li>
    <li class="nav-item" *ngIf="showShare">
      <app-gallery-share></app-gallery-share>
    </li>
  </ng-container>


  <div body class="container-fluid" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
    <app-gallery-navbar [directory]="_galleryService.content.value.directory"></app-gallery-navbar>

    <div class="directories">
      <app-gallery-directory *ngFor="let directory of directories"
                             [directory]="directory"></app-gallery-directory>
    </div>
    <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
                     [photos]="_galleryService.content.value.directory.photos"></app-gallery-map>
    <app-gallery-grid [photos]="_galleryService.content.value.directory.photos"
                      [lightbox]="lightbox"></app-gallery-grid>
  </div>

  <div body class="container-fluid" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.searchResult">
    <div class="alert alert-info" role="alert"
         *ngIf="_galleryService.content.value.searchResult.resultOverflow == true" i18n>
      Too many results to show. Refine your search.
    </div>
    <ol class="breadcrumb">
      <li class="active">
        <ng-container i18n>Searching for:</ng-container>
        <span [ngSwitch]="_galleryService.content.value.searchResult.searchType">
                      <span *ngSwitchCase="SearchTypes.image" class="oi oi-image"></span>
                      <span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span>
                      <span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span>
                      <span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span>
                    </span>
        <strong>{{_galleryService.content.value.searchResult.searchText}}</strong>
      </li>
    </ol>

    <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
                     [photos]="_galleryService.content.value.searchResult.photos"></app-gallery-map>

    <div class="directories">
      <app-gallery-directory *ngFor="let directory of directories"
                             [directory]="directory"></app-gallery-directory>
    </div>
    <app-gallery-grid [photos]="_galleryService.content.value.searchResult.photos"
                      [lightbox]="lightbox"></app-gallery-grid>
  </div>

  <div body class="container"
       style="width: 100%; padding:0"
       *ngIf="(!_galleryService.content.value.directory ||
        _galleryService.content.value.directory.isPartial == true)
       && !_galleryService.content.value.searchResult">
    <div class="spinner">

    </div>
  </div>
</app-frame>