MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix section scroll opacity change. Add scrollspy in how-to. Align right for recaptcha in contact us in large screens

This commit is contained in:
Konstantinos Triantafyllou 2022-03-01 21:09:14 +02:00
parent c2b6547b4c
commit 03c06830be
7 changed files with 57 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
contact-us/contact-us.component.html
View File

@ -1,9 +1,8 @@
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
<ng-content select="[page-title]"></ng-content>
<ng-content select="[page-description]"></ng-content>
<div class="uk-child-width-1-1 uk-grid" [class.uk-grid-medium]="smallForm"
[class.uk-grid-margin-large]="!smallForm" [class.uk-child-width-1-2@s]="!smallForm"
[formGroup]="contactForm" uk-grid>
<div class="uk-child-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null"
[class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
<div *ngIf="contactForm.get('name')">
<input class="uk-input" type="text" placeholder="Name *" formControlName="name"
[class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
@ -48,22 +47,26 @@
[class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
</textarea>
</div>
<div *ngIf="contactForm.get('description')" class="uk-width-1-1">
<div *ngIf="contactForm.get('description')">
<textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
[class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
</textarea>
</div>
<div *ngIf="contactForm.get('recaptcha')" class="uk-width-1-1">
<re-captcha class="uk-flex " [ngClass]="'uk-flex-' + alignButton" (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
<div *ngIf="contactForm.get('recaptcha')" class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-last@s]="!smallForm">
<re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
</re-captcha>
</div>
<div class="uk-width-1-1 uk-flex" [ngClass]="'uk-flex-' + alignButton">
<button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
[class.uk-disabled]="contactForm.invalid || sending"
[class.uk-button-primary]="!buttonClass && contactForm.valid" [ngClass]="(contactForm.valid?buttonClass:'')"
(click)="send()">
<div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
<div class="uk-flex uk-flex-center" [class.uk-flex-left@s]="!smallForm">
<button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
[class.uk-disabled]="contactForm.invalid || sending"
[class.uk-button-primary]="!buttonClass && contactForm.valid"
[ngClass]="(contactForm.valid?buttonClass:'')"
(click)="send()">
{{sendButton}}
<span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'" [color]="null"></loading></span>
</button>
</div>
<span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'"
[color]="null"></loading></span>
</button>
</div>
</div>
</div>

2
contact-us/contact-us.component.ts
View File

@ -13,9 +13,9 @@ export class ContactUsComponent {
@Input() public formTitle: string;
@Input() public organizationTypes: string[];
@Input() public buttonClass: string;
@Input() public alignButton: "left" | "right" | "center" = "left";
@Input() public sendButton: string = "Send";
@Input() public smallForm: boolean = false;
@Input() public scrollspy: boolean = false;
@Input() public sending: boolean = false;
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
public properties: EnvProperties = properties;

16
monitor/how/how.component.ts
View File

@ -3,9 +3,9 @@ import {Component} from "@angular/core";
@Component({
selector: 'how',
template: `
<div class="how">
<div class="how" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 200">
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s first">
<div class="uk-width-1-3@s first" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
</div>
@ -13,12 +13,12 @@ import {Component} from "@angular/core";
<span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
</div>
</div>
<div class="uk-width-1-3@s second">
<div class="uk-width-1-3@s second" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
</div>
</div>
<div class="uk-width-1-3@s third">
<div class="uk-width-1-3@s third" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
</div>
@ -28,7 +28,7 @@ import {Component} from "@angular/core";
</div>
</div>
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-1-3@s fourth uk-flex-last@s">
<div class="uk-width-1-3@s fourth uk-flex-last@s" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
</div>
@ -37,7 +37,7 @@ import {Component} from "@angular/core";
<span class="uk-text-primary">Open Science Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s fifth">
<div class="uk-width-1-3@s fifth" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
</div>
@ -46,7 +46,7 @@ import {Component} from "@angular/core";
<span class="uk-text-primary">Collaboration Indicators</span>
</div>
</div>
<div class="uk-width-1-3@s sixth uk-flex-first@s">
<div class="uk-width-1-3@s sixth uk-flex-first@s" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
</div>
@ -58,7 +58,7 @@ import {Component} from "@angular/core";
</div>
</div>
</div>
<div class="final">
<div class="final" uk-scrollspy-class>
<div>
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
</div>

16
sharedComponents/quick-contact/quick-contact.component.css
View File

@ -9,7 +9,10 @@
}
.uk-drop {
width: 380px;
max-height: 650px;
height: calc(80vh - 100px);
width: 500px;
max-width: 80vw;
}
.avatars > img {
@ -22,14 +25,3 @@
.avatars > img:nth-child(n+1) {
margin-left: -5px;
}
/* hide scrollbar but allow scrolling */
.uk-overflow-auto {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
.uk-overflow-auto::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}

6
sharedComponents/quick-contact/quick-contact.component.html
View File

@ -4,7 +4,7 @@
<icon *ngIf="showForm" name="close" [flex]="true"></icon>
<span class="uk-margin-small-left">Contact</span>
</a>
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
<div class="uk-background-secondary uk-padding-small uk-text-center">
<div class="uk-text-small">
Send a message
@ -22,10 +22,10 @@
We usually respond in a few hours.
</div>
</div>
<div class="uk-height-medium uk-card-body uk-overflow-auto">
<div class="uk-card-body">
<loading *ngIf="sending" class="uk-margin-xlarge-top"></loading>
<contact-us *ngIf="contactForm && !sending" [organizationTypes]="organizationTypes" (sendEmitter)="send($event)"
[smallForm]="true" alignButton="center" sendButton="Send Message" [contactForm]="contactForm"></contact-us>
[smallForm]="true" sendButton="Send Message" [contactForm]="contactForm"></contact-us>
</div>
</div>
</div>

41
utils/section-scroll/section-scroll.component.css
View File

@ -3,7 +3,6 @@
position: sticky;
top: 0;
height: 100vh;
/*border: 1px solid red;*/
}
[left] .imgContainer {
@ -12,26 +11,6 @@
left: 0;
width: 100%;
height: 70%;
/*border: 1px solid greenyellow;*/
}
@media (max-width: 960px) {
[left] {
height: 50vh;
}
[left] .imgContainer {
top: 5%;
height: 80%;
}
[left] > * {
align-items: flex-start;
}
[scroll] > * {
align-items: flex-end;
}
}
[left] img {
@ -48,5 +27,23 @@
[scroll] > * {
height: 60vh;
/* border: 1px solid darkorange;*/
}
@media (max-width: 960px) {
[left] {
height: 50vh;
}
[left] .imgContainer {
top: 5%;
height: 100%;
}
[left] > * {
align-items: flex-start;
}
[scroll] > * {
height: 50vh;
}
}

7
utils/section-scroll/section-scroll.component.ts
View File

@ -77,11 +77,14 @@ export class SectionScrollComponent implements AfterViewInit {
entries.forEach((entry) => {
entry.target['style'].opacity = String(entry.intersectionRatio);
let id = this.map.get(entry.target.id);
if (this.left.has(id) && this.lastElementId !== id) {
if (this.left.has(id)) {
let element = this.left.get(id).parentElement;
if(this.lastElementId !== id || Number.parseFloat(element.style.opacity) < 1) {
this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
}
if(entry.isIntersecting) {
this.lastElementId = id;
}
this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
}
});
}, options);