openaire-library/sharedComponents/quick-contact/quick-contact.component.html

<div class="quick-contact">
	<button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle">
		<icon *ngIf="!showDrop" name="mail" [flex]="true"></icon>
		<icon *ngIf="showDrop" name="close" [flex]="true"></icon>
		<span class="uk-margin-small-left">{{contact}}</span>
	</button>
	<div #drop id="quick-contact" class="uk-drop"
			 uk-drop="mode: click; pos: top-right; animation: uk-animation-fade; offset: 20">
		<div class="uk-card uk-card-default uk-box-shadow-default uk-flex uk-flex-column uk-height-1-1">
			<div class="uk-card-header uk-padding-small uk-text-center" [ngClass]="background">
				<div class="uk-text-small">
					Send a message
				</div>
				<div *ngIf="images.length > 0" class="uk-margin-small avatars">
					<img *ngFor="let image of images" [src]="image" class="uk-border-circle" >
				</div>
				<div class="uk-text-bold">
					How can we help?
				</div>
				<div class="uk-text-small">
					We usually respond in a few hours.
				</div>
			</div>
			<div class="uk-card-body uk-width-expand uk-overflow-auto">
				<loading *ngIf="sending" class="uk-margin-xlarge-top"></loading>
				<contact-us *ngIf="contactForm && !sending" [organizationTypes]="organizationTypes" (sendEmitter)="send($event)"
										[smallForm]="true" sendButton="Send Message" [contactForm]="contactForm"></contact-us>
			</div>
		</div>
	</div>
</div>