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:
parent
c2b6547b4c
commit
03c06830be
|
@ -1,9 +1,8 @@
|
||||||
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
|
<h1 *ngIf="formTitle" class="uk-margin-auto">{{formTitle}}</h1>
|
||||||
<ng-content select="[page-title]"></ng-content>
|
<ng-content select="[page-title]"></ng-content>
|
||||||
<ng-content select="[page-description]"></ng-content>
|
<ng-content select="[page-description]"></ng-content>
|
||||||
<div class="uk-child-width-1-1 uk-grid" [class.uk-grid-medium]="smallForm"
|
<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-margin-large]="!smallForm" [class.uk-child-width-1-2@s]="!smallForm"
|
[class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
|
||||||
[formGroup]="contactForm" uk-grid>
|
|
||||||
<div *ngIf="contactForm.get('name')">
|
<div *ngIf="contactForm.get('name')">
|
||||||
<input class="uk-input" type="text" placeholder="Name *" formControlName="name"
|
<input class="uk-input" type="text" placeholder="Name *" formControlName="name"
|
||||||
[class.uk-form-danger]="contactForm.get('name').invalid && contactForm.get('name').touched">
|
[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">
|
[class.uk-form-danger]="contactForm.get('message').invalid && contactForm.get('message').touched">
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</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"
|
<textarea rows="4" class="uk-textarea" placeholder="Description *" formControlName="description"
|
||||||
[class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
|
[class.uk-form-danger]="contactForm.get('description').invalid && contactForm.get('description').touched">
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="contactForm.get('recaptcha')" class="uk-width-1-1">
|
<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 class="uk-flex " [ngClass]="'uk-flex-' + alignButton" (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
|
<re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
|
||||||
</re-captcha>
|
</re-captcha>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-1-1 uk-flex" [ngClass]="'uk-flex-' + alignButton">
|
<div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
|
||||||
<button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
|
<div class="uk-flex uk-flex-center" [class.uk-flex-left@s]="!smallForm">
|
||||||
[class.uk-disabled]="contactForm.invalid || sending"
|
<button class="uk-button uk-text-uppercase uk-flex uk-flex-middle"
|
||||||
[class.uk-button-primary]="!buttonClass && contactForm.valid" [ngClass]="(contactForm.valid?buttonClass:'')"
|
[class.uk-disabled]="contactForm.invalid || sending"
|
||||||
(click)="send()">
|
[class.uk-button-primary]="!buttonClass && contactForm.valid"
|
||||||
|
[ngClass]="(contactForm.valid?buttonClass:'')"
|
||||||
|
(click)="send()">
|
||||||
{{sendButton}}
|
{{sendButton}}
|
||||||
<span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'" [color]="null"></loading></span>
|
<span *ngIf="sending" class="uk-icon uk-margin-small-left"><loading [top_margin]="false" [size]="'small'"
|
||||||
</button>
|
[color]="null"></loading></span>
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,9 +13,9 @@ export class ContactUsComponent {
|
||||||
@Input() public formTitle: string;
|
@Input() public formTitle: string;
|
||||||
@Input() public organizationTypes: string[];
|
@Input() public organizationTypes: string[];
|
||||||
@Input() public buttonClass: string;
|
@Input() public buttonClass: string;
|
||||||
@Input() public alignButton: "left" | "right" | "center" = "left";
|
|
||||||
@Input() public sendButton: string = "Send";
|
@Input() public sendButton: string = "Send";
|
||||||
@Input() public smallForm: boolean = false;
|
@Input() public smallForm: boolean = false;
|
||||||
|
@Input() public scrollspy: boolean = false;
|
||||||
@Input() public sending: boolean = false;
|
@Input() public sending: boolean = false;
|
||||||
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
|
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
|
||||||
public properties: EnvProperties = properties;
|
public properties: EnvProperties = properties;
|
||||||
|
|
|
@ -3,9 +3,9 @@ import {Component} from "@angular/core";
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'how',
|
selector: 'how',
|
||||||
template: `
|
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-flex uk-flex-wrap">
|
||||||
<div class="uk-width-1-3@s first">
|
<div class="uk-width-1-3@s first" uk-scrollspy-class>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/1.png" loading="lazy">
|
||||||
</div>
|
</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
|
<span class="uk-text-uppercase uk-text-bold">Starting</span> from existing<br>research-related data sources
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-1-3@s second">
|
<div class="uk-width-1-3@s second" uk-scrollspy-class>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/2.png" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-1-3@s third">
|
<div class="uk-width-1-3@s third" uk-scrollspy-class>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/3.png" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
|
@ -28,7 +28,7 @@ import {Component} from "@angular/core";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-flex uk-flex-wrap">
|
<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>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/4.png" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
|
@ -37,7 +37,7 @@ import {Component} from "@angular/core";
|
||||||
<span class="uk-text-primary">Open Science Indicators</span>
|
<span class="uk-text-primary">Open Science Indicators</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-width-1-3@s fifth">
|
<div class="uk-width-1-3@s fifth" uk-scrollspy-class>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/5.png" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
|
@ -46,7 +46,7 @@ import {Component} from "@angular/core";
|
||||||
<span class="uk-text-primary">Collaboration Indicators</span>
|
<span class="uk-text-primary">Collaboration Indicators</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/6.png" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
|
@ -58,7 +58,7 @@ import {Component} from "@angular/core";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="final">
|
<div class="final" uk-scrollspy-class>
|
||||||
<div>
|
<div>
|
||||||
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
|
<img src="assets/common-assets/monitor-assets/how/7.png" loading="lazy">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-drop {
|
.uk-drop {
|
||||||
width: 380px;
|
max-height: 650px;
|
||||||
|
height: calc(80vh - 100px);
|
||||||
|
width: 500px;
|
||||||
|
max-width: 80vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatars > img {
|
.avatars > img {
|
||||||
|
@ -22,14 +25,3 @@
|
||||||
.avatars > img:nth-child(n+1) {
|
.avatars > img:nth-child(n+1) {
|
||||||
margin-left: -5px;
|
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 */
|
|
||||||
}
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<icon *ngIf="showForm" name="close" [flex]="true"></icon>
|
<icon *ngIf="showForm" name="close" [flex]="true"></icon>
|
||||||
<span class="uk-margin-small-left">Contact</span>
|
<span class="uk-margin-small-left">Contact</span>
|
||||||
</a>
|
</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-background-secondary uk-padding-small uk-text-center">
|
||||||
<div class="uk-text-small">
|
<div class="uk-text-small">
|
||||||
Send a message
|
Send a message
|
||||||
|
@ -22,10 +22,10 @@
|
||||||
We usually respond in a few hours.
|
We usually respond in a few hours.
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<loading *ngIf="sending" class="uk-margin-xlarge-top"></loading>
|
||||||
<contact-us *ngIf="contactForm && !sending" [organizationTypes]="organizationTypes" (sendEmitter)="send($event)"
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
/*border: 1px solid red;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[left] .imgContainer {
|
[left] .imgContainer {
|
||||||
|
@ -12,26 +11,6 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 70%;
|
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 {
|
[left] img {
|
||||||
|
@ -48,5 +27,23 @@
|
||||||
|
|
||||||
[scroll] > * {
|
[scroll] > * {
|
||||||
height: 60vh;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -77,11 +77,14 @@ export class SectionScrollComponent implements AfterViewInit {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
entry.target['style'].opacity = String(entry.intersectionRatio);
|
entry.target['style'].opacity = String(entry.intersectionRatio);
|
||||||
let id = this.map.get(entry.target.id);
|
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) {
|
if(entry.isIntersecting) {
|
||||||
this.lastElementId = id;
|
this.lastElementId = id;
|
||||||
}
|
}
|
||||||
this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, options);
|
}, options);
|
||||||
|
|
Loading…
Reference in New Issue