[Trunk | Explore]:

1. app.component.ts: Use feedback component only in production environment.
2. home.component: Add logos of content providers and show numbers accordingly.
3. assets/ExploreLogos: Folder added for logos in Home Page.
4. explore-custom.css: Class 'mainPageSearchForm' changed (background) & classes 'home-logo' and 'home-logo:hover' added for grayscale effect in logos of Home Page.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@57308 d315682c-612b-4755-9ff5-7f18f6832af3

explore/src/app/app.component.ts

@@ -24,7 +24,7 @@ import {UserManagementService} from "./openaireLibrary/services/user-management.
         <router-outlet></router-outlet>
       </main>
     </div>
-    <feedback *ngIf="isClient && properties" portalName="Explore" [feedbackmail]=feedbackmail></feedback>
+    <feedback *ngIf="isClient && properties && properties.environment === 'production'" portalName="Explore" [feedbackmail]=feedbackmail></feedback>
     <cookie-law *ngIf="isClient" position="bottom">
       OpenAIRE uses cookies in order to function properly.<br>
       Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing

explore/src/app/home/home.component.html

@@ -1,3 +1,11 @@
+<ng-template #_logos let-logo="logo" let-class="class">
+  <div *ngIf="logo" [class]="'uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
+    <div class="">
+      <img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo">
+    </div>
+  </div>
+</ng-template>
+
 <div class="image-front-topbar  uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
      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="">
@@ -19,49 +27,107 @@
       <div class="uk-container uk-container-large uk-margin-medium explore-numbers">
         <div class="search_box_bg uk-grid uk-grid-stack" uk-grid="">
           <div class="uk-width-1-1@m uk-first-column">
-            <div id="page#7"
+
-                 class="firstPageNumbers uk-margin uk-margin-remove-bottom uk-width-xlarge uk-margin-auto  uk-animation-fade"
+<!--            <div id="page#7"-->
-                 uk-scrollspy-class="" style="">
+<!--                 class="firstPageNumbers uk-margin uk-margin-remove-bottom uk-width-xlarge uk-margin-auto  uk-animation-fade"-->
-              <div class="uk-margin-bottom">
+<!--                 uk-scrollspy-class="" style="">-->
-                <span *ngIf="showPublications && publicationsSize">
+<!--              <div class="uk-margin-bottom">-->
-                  <span class="uk-h2">{{publicationsSize.number|number}}{{publicationsSize.size}}</span>
+<!--                <span *ngIf="showPublications && publicationsSize">-->
-                  <span class="uk-text-large"> {{((showDatasets || showSoftware || showOrp) ? " publications, "
+<!--                  <span class="uk-h2">{{publicationsSize.number|number}}{{publicationsSize.size}}</span>-->
-                      : " publications ")}}</span>
+<!--                  <span class="uk-text-large"> {{((showDatasets || showSoftware || showOrp) ? " publications, "-->
+<!--                      :" publications ")}}</span>-->
+<!--                </span>-->
+<!--                <span *ngIf="showDatasets && datasetsSize">-->
+<!--                  <span class="uk-h2">{{datasetsSize.number|number}}{{datasetsSize.size}}</span>-->
+<!--                  <span-->
+<!--                    class="uk-text-large">{{((showSoftware || showOrp) ? "  research data, " :"  research data ")}}</span>-->
+<!--                </span>-->
+<!--                <span *ngIf="showOrp && otherSize">-->
+<!--                  <span class="uk-h2">{{otherSize.number|number}}{{otherSize.size}}</span>-->
+<!--                  <span class="uk-text-large">  {{((showSoftware) ? " other research products, " :" other research products ")}}</span>-->
+<!--                </span>-->
+<!--                <span *ngIf="showSoftware && softwareSize">-->
+<!--                  <span class="uk-h2">{{softwareSize.number|number}}{{softwareSize.size}}</span>-->
+<!--                  <span class="uk-text-large">  software </span>-->
+<!--                </span>-->
+
+
+<!--                <br>-->
+<!--                <span *ngIf="showDataProviders && datasourcesSize">-->
+<!--                  <span class="uk-text-large"> from </span>-->
+<!--                   <span class="uk-h2">{{datasourcesSize.number|number}}{{datasourcesSize.size}}</span>-->
+<!--                   <span class="uk-text-large"> content providers </span>-->
+<!--                </span>-->
+<!--                <span *ngIf="showProjects && fundersSize">-->
+<!--                  <span class="uk-text-large"> {{((showDataProviders && datasourcesSize) ? " and " : " from ")}} </span>-->
+<!--                   <span class="uk-h2">{{fundersSize.number|number}}{{fundersSize.size}} </span>-->
+<!--                  <span class="uk-text-large"> funders </span>-->
+
+<!--                </span>-->
+<!--                <span *ngIf="showPublications || showDatasets || showOrp || showSoftware || showProjects ||-->
+<!--                   showDataProviders"-->
+<!--                      class="uk-text-large"> linked together for an integrated discovery of research outcomes </span>-->
+
+<!--              </div>-->
+<!--            </div>-->
+
+            <div class="uk-grid uk-margin uk-margin-remove-bottom uk-width-xlarge uk-margin-auto">
+              <div class="uk-width-expand uk-padding-remove">
+
+                <div uk-slider="autoplay: true; autoplay-interval: 2500" class="uk-margin-top">
+                  <div class="uk-position-relative">
+                    <div class="uk-slider-container">
+                      <ul class="uk-slider-items" uk-height-match="target: > li > div > div > .logo1; row: false;">
+                        <ng-container *ngFor="let type of getKeys(logos)">
+                          <li *ngFor="let range of createRange(logos[type].length) let j=index" class="uk-width-1-1">
+                            <div class="uk-text-center uk-margin-bottom portal-color uk-h2">
+                              <span *ngIf="type=='publication' && showPublications && publicationsSize">
+                                <span class="uk-text-bold">{{publicationsSize.number|number}}{{publicationsSize.size}} publications</span><span> deduplicated</span>
                               </span>
-                <span *ngIf="showDatasets && datasetsSize">
+                              <span *ngIf="type=='dataset' && showDatasets && datasetsSize">
-                  <span class="uk-h2">{{datasetsSize.number|number}}{{datasetsSize.size}}</span>
+                                <span class="uk-text-bold">{{datasetsSize.number|number}}{{datasetsSize.size}} datasets</span><span> interlinked with publications</span>
-                  <span
-                    class="uk-text-large">{{((showSoftware || showOrp) ? "  research data, " : "  research data ")}}</span>
                               </span>
-                <span *ngIf="showOrp && otherSize">
+                              <span *ngIf="type=='software' && showSoftware && softwareSize">
-                  <span class="uk-h2">{{otherSize.number|number}}{{otherSize.size}}</span>
+                                <span class="uk-text-bold">{{softwareSize.number|number}}{{softwareSize.size}} research software</span><span> interlinked with publications</span>
-                  <span
-                    class="uk-text-large">  {{((showSoftware) ? " other research products, " : " other research products ")}}</span>
                               </span>
-                <span *ngIf="showSoftware && softwareSize">
+<!--                              <span *ngIf="type=='other' && showOrp && otherSize">-->
-                  <span class="uk-h2">{{softwareSize.number|number}}{{softwareSize.size}}</span>
+<!--                                <span class="uk-h2">{{otherSize.number|number}}{{otherSize.size}}</span>-->
-                  <span class="uk-text-large">  software </span>
+<!--                                <span class="uk-text-large"> other research products interlinked with publications</span>-->
+<!--                              </span>-->
+                              <span *ngIf="type=='persistent'">
+                                <span>Persistent identifiers and registries</span>
+                              </span>
+                              <span *ngIf="type=='funder' && showProjects && fundersSize">
+                                <span class="uk-text-bold">{{fundersSize.number|number}}{{fundersSize.size}} funders</span><span> and</span>
+                                <span class="uk-text-bold"> {{projectsSize.number|number}}{{projectsSize.size}} funded grants</span>
                               </span>
 
-                <br>
+                            </div>
-                <span *ngIf="showDataProviders && datasourcesSize">
+                            <div class="uk-grid-small  uk-child-width-1-6 uk-text-center grid uk-flex uk-flex-center" uk-grid   uk-height-match="target: > div > .logo2; row: false;">
-                  <span class="uk-text-large"> from </span>
+                              <div *ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
-                   <span class="uk-h2">{{datasourcesSize.number|number}}{{datasourcesSize.size}}</span>
+                                <ng-container *ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 home-logo'}"></ng-container>
-                   <span class="uk-text-large"> content providers </span>
+                                <ng-container *ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 home-logo'}"></ng-container>
-                </span>
+                              </div>
-                <span *ngIf="showProjects && fundersSize">
+                            </div>
-                  <span class="uk-text-large"> {{((showDataProviders && datasourcesSize) ? " and " : " from ")}} </span>
+                          </li>
-                   <span class="uk-h2">{{fundersSize.number|number}}{{fundersSize.size}} </span>
+                        </ng-container>
-                  <span class="uk-text-large"> funders </span>
+                      </ul>
+                    </div>
 
-                </span>
+                    <div class="uk-hidden@s">
-                <span *ngIf="showPublications || showDatasets || showOrp || showSoftware || showProjects ||
+                      <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
-                   showDataProviders"
+                      <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
-                      class="uk-text-large"> linked together for an integrated discovery of research outcomes </span>
+                    </div>
 
+                    <div class="uk-visible@s">
+                      <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
+                      <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
+                    </div>
                   </div>
                 </div>
 
+              </div>
+            </div>
 
           </div>
         </div>
@@ -74,7 +140,7 @@
                [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-explore.png'" type="home"
                name="OpenAIRE Explore"></schema2jsonld>
 <ng-template [ngIf]="properties.environment !== 'production'">
-  <div class="uk-margin-top uk-text-right">
+  <div class="uk-text-right uk-padding-small uk-padding-remove-vertical">
     <a class="uk-button trello-button uk-button-large"
        href="https://trello.com/b/o1tEJ3rN/openaire-research-graph"
        target="_blank"

explore/src/app/home/home.component.ts

@@ -28,7 +28,85 @@ export class HomeComponent {
   public piwiksub: any;
   public subfunders: any;
 
-  public pageTitle = "OpenAIRE"
+  // MAX 12 logos in every slide
+  public logos = {
+    "publication": [
+      [
+        "PubMed-Logo.png",
+        "ArXiv_web.png",
+        "BASE_search_engine_logo.png",
+        "logo-Scielo.png",
+        "lareferencia.png",
+        "ssoar_logo.png",
+        "repec.png",
+        "core.png",
+        "zenodo-black-1000.png",
+        "narcis.png"
+      ],
+      [
+        "crossref-logo.png",
+        "Unpaywall_logo.png",
+        "Elsevier_logo_2019.png",
+        "Springer_Nature.png",
+        "logo-home.png",
+        "opencitations.png",
+        "doaj-logo1.png",
+        "microsoft.png",
+        "plos.png",
+        "F1000.png",
+        "logo_copernicus_publications.png"
+      ]
+    ],
+    "software": [
+      [
+        "Software-heritage-logo.png",
+        "github_PNG23.png",
+        "DOEcodeBLUE_300dpi.png",
+        "bitbucket-logo.png",
+        "sourceforge.png",
+        "zenodo-black-1000.png"
+      ]
+    ],
+    "dataset": [
+      [
+        "zenodo-black-1000.png",
+        "datacite.png",
+        "pangaea.png",
+        "figshare.png",
+        "protocols_identity_outline.png",
+        "ot-logo-white.png",
+        "Kaggle_logo.png",
+        "Reactome.png",
+        "easy.png",
+        "DryadLogo.png"
+      ]
+    ],
+    //"other": [],
+    "persistent": [
+      [
+        "Re3data_Logo_RGB_72dpi.png",
+        "ORCID_logo.png",
+        "opendoar_logo.png",
+        "GRID_rgb1.png"
+      ]
+    ],
+    "funder": [
+      [
+        "European_Commission.png",
+        "NSF.png",
+        "logo-miur.png",
+        "nhmrc.png",
+        "SFI-logo.png",
+        "nwo-logo.png",
+        "wellcome-logo.png",
+        "FCT-logo.png",
+        "gsrt_logo_eng.png",
+        "fnsnf.png"
+      ]
+    ]
+  };
+
+  public pageTitle = "OpenAIRE";
   public keyword:string = "";
 
   public searchFields:SearchFields = new SearchFields();
@@ -84,6 +162,22 @@ public subPub;public subData;public subProjects;public subOrg; public subDataPr;
           //this.fetchDataproviders = new FetchDataproviders(this._searchDataprovidersService);
   }
 
+  public getKeys(obj: {}) {
+    return Object.keys(obj);
+  }
+
+  createRange(number){
+    var items: number[] = [];
+    for(var i = 1; i <= number; i++){
+      items.push(i);
+    }
+    return items;
+  }
+
+  public ceil(num: number) {
+    return Math.ceil(num);
+  }
+
   public ngOnInit() {
     this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {

explore/src/assets/explore-custom.css

@@ -35,8 +35,8 @@
     border-top-color:var(--portal-main-color) !important;
   } */
 .mainPageSearchForm{
-  background-image: /*linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)),*/ url('home.jpg');
+  /*background-image: !*linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)),*! url('home.jpg');*/
-
+    background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
 }
 .firstPageNumbers{
   /* font-weight: 600 !important; */
@@ -136,6 +136,18 @@
     overflow: hidden;
 }
 
+.home-logo {
+    -webkit-filter: grayscale(1); /* Safari 6.0 - 9.0 */
+    filter: grayscale(1);
+    transition-duration:0.3s;
+}
+.home-logo:hover {
+    -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
+    filter: grayscale(0);
+    transition-duration:0.3s;
+}
+
+
 .graph-background {
   background: var(--portal-main-color) 0 0 no-repeat padding-box;
   color: white;
@@ -165,3 +177,4 @@
   background-color: white;
   color: #0079BF;
 }
+