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

<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="pageDescription"></schema2jsonld>
<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
	<div class="uk-padding-small uk-padding-remove-horizontal">
		<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">
      <span class="uk-align-left uk-margin-remove-bottom">
        <span uk-scrollspy-class class="uk-text-large" style="color: #EEB204">Beta</span>
      </span>
			<div style="max-width: 600px;">
        <h1 uk-scrollspy-class class="uk-h1 uk-margin-remove-top">
          <span>Fields of Science  <span class="uk-text-primary">.</span></span>
        </h1>
				<div uk-scrollspy-class>
					We have integrated a Field-of-Science (FoS) taxonomy into our dataset to organize and discover research more effectively. Using the full capabilities of the OpenAIRE Research Graph (full-texts, citations, references, venues) we apply AI and bring forward any multidisciplinarity potential.
				</div>
				<div class="uk-text-meta uk-margin-top" uk-scrollspy-class>
					Our work is based on the work from our partner Athena Research Center: SciNoBo : A Hierarchical Multi-Label Classifier of Scientific Publications - <a href="https://arxiv.org/abs/2204.00880" target="_blank">https://arxiv.org/abs/2204.00880</a>
				</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>
		<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 *ngIf="fos?.length" 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-visible@m">
		<div uk-sticky="offset: 50;" class="uk-sticky uk-background-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal">
			<div class="uk-flex uk-flex-right uk-margin-small-bottom">
				<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
					searchInputClass="border-bottom" class="uk-width-large"></div>
			</div>
		</div>
	</div>
	<ng-container>
		<div class="uk-margin-top uk-padding-small">
			<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
				<div class="uk-width-1-4@m uk-visible@m">
					<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;">
						<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 routerLink="./" [fragment]="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" [options]="fosOptions" 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">
					<ng-container *ngIf="!keyword">
						<div [id]="item.id" *ngFor="let item of fos; index as i">
							<div class="uk-text-capitalize">
								<h2 class="uk-h4 uk-margin-remove">
									<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">
											<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
												class="uk-link-text">
												{{child.id}}
											</a>
										</h3>
										<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
											<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">
									<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">
											<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" style="margin-bottom: 5px;">
											<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>