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; bottom: 40px;
right: 40px; right: 40px;
} }
.quick-contact-modal { .custom-avatar-circle {
position: absolute; width: 50px;
bottom: 80px; height: 50px;
right: 0; object-fit: cover;
width: 375px; border: 2px solid #fff;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -15,7 +15,4 @@
bottom: 20px; bottom: 20px;
right: 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"> <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="mail"></icon>
<icon *ngIf="showModal" name="close"></icon> <icon *ngIf="showModal" name="close"></icon>
<span class="uk-margin-small-left">HELP</span> <span class="uk-margin-small-left">HELP</span>
</a> </a>
<div *ngIf="showModal" class="quick-contact-modal uk-card uk-card-default"> <div class="uk-card uk-card-default" uk-drop="mode: click; pos: top-right">
<div class="uk-text-center"> <div class="uk-background-secondary uk-padding-small uk-text-center">
Send a message <br> <div class="uk-text-small">
How can we help? <br> Send a message
We usually respond in a few hours </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> </div>
</div> </div>