monitor/src/app/home/home.component.html

188 lines
11 KiB
HTML
Raw Normal View History

<schema2jsonld [URL]="properties.baseLink"
[logoURL]="properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" type="home"
name="OpenAIRE Monitor">
</schema2jsonld>
<div
class="image-front-topbar"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
tm-header-transparent="light" tm-header-transparent-placeholder="">
<div class="uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color" style="background: transparent linear-gradient(180deg, #F0F0F0 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;">
<div class="uk-padding-remove-bottom uk-section">
<div class="uk-position-cover">&nbsp;</div>
<div class="uk-position-relative uk-panel">
<div class="uk-container uk-container-large uk-margin-top">
<div class="uk-grid">
<div class="uk-width-1-1 uk-text-center">
<div class="uk-h1 uk-text-bold"><span>Tracking. Reporting. Monitoring.</span> </div>
<div class="uk-h1">made easy</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"-->
<!-- [texts]="pageContents['left']"></helper>-->
</div>
<div>
<div
class="uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top" style="background-color: white;">
<div class="uk-container uk-section">
<div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">
<div
class="uk-text-center uk-width-1-1@s uk-width-1-2@m uk-first-column"><img src="assets/images/dashboard.png"
></div>
<div class="uk-width-1-1@s uk-width-1-2@m ">
<div class="uk-text-bold uk-h4">
What are your benefits as a funder
</div>
<div class="uk-text-bold uk-h5 uk-margin-remove-bottom">
Get a complete view of your funds
</div>
<div class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="uk-text-bold uk-h5 uk-margin-remove-bottom">
View trends through topics
</div>
<div class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="uk-text-bold uk-h5 uk-margin-remove-bottom">
Make your data work for you
</div>
<div class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="uk-text-bold uk-h5 uk-margin-remove-bottom">
Custom research analytics
</div>
<div class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<a class=" uk-margin-top uk-button portal-button uk-text-uppercase uk-button-large uk-text-bold"
href="/about/learn-how">view more</a>
</div>
</div>
</div>
</div>
<!-- <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"-->
<!-- [texts]="pageContents['top']"></helper>-->
</div>
<!-- Numbers section-->
<div>
<div class="uk-section-default uk-section numbers-background uk-padding-remove-top">
<div class="uk-container uk-margin-medium-top">
<div class="uk-grid uk-child-width-1-5">
<div *ngIf="publicationsSize" class="uk-margin-medium-bottom uk-text-center">
<span class="uk-margin-small-right portal-color-icon" ><svg width="48" height="48" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" data-svg="copy"><rect
style="stroke: var(--portal-main-color);" fill="none" stroke="#000" x="3.5" y="2.5" width="12"
height="16"></rect><polyline style="stroke: var(--portal-main-color);" fill="none"
stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>
<div class="uk-h2 uk-margin uk-text-bold">{{publicationsSize.count|number}} </div>
<div class="uk-h5 uk-margin uk-text-capitalize">publications</div>
</div>
<div *ngIf="datasetsSize" class="uk-margin-medium-bottom uk-text-center">
<span class="uk-margin-small-right portal-color-icon" >
<svg width="48" height="48" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="database"><ellipse fill="none" stroke="#000" cx="10" cy="4.64" rx="7.5" ry="3.14"></ellipse><path fill="none" stroke="#000" d="M17.5,8.11 C17.5,9.85 14.14,11.25 10,11.25 C5.86,11.25 2.5,9.84 2.5,8.11"></path><path fill="none" stroke="#000" d="M17.5,11.25 C17.5,12.99 14.14,14.39 10,14.39 C5.86,14.39 2.5,12.98 2.5,11.25"></path><path fill="none" stroke="#000" d="M17.49,4.64 L17.5,14.36 C17.5,16.1 14.14,17.5 10,17.5 C5.86,17.5 2.5,16.09 2.5,14.36 L2.5,4.64"></path></svg>
</span>
<div class="uk-h2 uk-margin uk-text-bold">{{datasetsSize.count|number}} </div>
<div class="uk-h5 uk-margin uk-text-capitalize">research data</div>
</div>
<div *ngIf="softwareSize" class="uk-margin-medium-bottom uk-text-center">
<span class="uk-margin-small-right portal-color-icon" >
<svg width="48" height="48" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="cog"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path fill="none" stroke="#000" d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
</span>
<div class="uk-h2 uk-margin uk-text-bold">{{softwareSize.count|number}} </div>
<div class="uk-h5 uk-margin uk-text-capitalize">software</div>
</div>
<div *ngIf="otherSize" class="uk-margin-medium-bottom uk-text-center">
<span class="uk-margin-small-right portal-color-icon" >
<svg width="48" height="48" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="file"><rect fill="none" stroke="#000" x="3.5" y="1.5" width="13" height="17"></rect></svg>
</span>
<div class="uk-h2 uk-margin uk-text-bold">{{otherSize.count|number}} </div>
<div class="uk-h5 uk-margin uk-text-capitalize">other research products</div>
</div>
<div *ngIf="fundersSize" class="uk-margin-medium-bottom uk-text-center">
<span class="uk-margin-small-right portal-color-icon" >
<svg width="48" height="48" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="world"><path fill="none" stroke="#000" d="M1,10.5 L19,10.5"></path><path fill="none" stroke="#000" d="M2.35,15.5 L17.65,15.5"></path><path fill="none" stroke="#000" d="M2.35,5.5 L17.523,5.5"></path><path fill="none" stroke="#000" d="M10,19.46 L9.98,19.46 C7.31,17.33 5.61,14.141 5.61,10.58 C5.61,7.02 7.33,3.83 10,1.7 C10.01,1.7 9.99,1.7 10,1.7 L10,1.7 C12.67,3.83 14.4,7.02 14.4,10.58 C14.4,14.141 12.67,17.33 10,19.46 L10,19.46 L10,19.46 L10,19.46 Z"></path><circle fill="none" stroke="#000" cx="10" cy="10.5" r="9"></circle></svg>
</span>
<div class="uk-h2 uk-margin uk-text-bold">{{fundersSize.count|number}} </div>
<div class="uk-h5 uk-margin uk-text-capitalize">Funders</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="funders.length === 0" class="uk-container uk-container-large uk-margin-medium-top">
<errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
</div>
<div *ngIf="!loading && funders.length > 0" class="uk-container uk-container-large uk-margin-medium-top">
<div class="uk-text-bold uk-h4">Funders already in monitor</div>
<div [class]="'uk-margin-medium-top' + (funders.length <= 5 ? ' uk-margin-medium-bottom' : '')">
<div
class="uk-grid-match uk-grid-medium uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
uk-grid uk-height-match=".community">
<div *ngFor="let funder of funders.slice(0, 5); let i = index">
<div class="uk-padding-small uk-card uk-card-default communityCard">
<browse-stakeholder [stakeholder]=funder></browse-stakeholder>
</div>
</div>
</div>
</div>
<div class="uk-text-right uk-margin-top">
<a *ngIf="funders.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
routerLinkActive="router-link-active" routerLink="/search/find/funders">
Browse All >
</a>
</div>
</div>
<!--<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"-->
<!-- [texts]="pageContents['bottom']"></helper>-->
<div
class="uk-background-norepeat uk-background-cover uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top portal-background-color uk-light" style="">
<div class="uk-container uk-section">
<div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">
<div class="uk-text-center uk-width-1-1@s uk-width-1-3@m uk-first-column uk-background-muted" style="width:400px;
height:250px">
<img src="" alt="Image">
</div>
<div class="uk-width-expand">
<div class="uk-text-bold uk-h4">
<div>Contact us to ...</div>
</div>
<div class="uk-margin-medium uk-h5">Get in touch with our team to find out how.</div>
<div
class="uk-inline"><a class="uk-button portal-button uk-button-large" href="/contact-us">CONTACT US</a></div>
</div>
</div>
</div>
</div>
<div class="uk-section-muted"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
<div class="uk-container uk-container-large">
<other-portals [properties]="properties"></other-portals>
</div>
</div>