MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

add background side-image and text on homepage

This commit is contained in:
Alex Martzios 2022-04-13 14:27:51 +03:00
parent bb02a9efee
commit ece54ce984
6 changed files with 104 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/home/home.component.css
View File

@ -1,3 +1,8 @@
.home-background { .home-background {
background-color: var(--light-color); background-color: var(--light-color);
} }
.graph-background {
background-image: url('~src/assets/monitor-assets/home/graph.svg');
background-position-y: 50%;
background-position-x: -5%;
}

101
src/app/home/home.component.html
View File

@ -102,52 +102,61 @@
</div> </div>
</div> </div>
<div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden"> <div class="uk-background-norepeat graph-background">
<h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1"> <div class="uk-section uk-section-large uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom uk-overflow-hidden">
Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span> <h2 class="uk-h1 uk-text-center" uk-parallax="scale: 1.7, 1.3, 1,1">
</h2> Tap into the OpenAIRE <br> Research Graph<span class="uk-text-primary">.</span>
<div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0"> </h2>
<div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true"> <div class="uk-text-center uk-margin-top" uk-parallax="y: 80, 40, 0, 0">
<ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url"> The OpenAIRE Research Graph is one of the largest open scholarly record collections <br>
<a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset" worldwide, key in fostering Open Science and establishing its practices in the daily <br>
[href]="url" target="_blank" uk-scrollspy-class> research activities. Conceived as a public and transparent good, populated out of data <br>
<div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column"> sources trusted by scientists, the Graph aims at bringing discovery, monitoring, and <br>
<div class="uk-text-center"> assessment of science back in the hands of the scientific community.
<div </div>
class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div> <div class="uk-flex uk-flex-center uk-margin-top uk-margin-medium-bottom" uk-parallax="y: 80, 40, 0, 0">
<div class="uk-margin-small-top uk-text-large">{{name}}</div> <div class="uk-width-1-1 uk-flex-center uk-grid" uk-grid uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; repeat: true">
</div> <ng-template #numberCard let-numberSize="numberSize" let-name="name" let-url="url">
</div> <a class="uk-card uk-card-default uk-card-hover uk-position-relative uk-padding-small uk-display-block uk-link-reset"
</a> [href]="url" target="_blank" uk-scrollspy-class>
</ng-template> <div class="uk-height-small uk-width-small uk-flex uk-flex-center uk-flex-column">
<div *ngIf="publicationsSize"> <div class="uk-text-center">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize, name: 'Publications', <div
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}"> class="uk-text-primary-gradient uk-text-bold number">{{(numberSize.number|number) + numberSize.size}}</div>
</ng-container> <div class="uk-margin-small-top uk-text-large">{{name}}</div>
</div> </div>
<div *ngIf="datasetsSize"> </div>
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets', </a>
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}"> </ng-template>
</ng-container> <div *ngIf="publicationsSize">
</div> <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: publicationsSize, name: 'Publications',
<div *ngIf="softwareSize"> url: 'https://explore.openaire.eu/search/find/research-outcomes?type=publications'}">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software', </ng-container>
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}"> </div>
</ng-container> <div *ngIf="datasetsSize">
</div> <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: datasetsSize, name: 'Datasets',
<div *ngIf="otherSize"> url: 'https://explore.openaire.eu/search/find/research-outcomes?type=dataset'}">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other', </ng-container>
url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}"> </div>
</ng-container> <div *ngIf="softwareSize">
</div> <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: softwareSize, name: 'Software',
<div *ngIf="fundersSize"> url: 'https://explore.openaire.eu/search/find/research-outcomes?type=software'}">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders', </ng-container>
url: 'https://explore.openaire.eu/search/find/projects'}"> </div>
</ng-container> <div *ngIf="otherSize">
</div> <ng-container *ngTemplateOutlet="numberCard; context: {numberSize: otherSize, name: 'Other',
</div> url: 'https://explore.openaire.eu/search/find/research-outcomes?type=other'}">
</div> </ng-container>
</div> </div>
<div *ngIf="fundersSize">
<ng-container *ngTemplateOutlet="numberCard; context: {numberSize: fundersSize, name: 'Funders',
url: 'https://explore.openaire.eu/search/find/projects'}">
</ng-container>
</div>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom"> <div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<div class="uk-grid uk-grid-large" uk-grid> <div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-3@m uk-width-1-1"> <div class="uk-width-1-3@m uk-width-1-1">

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit f20fe90aa2482adb14c60ab684627ae3a9ad88b4 Subproject commit bedc28384b3fe064d7ba14806c9f1f341bd584b2

2
src/assets/common-assets

@ -1 +1 @@
Subproject commit 77d3480a05f35055d0447844c184b680b3a1a502 Subproject commit fbbae0418315e06d6ce5a0d193fd08c8ea617b6b

41
src/assets/monitor-assets/home/graph.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit b68ddc2064ed6934d292794829a0a09ff6082eb3 Subproject commit b441da3afde53c70df14cbdfc1230de41a034bb1