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

learn how page - add text animations

This commit is contained in:
Alex Martzios 2022-02-07 10:28:15 +02:00
parent 5f36b8a36a
commit fb4697b90a
2 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/learn-how/learn-how.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {Component, HostListener, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser';
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
@ -20,7 +20,7 @@ import {properties} from "../../environments/environment";
</div>
<!-- Redesign start -->
<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 uk-margin-large-bottom">
<div class="uk-grid" uk-grid>
<div class="uk-width-1-3">
<h1 title>
@ -223,35 +223,42 @@ import {properties} from "../../environments/environment";
</div>
</div>
</div>
<div class="uk-section uk-padding-remove-top">
<div id="canvas" class="uk-section uk-padding-remove-top">
<div class="uk-container uk-container-large uk-margin-top">
<div class="uk-margin-large-bottom">
<h2 class="uk-h1">Find the best <br> for your community<span class="uk-text-primary">.</span></h2>
</div>
<div class="uk-grid uk-grid-large uk-child-width-1-2" uk-grid>
<div class="uk-margin-medium-bottom">
<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 class="uk-grid uk-grid-large uk-child-width-1-3" uk-grid>
<div class="left" uk-scrollspy="target: .left-text; cls: uk-animation-fade; delay: 600; repeat:true;">
<div class="left-text uk-margin-medium-bottom uk-padding uk-margin-medium-left uk-padding-remove-right">
<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>
<div class="left-text uk-margin-medium-bottom uk-padding" uk-scrollspy-class="uk-animation-slide-left">
<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>
<div class="left-text uk-margin-medium-bottom uk-padding uk-margin-medium-left uk-padding-remove-right">
<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>
</div>
<div class="uk-margin-medium-bottom">
<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 class="mid">
<img src="assets/connect-assets/about/placeholder-img.png" alt="">
</div>
<div class="uk-margin-medium-bottom">
<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>
<div class="uk-margin-medium-bottom">
<h4 class="uk-margin-small-bottom">Links</h4>
<div>Manage user claims related to the research community.</div>
</div>
<div class="uk-margin-medium-bottom">
<h4 class="uk-margin-small-bottom">Help texts</h4>
<div>Add or edit help text in research community pages.</div>
</div>
<div class="uk-margin-medium-bottom">
<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 class="right" uk-scrollspy="target: .right-text; cls: uk-animation-fade; delay: 600; repeat:true;">
<div class="right-text uk-margin-medium-bottom uk-padding uk-margin-right-left uk-padding-remove-left">
<h4 class="uk-margin-small-bottom">Links</h4>
<div>Manage user claims related to the research community.</div>
</div>
<div class="right-text uk-margin-medium-bottom uk-padding" uk-scrollspy-class="uk-animation-slide-right">
<h4 class="uk-margin-small-bottom">Help texts</h4>
<div>Add or edit help text in research community pages.</div>
</div>
<div class="right-text uk-margin-medium-bottom uk-padding uk-margin-right-left uk-padding-remove-left">
<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>
</div>
</div>
</div>
@ -273,11 +280,20 @@ export class LearnHowComponent implements OnInit {
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="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 pageTitle: string = "OpenAIRE - Connect | Learn How";
public pageDescription: string = "Learn the process: Build a Gateway to your community's open and linked research outcomes. Customized to your needs.";
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about'}];
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About'}];
// @HostListener('document:keydown.arrowup', ['$event'])
// @HostListener('document:keydown.arrowdown', ['$event'])
// @HostListener('window:scroll', ['$event'])
// onEvent(event) {
// const canvas = document.getElementById('canvas');
// if(window.pageYOffset >= canvas.offsetTop) {
// window.scrollTo(canvas.offsetLeft, canvas.offsetTop);
// }
// }
properties: EnvProperties;
subscriptions = [];
@ -306,7 +322,6 @@ export class LearnHowComponent implements OnInit {
//this.getDivContents();
this.getPageContents();
}
private getPageContents() {

BIN
src/assets/connect-assets/about/placeholder-img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB