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

Some css changes in quick contact

This commit is contained in:
Konstantinos Triantafyllou 2022-02-23 12:33:43 +02:00
parent 1a7aee9a2f
commit 31e5658827
3 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,31 @@
.quick-contact { .quick-contact {
position: fixed; position: fixed;
bottom: 40px; bottom: 5vh;
right: 40px; right: 5vw;
} }
.custom-avatar-circle {
.uk-card > .uk-background-secondary:first-child {
border-radius: 4px 4px 0 0;
}
.avatars > img {
width: 50px; width: 50px;
height: 50px; height: 50px;
object-fit: cover; object-fit: cover;
border: 2px solid #fff; border: 2px solid #fff;
} }
@media (max-width: 768px) { .avatars > img:nth-child(n+1) {
.quick-contact { margin-left: -5px;
bottom: 20px; }
right: 20px;
} /* 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 */
}

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

@ -1,19 +1,19 @@
<div class="quick-contact"> <div class="quick-contact">
<a class="uk-button uk-button-secondary" (click)="toggleModal()"> <a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle" (click)="toggleModal()">
<icon *ngIf="!showModal" name="mail"></icon> <icon *ngIf="!showModal" name="mail" [flex]="true"></icon>
<icon *ngIf="showModal" name="close"></icon> <icon *ngIf="showModal" name="close" [flex]="true"></icon>
<span class="uk-margin-small-left">HELP</span> <span class="uk-margin-small-left">Contact</span>
</a> </a>
<div class="uk-card uk-card-default" uk-drop="mode: click; pos: top-right"> <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-background-secondary uk-padding-small uk-text-center">
<div class="uk-text-small"> <div class="uk-text-small">
Send a message Send a message
</div> </div>
<div class="uk-margin-small"> <div class="uk-margin-small avatars">
<img class="uk-border-circle custom-avatar-circle" src="assets/monitor-assets/avatar.jpg"> <img class="uk-border-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" 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" 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" src="assets/monitor-assets/avatar.jpg">
</div> </div>
<div class="uk-text-bold"> <div class="uk-text-bold">
How can we help? How can we help?
@ -22,7 +22,7 @@
We usually respond in a few hours. We usually respond in a few hours.
</div> </div>
</div> </div>
<div class="uk-height-medium uk-overflow-auto"> <div class="uk-height-medium uk-card-body uk-overflow-auto">
TODO: Contact form <br> TODO: Contact form <br>
Name <br> Name <br>
Email <br> Email <br>
@ -43,4 +43,4 @@
Send button <br> Send button <br>
</div> </div>
</div> </div>
</div> </div>

12
sharedComponents/quick-contact/quick-contact.module.ts
View File

@ -1,12 +1,9 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common'; import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {QuickContactComponent} from './quick-contact.component'; import {QuickContactComponent} from './quick-contact.component';
import {IconsModule} from '../../utils/icons/icons.module'; import {IconsModule} from '../../utils/icons/icons.module';
import {IconsService} from '../../utils/icons/icons.service';
import {mail} from '../../utils/icons/icons';
import {close} from '../../utils/icons/icons';
@NgModule({ @NgModule({
imports: [ imports: [
@ -21,7 +18,4 @@ import {close} from '../../utils/icons/icons';
] ]
}) })
export class QuickContactModule { export class QuickContactModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([mail,close])
}
} }