[develop | DONE | CHANGED]: home.component & assets/ExploreLogos: Grouped logos of slider in Home page (per slide) into one image and replaced the old logos - better performance.

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

@@ -1,7 +1,8 @@
 <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 *ngIf="logo" [class]="'uk-margin-top uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal '+class">
         <div class="">
-            <img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">
+<!--            <img src="assets/ExploreLogos/grouped/{{logo}}" alt="{{logo}} logo" loading="lazy" width="112px" height="44px">-->
+            <img src="assets/ExploreLogos/{{logo}}" alt="{{logo}} logo" loading="lazy" width="100%" height="auto">
         </div>
     </div>
 </ng-template>
@@ -80,7 +81,7 @@
                             <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 home-logo">
-                                    <h1 class="uk-text-center uk-margin-large-bottom uk-text-primary uk-h4">
+                                    <h1 class="uk-text-center uk-margin-bottom uk-text-primary uk-h4">
 											<span *ngIf="type=='publication' && numbersComponent.showPublications && numbers?.publicationsSize">
 												<span
                                                         class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
@@ -119,16 +120,18 @@
 											</span>
 
                                     </h1>
-                                    <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;">
-                                        <div
-                                                *ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">
-                                            <ng-container
-                                                    *ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>
-                                            <ng-container
-                                                    *ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>
-                                        </div>
+                                  <div class="uk-text-center uk-flex uk-flex-center uk-margin-medium-left uk-margin-medium-right">
+                                    <ng-container *ngTemplateOutlet="_logos; context: { logo: logos[type][j], class: ' '}"></ng-container>
+<!--                                    <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;">-->
+<!--                                        <div-->
+<!--                                                *ngFor="let logo of logos[type][j].slice(0,ceil(logos[type][j].length/2)); let i=index">-->
+<!--                                            <ng-container-->
+<!--                                                    *ngTemplateOutlet="_logos; context: { logo: logo, class: 'logo1 '}"></ng-container>-->
+<!--                                            <ng-container-->
+<!--                                                    *ngTemplateOutlet="_logos; context: { logo: logos[type][j][ceil(logos[type][j].length/2)+i], class: 'uk-margin-top logo2 '}"></ng-container>-->
+<!--                                        </div>-->
                                     </div>
                                 </li>
                             </ng-container>

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

@@ -36,79 +36,85 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   public logos = {
     "publication": [
       [
-        "logo-pubmed.png",
-        "logo-arxiv.png",
-        "logo-base.png",
-        "logo-scielo.png",
-        "logo-la-referencia.png",
-        "logo-soar.png",
-        "logo-repec.png",
-        "logo-core.png",
-        "logo-zenodo.png",
-        "logo-narcis.png"
+        // "logo-pubmed.png",
+        // "logo-arxiv.png",
+        // "logo-base.png",
+        // "logo-scielo.png",
+        // "logo-la-referencia.png",
+        // "logo-soar.png",
+        // "logo-repec.png",
+        // "logo-core.png",
+        // "logo-zenodo.png",
+        // "logo-narcis.png"
+        "publications.png"
       ],
       [
-        "logo-unpaywall.png",
-        "logo-elsevier.png",
-        "logo-spring-nature.png",
-        "logo-frontiers.png",
-        "logo-opencitations.png",
-        "logo-doaj.png",
-        "logo-microsoft.png",
-        "logo-plos.png",
-        "logo-f1000.png",
-        "logo-copernicus.png"
+        // "logo-unpaywall.png",
+        // "logo-elsevier.png",
+        // "logo-spring-nature.png",
+        // "logo-frontiers.png",
+        // "logo-opencitations.png",
+        // "logo-doaj.png",
+        // "logo-microsoft.png",
+        // "logo-plos.png",
+        // "logo-f1000.png",
+        // "logo-copernicus.png"
+        "publications2.png"
       ]
     ],
     "software": [
       [
-        "logo-software-heritage.png",
-        "logo-github.png",
-        "logo-doecode.png",
-        "logo-bitbucket.png",
-        "logo-elixir-bio-tools.png",
-        "logo-google-code.png",
-        "logo-sourceforge.png",
-        "logo-zenodo.png"
+        // "logo-software-heritage.png",
+        // "logo-github.png",
+        // "logo-doecode.png",
+        // "logo-bitbucket.png",
+        // "logo-elixir-bio-tools.png",
+        // "logo-google-code.png",
+        // "logo-sourceforge.png",
+        // "logo-zenodo.png"
+        "software.png"
       ]
     ],
     "dataset": [
       [
-        "logo-scholexplorer.png",
-        "logo-zenodo.png",
-        "logo-pangea.png",
-        "logo-figshare.png",
-        "logo-protocols.png",
-        "logo-opentrials.png",
-        "logo-kaggle.png",
-        "logo-reactome.png",
-        "logo-easy.png",
-        "logo-dryad.png"
+        // "logo-scholexplorer.png",
+        // "logo-zenodo.png",
+        // "logo-pangea.png",
+        // "logo-figshare.png",
+        // "logo-protocols.png",
+        // "logo-opentrials.png",
+        // "logo-kaggle.png",
+        // "logo-reactome.png",
+        // "logo-easy.png",
+        // "logo-dryad.png"
+        "datasets.png"
       ]
     ],
     "persistent": [
       [
-        "logo-re3data.png",
-        "logo-orcid.png",
-        "logo-opendoar.png",
-        "logo-grid.png",
-        "logo-fairsharing.png",
-        "logo-ror.png",
-        "logo-datacite.png",
-        "logo-crossref.png"
+        // "logo-re3data.png",
+        // "logo-orcid.png",
+        // "logo-opendoar.png",
+        // "logo-grid.png",
+        // "logo-fairsharing.png",
+        // "logo-ror.png",
+        // "logo-datacite.png",
+        // "logo-crossref.png"
+        "pids.png"
       ]
     ],
     "funder": [
       [
-        "logo-european-commision.png",
-        "logo-nsf.png",
-        "logo-nhmrc.png",
-        "logo-sfi.png",
-        "logo-nwo.png",
-        "logo-welcome-trust.png",
-        "logo-fct.png",
-        "logo-gsrt.png",
-        "logo-fnsnf.png"
+        // "logo-european-commision.png",
+        // "logo-nsf.png",
+        // "logo-nhmrc.png",
+        // "logo-sfi.png",
+        // "logo-nwo.png",
+        // "logo-welcome-trust.png",
+        // "logo-fct.png",
+        // "logo-gsrt.png",
+        // "logo-fnsnf.png"
+        "funders.png"
       ]
     ]
   };