apply new theme changes - mainly for eosc

src/app/app-routing.module.ts

@@ -1,44 +1,41 @@
 import {NgModule} from '@angular/core';
 import {Router, RouterModule, Routes} from '@angular/router';
 import {OpenaireErrorPageComponent} from './error/errorPage.component';
-import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
-import {PortalAggregators} from "./utils/aggregators";
-import {properties} from "../environments/environment";
 import {ConfigurationService} from "./openaireLibrary/utils/configuration/configuration.service";
 
 const routes: Routes = [
   {path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
   {
     path: 'search/result',
-    loadChildren: () => import('./landingPages/result/libResult.module').then(m => m.LibResultModule)
+    loadChildren: () => import('./landingPages/result/libResult.module').then(m => m.LibResultModule), data: { showHeader: true}
   },
   {
     path: 'search/publication',
-    loadChildren: () => import('./landingPages/publication/libPublication.module').then(m => m.LibPublicationModule)
+    loadChildren: () => import('./landingPages/publication/libPublication.module').then(m => m.LibPublicationModule), data: { showHeader: true}
   },
   {
     path: 'search/dataset',
-    loadChildren: () => import('./landingPages/dataset/libDataset.module').then(m => m.LibDatasetModule)
+    loadChildren: () => import('./landingPages/dataset/libDataset.module').then(m => m.LibDatasetModule), data: { showHeader: true}
   },
   {
     path: 'search/software',
-    loadChildren: () => import('./landingPages/software/libSoftware.module').then(m => m.LibSoftwareModule)
+    loadChildren: () => import('./landingPages/software/libSoftware.module').then(m => m.LibSoftwareModule), data: { showHeader: true}
   },
   {
     path: 'search/other',
-    loadChildren: () => import('./landingPages/orp/libOrp.module').then(m => m.LibOrpModule)
+    loadChildren: () => import('./landingPages/orp/libOrp.module').then(m => m.LibOrpModule), data: { showHeader: true}
   },
   {
     path: 'search/project',
-    loadChildren: () => import('./landingPages/project/libProject.module').then(m => m.LibProjectModule)
+    loadChildren: () => import('./landingPages/project/libProject.module').then(m => m.LibProjectModule), data: { showHeader: true}
   },
   {
     path: 'search/dataprovider',
-    loadChildren: () => import('./landingPages/dataProvider/libDataProvider.module').then(m => m.LibDataProviderModule)
+    loadChildren: () => import('./landingPages/dataProvider/libDataProvider.module').then(m => m.LibDataProviderModule), data: { showHeader: true}
   },
   {
     path: 'search/organization',
-    loadChildren: () => import('./landingPages/organization/libOrganization.module').then(m => m.LibOrganizationModule)
+    loadChildren: () => import('./landingPages/organization/libOrganization.module').then(m => m.LibOrganizationModule), data: { showHeader: true}
   },
   {
     path: 'search/find',

src/app/app.component.ts

@@ -12,13 +12,13 @@ import {ConfigurationService} from "./openaireLibrary/utils/configuration/config
 import {Subscriber} from "rxjs";
 import {DOCUMENT} from "@angular/common";
 import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
-import {Router} from "@angular/router";
+import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
 
 @Component({
   selector: 'app-root',
   template: `
     <div *ngIf="agg">
-      <navbar *ngIf="properties && loginCheck && header && agg.menuId != 'eosc'" portal="aggregator" [properties]=properties [onlyTop]=false
+      <navbar *ngIf="properties && loginCheck && header && showHeader" portal="aggregator" [properties]=properties [onlyTop]=false
               [user]="user" [userMenuItems]="userMenuItems"
               [communityId]="properties.adminToolsCommunity" [menuItems]=menuItems
               [userMenu]="agg.enableLogin" [header]="header"></navbar>
@@ -52,19 +52,30 @@ export class AppComponent {
   loginCheck: boolean = false;
   footer = portalProperties.sectionFooter;
   header: Header;
+  showHeader;
   agg: AggregatorInfo = null;
   subscriptions = [];
 
   constructor(private userManagementService: UserManagementService,
               private configurationService: ConfigurationService, private smoothScroll: SmoothScroll,
-              @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) {
+              @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2,  private router: Router, private route: ActivatedRoute) {
     this.id = ConnectHelper.getCommunityFromDomain(this.properties.domain);
     this.agg = PortalAggregators.getFilterInfoByMenuId(this.id);
     this.setStyles();
     this.configurationService.initStaticCommunityInformation(PortalAggregators.getCommunityInfoByMenuId(this.id));
+    this.showHeader = this.agg.showHeaderAlways;
   }
 
   ngOnInit() {
+    this.subscriptions.push(this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        let r = this.route;
+        while (r.firstChild) {
+          r = r.firstChild;
+        }
+        this.showHeader = (r.snapshot.data.showHeader == true || this.agg.showHeaderAlways);
+      }
+    }));
     if (typeof document !== 'undefined') {
         this.isClient = true;
     }
@@ -135,155 +146,7 @@ export class AppComponent {
 
   }
   setStyles(){
-    let css:string =':root {\n';
+    let css:string = this.agg.customCss;
-    if(this.agg.mainColor){
-      css = css.concat('--portal-main-color: ' + this.agg.mainColor + ';\n');
-    }
-    if(this.agg.darkColor){
-      css = css.concat('--portal-dark-color: ' + this.agg.darkColor + ';\n');
-    }
-    if(this.agg.darkColor){
-      css = css.concat("--graph-background:  url('" + this.agg.background + "\') no-repeat bottom;\n");
-    }
-    css = css.concat('}');
-    let css2 = `
-
-#searchImage{
-background: url('https://marketplace.eosc-portal.eu/packs/media/images/eosc-logo-color-883f208671ef77b15b9cd067ecdc369b.png') no-repeat center left;
-width: 250px;
-height: 80px;
-background-size: 250px 80px;
-margin-left: 80px;
-margin-bottom: 37px;
-}
-#searchForm advanced-search-form{
-float:right;
-}
-#searchForm{
-padding:0;
- width:100%;
-  max-width:100%;
-}
-search-filter h6::after{
-border-bottom: 1px solid gray;
-}
-search-filter h6{
-text-transform: uppercase !important;
-font-size: 12px;
-}
-
-search-filter .tm-child-list-divider > ul > li:nth-child(n+2), .uk-list-divider > li:nth-child(n+2){
-border: none;
-}
-
-.filterHeader{
-border-bottom:1px solid #ced4da;
-}
-.matSelection.mat-select {
-
-    padding: 4px;
-    border: 1px solid #ced4da;
-
-}
-
-  
- 
-.search-results .uk-card-default.uk-card-hover:hover{
-    box-shadow: none;
-}
-.search-results .uk-card-default {
-    border: 1px solid #ced4da;
-    box-shadow:none;
-}
-
-element {
-
-}
-.uk-pagination > .uk-active > *, .uk-pagination > .uk-active > :hover {
-
-   border-radius: 0px;
- 
-
-}
-    .uk-button-primary:not(.uk-icon-button), .portal-button:not(.uk-icon-button) {
-      color: #fff !important;
-      background-color: #0c2bd5 !important;
-      background-image: linear-gradient(135deg,#05cae7,#0c2bd5) !important;
-      border:none !important;
-     }
-     
-   .uk-button-primary:hover, .portal-button:hover:not(.uk-icon-button) {
-       background: #0c2bd5 !important;
-        border:none !important;
-    }
-
-       .search_box_bg .uk-button, #searchForm .uk-button, .search_box_bg .uk-button:hover, #searchForm .uk-button:hover {
-      border-radius: 0px;
-      margin-left: 0px !important;
-      color: rgb(102, 102, 102) !important;
-      background-color: #0c2bd5 !important;
-      background-color: rgba(255, 255, 255, 1.0) !important;
-      border: 1px solid rgba(0, 0, 0, 0.40) !important;
-      background-image: none !important;
-
-    }
-
-    .uk-navbar-nav > li > a, .uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover {
-      color: #555 !important;
-    }
-    .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a.uk-open, .uk-navbar-nav > li > a:focus {
-      color: #555 ;
-      outline: 0;
-    }
-    
-.aggregator-menu .uk-navbar-nav>li {
- margin-right:20px
-}
-.aggregator-menu .uk-navbar-nav>li>a {
- padding:0
-}
-
-.navbar .nav > li > .dropdown-menu, .uk-navbar-dropdown{
-background-color: white;
- color: #555;
-}
- 
-.aggregator-menu .uk-navbar-dropdown li:before {
- bottom:0
-} 
-.navbar .nav>li>.dropdown-menu,
-.uk-navbar-dropdown {
- padding:20px
-}
- 
-
-/* .aggregator-menu .uk-navbar-dropdown li:active::before, .aggregator-menu .uk-navbar-dropdown li:focus::before, .aggregator-menu .uk-navbar-dropdown li:hover::before, .aggregator-menu .uk-navbar-nav > li > a:active::before, .aggregator-menu .uk-navbar-nav > li > a:focus::before, .aggregator-menu .uk-navbar-nav > li > a:hover::before {
-
-    transform: scaleX(1);
-    transform-origin: 0 50%;
-
-}
-.aggregator-menu .uk-navbar-dropdown li::before, .aggregator-menu .uk-navbar-nav > li > a::before {
-
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 3px;
-    bottom: 20px;
-    z-index: 300;
-    left: 0;
-    background-color: #dc9d19;
-    transform: scaleX(0);
-    transition: transform .5s cubic-bezier(.7,0,.3,1);
-    transform-origin: 100% 50%;
-
-}*/
- 
-
-    `;
-    if(this.agg.menuId == 'eosc') {
-      css = css.concat(css2);
-    }
     try {
       if( this.document.getElementById('customStyle')){
         try {

src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="image-front-topbar">
-  <div class="uk-section mainPageSearchForm">
+<!--  <div class="uk-section mainPageSearchForm">
     <div class="">
       <div class="search_box_bg ">
         <div id="searchForm" class="uk-grid  uk-flex uk-flex-center">
@@ -35,7 +35,7 @@
                   Search
                 </button>
                 <div class="uk-margin-small-top  uk-margin-left">
-                  <!--                        (click)="goTo(false)"-->
+                  &lt;!&ndash;                        (click)="goTo(false)"&ndash;&gt;
                   <a *ngIf="selectedEntity!='all'" (click)="goTo(false)" class="portal-link">Advanced Search</a>
                   <a *ngIf="selectedEntity=='all'" class="portal-link ">Advanced Search</a></div>
                 <div *ngIf="selectedEntity=='all'" uk-dropdown class="uk-dropdown default-dropdown">
@@ -65,6 +65,27 @@
         </div>
       </div>
     </div>
+  </div>-->
+  <div class="uk-section  uk-margin-large-top uk-margin-large-bottom uk-grd uk-flex uk-overflow-hidden home-background">
+    <div id="searchImage" class="uk-margin-medium-top uk-margin-small-right "></div>
+    <div class="uk-width-expand search_box_bg uk-height-medium" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
+
+          <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top uk-width-3-5@m" uk-scrollspy-class>
+            <advanced-search-input (searchEmitter)="goTo(true)">
+              <entities-selection #entities [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
+                                  (selectionChange)="entityChanged($event)" (disableSelectEmitter)="disableSelect = $event"
+                                  [onChangeNavigate]="false"></entities-selection>
+              <div input placeholder="Scholary works" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
+            </advanced-search-input>
+
+            <div *ngIf="selectedEntity === 'result' && !entities.input.focused" class="uk-dropdown uk-display-block uk-margin-top uk-width-auto">
+              <div class="uk-padding-small">
+                <quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
+              </div>
+            </div>
+          </div>
+        </div>
+
   </div>
 </div>
 <div *ngIf="aggregatorId == 'eosc'" class="uk-grid uk-child-width-1-2@m uk-child-width-1-1@s">

src/app/home/home.component.ts

@@ -58,6 +58,7 @@ export class HomeComponent {
     value: "Open Access"
   };
   selectedEntity = "all";
+  disableSelect;
   selectedEntitySimpleUrl;
   selectedEntityAdvancedUrl;
   resultTypes:Filter = {values:[],filterId:"type", countSelectedValues: 0, filterType: 'checkbox', originalFilterId: "", valueIsExact: true, title: "Result Types",filterOperator:"or"};

src/app/home/home.module.ts

@@ -26,6 +26,8 @@ import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {arrow_right, book, cog, database, earth} from "../openaireLibrary/utils/icons/icons";
 import {NumbersModule} from "../openaireLibrary/sharedComponents/numbers/numbers.module";
+import {AdvancedSearchInputModule} from "../openaireLibrary/sharedComponents/advanced-search-input/advanced-search-input.module";
+import {InputModule} from "../openaireLibrary/sharedComponents/input/input.module";
 
 @NgModule({
   imports: [
@@ -38,7 +40,7 @@ import {NumbersModule} from "../openaireLibrary/sharedComponents/numbers/numbers
     HomeRoutingModule,
     HelperModule,
     ErrorMessagesModule,
-    SEOServiceModule, EntitiesSelectionModule, QuickSelectionsModule, IconsModule, NumbersModule
+    SEOServiceModule, EntitiesSelectionModule, QuickSelectionsModule, IconsModule, NumbersModule, AdvancedSearchInputModule, InputModule
   ],
   declarations: [
     HomeComponent

src/app/utils/aggregators.ts

@@ -10,15 +10,14 @@ export class AggregatorInfo {
   queryFieldName: string; //country
   valueId: string; //gr
   valueName: string; // Greece
-  mainColor:string;
-  darkColor:string;
-  background:string;
   graphSectionTitle: string;
   graphSectionText: string;
   enableLogin: boolean;
+  customCss:string;
+  showHeaderAlways:boolean;
 
   constructor(menuId: string, title: string, logoUrl: string, fieldName: string, queryFieldName: string, valueId: string,
-              valueName: string, mainColor:string=null, darkColor:string=null, background:string=null,graphSectionTitle: string = null, graphSectionText:string = null, enableLogin:boolean = true ) {
+              valueName: string, graphSectionTitle: string = null, graphSectionText:string = null, enableLogin:boolean = true, showHeaderAlways:boolean = true, customCss:string = "" ) {
     this.menuId = menuId;
     this.title = title;
     this.logoUrl = logoUrl;
@@ -26,18 +25,18 @@ export class AggregatorInfo {
     this.queryFieldName = queryFieldName;
     this.valueId = valueId;
     this.valueName = valueName;
-    this.mainColor = mainColor;
-    this.darkColor = darkColor;
-    this.background = background;
     this.graphSectionTitle = graphSectionTitle;
     this.graphSectionText = graphSectionText;
     this.enableLogin = enableLogin;
+    this.showHeaderAlways = showHeaderAlways;
+    this.customCss = customCss;
   }
 }
 
 export class PortalAggregators {
   static list: AggregatorInfo[] = [
-    new AggregatorInfo("canada", "Canadian Aggregator", "assets/canada-logo.png", "Country", "country", "CA", "Canada","#E80000","#ad0000", "/assets/canada-background.svg",
+    new AggregatorInfo("canada", "Canadian Aggregator", "assets/canada-logo.png", "Country",
+      "country", "CA", "Canada",
       "Portal to Canadian Research Outputs", `<span>
             Welcome to the Portal of Canadian Research Outputs. This has been developed as part of a collaboration between 
             Canadian Association of Research Libraries (CARL) and OpenAIRE. The portal presents research results collected 
@@ -53,10 +52,136 @@ export class PortalAggregators {
             Bienvenue sur le portal des résultats de la recherche canadienne, qui a été développé dans le cadre d'une collaboration entre l'ABRC et OpenAIRE dans le contexte du projet OpenAIRE Advance. Le portail permet aux utilisateurs de repérer et de parcourir le contenu canadien inclus sur la plateforme OpenAIRE. La quantité des résultats de la recherche canadienne disponible sur la plateforme augmentera tout au long de l'année 2021 au fur et à mesure que les dépôts canadiens se conformeront aux directives d'OpenAIRE et que les détails relatifs aux affiliations canadiennes seront améliorés. Pour plus d'informations,
               <a
                 href="https://www.carl-abrc.ca/fr/faire-avancer-la-recherche/depots-institutionnels/groupe-de-travail-depots-ouverts/collaboration-avec-openaire/" target="_blank">veuillez visiter le site Web de l’ABRC</a>.
-          </span>`),
+          </span>`,true, true,`
+          :root {
+          --primary-color: #E80000;
+          --primary-color-rgb: 232,0,0;
+          --primary-dark-color: #ad0000;
+          --graph-background:  url('/assets/canada-background.svg') no-repeat bottom;
+         --label-secondary:  #E80000;
+          /* Fonts */
+  --text-primary-color: var(primary-color);
+  --text-gradient-color: linear-gradient(110deg, var(primary-color) 0%, var(--monitor-dark-color) 100%);
+
+  /** Label */
+  --label-secondary: var(--primary-color);
+
+  
+          }
+          `),
     new AggregatorInfo("italy", "Italian Aggregator", "assets/common-assets/logo-small-aggregator.png", "Country", "country", "IT", "Italy"),
     new AggregatorInfo("greece", "Greek Aggregator", "assets/common-assets/logo-small-aggregator.png", "Country", "country", "GR", "Greece"),
-    new AggregatorInfo("eosc", "Eosc Explore", "https://providers.eosc-portal.eu/assets/images/EOSC_Portal_Logo.png", null, null, null, null, "#3540b6","#233d4c",  null,null,null ,false)
+    new AggregatorInfo("eosc", "Eosc Explore", "https://providers.eosc-portal.eu/assets/images/EOSC_Portal_Logo.png",
+       null, null, null,    null,null,null ,false,false,
+      `
+ :root {
+  --primary-color: #3540b6;
+  --primary-dark-color: #233d4c;
+  --search-form-background: transparent;
+
+  }        
+  .search-input {
+    --search-input-border-radius: 0px;
+  }
+  .input-wrapper.advanced-search {
+    --input-border-radius: 0px;
+  }
+  .input-wrapper {
+  --input-border-radius: 0px;
+  }
+  a, .uk-link, a.uk-link-heading{
+  color: #3540b6;
+  }
+  a:hover, .uk-link:hover, a.uk-link-heading:hover{
+  color: #233d4c;
+ text-decoration: none;
+  }
+  .uk-link-text a:hover, .uk-link-toggle:hover .uk-link-text, a.uk-link-text:hover{
+  color:#0c2bd5;
+  }
+.search_box_bg {
+  background: url(//marketplace.eosc-portal.eu/packs/media/images/home-bg-89b63b3d579f3530ec6283f51e1648bc.png) no-repeat;
+    background-position-x: 0%;
+    background-position-y: 0%;
+  background-position: 50% -120px;
+  z-index: 3;
+}
+#searchImage{
+background: url('https://marketplace.eosc-portal.eu/packs/media/images/eosc-logo-color-883f208671ef77b15b9cd067ecdc369b.png') no-repeat center left;
+width: 250px;
+height: 80px;
+background-size: 250px 80px;
+margin-left: 80px;
+}
+#searchForm advanced-search-form{
+float:right;
+}
+#searchForm{
+padding:0;
+ width:100%;
+  max-width:100%;
+}
+search-filter h6::after{
+border-bottom: 1px solid gray;
+}
+search-filter h6{
+text-transform: uppercase !important;
+font-size: 12px;
+}
+
+search-filter .tm-child-list-divider > ul > li:nth-child(n+2), .uk-list-divider > li:nth-child(n+2){
+border: none;
+}
+
+.filterHeader{
+border-bottom:1px solid #ced4da;
+}
+.matSelection.mat-select {
+
+    padding: 4px;
+    border: 1px solid #ced4da;
+
+}
+
+.search-results .uk-card-default.uk-card-hover:hover{
+    box-shadow: none;
+}
+.search-results .uk-card-default {
+    border: 1px solid #ced4da;
+    box-shadow:none;
+}
+
+
+.uk-pagination > .uk-active > *, .uk-pagination > .uk-active > :hover {
+
+   border-radius: 0px;
+ 
+
+}
+    .uk-button-primary:not(.uk-icon-button), .portal-button:not(.uk-icon-button) {
+      color: #fff !important;
+      background-color: #0c2bd5 !important;
+      background-image: linear-gradient(135deg,#05cae7,#0c2bd5) !important;
+      border:none !important;
+     }
+     
+   .uk-button-primary:hover, .portal-button:hover:not(.uk-icon-button) {
+       background: #0c2bd5 !important;
+        border:none !important;
+    }
+
+       .search_box_bg .uk-button, #searchForm .uk-button, .search_box_bg .uk-button:hover, #searchForm .uk-button:hover {
+      border-radius: 0px;
+      margin-left: 0px !important;
+      color: rgb(102, 102, 102) !important;
+      background-color: #0c2bd5 !important;
+      background-color: rgba(255, 255, 255, 1.0) !important;
+      border: 1px solid rgba(0, 0, 0, 0.40) !important;
+      background-image: none !important;
+
+    }
+ 
+      `)
 
   ];
   static disabled = {

src/environments/environment.ts

@@ -119,6 +119,6 @@ export let properties: EnvProperties = {
   depositLearnHowPage: "/participate/deposit/learn-how",
   depositSearchPage: "/participate/deposit/search",
   altMetricsAPIURL: "https://api.altmetric.com/v1/doi/",
-  reCaptchaSiteKey: "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
+  reCaptchaSiteKey: null,
   footerGrantText : "This OpenAIRE gateway is part of a project that has received funding from the European Union's Horizon 2020 research and innovation programme under grant agreements No. 777541 and 101017452"
 };

src/eosc/index.html

@@ -46,8 +46,10 @@
       <eosc-common-main-header></eosc-common-main-header>
 
       <app-root></app-root>
-      <EoscCommonMainFooter></EoscCommonMainFooter>
+      <div class="uk-margin-large-top">
-      <EoscCommonEuInformation></EoscCommonEuInformation>
+         <EoscCommonMainFooter></EoscCommonMainFooter>
+         <EoscCommonEuInformation></EoscCommonEuInformation>
+      </div>
       <script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.min.js"></script>
       <link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/index.production.min.css" />
    </div>