136 lines
6.5 KiB
HTML
136 lines
6.5 KiB
HTML
<div *ngIf="loading">
|
|
<loading></loading>
|
|
</div>
|
|
<div *ngIf="!loading">
|
|
<div class="uk-visible@m">
|
|
<div #searchElement class="uk-flex uk-flex-right uk-margin-small-bottom">
|
|
<div search-input [searchControl]="keywordControl" iconPosition="left" placeholder="Write a key word to filter the content"
|
|
searchInputClass="border-bottom" class="uk-width-large"></div>
|
|
</div>
|
|
</div>
|
|
<ng-container>
|
|
<div class="uk-margin-top">
|
|
<div id="parentContainer" class="uk-grid" uk-grid>
|
|
<div class="uk-width-1-4@m uk-visible@m">
|
|
<div>
|
|
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
|
|
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
|
|
class="uk-margin-small-bottom uk-text-capitalize">
|
|
<a (click)="scrollToId(item.id)">{{item.id}}</a>
|
|
</li>
|
|
</ul>
|
|
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
|
|
<li *ngFor="let item of viewResults; index as i"
|
|
class="uk-margin-small-bottom uk-text-capitalize" [class.uk-active]="activeSection === item.id">
|
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-1-1 uk-hidden@m">
|
|
<div class="uk-sticky uk-blur-background" uk-sticky>
|
|
<div class="uk-flex uk-flex-center uk-margin-small-bottom">
|
|
<div search-input [searchControl]="keywordControl" iconPosition="left" placeholder="Write a key word to filter the content"
|
|
searchInputClass="border-bottom" class="uk-width-large"></div>
|
|
</div>
|
|
<div #tabs class="uk-slider uk-position-relative" uk-slider="finite: true">
|
|
<div class="uk-slider-container">
|
|
<ul *ngIf="!keyword" class="uk-tab uk-flex-nowrap uk-slider-items">
|
|
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id && sliderInit"
|
|
class="uk-text-capitalize">
|
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
|
</li>
|
|
</ul>
|
|
<ul *ngIf="keyword?.length" class="uk-tab uk-flex-nowrap uk-slider-items">
|
|
<li *ngFor="let item of viewResults; index as i"
|
|
class="uk-text-capitalize" [class.uk-active]="activeSection === item.id && sliderInit">
|
|
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
|
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-expand@m uk-overflow-auto" [style]="'height: ' + calculatedHeight + 'px;'">
|
|
<ng-container *ngIf="!keyword">
|
|
<div [id]="item.id" *ngFor="let item of fos; index as i">
|
|
<div [class.uk-padding-small]="i !== 0" class="uk-text-capitalize uk-padding-remove-horizontal uk-padding-remove-bottom">
|
|
<h2 class="uk-h4 uk-margin-remove">
|
|
{{item.id}}
|
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
|
class="uk-link-text">
|
|
{{item.id}}
|
|
</a> -->
|
|
</h2>
|
|
</div>
|
|
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
|
|
<div *ngFor="let child of item.children">
|
|
<div class="uk-text-capitalize">
|
|
<h3 class="uk-h6 uk-margin-small-bottom">
|
|
{{child.id}}
|
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
|
class="uk-link-text">
|
|
{{child.id}}
|
|
</a> -->
|
|
</h3>
|
|
<div *ngFor="let subChild of child.children" class="uk-margin-xsmall-bottom uk-text-truncate">
|
|
<label [class.uk-text-bolder]="subjects?.includes(subChild.id)">
|
|
<input [ngModel]="fosOptions.get(subChild.id)" (ngModelChange)="fosOptions.set(subChild.id, $event)"
|
|
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
|
<span [title]="subChild.id">{{subChild.id}}</span>
|
|
</label>
|
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subChild.id)}"
|
|
class="uk-link-text">
|
|
{{subChild.id}}
|
|
</a> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="keyword?.length">
|
|
<div [id]="item.id" *ngFor="let item of viewResults; index as i">
|
|
<div
|
|
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize" [class.custom-bottom-border]="i < viewResults.length - 1">
|
|
<h2 class="uk-h4 uk-margin-remove"
|
|
[innerHTML]="highlightKeyword(item.id)">
|
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(item.id)}"
|
|
class="uk-link-text" [innerHTML]="highlightKeyword(item.id)">
|
|
</a> -->
|
|
</h2>
|
|
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
|
<div *ngFor="let subItem of item.children">
|
|
<h3 class="uk-h6 uk-margin-small-bottom"
|
|
[innerHTML]="highlightKeyword(subItem.id)">
|
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subItem.id)}"
|
|
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
|
</a> -->
|
|
</h3>
|
|
<div *ngFor="let subSubItem of subItem.children" class="uk-margin-xsmall-bottom uk-text-truncate">
|
|
<label [class.uk-text-bolder]="subjects?.includes(subSubItem.id)">
|
|
<input [ngModel]="fosOptions.get(subSubItem.id)" (ngModelChange)="fosOptions.set(subSubItem.id, $event)"
|
|
type="checkbox" class="uk-checkbox uk-margin-small-right">
|
|
<span [innerHTML]="highlightKeyword(subSubItem.id)" [title]="subSubItem.id"></span>
|
|
</label>
|
|
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(subSubItem.id)}"
|
|
class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
|
|
</a> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="keyword && viewResults?.length == 0">
|
|
<div class="uk-padding-large uk-text-center">
|
|
<h2 class="uk-h3">No results were found.</h2>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
</div> |