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

<div class="quick-contact">
	<a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle" (click)="toggleModal()">
		<icon *ngIf="!showModal" name="mail" [flex]="true"></icon>
		<icon *ngIf="showModal" name="close" [flex]="true"></icon>
		<span class="uk-margin-small-left">Contact</span>
	</a>
	<div class="uk-card uk-card-default uk-drop" uk-drop="mode: click; pos: top-right">
		<div class="uk-background-secondary uk-padding-small uk-text-center">
			<div class="uk-text-small">
				Send a message
			</div>
			<div class="uk-margin-small avatars">
				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
				<img class="uk-border-circle" src="assets/monitor-assets/avatar.jpg">
			</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-height-medium uk-card-body uk-overflow-auto">
			TODO: Contact form <br>
			Name <br>
			Email <br>
			Organization <br>
			Type <br>
			Comments <br>
			Send button <br>
			TODO: Contact form <br>
			Name <br>
			Email <br>
			Organization <br>
			Type <br>
			Comments <br>
			Send button <br>
			Organization <br>
			Type <br>
			Comments <br>
			Send button <br>
		</div>
	</div>
</div>