about page re-degisn

This commit is contained in:
Alex Martzios 2022-01-21 15:40:56 +02:00
parent 5f2158ad54
commit e586ef08ce
3 changed files with 227 additions and 331 deletions

View File

@ -13,370 +13,265 @@ import {properties} from "../../environments/environment";
selector: 'learn-how', selector: 'learn-how',
template: ` template: `
<schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld> <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
<ng-template #one> <div class="uk-section uk-padding-remove-bottom uk-container uk-container-large">
<h6 class="uk-text-bold uk-margin-small-bottom">1. Understanding your needs</h6> <div class="uk-padding-small">
<div>First, we learn about your requirements and challenges. We help you understand Open Science practices within <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
EOSC and together we&rsquo;ll talk about how OpenAIRE RCD fits as a solution. </div>
</div> </div>
</ng-template>
<ng-template #two>
<h6 class=" uk-text-bold uk-margin-small-bottom">2. Develop a pilot</h6>
<div>
How do you work today, and how would you like to work tomorrow? We translate your needs into rules
and processes and we configure operational OpenAIRE services. By the end of this phase, we&rsquo;ll
have defined the basic configuration of your Community Gateway.
</div>
</ng-template>
<ng-template #three>
<h6 class="uk-text-bold uk-margin-small-bottom">3. Test and Validate</h6>
<div>
You validate and test your new Community Gateway (portal) with your experts and community to ensure
all workflows are in place and quality of data meets your standards. If needed, we work together in
another iteration to further refine and adapt to your needs.
</div>
</ng-template>
<ng-template #four>
<h6 class=" uk-text-bold uk-margin-small-bottom">4. Roll out the service</h6>
<div>
We jointly roll out your new Community Gateway. You take over the business operations and start
engaging your researchers, we take care of the smooth operation of the e-service.
</div>
</ng-template>
<div class="image-front-topbar" style="background-color: #E2EEFA;">
<div class="uk-section uk-padding-remove-bottom uk-container uk-container-large">
<div class="uk-padding-small">
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
</div>
<!-- start of the first section -->
<div class="uk-section uk-padding-remove-top"
style="background: transparent linear-gradient(0deg, #FAFAFA 0%, #E2EEFA 100%) !important;">
<div class="uk-container uk-container-large uk-margin-top">
<div class="uk-padding-small">
<h1 class="uk-width-1-1 uk-text-light">Learn the process.</h1>
<div class="uk-width-1-2@l uk-width-1-1@s uk-text-large uk-margin-top">Build a <span class="uk-text-bold portal-color">Gateway to your
community&#39;s</span> open and linked research outcomes. Customized to your needs.
</div>
<div class="uk-margin-large-top uk-flex uk-child-width-1-3@m uk-child-width-1-1@s uk-flex-center uk-grid"
uk-grid="">
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s uk-grid uk-first-column uk-grid-stack"
uk-grid="">
<div class="uk-first-column">
<ng-container [ngTemplateOutlet]="one"></ng-container>
</div>
<div class="uk-visible@m uk-grid-margin uk-first-column">
<ng-container [ngTemplateOutlet]="four"></ng-container>
</div>
<div class="uk-hidden@m">
<ng-container [ngTemplateOutlet]="two"></ng-container>
</div>
</div>
<div class="uk-text-center"><img src="assets/connect-assets/about/cycle.svg"/></div>
<div class="uk-flex uk-child-width-1-1@m uk-child-width-1-2@s uk-grid uk-grid-stack" uk-grid="">
<div class="uk-visible@m uk-first-column">
<ng-container [ngTemplateOutlet]="two"></ng-container>
</div>
<div class="uk-hidden@m uk-visible@s">
<ng-container [ngTemplateOutlet]="four"></ng-container>
</div>
<div class="uk-grid-margin uk-first-column">
<ng-container [ngTemplateOutlet]="three"></ng-container>
</div>
<div class="uk-hidden@s uk-visible@xs">
<ng-container [ngTemplateOutlet]="four"></ng-container>
</div>
</div>
</div>
<div class="uk-width-1-1 uk-text-center uk-text-large uk-margin-large-top"><a
class="uk-button portal-button uk-text-uppercase" routerLink="/about/learn-in-depth">Learn more
details ></a>
</div>
</div>
</div>
</div>
<div class="uk-section uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-slider"
uk-slider="velocity: 0;autoplay: true;autoplay-interval: 4000;pause-on-hover: false;center: true">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-child-width-1-1" style="transform: translate3d(0px, 0px, 0px);">
<li class="ng-star-inserted uk-active" tabindex="-1">
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
<div class="uk-first-column">
<img class="uk-border-rounded uk-box-shadow-large"
src="assets/connect-assets/about/gifs/profile.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Profile</h4>
<div class="uk-margin-medium ">Edit community information, change logo url, add
community managers or organizations related to community.
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
<div class="uk-first-column">
<img class="uk-border-rounded uk-box-shadow-large"
src="assets/connect-assets/about/gifs/content.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Content</h4>
<div class="uk-margin-medium ">Manage projects, content providers, subjects and
zenodo communities that are related to the research community.
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
<div class="uk-first-column">
<img class="uk-border-rounded uk-box-shadow-large"
src="assets/connect-assets/about/gifs/statistics.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Statistics &amp; Charts</h4>
<div class="uk-margin-medium ">Manage statistical numbers &amp; charts that will be
displayed in the community overview and graph analysis views.
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
<div class="uk-first-column">
<img class="uk-border-rounded uk-box-shadow-large"
src="assets/connect-assets/about/gifs/links.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Links</h4>
<div class="uk-margin-medium ">Manage user claims related to the research
community.
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
<div class="uk-first-column">
<img class="uk-border-rounded uk-box-shadow-large" src="assets/connect-assets/about/gifs/help.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Help texts</h4>
<div class="uk-margin-medium ">Add or edit help text in research community pages.
</div>
</div>
</div>
</div>
</li>
<li tabindex="-1">
<div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s uk-grid" uk-grid="">
<div class="uk-first-column">
<img class="uk-border-rounded uk-box-shadow-large"
src="assets/connect-assets/about/gifs/users.gif"/>
</div>
<div class="uk-margin-top">
<div>
<h4 class="">Users</h4>
<div class="uk-margin-medium ">Invite more users to subscribe, manage community
subscribers, your personal info and notification settings.
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin">
<li class="uk-active" uk-slider-item="0"></li>
<li uk-slider-item="1"></li>
<li uk-slider-item="2"></li>
<li uk-slider-item="3"></li>
<li uk-slider-item="4"></li>
<li uk-slider-item="5"></li>
</ul>
</div>
</div>
</div>
</div>
<!-- <div class="uk-section" style="background-color: #D9D8E8;">-->
<div class="uk-section contactUsBackground">
<div class="uk-container uk-text-center">
<!-- <div class="uk-padding-small">-->
<!-- <div class="uk-flex uk-flex-middle uk-padding uk-grid" uk-grid="">-->
<!-- <div class="uk-width-expand uk-first-column">-->
<h3>Get in touch with our team</h3>
<div class="uk-margin-medium">We look forward to working together and helping you unlock the
full
<br/>
potential of your research community through open science.
</div>
<div class="uk-inline"><a class="uk-button portal-button" routerLink="/contact-us">Contact us</a></div>
<!-- </div>-->
<!-- <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m"><img src="assets/connect-assets/contact/3.png"-->
<!-- style="width:263px"/></div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<!-- Redesign start --> <!-- Redesign start -->
<div class="uk-section uk-padding-remove-top"> <div class="uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large uk-margin-top"> <div class="uk-container uk-container-large uk-margin-top">
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div class="uk-width-1-4"> <div class="uk-width-1-3">
<h1>Learn the process.</h1> <h1 title>
Learn the <br> process<span class="uk-text-primary">.</span>
</h1>
<div> <div>
Build a Gateway yo your community's open and linked research outcomes. Customized your needs. Build a <span class="uk-text-secondary">Gateway to your <br> community's</span> open and linked <br> research outcomes. Customized <br> your needs.
</div> </div>
</div> </div>
<div class="uk-width-3-4"> <div class="uk-width-2-3">
<my-tabs>
<my-tab [tabTitle]="'All 4 Steps'" [tabId]="'allSteps'" [tabIcon]="aboutAll" class="uk-active">
<ng-container *ngTemplateOutlet="allSteps;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'1st Step'" [tabId]="'step1'" [tabIcon]="about1">
<ng-container *ngTemplateOutlet="step1;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'2nd Step'" [tabId]="'step2'" [tabIcon]="about2">
<ng-container *ngTemplateOutlet="step2;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'3rd Step'" [tabId]="'step3'" [tabIcon]="about3">
<ng-container *ngTemplateOutlet="step3;"></ng-container>
</my-tab>
<my-tab [tabTitle]="'4th Step'" [tabId]="'step4'" [tabIcon]="about4">
<ng-container *ngTemplateOutlet="step4;"></ng-container>
</my-tab>
</my-tabs>
<!-- Tab content -->
<div> <div>
<button (click)="changeViewTo('all')">All 4 steps</button> <ng-template #allSteps>
<icon [svg]='aboutAll'></icon> <div class="uk-margin-medium-bottom uk-margin-large-top">
<button (click)="changeViewTo('1')">1st Step</button> You dont have to go alone.
<icon [svg]='about1'></icon> </div>
<button (click)="changeViewTo('2')">2nd Step</button> <div class="uk-margin-medium-bottom">
<icon [svg]='about2'></icon> We work with you in <span class="uk-text-secondary">4 collaborative steps</span> to identify your needs, putting in practice our expertise on open science so you get the most out of OpenAIREs operational services.
<button (click)="changeViewTo('3')">3rd Step</button> </div>
<icon [svg]='about3'></icon> <div class="uk-grid uk-child-width-1-2 uk-grid-large" uk-grid>
<button (click)="changeViewTo('4')">4th Step</button> <div>
<icon [svg]='about4'></icon> <div class="uk-margin-small-bottom uk-text-lead">
</div> 1. Understanding your needs
<div *ngIf="step === 'all'"> </div>
<div> <div>
You dont have to go alone. First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together well talk about how OpenAIRE RCD fits as a solution.
</div> </div>
<div> </div>
We work with you in 4 collaborative steps to identify your needs, putting in practice our expertise on open science so you get the most out of OpenAIREs operational services. <div>
</div> <div class="uk-margin-small-bottom uk-text-lead">
<div> 2. Develop a pilot <br>
1. Understanding your needs <br> </div>
First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together well talk about how OpenAIRE RCD fits as a solution. <div>
</div> How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway.
<div> </div>
2. Develop a pilot <br> </div>
How do you work today, and how would you like to work tomorrow? We translate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, well have defined the basic configuration of your Community Gateway. <div>
</div> <div class="uk-margin-small-bottom uk-text-lead">
<div> 3. Test and Validate <br>
3. Test and Validate <br> </div>
You validate and test your new Community Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs. <div>
</div> You validate and test your new Community Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
<div> </div>
4. Roll out the service <br> </div>
We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service. <div>
</div> <div class="uk-margin-small-bottom uk-text-lead">
</div> 4. Roll out the service <br>
<div *ngIf="step === '1'"> </div>
1. Understanding your needs <div>
"Identify the scope and goals. Understand open science practices within EOSC and the OpenAIRE services." We jointly roll out your new Community Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
In this stage, you get to talk to the OpenAIRE team. Share your expectations with us and let us give you all the details about the operational OpenAIRE services, which will be integrated into the Gateway for your community. </div>
</div>
Here are the most important questions that the OpenAIRE team will ask you, in order to understand your scope and goals: </div>
</ng-template>
Do you want a gateway, where researchers can have access to all research products of a discipline? Do you want a gateway that gathers any research outcome, produced thanks to the funding and services of a given research infrastructure? <ng-template #step1>
Is your community (in)formally organized in sub-communities? Would you like to browse research products and get statistics also for these sub-communities? For example, the European Grid Infrastructure (EGI) features virtual organizations that represent discipline-specific communities and/or specific research projects. The research infrastructure DARIAH, on the other hand, is organised in national nodes (e.g. DARIAH-IT, DARIAH-DE). <div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
How can the OpenAIRE team identify the research products of your community, among all those available in the OpenAIRE Graph? Through a series of steps: set of keywords, acknowledgment statements, set of projects, set of repositories, etc. This can be partial and provisional information that will serve as a starting point to the OpenAIRE team. You will be able to refine and update this information, in the second phase Develop a pilot. 1. Understanding your needs
</div> </div>
<div *ngIf="step === '2'"> <div class="uk-margin-medium-bottom">
2. Develop a pilot <i>
"We translate your needs into rules and processes and we configure operational OpenAIRE services." "Identify the scope and goals. Understand open science practices within EOSC and the OpenAIRE services."
Based on the information gathered in phase 1 Analyse your needs, the OpenAIRE team will set up a pilot Gateway. We will configure the OpenAIRE mining algorithms to identify research products of the OpenAIRE Graph that are relevant to your community. Those, together with some basic statistics, will be available in the pilot version of the Community Gateway that will be deployed on the OpenAIRE BETA infrastructure. </i>
</div>
The OpenAIRE team will give you a demo of the Community Gateway, with details on how to refine and update the configuration of the Community Gateway, both in terms of criteria for including research products and in terms of logo and visible portal pages. <div class="uk-margin-medium-bottom">
</div> In this stage, you get to talk to the OpenAIRE team. Share your expectations with us and let us give you all the details about the operational OpenAIRE services, which will be integrated into the Gateway for your community.
<div *ngIf="step === '3'"> </div>
3. Test and Validate <div class="uk-margin-medium-bottom">
"You validate and test your new Community Gateway (portal). If needed, we further refine and adapt to your needs." Here are the most important questions that the OpenAIRE team will ask you, in order to understand your scope and goals:
Upon the completion of phase 2, take the time you need to test all its features, from search and browse for research products, to addition/removal of statistics from the portal. You can report any issue you might find and ask questions directly to the dedicated OpenAIRE team, via a specially designed collaboration tool. </div>
<ul class="uk-list uk-list-disc uk-list-primary">
Typically, this phase takes some months, as you will have to go through certain procedures. Change the configuration of the criteria to include research products, wait for the new configuration to be applied on the OpenAIRE graph and validate the results, before you actually decide that the coverage of research products for your community is adequate. <li class="uk-margin-small-bottom">
Do you want a gateway, where researchers can have access to all research products of a discipline? Do you want a gateway that gathers any research outcome, produced thanks to the funding and services of a given research infrastructure?
For some communities, the OpenAIRE team may also be able to implement dedicated mining algorithms (e.g. to find acknowledgement statements to your community/infrastructure in the full-texts of research articles) that may require several rounds of application, validation, and fine-tuning, before it reaches a high precision and recall. Your feedback is very important to minimize the effort and time needed for this process to complete. </li>
</div> <li class="uk-margin-small-bottom">
<div *ngIf="step === '4'"> Is your community (in)formally organized in sub-communities? Would you like to browse research products and get statistics also for these sub-communities? For example, the European Grid Infrastructure (EGI) features virtual organizations that represent discipline-specific communities and/or specific research projects. The research infrastructure DARIAH, on the other hand, is organised in national nodes (e.g. DARIAH-IT, DARIAH-DE).
4. Roll out the service </li>
"We jointly roll out your new portal. You take over the business operations and start engaging your researchers." <li class="uk-margin-small-bottom">
Here we are: the coverage of research products is good, interesting statistics and charts have been selected, and the portal pages available for end-users are ready. We can roll out the Community Gateway and make it available to all the researchers of the community! How can the OpenAIRE team identify the research products of your community, among all those available in the OpenAIRE Graph? Through a series of steps: set of keywords, acknowledgment statements, set of projects, set of repositories, etc. This can be partial and provisional information that will serve as a starting point to the OpenAIRE team. You will be able to refine and update this information, in the second phase Develop a pilot.
</li>
You, as a Community manager, become the main promoter of the Community Gateway. Engage the researchers of your community and, when applicable, inform the managers of the research infrastructure about the availability of tools for impact monitoring. </ul>
</ng-template>
Remember that you will still be able to change the configuration of the Community Gateway in order to address any issue that may arise and to follow the evolution of the community (e.g. a new project or a new content provider that was not previously available in OpenAIRE). <ng-template #step2>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
Remember that you dont have to go alone: the dedicated issue tracker you used in the Test and Validate phase is always available for you to contact the OpenAIRE team and ask for support. 2. Develop a pilot
</div>
<div class="uk-margin-medium-bottom">
<i>
"We translate your needs into rules and processes and we configure operational OpenAIRE services."
</i>
</div>
<div class="uk-margin-medium-bottom">
Based on the information gathered in phase 1 Analyse your needs, the OpenAIRE team will set up a pilot Gateway. We will configure the OpenAIRE mining algorithms to identify research products of the OpenAIRE Graph that are relevant to your community. Those, together with some basic statistics, will be available in the pilot version of the Community Gateway that will be deployed on the OpenAIRE BETA infrastructure.
</div>
<div>
The OpenAIRE team will give you a demo of the Community Gateway, with details on how to refine and update the configuration of the Community Gateway, both in terms of criteria for including research products and in terms of logo and visible portal pages.
</div>
</ng-template>
<ng-template #step3>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
3. Test and Validate
</div>
<div class="uk-margin-medium-bottom">
<i>
"You validate and test your new Community Gateway (portal). If needed, we further refine and adapt to your needs."
</i>
</div>
<div class="uk-margin-medium-bottom">
Upon the completion of phase 2, take the time you need to test all its features, from search and browse for research products, to addition/removal of statistics from the portal. You can report any issue you might find and ask questions directly to the dedicated OpenAIRE team, via a specially designed collaboration tool.
</div>
<div class="uk-margin-medium-bottom">
Typically, this phase takes some months, as you will have to go through certain procedures. Change the configuration of the criteria to include research products, wait for the new configuration to be applied on the OpenAIRE graph and validate the results, before you actually decide that the coverage of research products for your community is adequate.
</div>
<div>
For some communities, the OpenAIRE team may also be able to implement dedicated mining algorithms (e.g. to find acknowledgement statements to your community/infrastructure in the full-texts of research articles) that may require several rounds of application, validation, and fine-tuning, before it reaches a high precision and recall. Your feedback is very important to minimize the effort and time needed for this process to complete.
</div>
</ng-template>
<ng-template #step4>
<div class="uk-margin-large-top uk-margin-small-bottom uk-text-lead">
4. Roll out the service
</div>
<div class="uk-margin-medium-bottom ">
<i>
"We jointly roll out your new portal. You take over the business operations and start engaging your researchers."
</i>
</div>
<div class="uk-margin-medium-bottom ">
Here we are: the coverage of research products is good, interesting statistics and charts have been selected, and the portal pages available for end-users are ready. We can roll out the Community Gateway and make it available to all the researchers of the community!
</div>
<div class="uk-margin-medium-bottom ">
You, as a Community manager, become the main promoter of the Community Gateway. Engage the researchers of your community and, when applicable, inform the managers of the research infrastructure about the availability of tools for impact monitoring.
</div>
<div class="uk-margin-medium-bottom ">
Remember that you will still be able to change the configuration of the Community Gateway in order to address any issue that may arise and to follow the evolution of the community (e.g. a new project or a new content provider that was not previously available in OpenAIRE).
</div>
<div>
Remember that you dont have to go alone: the dedicated issue tracker you used in the Test and Validate phase is always available for you to contact the OpenAIRE team and ask for support.
</div>
</ng-template>
</div> </div>
<!-- <ul class="uk-navbar-nav grid-gap uk-margin-large-bottom">
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('all')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='aboutAll' [ngClass]="step === 'all' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === 'all' ? 'uk-text-secondary' : 'uk-text-muted'">All 4 Steps</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('1')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about1' [ngClass]="step === '1' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '1' ? 'uk-text-secondary' : 'uk-text-muted'">1st Step</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('2')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about2' [ngClass]="step === '2' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '2' ? 'uk-text-secondary' : 'uk-text-muted'">2nd Step</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('3')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about3' [ngClass]="step === '3' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '3' ? 'uk-text-secondary' : 'uk-text-muted'">3rd Step</span>
</div>
</a>
</li>
<li>
<a class="uk-link-reset">
<div (click)="changeViewTo('4')" class="uk-flex uk-flex-column uk-flex-middle">
<icon [svg]='about4' [ngClass]="step === '4' ? 'uk-text-primary' : 'uk-text-muted'" class="uk-margin-small-bottom"></icon>
<span [ngClass]="step === '4' ? 'uk-text-secondary' : 'uk-text-muted'">4th Step</span>
</div>
</a>
</li>
</ul> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section uk-padding-remove-top"> <div class="uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large uk-margin-top"> <div class="uk-container uk-container-large uk-margin-top">
<div class="uk-width-1-2"> <div class="uk-margin-large-bottom">
<h1>Find the best for your community.</h1> <h2 class="uk-h1">Find the best <br> for your community<span class="uk-text-primary">.</span></h2>
</div> </div>
<div> <div class="uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div> <div class="uk-margin-medium-bottom">
<h4>Profile</h4> <h4 class="uk-margin-small-bottom">Profile</h4>
<div>Edit community information, change logo url, add community managers or organizations related to community.</div> <div>Edit community information, change logo url, add community managers or organizations related to community.</div>
</div> </div>
<div> <div class="uk-margin-medium-bottom">
<h4>Content</h4> <h4 class="uk-margin-small-bottom">Content</h4>
<div>Manage projects, content providers, subjects and zenodo communities that are related to the research community.</div> <div>Manage projects, content providers, subjects and zenodo communities that are related to the research community.</div>
</div> </div>
<div> <div class="uk-margin-medium-bottom">
<h4>Statistics & Charts</h4> <h4 class="uk-margin-small-bottom">Statistics & Charts</h4>
<div>Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views.</div> <div>Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views.</div>
</div> </div>
<div> <div class="uk-margin-medium-bottom">
<h4>Links</h4> <h4 class="uk-margin-small-bottom">Links</h4>
<div>Manage user claims related to the research community.</div> <div>Manage user claims related to the research community.</div>
</div> </div>
<div> <div class="uk-margin-medium-bottom">
<h4>Help texts</h4> <h4 class="uk-margin-small-bottom">Help texts</h4>
<div>Add or edit help text in research community pages.</div> <div>Add or edit help text in research community pages.</div>
</div> </div>
<div> <div class="uk-margin-medium-bottom">
<h4>Users</h4> <h4 class="uk-margin-small-bottom">Users</h4>
<div>Invite more users to subscribe, manage community subscribers, your personal info and notification settings.</div> <div>Invite more users to subscribe, manage community subscribers, your personal info and notification settings.</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="uk-section uk-padding-remove-top"> <div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<div class="uk-container uk-container-large uk-margin-top"> <h2 class="uk-h2 uk-margin-medium-top">We look forward to working <br> together and helping you unlock <br> the full potential of your research <br> community through open science<span class="uk-text-primary">.</span></h2>
<div class="uk-text-center uk-width-3-4 uk-margin-auto"> <a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom" routerLink="/contact-us">Contact us</a>
<h2 class="uk-heading-medium uk-margin-large-bottom">We look forward to working together and helping you unlock the full potential of your research community through open science.</h2>
<a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/contact-us">Contact us</a>
</div>
</div>
</div> </div>
` `
}) })
export class LearnHowComponent implements OnInit { export class LearnHowComponent implements OnInit {
public pageContents = null; public pageContents = null;
public divContents = null; public divContents = null;
public step: string = 'all'; // public step: string = 'all';
public aboutAll = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 234.82 236.48"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="48.45" cy="48.45" r="48.45"/><circle class="cls-1" cx="186.37" cy="48.45" r="48.45"/><circle class="cls-1" cx="48.45" cy="188.03" r="48.45"/><circle class="cls-1" cx="186.37" cy="188.03" r="48.45"/></g></g></svg>'; public aboutAll = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 234.82 236.48"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="48.45" cy="48.45" r="48.45"/><circle class="cls-1" cx="186.37" cy="48.45" r="48.45"/><circle class="cls-1" cx="48.45" cy="188.03" r="48.45"/><circle class="cls-1" cx="186.37" cy="188.03" r="48.45"/></g></g></svg>';
public about1 = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 227.96 265.77"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M75.47,30.67h77a4.7,4.7,0,0,0,4.6-4.79V4.78A4.7,4.7,0,0,0,152.48,0h-77a4.7,4.7,0,0,0-4.6,4.78v21.1A4.7,4.7,0,0,0,75.47,30.67Z"/><rect class="cls-1" x="49.23" y="122.53" width="42.79" height="30.11" rx="5.57"/><polygon class="cls-1" points="173.33 99.65 151.52 129.09 147.3 124.17 136.14 133.74 152.37 152.65 185.14 108.39 173.33 99.65"/></g></g></svg>'; public about1 = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 227.96 265.77"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M75.47,30.67h77a4.7,4.7,0,0,0,4.6-4.79V4.78A4.7,4.7,0,0,0,152.48,0h-77a4.7,4.7,0,0,0-4.6,4.78v21.1A4.7,4.7,0,0,0,75.47,30.67Z"/><rect class="cls-1" x="49.23" y="122.53" width="42.79" height="30.11" rx="5.57"/><polygon class="cls-1" points="173.33 99.65 151.52 129.09 147.3 124.17 136.14 133.74 152.37 152.65 185.14 108.39 173.33 99.65"/></g></g></svg>';
public about2 = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 227.96 265.77"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M162.75,210.23V176.77L137.8,150S142.05,85.75,114,65.62C85.91,85.75,90.16,150,90.16,150l-25,26.8v33.46s39.13-33.17,32.32-23.82.57,16.45.57,16.45l-8.51,9.64h48.77l-8.5-9.64s7.37-7.09.56-16.45S162.75,210.23,162.75,210.23Z"/><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M76.4,30.67h75.15A4.65,4.65,0,0,0,156,25.88V4.78A4.65,4.65,0,0,0,151.55,0H76.4a4.65,4.65,0,0,0-4.49,4.78v21.1A4.66,4.66,0,0,0,76.4,30.67Z"/></g></g></svg>'; public about2 = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 227.96 265.77"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M162.75,210.23V176.77L137.8,150S142.05,85.75,114,65.62C85.91,85.75,90.16,150,90.16,150l-25,26.8v33.46s39.13-33.17,32.32-23.82.57,16.45.57,16.45l-8.51,9.64h48.77l-8.5-9.64s7.37-7.09.56-16.45S162.75,210.23,162.75,210.23Z"/><path class="cls-1" d="M195.82,3.62h-29V27h29a7.74,7.74,0,0,1,8,7.48V234.88a7.73,7.73,0,0,1-8,7.47H32.14a7.73,7.73,0,0,1-8-7.47V34.52a7.74,7.74,0,0,1,8-7.48h29V3.62h-29C14.42,3.62,0,17.48,0,34.52V234.88c0,17,14.42,30.89,32.14,30.89H195.82c17.72,0,32.14-13.86,32.14-30.89V34.52C228,17.48,213.54,3.62,195.82,3.62Z"/><path class="cls-1" d="M76.4,30.67h75.15A4.65,4.65,0,0,0,156,25.88V4.78A4.65,4.65,0,0,0,151.55,0H76.4a4.65,4.65,0,0,0-4.49,4.78v21.1A4.66,4.66,0,0,0,76.4,30.67Z"/></g></g></svg>';
public about3 = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 293.74 263.39"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M123,155.32V132.26l-17.19-18.47s2.93-44.26-16.42-58.13C70.05,69.53,73,113.79,73,113.79l-17.2,18.47v23.06s27-22.86,22.28-16.41.39,11.33.39,11.33l-5.86,6.65h33.61l-5.87-6.65s5.09-4.88.4-11.33S123,155.32,123,155.32Z"/><rect class="cls-1" x="164.94" y="117.66" width="15.88" height="39.22"/><rect class="cls-1" x="215.69" y="99.44" width="15.88" height="57.44"/><rect class="cls-1" x="190.27" y="75.62" width="15.88" height="81.26"/></g></g></svg>'; public about3 = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 293.74 263.39"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M260.75,0H33A33,33,0,0,0,0,33V176.61a33,33,0,0,0,33,33h74.4v23h-19v30.82H203.66V232.57H184.44v-23h76.31a33,33,0,0,0,33-33V33A33,33,0,0,0,260.75,0Zm3.75,174.83a7,7,0,0,1-6.86,7.1H36.1a7,7,0,0,1-6.86-7.1V34.76a7,7,0,0,1,6.86-7.09H257.64a7,7,0,0,1,6.86,7.09Z"/><path class="cls-1" d="M123,155.32V132.26l-17.19-18.47s2.93-44.26-16.42-58.13C70.05,69.53,73,113.79,73,113.79l-17.2,18.47v23.06s27-22.86,22.28-16.41.39,11.33.39,11.33l-5.86,6.65h33.61l-5.87-6.65s5.09-4.88.4-11.33S123,155.32,123,155.32Z"/><rect class="cls-1" x="164.94" y="117.66" width="15.88" height="39.22"/><rect class="cls-1" x="215.69" y="99.44" width="15.88" height="57.44"/><rect class="cls-1" x="190.27" y="75.62" width="15.88" height="81.26"/></g></g></svg>';
public about4 = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 177.86 248.05"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M177.86,236.27V197.84A25.23,25.23,0,0,0,170.48,180l-38.12-38.11s7.4-104-40-140.7a5.62,5.62,0,0,0-6.92,0c-47.37,36.67-40,140.7-40,140.7L7.39,180A25.24,25.24,0,0,0,0,197.84v38.43a3.86,3.86,0,0,0,6.23,3c17.1-13.33,62.85-48.53,52.71-35.55-12.41,15.88,1,27.92,1,27.92L47.13,245.23a1.67,1.67,0,0,0,1.21,2.82h81.18a1.67,1.67,0,0,0,1.21-2.82l-12.84-13.55s13.44-12,1-27.92c-10.13-13,35.61,22.22,52.71,35.55A3.86,3.86,0,0,0,177.86,236.27Z"/></g></g></svg>'; public about4 = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 177.86 248.05"><defs><style>.cls-1{}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M177.86,236.27V197.84A25.23,25.23,0,0,0,170.48,180l-38.12-38.11s7.4-104-40-140.7a5.62,5.62,0,0,0-6.92,0c-47.37,36.67-40,140.7-40,140.7L7.39,180A25.24,25.24,0,0,0,0,197.84v38.43a3.86,3.86,0,0,0,6.23,3c17.1-13.33,62.85-48.53,52.71-35.55-12.41,15.88,1,27.92,1,27.92L47.13,245.23a1.67,1.67,0,0,0,1.21,2.82h81.18a1.67,1.67,0,0,0,1.21-2.82l-12.84-13.55s13.44-12,1-27.92c-10.13-13,35.61,22.22,52.71,35.55A3.86,3.86,0,0,0,177.86,236.27Z"/></g></g></svg>';
public url: string = null; public url: string = null;
@ -450,7 +345,7 @@ export class LearnHowComponent implements OnInit {
this._meta.updateTag({content: url}, "property='og:url'"); this._meta.updateTag({content: url}, "property='og:url'");
} }
public changeViewTo(step: string) { // public changeViewTo(step: string) {
this.step = step; // this.step = step;
} // }
} }

View File

@ -16,11 +16,12 @@ import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumb
import {HtmlPagesModule} from "../htmlPages/htmlPages.module"; import {HtmlPagesModule} from "../htmlPages/htmlPages.module";
import {IconsModule} from '../openaireLibrary/utils/icons/icons.module'; import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
import {IconsService} from '../openaireLibrary/utils/icons/icons.service'; import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
import {TabsModule} from '../openaireLibrary/utils/tabs/tabs.module';
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, RouterModule, LearnHowRoutingModule, GifSliderModule, HelperModule, CommonModule, RouterModule, LearnHowRoutingModule, GifSliderModule, HelperModule,
Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule, HtmlPagesModule, IconsModule Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule, HtmlPagesModule, IconsModule, TabsModule
], ],
declarations: [ declarations: [
LearnHowComponent LearnHowComponent

@ -1 +1 @@
Subproject commit 03f412c5500359718885676c4fa8128d3a82102f Subproject commit a59143f38153185e2f0a9756bba4125f613cb349