[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

src/app/communities/communities.component.html

@@ -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>
+          <h5 class="uk-width-expand"><b>Browse Research Initiatives</b></h5>
-          <div class="uk-container uk-margin-top">
+          <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">

src/app/createCommunity/community-creation-instructions.component.ts

@@ -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')"
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Configure your community profile') + '; cls: conf-profile'"-->
-                      class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                  <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')"
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"-->
-                      class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                  <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')"
+                  <!-- [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"-->
-                      class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                  <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')"
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"-->
-                        class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                  <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
-                        style="left: 22%; top: 64%" 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')"
+                  <!--[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"
+                  <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')"
+                  <!--[attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"-->
-                      class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                  <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">
+                      <img  src="assets/community-first-page.jpg" alt="OpenAIRE">
-                      <a  [attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"
+
-                          class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      <div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center"
-                          style="right: 6%; top: 16%" uk-marker>
+                            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')"
+                      <!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"-->
-                          class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
-                          style="right: 26%; top: 36%" 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')"
+                      <!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"-->
-                          class="uk-position-absolute uk-transform-center uk-icon uk-marker"
+                      <a  class="uk-position-absolute uk-transform-center uk-icon uk-marker"
-                          style="left: 60%; top: 54%" 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-container uk-container-large">
-            <div class="uk-margin-large-top uk-margin-large-bottom">
+          <div class="uk-margin-large-top uk-margin-large-bottom">
-                <div class="uk-margin uk-panel">
+            <div class="uk-margin uk-panel">
-                  <h4 class="uk-margin uk-h4 uk-text-bold">
+              <h4 class="uk-margin uk-h4 uk-text-bold">
-                    Why trust OpenAIRE?
+                Why trust OpenAIRE?
-                  </h4>
+              </h4>
-                  <ul class="uk-list uk-margin-left">
+
-                    <li>It is the Open Access Infrastructure for Europe.</li>
+              <div  class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid
-                    <li>It is community based and independent.</li>
+                    uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 500">
-                    <li>Provides organizational and technical framework to support OpenScience.</li>
+                <div>
-                    <li>It is part of the European Open Science Cloud.</li>
+                    <div class="uk-card uk-card-default uk-card-body">
-                    <li>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</li>
+                        <p class="">It is the Open Access Infrastructure for Europe.</p>
-                    <li>Ensures that all data come from trusted sources.</li>
+                    </div>
-                  </ul>
                 </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();

src/assets/connect-custom.css

@@ -79,6 +79,9 @@
   z-index: 10;
 }
 
+.my-tooltip {
+  opacity: 0;
+}
 
 .communityToolBarSection{
   z-index: 10;