explore-services/explore/src/app/fos/fos.component.html

<!-- <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld> -->
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
	<div class="uk-padding-small">
		<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
	</div>
</div>
<div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
	<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
		<div class="uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
			<h1 uk-scrollspy-class>Fields of Science<span class="uk-text-primary">.</span></h1>
			<div uk-scrollspy-class>
				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
			</div>
			<!-- TODO: We need a page for the button link -->
			<!-- <div>
				<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-margin-top" uk-scrollspy-class
						routerLinkActive="router-link-active" routerLink="/">
					<span class="uk-flex uk-flex-middle">
						<span>Learn More</span>
					</span>
				</a>
			</div> -->
		</div>
		<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center" uk-scrollspy-class>
			<img src="../../assets/explore-assets/fos-hero-img.svg" loading="lazy">
		</div>
	</div>
</div>
<div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
	<div class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid>
		<div class="uk-margin-large-bottom">
			<div search-input [searchControl]="keywordControl" placeholder="Search" (searchEmitter)="onSubmit()"
				class="uk-width-large"></div>
		</div>
	</div>
	<ng-container *ngIf="keyword && keyword.length">
		<div class="uk-padding-small">
			<div class="uk-margin-small-bottom">Search results for:</div>
			<span class="uk-display-inline-block">
				<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
					<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{keyword}}</span>
					<!-- <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon> -->
					<button class="uk-close uk-icon" [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()">
						<icon name="close" flex="true" ratio="0.7"></icon>
					</button>
				</span>
				<!-- <a [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()" class="uk-link-reset">
					<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
						<span class="uk-margin-small-right uk-width-expand">{{keyword}}</span>
						<button class="uk-close uk-icon">
							<icon name="close" flex="true" ratio="0.7"></icon>
						</button>
					</span>
				</a> -->
			</span>
		</div>
	</ng-container>
	<ng-container *ngIf="!keyword">
		<div class="uk-margin-top uk-padding-small">
			<div class="uk-grid uk-grid-large" uk-grid>
				<div class="uk-width-1-4">
					<ul class="uk-nav uk-nav-default">
						<li *ngFor="let item of fos; index as i" 
							class="uk-margin-small-bottom uk-text-capitalize"
							[class]="index == i ? 'uk-active':''"
							(click)="changeDisplayedFos(i)">
								<a class="uk-padding-remove">{{item.id}}</a>
						</li>
					</ul>
				</div>
				<div *ngIf="fos[index]" class="uk-width-3-4">
					<div class="uk-text-capitalize">
						<h2 class="uk-h4 uk-margin-remove">
							<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: fos[index].id}"
								class="uk-link-text">
								{{fos[index].id}}
							</a>
						</h2>
					</div>
					<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
						<div *ngFor="let child of fos[index].children">
							<div class="whole-child uk-text-capitalize">
								<h3 class="uk-h6 uk-margin-small-bottom">
									<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: child.id}"
										class="uk-link-text">
										{{child.id}}
									</a>
								</h3>
								<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
									<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subChild.id}"
										class="uk-link-text">
										{{subChild.id}}
									</a>
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</div>
	</ng-container>
	<ng-container *ngIf="keyword && keyword.length">
		<div class="uk-margin-medium-top uk-padding-small">
			<ng-container *ngFor="let item of viewResults;">
				<div
					class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border">
					<h2 class="uk-h4 uk-margin-remove">
						<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: 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">
								<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subItem.id}"
									class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
								</a>
							</h3>
							<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;">
								<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'fos', fv0: subSubItem.id}"
									class="uk-link-text" [innerHTML]="highlightKeyword(subSubItem.id)">
								</a>
							</div>
						</div>
					</div>
				</div>
			</ng-container>
			<ng-container *ngIf="!viewResults?.length">
				<div class="uk-padding uk-text-center">
					<h2 class="uk-h3">No results were found.</h2>
				</div>
			</ng-container>
		</div>
	</ng-container>
</div>