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

add changes to the quick-contact component

This commit is contained in:
Alex Martzios 2022-02-23 10:46:56 +02:00
parent 13fee133e4
commit 1a7aee9a2f
2 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,11 @@
bottom: 40px;
right: 40px;
}
.quick-contact-modal {
position: absolute;
bottom: 80px;
right: 0;
width: 375px;
.custom-avatar-circle {
width: 50px;
height: 50px;
object-fit: cover;
border: 2px solid #fff;
}
@media (max-width: 768px) {
@ -15,7 +15,4 @@
bottom: 20px;
right: 20px;
}
.quick-contact-modal {
width: 300px;
}
}

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

@ -1,14 +1,46 @@
<div class="quick-contact">
<a class="uk-button uk-button-primary" (click)="toggleModal()">
<a class="uk-button uk-button-secondary" (click)="toggleModal()">
<icon *ngIf="!showModal" name="mail"></icon>
<icon *ngIf="showModal" name="close"></icon>
<span class="uk-margin-small-left">HELP</span>
</a>
<div *ngIf="showModal" class="quick-contact-modal uk-card uk-card-default">
<div class="uk-text-center">
Send a message <br>
How can we help? <br>
We usually respond in a few hours
<div class="uk-card uk-card-default" 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">
<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg">
<img class="uk-border-circle custom-avatar-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-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>