explore-services/explore/src/app/sdg/sdg.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>
      <h1 uk-scrollspy-class class="uk-h1 uk-margin-remove-top">
        <span>Science for UN Sustainable <br> Development Goals<span class="custom-sdg-dot"></span></span>
      </h1>
			<h2 uk-scrollspy-class class="uk-h5 uk-margin-remove-top">
				Laying the foundation for new approaches and solutions.
			</h2>
			<div uk-scrollspy-class>
				We have developed a classification scheme for UN Sustainable Development Goals, <br> to view contributions of research towards complex challenges for humanity <br> such as climate change, biodiversity loss, pollution and poverty reduction.
			</div>
			<div>
				<!-- TODO: need a page for the description of the algorithm - to get us there from the learn more btn -->
				<!-- <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-position-relative" uk-scrollspy-class>
			<img src="../../assets/explore-assets/sdg-hero-img.svg" loading="lazy">
			<div class="uk-position-absolute uk-card uk-card-default uk-padding" style="bottom: 0; left: 0">
				<img src="../../assets/explore-assets/sdg-badge.png" loading="lazy" style="max-width: 215px">
			</div>
		</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 *ngIf="loading">
		<loading></loading>
	</div>
	<div *ngIf="!loading">
		<div *ngIf="displayedSdgs && displayedSdgs.length" class="uk-padding-small uk-margin-auto@m uk-grid uk-child-width-1-4@xl uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
			<div *ngFor="let sdg of displayedSdgs">
        <a [routerLink]="properties.searchLinkToResults" [queryParams]="{'sdg': urlEncodeAndQuote(sdg.id)}"
					class="uk-link-reset">
					<div class="uk-card uk-card-default uk-card-hover" [class]="'sdg-card sdg-' + sdg.code">
						<div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-between">
							<div class="uk-flex uk-flex-middle uk-padding-small uk-padding-remove-bottom">
								<div class="uk-text-bold sdg-card-text-color uk-h4 uk-margin-remove">
									{{sdg.code}}
								</div>
								<div class="uk-text-bold sdg-card-text-color uk-text-uppercase uk-text-small uk-margin-small-left">
									<span [innerHTML]="sdg.html"></span>
								</div>
							</div>
							<div class="uk-text-center">
								<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
							</div>
							<div class="uk-text-center uk-padding-small uk-background-default" style="border-radius: 0 0 4px 4px;">
								<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>
								<p class="uk-text-small uk-text-uppercase uk-margin-remove">{{openaireEntities.RESULTS}}</p>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</div>