[Trunk|Connect]:
1. communities.component: Tooltip (description) position: bottom-right. 2. ommunity-creation-instructions.component & admin-portal.png & community-first-page.jpg & connect-custom.css: Pictures for 'How to create and manage community' page changed. Tooltips replaced by divs with calculated position, which open with javascript on scrolling. connect-custom.css: 'my-tooltip' class added for setting opacity to 0. git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55370 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni
parent
1b4191db7f
commit
315991cd36
|
|
@ -10,13 +10,13 @@
|
|||
<div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0">
|
||||
<h3 class="uk-margin-large-top">My Communities</h3>
|
||||
<div *ngIf="managerOfCommunities.length > 0">
|
||||
<h5 class="uk-margin-remove-bottom">You are managing</h5>
|
||||
<h5 class="uk-margin-small-bottom">You are managing</h5>
|
||||
<div class="uk-container">
|
||||
|
||||
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
|
||||
<div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
|
||||
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
|
||||
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')">
|
||||
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
|
||||
<browse-community [community]="community" [showDescription]="false" [isManager]="true"></browse-community>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,13 +37,13 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf="subscriberOfCommunities.length > 0">
|
||||
<h5 class="uk-margin-remove-bottom uk-margin-small-top">You are subscribed to</h5>
|
||||
<h5 class="uk-margin-small-bottom uk-margin-small-top">You are subscribed to</h5>
|
||||
<div class="uk-container">
|
||||
|
||||
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-title">
|
||||
<div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
|
||||
<div class="uk-padding-small uk-height-max-medium uk-card uk-card-default"
|
||||
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description) : 'cls: uk-invisible')">
|
||||
[attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
|
||||
<browse-community [community]="community" [showDescription]="false"></browse-community>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
<h3>Search, share, link results of your research community</h3>
|
||||
</div>
|
||||
<div class="uk-container">
|
||||
<h5 class=" uk-width-expand uk-margin-remove-bottom">Start by locating your community</h5>
|
||||
<h5 class=" uk-width-expand uk-margin-remove-bottom"><b>Start by locating your community</b></h5>
|
||||
<search-form class="uk-align-left" placeholderText="Start by locating your community" link="/search/find/communities"></search-form>
|
||||
</div>
|
||||
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf= "researchCommunities.length > 0" class="uk-container uk-margin-medium-top">
|
||||
<h5 class="uk-width-expand">Browse Research Communities</h5>
|
||||
<h5 class="uk-width-expand"><b>Browse Research Communities</b></h5>
|
||||
<div [class]="'uk-container uk-margin-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
|
||||
|
||||
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
|
||||
|
|
@ -125,8 +125,8 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf= "researchInitiatives.length > 0" class="uk-container portal-hr">
|
||||
<h5 class="uk-width-expand">Browse Research Initiatives</h5>
|
||||
<div class="uk-container uk-margin-top">
|
||||
<h5 class="uk-width-expand"><b>Browse Research Initiatives</b></h5>
|
||||
<div [class]="'uk-container uk-margin-top' + (researchInitiatives.length <= 5 ? ' uk-margin-medium-bottom' : '')">
|
||||
|
||||
<div class="uk-grid-match uk-grid-small uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community-main">
|
||||
<div *ngFor="let community of researchInitiatives.slice(0,5); let i = index">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import {Title, Meta} from '@angular/platform-browser';
|
|||
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
|
||||
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
|
||||
|
||||
declare var UIkit: any;
|
||||
|
||||
@Component({
|
||||
selector: 'community-creation-instructions',
|
||||
template: `
|
||||
|
|
@ -33,51 +35,87 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-pr
|
|||
<div>
|
||||
<div>
|
||||
<div class="uk-margin-bottom uk-margin-top">
|
||||
<!--div uk-scrollspy="cls: uk-animation-fade uk-animation-reverse; target: > div > div > .uk-card; delay: 1000; repeat: false"-->
|
||||
<div class="uk-container uk-margin-large-top">
|
||||
<h3>OpenAIRE Connect managing tool at a glance</h3>
|
||||
<div class="uk-inline uk-dark">
|
||||
<img src="assets/admin-portal.png" alt="OpenAIRE" >
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Your logo goes here')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
|
||||
<div id="logo" class="my-tooltip uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 27%; top: 2%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Your logo goes here</div>
|
||||
</div>
|
||||
|
||||
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 33%; top: 21%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Configure your community profile</div>
|
||||
</div>
|
||||
<div class="my-tooltip uk-width-1-5 uk-card uk-text-center uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 56%; top: 18%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Connect with subjects, projects, content providers & Zenodo communities</div>
|
||||
</div>
|
||||
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 80%; top: 19%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Choose statistics and charts to be publicly available</div>
|
||||
</div>
|
||||
|
||||
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 32%; top: 60%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Curate links of research results</div>
|
||||
</div>
|
||||
<div class="my-tooltip uk-width-1-5 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 56%; top: 59%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Add help texts in your pages for extra information</div>
|
||||
</div>
|
||||
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 80%; top: 60%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Invite collaborators and users</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Your logo goes here')"-->
|
||||
<!--uk-toggle="target: #logo; mode: click"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 20%; top: 5%" uk-marker>
|
||||
<!--span uk-icon="plus"></span-->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Confugure your community profile')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Configure your community profile') + '; cls: conf-profile'"-->
|
||||
<a class="configure-profile uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 22%; top: 24%" uk-marker>
|
||||
<!--span uk-icon="plus"></span-->
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 46%; top: 24%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
<!-- [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 70%; top: 24%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 22%; top: 64%" uk-marker>
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 22%; top: 64%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Add help texts in your pages for extra information')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Add help texts in your pages for extra information')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 46%; top: 64%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 70%; top: 64%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-container uk-margin-large-top">
|
||||
<h3>Community public page</h3>
|
||||
|
|
@ -92,20 +130,34 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-pr
|
|||
</div>
|
||||
<div class="uk-width-2-3 uk-text-center">
|
||||
<div class="uk-inline uk-dark">
|
||||
<img src="assets/community-first-page.png" alt="OpenAIRE">
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="right: 6%; top: 16%" uk-marker>
|
||||
<img src="assets/community-first-page.jpg" alt="OpenAIRE">
|
||||
|
||||
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 80%; top: 31%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Community content at a glance</div>
|
||||
</div>
|
||||
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 57%; top: 38%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Locate Research Results</div>
|
||||
</div>
|
||||
<div class="my-tooltip uk-width-1-4 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
|
||||
style="left: 48%; top: 58%">
|
||||
<div class="uk-padding-small uk-text-small uk-text-bold">Recent research results and related graphs</div>
|
||||
</div>
|
||||
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="right: 6%; top: 28%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="right: 26%; top: 36%" uk-marker>
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 45%; top: 40%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
<a [attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"
|
||||
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 60%; top: 54%" uk-marker>
|
||||
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"-->
|
||||
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
||||
style="left: 35%; top: 55%" uk-marker>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -113,25 +165,51 @@ import {EnvProperties} from '../openaireLibrary/utils/properties/env-pr
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/div-->
|
||||
</div>
|
||||
|
||||
<div class="uk-section-muted uk-margin-large-top">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-margin-large-top uk-margin-large-bottom">
|
||||
<div class="uk-margin uk-panel">
|
||||
<h4 class="uk-margin uk-h4 uk-text-bold">
|
||||
Why trust OpenAIRE?
|
||||
</h4>
|
||||
<ul class="uk-list uk-margin-left">
|
||||
<li>It is the Open Access Infrastructure for Europe.</li>
|
||||
<li>It is community based and independent.</li>
|
||||
<li>Provides organizational and technical framework to support OpenScience.</li>
|
||||
<li>It is part of the European Open Science Cloud.</li>
|
||||
<li>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</li>
|
||||
<li>Ensures that all data come from trusted sources.</li>
|
||||
</ul>
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-margin-large-top uk-margin-large-bottom">
|
||||
<div class="uk-margin uk-panel">
|
||||
<h4 class="uk-margin uk-h4 uk-text-bold">
|
||||
Why trust OpenAIRE?
|
||||
</h4>
|
||||
|
||||
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid
|
||||
uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 500">
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<p class="">It is the Open Access Infrastructure for Europe.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<p>It is community based and independent.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<p>Provides organizational and technical framework to support OpenScience.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<p>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<p>Provides organizational and technical framework to support OpenScience.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<p>Ensures that all data come from trusted sources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -165,9 +243,45 @@ export class CommunityCreationInstructionsComponent {
|
|||
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
|
||||
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
|
||||
}
|
||||
|
||||
UIkit.tooltip('.configure-profile').show();
|
||||
});
|
||||
}
|
||||
|
||||
public ngAfterViewInit() {
|
||||
if (document !== undefined) {
|
||||
if (document.getElementById('enableFadeOutScrollScript')) {
|
||||
document.getElementById('enableFadeOutScrollScript').remove();
|
||||
}
|
||||
|
||||
const enableFadeOutScrollScript = document.createElement('script');
|
||||
enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript');
|
||||
enableFadeOutScrollScript.innerHTML = '\n' +
|
||||
'$(document).ready(function() {\n' +
|
||||
'\n' +
|
||||
' $(window).scroll( function(){\n' +
|
||||
'\n' +
|
||||
' $(\'.my-tooltip\').each( function(i){\n' +
|
||||
'\n' +
|
||||
' var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' +
|
||||
' var bottom_of_window = $(window).scrollTop() + $(window).height();\n' +
|
||||
'\n' +
|
||||
' if( bottom_of_window > bottom_of_object ){\n' +
|
||||
'\n' +
|
||||
' $(this).animate({\'opacity\':\'1\'},1500);\n' +
|
||||
'\n' +
|
||||
' }\n' +
|
||||
'\n' +
|
||||
' });\n' +
|
||||
'\n' +
|
||||
' });\n' +
|
||||
'\n' +
|
||||
' });';
|
||||
|
||||
document.body.appendChild(enableFadeOutScrollScript);
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
if(this.piwiksub){
|
||||
this.piwiksub.unsubscribe();
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB After Width: | Height: | Size: 362 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
|
|
@ -79,6 +79,9 @@
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
.my-tooltip {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.communityToolBarSection{
|
||||
z-index: 10;
|
||||
|
|
|
|||
Loading…
Reference in New Issue