MaDgIK
/
aggregator
13
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

[Aggregator | Trunk]: Renaming and using less files for assets | Updating home page to look ok | TODO: Fix less files to be real less & organize rules among files.

This commit is contained in:
Konstantina Galouni 2022-09-23 16:33:26 +03:00
parent 9b22660e8a
commit dc784afe4b
9 changed files with 166 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
angular.json
View File

@ -46,8 +46,8 @@
"src/robots.txt"
],
"styles": [
"src/styles.css",
"src/material.scss"
"src/styles.less",
"src/assets/common-assets/library-css/material.scss"
],
"scripts": [
"node_modules/uikit/dist/js/uikit.min.js",

243
src/app/home/home.component.html
View File

@ -1,96 +1,116 @@
<div class="image-front-topbar">
<!-- <div class="uk-section mainPageSearchForm">
<div class="">
<div class="search_box_bg ">
<div id="searchForm" class="uk-grid uk-flex uk-flex-center">
<div id="searchImage" class="uk-margin-small-top "></div>
<form class="uk-margin ">
<div class="uk-grid uk-margin-small-left">
<div class="uk-margin-small-top uk-padding-remove-left">
<entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
[onChangeNavigate]="false"
(selectionChange)="entityChanged($event)" [customFilter]="customFilter"
></entities-selection>
</div>
<div class=" uk-padding-remove-left uk-margin-small-top">
<div class="uk-inline">
<a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip" (click)="keyword = ''"
uk-icon="icon: close"></a>
<input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
placeholder="Search in OpenAIRE for scholarly works"
[(ngModel)]="keyword"
name="keyword">
</div>
<div class=" quickSelectionsBox uk-width-xlarge@l uk-width-large@m uk-width-medium">
<quick-selections *ngIf="selectedEntity == 'result'" [resultTypes]="resultTypes"
[quickFilter]="resultsQuickFilter"
[properties]="properties">
</quick-selections>
</div>
</div>
<div class="uk-padding-remove-left uk-margin-small-top">
<!--<div class="image-front-topbar">-->
<!--&lt;!&ndash; <div class="uk-section mainPageSearchForm">-->
<!-- <div class="">-->
<!-- <div class="search_box_bg ">-->
<!-- <div id="searchForm" class="uk-grid uk-flex uk-flex-center">-->
<!-- <div id="searchImage" class="uk-margin-small-top "></div>-->
<!-- <form class="uk-margin ">-->
<!-- <div class="uk-grid uk-margin-small-left">-->
<!-- <div class="uk-margin-small-top uk-padding-remove-left">-->
<!-- <entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"-->
<!-- [onChangeNavigate]="false"-->
<!-- (selectionChange)="entityChanged($event)" [customFilter]="customFilter"-->
<!-- ></entities-selection>-->
<!-- </div>-->
<!-- <div class=" uk-padding-remove-left uk-margin-small-top">-->
<!-- <div class="uk-inline">-->
<!-- <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip" (click)="keyword = ''"-->
<!-- uk-icon="icon: close"></a>-->
<!-- <input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"-->
<!-- placeholder="Search in OpenAIRE for scholarly works"-->
<!-- [(ngModel)]="keyword"-->
<!-- name="keyword">-->
<!-- </div>-->
<!-- <div class=" quickSelectionsBox uk-width-xlarge@l uk-width-large@m uk-width-medium">-->
<!-- <quick-selections *ngIf="selectedEntity == 'result'" [resultTypes]="resultTypes"-->
<!-- [quickFilter]="resultsQuickFilter"-->
<!-- [properties]="properties">-->
<!-- </quick-selections>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="uk-padding-remove-left uk-margin-small-top">-->
<button (click)="goTo(true)" type="submit"
class="uk-button portal-button uk-text-bold uk-padding uk-padding-remove-vertical uk-margin-small-left">
Search
</button>
<div class="uk-margin-small-top uk-margin-left">
&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">
<ul class="uk-list uk-margin-remove-bottom">
<li *ngIf="showSoftware || showPublications || showOrp || showDatasets"><a
[routerLink]="properties.searchLinkToAdvancedResults"
[queryParams]="getQueryParamsForAdvancedSearch('result')"
>Research
outcomes</a></li>
<li *ngIf="showProjects"><a
[routerLink]="properties.searchLinkToAdvancedProjects"
[queryParams]="getQueryParamsForAdvancedSearch('project')">
Projects</a></li>
<li *ngIf="showDataProviders"><a
[routerLink]="properties.searchLinkToAdvancedDataProviders"
[queryParams]="getQueryParamsForAdvancedSearch('datasource')">
Content providers</a></li>
<li *ngIf="showOrganizations"><a
[routerLink]="properties.searchLinkToAdvancedOrganizations"
[queryParams]="getQueryParamsForAdvancedSearch('organization')">
Organizations</a></li>
</ul>
</div>
</div>
</div>
</form>
<!-- <button (click)="goTo(true)" type="submit"-->
<!-- class="uk-button portal-button uk-text-bold uk-padding uk-padding-remove-vertical uk-margin-small-left">-->
<!-- Search-->
<!-- </button>-->
<!-- <div class="uk-margin-small-top uk-margin-left">-->
<!-- &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">-->
<!-- <ul class="uk-list uk-margin-remove-bottom">-->
<!-- <li *ngIf="showSoftware || showPublications || showOrp || showDatasets"><a-->
<!-- [routerLink]="properties.searchLinkToAdvancedResults"-->
<!-- [queryParams]="getQueryParamsForAdvancedSearch('result')"-->
<!-- >Research-->
<!-- outcomes</a></li>-->
<!-- <li *ngIf="showProjects"><a-->
<!-- [routerLink]="properties.searchLinkToAdvancedProjects"-->
<!-- [queryParams]="getQueryParamsForAdvancedSearch('project')">-->
<!-- Projects</a></li>-->
<!-- <li *ngIf="showDataProviders"><a-->
<!-- [routerLink]="properties.searchLinkToAdvancedDataProviders"-->
<!-- [queryParams]="getQueryParamsForAdvancedSearch('datasource')">-->
<!-- Content providers</a></li>-->
<!-- <li *ngIf="showOrganizations"><a-->
<!-- [routerLink]="properties.searchLinkToAdvancedOrganizations"-->
<!-- [queryParams]="getQueryParamsForAdvancedSearch('organization')">-->
<!-- Organizations</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>&ndash;&gt;-->
<!-- <div class="uk-section uk-margin-large-left uk-padding-remove-bottom uk-grd uk-flex uk-overflow-hidden home-background">-->
<!--&lt;!&ndash; <div id="searchImage" class="uk-margin-medium-top uk-margin-small-right "></div>&ndash;&gt;-->
<!-- <div class="uk-grid uk-width-1-1 uk-margin-bottom uk-height-medium">-->
<!-- <div class="uk-width-1-1 uk-width-auto@m uk-margin-medium-top"><div id="searchImage"></div></div>-->
<!-- <div class="uk-width-expand search_box_bg" 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>-->
<div class=""> <!-- this div will have the customized color or image -->
<div class="uk-container uk-container-large uk-flex uk-flex-center">
<div class="uk-width-2-3@m uk-width-1-2@l uk-margin-large-top uk-margin-large-bottom">
<div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top">
<advanced-search-input #advanced (searchEmitter)="goTo(true)">
<entities-selection [simpleView]="true" currentEntity="result" [selectedEntity]="selectedEntity" [customFilter]="customFilter"
(selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
[onChangeNavigate]="false"></entities-selection>
<div input #input placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
</advanced-search-input>
<div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto">
<div class="uk-padding-small">
<quick-selections [resultTypes]="resultTypes" [quickFilter]="resultsQuickFilter"></quick-selections>
</div>
</div>
</div>
</div>
</div>-->
<div class="uk-section uk-margin-large-left uk-padding-remove-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-grid uk-width-1-1 uk-margin-bottom uk-height-medium">
<div class="uk-width-1-1 uk-width-auto@m uk-margin-medium-top"><div id="searchImage"></div></div>
<div class="uk-width-expand search_box_bg" 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>
<div class="uk-section graph-background" *ngIf="aggregator.graphSectionText && aggregator.graphSectionTitle">
<div class="uk-container">
<div class="uk-flex uk-flex-top uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
@ -102,10 +122,10 @@
</div>
<div *ngIf="aggregator.graphSectionText">
<div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
<span>Read more<span class="space" uk-icon="chevron-down"></span></span>
<a class="view-more-less-link">Read more</a>
</div>
<div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
<span>Read less<span class="space" uk-icon="chevron-up"></span></span>
<a class="view-more-less-link">Read less</a>
</div>
</div>
</div>
@ -126,22 +146,35 @@
<h3 class="uk-text-center uk-margin-medium-bottom">Our Canadian <span class="uk-text-bold">Funders</span></h3>
<!-- TODO: individual component -->
<div class="uk-section uk-container uk-container-large">
<div class="uk-grid uk-child-width-1-3" uk-grid uk-height-match="target: > div > .uk-card">
<div class="uk-grid-match uk-grid-medium uk-child-width-1-3 uk-flex-center uk-text-center" uk-grid>
<div *ngFor="let funder of funders">
<div [routerLink]="properties.searchLinkToResults" [queryParams]="funder.params" class="uk-card uk-card-default uk-card-body uk-text-center uk-link">
<div class="uk-margin-bottom">
<img *ngIf="funder.logo" src={{funder.logo}} style="max-height: 80px;">
<div class="uk-card uk-card-default uk-card-hover uk-text-center">
<!-- <a *ngIf="directLink && community" [href]="getCommunityPageUrl()" target="_blank"-->
<!-- class="uk-height-1-1 uk-link-reset">-->
<!-- <ng-container [ngTemplateOutlet]="card"></ng-container>-->
<!-- </a>-->
<a [routerLink]="properties.searchLinkToResults" [queryParams]="funder.params" class="uk-height-1-1 uk-link-reset">
<div class="uk-padding">
<div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall
uk-padding-small uk-padding-remove-vertical uk-margin-top uk-margin-bottom">
<div>
<img *ngIf="funder.logo" src={{funder.logo}} style="max-height: 80px;">
</div>
</div>
<div class="uk-card-body uk-padding-remove uk-margin-small-bottom">
<div class="uk-margin-bottom">
<div class="uk-text-large uk-link-text">{{funder.name}}</div>
</div>
<div class="uk-margin-bottom">
<h5 class="uk-text-bold uk-margin-remove number">{{funder.publications | number}}</h5> research outcomes found
</div>
<div>
<h5 class="uk-text-bold uk-margin-remove number">{{(funder.openAccessPublications / funder.publications) * 100 | number : '1.0-0'}}%</h5> Open Access
</div>
</div>
</div>
</a>
</div>
<div class="uk-margin-bottom">
<div class="uk-text-large">{{funder.name}}</div>
</div>
<div class="uk-margin-bottom">
<h5 class="uk-text-bold uk-margin-remove uk-link number">{{funder.publications | number}}</h5> research outcomes found
</div>
<div>
<h5 class="uk-text-bold uk-margin-remove uk-link number">{{(funder.openAccessPublications / funder.publications) * 100 | number : '1.0-0'}}%</h5> Open Access
</div>
</div>
</div>
</div>
</div>
@ -176,7 +209,7 @@ this.customFilter.valueId == 'CA')">
software, etc.)
</div>
</div>
<a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
<a class="uk-button uk-button-primary uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
href="/participate/deposit/learn-how" type="submit">Deposit </a></div>
</div>
@ -195,7 +228,7 @@ this.customFilter.valueId == 'CA')">
your research results and claim them to your project.
</div>
</div>
<a class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
<a class="uk-button uk-button-primary uk-padding uk-padding-remove-vertical uk-margin-small-left ng-star-inserted uk-margin uk-margin-bottom uk-width-1-2"
href="/participate/claim" type="submit">Link </a></div>
</div>
</div>

10
src/app/home/home.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ViewChild} from '@angular/core';
import {ChangeDetectorRef, Component, ViewChild} from '@angular/core';
import {Subscription, zip} from 'rxjs';
import {ActivatedRoute, Router} from '@angular/router';
import {Location} from '@angular/common';
@ -78,7 +78,8 @@ export class HomeComponent {
private _refineFieldResultsService:RefineFieldResultsService,
private location: Location, private _piwikService:PiwikService,
private config: ConfigurationService, private _meta: Meta, private _title: Title, private seoService: SEOService,
private helper: HelperService
private helper: HelperService,
private cdr: ChangeDetectorRef
) {
this.aggregatorId = ConnectHelper.getCommunityFromDomain(properties.domain);
this.aggregator = PortalAggregators.getFilterInfoByMenuId(this.aggregatorId);
@ -293,4 +294,9 @@ export class HomeComponent {
}
return false;
}
disableSelectChange(event: boolean) {
this.disableSelect = event;
this.cdr.detectChanges();
}
}

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 4cec2907da5e1bf55cf59930c23dd9a45c569b89
Subproject commit 360562178bff4ef9a94b2481b4b84ba9c32e599c

11
src/assets/aggregator-custom.css → src/assets/aggregator-custom.less
View File

@ -103,3 +103,14 @@
font-size: 60px;
font-weight: 300;
}
.numbers-background {
background: transparent url('numbers_background_pattern.svg') repeat-x center bottom;
}
.graph-background {
background-size: cover !important;
padding-bottom: 100px;
background-color: #FAFAFA !important;
background: var(--graph-background);
}

2
src/assets/openaire-theme

@ -1 +1 @@
Subproject commit f085a90973b216b89065848dba864e2d581acc84
Subproject commit bc0edde68dccfc17c1abc5d5aa3721f720aee852

9
src/material.scss
View File

@ -1,9 +0,0 @@
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-gray, 900);
$my-app-accent: mat-palette($mat-light-green, 700);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
@include angular-material-theme($my-app-theme);

4
src/styles.css
View File

@ -1,4 +0,0 @@
/* You can add global styles to this file, and also import other style files */
@import "assets/openaire-theme/css/import.css";
@import "assets/common-assets/library.css";
@import "assets/portal-custom.css";

5
src/styles.less Normal file
View File

@ -0,0 +1,5 @@
/* You can add global styles to this file, and also import other style files */
@import "~src/assets/openaire-theme/less/_import";
@import "~src/assets/common-assets/less/general";
@import "~src/assets/common-assets/less/user";
@import "assets/aggregator-custom";