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

Contact-us: CHange inputs for small form

This commit is contained in:
Konstantinos Triantafyllou 2022-05-04 17:17:49 +03:00
parent 272ca5b81e
commit 903267fab5
3 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
contact-us/contact-us.component.html
View File

@ -3,21 +3,30 @@
<ng-content select="[page-description]"></ng-content>
<div class="uk-child-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-margin-large" [attr.uk-scrollspy-class]="scrollspy?'':null"
[class.uk-grid-column-small]="smallForm" [formGroup]="contactForm" uk-grid>
<div *ngIf="contactForm.get('name')" input placeholder="Name" [formInput]="contactForm.get('name')"></div>
<div *ngIf="contactForm.get('surname')" input placeholder="Surname" [formInput]="contactForm.get('surname')"></div>
<div *ngIf="contactForm.get('email')" input placeholder="Email" [formInput]="contactForm.get('email')"></div>
<div *ngIf="contactForm.get('job')" input placeholder="Job Title" [formInput]="contactForm.get('job')"></div>
<div *ngIf="contactForm.get('affiliation')" input placeholder="Affiliation" [formInput]="contactForm.get('affiliation')"></div>
<div *ngIf="contactForm.get('community')" input placeholder="Research Community or Infrastructure" [formInput]="contactForm.get('community')"></div>
<div *ngIf="contactForm.get('organization')" input placeholder="Organization" [formInput]="contactForm.get('organization')"></div>
<div *ngIf="contactForm.get('name')" input placeholder="Name"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('name')"></div>
<div *ngIf="contactForm.get('surname')" input placeholder="Surname"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('surname')"></div>
<div *ngIf="contactForm.get('email')" input placeholder="Email"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('email')"></div>
<div *ngIf="contactForm.get('job')" input placeholder="Job Title"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('job')"></div>
<div *ngIf="contactForm.get('affiliation')" input placeholder="Affiliation"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('affiliation')"></div>
<div *ngIf="contactForm.get('community')" input placeholder="Research Community or Infrastructure"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('community')"></div>
<div *ngIf="contactForm.get('organization')" input placeholder="Organization"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('organization')"></div>
<div *ngIf="contactForm.get('organizationType')" input type="select" placeholder="Organization Type"
[formInput]="contactForm.get('organizationType')" [options]="organizationTypes"></div>
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1" input placeholder="Subject" [formInput]="contactForm.get('subject')"></div>
<div *ngIf="contactForm.get('message')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Comments" [formInput]="contactForm.get('message')"></div>
<div *ngIf="contactForm.get('description')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Description" [formInput]="contactForm.get('description')"></div>
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('organizationType')" [options]="organizationTypes"></div>
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1" input placeholder="Subject"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('subject')"></div>
<div *ngIf="contactForm.get('message')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Comments"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('message')"></div>
<div *ngIf="contactForm.get('description')" class="uk-width-1-1" input type="textarea" rows="4" placeholder="Description"
[inputClass]="'inner' + (smallForm?' x-small':'')" [formInput]="contactForm.get('description')"></div>
<div *ngIf="contactForm.get('recaptcha')" class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-last@s]="!smallForm">
<re-captcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey">
</re-captcha>
<re-captcha (resolved)="handleRecaptcha($event)" [siteKey]="properties.reCaptchaSiteKey"></re-captcha>
</div>
<div class="uk-flex uk-flex-center" [class.uk-width-1-1]="smallForm" [class.uk-flex-column]="!smallForm">
<div class="uk-flex uk-flex-center" [class.uk-flex-left@s]="!smallForm">

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

@ -4,10 +4,6 @@
right: 5vw;
}
.uk-card > .uk-background-primary:first-child {
border-radius: 4px 4px 0 0;
}
.uk-drop {
max-height: 650px;
height: calc(80vh - 100px);

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

@ -1,19 +1,17 @@
<div class="quick-contact">
<a class="uk-button uk-button-secondary dark uk-flex uk-flex-middle">
<div class="quick-contact dark">
<a class="uk-button uk-box-shadow-small uk-button-secondary uk-flex uk-flex-middle">
<icon *ngIf="!showDrop" name="mail" [flex]="true"></icon>
<icon *ngIf="showDrop" name="close" [flex]="true"></icon>
<span class="uk-margin-small-left">Contact</span>
</a>
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
<div class="uk-background-primary uk-padding-small uk-text-center">
<div #drop id="quick-contact" class="uk-card uk-box-shadow-small uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
<div class="uk-card-header uk-background-primary 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">
<img class="uk-border-circle" src="assets/monitor-assets/avatar1.jpg">
<img class="uk-border-circle" src="assets/monitor-assets/avatar2.jpg">
</div>
<div class="uk-text-bold">
How can we help?