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 {
position: fixed;
bottom: 40px;
right: 40px;
bottom: 5vh;
right: 5vw;
}
.custom-avatar-circle {
.uk-card > .uk-background-secondary:first-child {
border-radius: 4px 4px 0 0;
}
.avatars > img {
width: 50px;
height: 50px;
object-fit: cover;
border: 2px solid #fff;
}
@media (max-width: 768px) {
.quick-contact {
bottom: 20px;
right: 20px;
}
}
.avatars > img:nth-child(n+1) {
margin-left: -5px;
}
/* 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">
<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 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="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-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 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?
@ -22,7 +22,7 @@
We usually respond in a few hours.
</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>
Name <br>
Email <br>
@ -43,4 +43,4 @@
Send button <br>
</div>
</div>
</div>
</div>

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

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