2022-03-30 16:19:40 +02:00
<!-- <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 >
2022-03-31 13:57:13 +02:00
< div class = "uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center" >
2022-04-14 17:05:47 +02:00
< h1 uk-scrollspy-class > Science for UN Sustainable < br > Development Goals< span class = "custom-sdg-dot" > < / span > < / h1 >
< h2 uk-scrollspy-class class = "uk-h5 uk-margin-remove-top" >
Laying the foundation for new approaches and solutions.
< / h2 >
2022-03-30 16:19:40 +02:00
< div uk-scrollspy-class >
2022-04-14 17:05:47 +02:00
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.
2022-03-30 16:19:40 +02:00
< / div >
2022-03-31 13:57:13 +02:00
< div >
2022-04-14 17:05:47 +02:00
<!-- TODO: need a page for the description of the algorithm - to get us there from the learn more btn -->
2022-04-18 13:25:32 +02:00
<!-- <a class="uk - display - inline - block uk - text - uppercase uk - button uk - button - text uk - margin - top" uk - scrollspy - class
2022-03-31 13:57:13 +02:00
routerLinkActive="router-link-active" routerLink="/">
< span class = "uk-flex uk-flex-middle" >
< span > Learn More< / span >
< / span >
2022-04-14 17:05:47 +02:00
< / a > -->
2022-03-31 13:57:13 +02:00
< / div >
2022-03-30 16:19:40 +02:00
< / div >
2022-04-14 17:05:47 +02:00
< div class = "uk-width-2-5@m uk-width-1-1@s uk-text-center uk-position-relative" uk-scrollspy-class >
2022-04-13 08:42:37 +02:00
< 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 >
2022-03-30 16:19:40 +02:00
< / 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" >
2022-03-31 13:57:13 +02:00
< div * ngIf = "loading" >
< loading > < / loading >
< / div >
< div * ngIf = "!loading" >
2022-04-15 15:32:14 +02:00
< 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 >
2022-03-31 13:57:13 +02:00
< div * ngFor = "let sdg of displayedSdgs" >
2022-04-18 13:25:32 +02:00
< a [ routerLink ] = " properties . searchLinkToAdvancedResults " [ queryParams ] = " { f0: ' sdg ' , fv0: sdg . id } "
2022-04-15 15:32:14 +02:00
class="uk-link-reset">
2022-05-05 08:32:39 +02:00
< div class = "uk-card uk-card-default uk-card-hover uk-padding-small" [ class ] = " ' sdg-card sdg- ' + sdg . code " >
2022-04-15 15:32:14 +02:00
< div class = "uk-height-1-1 uk-flex uk-flex-column uk-flex-between" >
< div class = "uk-flex uk-flex-middle" >
< div class = "uk-text-bold uk-h4 uk-margin-remove" style = "color: inherit;" >
{{sdg.code}}
< / div >
< div class = "uk-text-bold uk-text-uppercase uk-text-small uk-margin-small-left" >
< span [ innerHTML ] = " sdg . html " > < / span >
< / div >
2022-04-07 15:20:10 +02:00
< / div >
2022-04-15 15:32:14 +02:00
< div class = "uk-text-center" >
2022-04-13 08:42:37 +02:00
< img [ src ] = " ' . . / . . / assets / explore-assets / sdgs / g ' + sdg . code + ' . png ' " alt = "" >
2022-03-31 13:57:13 +02:00
< / div >
2022-04-15 15:32:14 +02:00
< div class = "uk-text-center" >
< div >
< 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-margin-remove" > Research Items< / p >
< / div >
2022-03-31 13:57:13 +02:00
< / div >
2022-03-30 16:19:40 +02:00
< / div >
< / div >
2022-03-31 13:57:13 +02:00
< / a >
< / div >
2022-03-30 16:19:40 +02:00
< / div >
< / div >
< / div >