Change icons in get-started to outline. Add get-started button in navbar

This commit is contained in:
Konstantinos Triantafyllou 2022-03-03 18:24:17 +02:00
parent 9ae4bf6f82
commit c597c5e0c5
4 changed files with 46 additions and 35 deletions

View File

@ -26,12 +26,20 @@ import {AlertModal} from "./openaireLibrary/utils/modal/alert";
<div class="monitorApp"> <div class="monitorApp">
<navbar *ngIf="properties && showMenu && header" portal="monitor" [header]="header" [onlyTop]="false" <navbar *ngIf="properties && showMenu && header" portal="monitor" [header]="header" [onlyTop]="false"
[userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user" [userMenuItems]=userMenuItems [menuItems]=menuItems [user]="user"
[showMenu]=showMenu [properties]="properties"></navbar> [showMenu]=showMenu [properties]="properties">
<ul extra-s class="uk-nav uk-nav-default uk-margin-small-top">
<li routerLinkActive="uk-active">
<a routerLink="/get-started">Get Started</a>
</li>
</ul>
<a *ngIf="showGetStarted" extra-m class="uk-button uk-button-primary uk-text-uppercase uk-margin-left" routerLink="/get-started">Get Started</a>
</navbar>
<schema2jsonld *ngIf="properties " [URL]="properties.domain + properties.baseLink" <schema2jsonld *ngIf="properties " [URL]="properties.domain + properties.baseLink"
[logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-monitor.png'" [logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-small-monitor.png'"
type="home" type="home"
description="OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. " description="OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. "
name="OpenAIRE Monitor" [searchAction]="true" [searchActionRoute]="properties.domain + properties.baseLink + '/browse'"> name="OpenAIRE Monitor" [searchAction]="true"
[searchActionRoute]="properties.domain + properties.baseLink + '/browse'">
</schema2jsonld> </schema2jsonld>
<div class="uk-background-default"> <div class="uk-background-default">
<main> <main>
@ -51,8 +59,9 @@ import {AlertModal} from "./openaireLibrary/utils/modal/alert";
</cookie-law> </cookie-law>
<bottom *ngIf="properties && showMenu" [grantAdvance]="false" <bottom *ngIf="properties && showMenu" [grantAdvance]="false"
[properties]="properties"></bottom> [properties]="properties"></bottom>
<quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)" <quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending" [organizationTypes]="organizationTypes"></quick-contact> [contactForm]="contactForm" [sending]="sending"
[organizationTypes]="organizationTypes"></quick-contact>
<modal-alert #modal> <modal-alert #modal>
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
Our team will respond to your submission soon. Our team will respond to your submission soon.
@ -74,7 +83,8 @@ export class AppComponent {
header: Header; header: Header;
logoPath: string = 'assets/common-assets/'; logoPath: string = 'assets/common-assets/';
/* Contact */ /* Contact */
public showQuickContact: boolean; public showQuickContact: boolean;
public showGetStarted: boolean = true;
public contactForm: FormGroup; public contactForm: FormGroup;
public organizationTypes: string[] = [ public organizationTypes: string[] = [
'Funding agency', 'University / Research Center', 'Funding agency', 'University / Research Center',
@ -86,28 +96,29 @@ export class AppComponent {
@ViewChild('quickContact') quickContact: QuickContactComponent; @ViewChild('quickContact') quickContact: QuickContactComponent;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService, constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
private router: Router, private stakeholderService: StakeholderService, private smoothScroll: SmoothScroll, private router: Router, private stakeholderService: StakeholderService, private smoothScroll: SmoothScroll,
private userManagementService: UserManagementService, private userManagementService: UserManagementService,
private quickContactService: QuickContactService, private quickContactService: QuickContactService,
private fb: FormBuilder, private fb: FormBuilder,
private emailService: EmailService) { private emailService: EmailService) {
this.subscriptions.push(router.events.forEach((event) => { this.subscriptions.push(router.events.forEach((event) => {
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
this.url = event.url; this.url = event.url;
let r = this.route; let r = this.route;
while (r.firstChild) { while (r.firstChild) {
r = r.firstChild; r = r.firstChild;
}
let params = r.snapshot.params;
this.params.next(params);
if(event.url === '/contact-us') {
this.quickContactService.setDisplay(false);
} else if(event.url !== '/contact-us' && !this.showQuickContact) {
this.quickContactService.setDisplay(true);
}
} }
let params = r.snapshot.params;
this.params.next(params);
if (event.url === '/contact-us') {
this.quickContactService.setDisplay(false);
} else if (event.url !== '/contact-us' && !this.showQuickContact) {
this.quickContactService.setDisplay(true);
}
this.showGetStarted = event.url !== '/get-started';
}
})); }));
} }
@ -121,17 +132,17 @@ export class AppComponent {
url: null, url: null,
title: 'monitor', title: 'monitor',
logoUrl: this.logoPath + 'logo-large-monitor.png', logoUrl: this.logoPath + 'logo-large-monitor.png',
logoSmallUrl:this.logoPath + 'logo-small-monitor.png', logoSmallUrl: this.logoPath + 'logo-small-monitor.png',
position:'left', position: 'left',
badge:true, badge: true,
menuPosition: 'center' menuPosition: 'center'
}; };
this.buildMenu(); this.buildMenu();
this.reset(); this.reset();
})); }));
this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => { this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
this.showQuickContact = display; this.showQuickContact = display;
})); }));
} }
public ngOnDestroy() { public ngOnDestroy() {
@ -181,16 +192,16 @@ export class AppComponent {
} }
public send(event) { public send(event) {
if(event.valid === true) { if (event.valid === true) {
this.sendMail(this.properties.admins); this.sendMail(this.properties.admins);
} }
} }
public reset() { public reset() {
if(this.quickContact) { if (this.quickContact) {
this.quickContact.close(); this.quickContact.close();
} }
this.contactForm = this.fb.group( { this.contactForm = this.fb.group({
name: this.fb.control('', Validators.required), name: this.fb.control('', Validators.required),
surname: this.fb.control('', Validators.required), surname: this.fb.control('', Validators.required),
email: this.fb.control('', [Validators.required, Validators.email]), email: this.fb.control('', [Validators.required, Validators.email]),
@ -233,7 +244,7 @@ export class AppComponent {
} }
handleError(message: string, error = null) { handleError(message: string, error = null) {
if(error) { if (error) {
console.error(error); console.error(error);
} }
this.sending = false; this.sending = false;

View File

@ -20,7 +20,7 @@
<div class="uk-flex uk-flex-center uk-flex-bottom" uk-scrollspy-class> <div class="uk-flex uk-flex-center uk-flex-bottom" uk-scrollspy-class>
<img class="transform-translate-y uk-visible@m" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy"> <img class="transform-translate-y uk-visible@m" src="assets/monitor-assets/get-started/1.svg" alt="Step 1" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left"> <div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="description" ratio="2" visuallyHidden="Provide some information" <icon name="description" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
<span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span> <span class="uk-h5 uk-margin-remove uk-text-uppercase">Provide some <br> information</span>
</div> </div>
@ -28,7 +28,7 @@
<div class="uk-flex uk-flex-center uk-flex-bottom" uk-scrollspy-class> <div class="uk-flex uk-flex-center uk-flex-bottom" uk-scrollspy-class>
<img class="transform-translate-y uk-visible@m" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy"> <img class="transform-translate-y uk-visible@m" src="assets/monitor-assets/get-started/2.svg" alt="Step 2" loading="lazy">
<div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left"> <div class="uk-flex uk-flex-column uk-padding-small uk-margin-small-left">
<icon name="email" ratio="2" visuallyHidden="Provide some information" <icon name="email" type="outlined" ratio="2" visuallyHidden="Provide some information"
customClass="uk-text-primary-gradient"></icon> customClass="uk-text-primary-gradient"></icon>
<span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact <br> you</span> <span class="uk-h5 uk-margin-remove uk-margin-small-top uk-text-uppercase">We contact <br> you</span>
</div> </div>

@ -1 +1 @@
Subproject commit 2b7c52a8b0cb4599324253f57f9eb428682275cb Subproject commit 360cc0f3e3bd4892fbffea94391fa8af4a339fea

@ -1 +1 @@
Subproject commit 60be89ef464a3eb6a485b1f68bd9f3dcde0393a0 Subproject commit e5410728a16312eca7bd11ebb6b8dc8777c072a3