Skip to content
This repository has been archived by the owner on Jul 6, 2020. It is now read-only.

Modified contact us page to the current version of EvalAI #133

Merged
merged 11 commits into from
Jun 14, 2019
Merged

Modified contact us page to the current version of EvalAI #133

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fdad8aa
modified contact us page
Sanji515 Jun 2, 2019
e81ae3e
Merge branch 'master' into contact-us-page
Sanji515 Jun 2, 2019
d9a777e
resolved conflicts
Sanji515 Jun 2, 2019
fc4e78c
Merge branch 'master' into contact-us-page
Sanji515 Jun 2, 2019
1346a65
merged
Sanji515 Jun 2, 2019
84c9cf6
merged with remote
Sanji515 Jun 2, 2019
be89790
minor change
Sanji515 Jun 2, 2019
482ce41
minor responsive change
Sanji515 Jun 3, 2019
e3fb904
minor change
Sanji515 Jun 3, 2019
dbfb4be
suggested changes
Sanji515 Jun 10, 2019
6266ec4
Merge branch 'master' into contact-us-page
Sanji515 Jun 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@angular/platform-browser-dynamic": "^7.2.15",
"@angular/router": "^7.2.15",
"core-js": "^2.4.1",
"ngx-textarea-autosize": "^2.0.3",
"ngx-twitter-timeline": "^0.1.5",
"normalize.css": "^8.0.0",
"rxjs": "^6.5.2",
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { TextareaAutosizeModule } from 'ngx-textarea-autosize';

// Import serivces
import { AuthService } from './services/auth.service';
Expand Down Expand Up @@ -113,6 +114,7 @@ import { FeaturedChallengesComponent } from './components/home/featured-challeng
BrowserModule,
AppRoutingModule,
HttpClientModule,
TextareaAutosizeModule,
NgxTwitterTimelineModule
],
providers: [
Expand Down
54 changes: 30 additions & 24 deletions src/app/components/contact/contact.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
<app-header-static></app-header-static>
<div class="container-top container contact-container white">
<div class="contact-form">
<div class="contact-form-inner">
<span class="contact-title">Get in touch</span>
<br>
<div class="contact-form-elements">
<app-input [label]="'name'" [placeholder]="'Name'" [isRequired]="true" #formgroup></app-input>
<app-input [label]="'email'" [placeholder]="'Email'" [isRequired]="true" [type]="'email'" #formgroup></app-input>
<app-input [label]="'message'" [placeholder]="'Message'" [isRequired]="true" #formgroup></app-input>
<span class="btn btn-fire" (click)="formValidate('formgroup')">SEND</span>
<div class="contact-links">
<table>
<tr>
<td><a target="_blank" href="https://www.facebook.com/mlcloudcv/"><img src="assets/images/fb.png" /></a></td>
<td><a target="_blank" href="https://github.com/Cloud-CV"><img src="assets/images/git_black.png" /></a></td>
<td><a target="_blank" href="https://twitter.com/project_cloudcv"><img src="assets/images/twitter_black.png" /></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="contact-map">
</div>
<div class="contact-container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 ev-mt-50">
<h4 class="contact-title ev-mt-17 ev-mb-13 fs-34 align-center fw-semibold">Contact Us</h4>
<app-input [label]="'name'" [placeholder]="'Name*'" [isRequired]="true" [icon]="'fa fa-user'" #formgroup></app-input>
<app-input [label]="'email'" [placeholder]="'Email*'" [isRequired]="true" [type]="'email'" [icon]="'fa fa-envelope'" #formgroup></app-input>
<app-input [label]="'message'" [placeholder]="'Message*'" [isRequired]="true" [type]="'textarea'" [icon]="'fa fa-comment'" #formgroup></app-input><br>
<button class="btn btn-waves-effect grad-btn grad-btn-dark ev-btn-dark" (click)="formValidate('formgroup')">Send</button>
</div>
<div class="rocket-container col-lg-4 col-md-4">
<div class="small-cloud cloud-1">
<img src="assets/images/cloud-1.png">
</div>
<div class="small-cloud cloud-2">
<img src="assets/images/cloud-2.png">
</div>
<div class="small-cloud cloud-3">
<img src="assets/images/cloud-1.png">
</div>
<div class="small-cloud cloud-4">
<img src="assets/images/cloud-4.png">
</div>
<div class="small-cloud cloud-2 bird-anim">
<img src="assets/images/bird.gif">
</div>
<div class="rocket-anim">
<img src="assets/images/rocket.gif">
</div>
</div>
</div>
</div>
<app-footer></app-footer>

120 changes: 18 additions & 102 deletions src/app/components/contact/contact.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,113 +2,29 @@
@import './styles/mixins.scss';


.contact-container {
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
padding-bottom:100px;

.contact-form {
position: absolute;
left: 100px;
z-index: 10;
border-radius: 15px;
background: $blue-darker;
padding: 20px;
width: 30%;
text-align: center;
margin-top: 10px;
margin-left: 150px;
@include box-shadow(0px, 10px, 15px, 0px, $overlay-dark);
/* contact container */

.contact-form-inner {
border-radius: 15px;
background: $blue-medium;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
height: auto;
text-align: center;
overflow-x: hidden;
.contact-title {
margin-top: 30px;
margin-bottom:30px;
font-size: $fs-24;
color: white;
display:block;
}
.contact-form-elements {
width: 90%;
margin: 0 auto;
.btn {
margin-left: 0;
margin-top:30px;
}
}
.contact-links {
width: 100%;
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
table {
margin: 0 auto;
width: 100%;
tr {
td {
width: 70px;
text-align: center;
}
}
}
img {
height: 20px;
width: auto;
filter: invert(100%);
cursor: pointer;
opacity:0.7;
&:hover {
opacity:1;
}
}
}
}
* {
transition: all 0.2s ease;
}
}
#contact-map {
z-index: 5;
width: 90%;
height: 500px;
border-radius: 15px;
margin: 0 auto;
margin-top: 50px;
@include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
}
.contact-container {
max-width: 1400px;
margin: 0 auto;
padding: 60px 100px 40px 113px;
min-height: 100vh;
}

@include screen-medium {
.contact-container {
.contact-form {
width: 60%;
left: 20%;
margin-left: 0px;
}
}
.contact-title {
color: #4d4d4d;
line-height: 110%;
box-sizing: border-box;
}

@include screen-small {

/* media queries */

@media only screen and (max-width: $screen-sm-md){
.contact-title {
margin-top: 10px;
}
.contact-container {
padding-bottom: 500px;
#contact-map {
display: none;
}
.contact-form {
width: 90%;
left: 5%;
margin-left: 0px;
}
text-align: center;
}
}
42 changes: 0 additions & 42 deletions src/app/components/contact/contact.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,6 @@ export class ContactComponent implements OnInit, AfterViewInit {
*/
componentlist: any;

/**
* Google object (initialized after Google maps JS is loaded)
*/
google: any;

/**
* Constructor.
* @param document Window document Injection.
Expand All @@ -65,7 +60,6 @@ export class ContactComponent implements OnInit, AfterViewInit {
* Component on initialized.
*/
ngOnInit() {
this.loadMapContactPage();
this.globalService.scrollToTop();
}

Expand Down Expand Up @@ -110,40 +104,4 @@ export class ContactComponent implements OnInit, AfterViewInit {
);
}

/**
* Loading Map on the contact page.
*/
loadMapContactPage() {
// TODO: Replace this with CloudCV's Google Maps API Key
const MAP_API_KEY = 'AIzaSyDlXSVBOW9fl96oY4oyTo055jUVd9Y-6dA';

this.windowService.loadJS('https://maps.googleapis.com/maps/api/js?key=' + MAP_API_KEY,
this.callBack, this.document.body, this);
}

/**
* Initialize Map parameters.
*/
initMap() {
const MAP_CENTER = {lat: 33.779478, lng: -84.434887};
const MAP_GATECH = {lat: 33.780398, lng: -84.395513};
const MAP_OBJ = new this.google.maps.Map(document.getElementById('contact-map'), {
zoom: 13,
center: MAP_CENTER
});
const MAP_MARKER = new this.google.maps.Marker({
position: MAP_GATECH,
map: MAP_OBJ
});
}

/**
* Callback called when Google Map JS is loaded.
* @param self context value of this
*/
callBack(self) {
self.google = self.windowService.nativeWindow().google;
self.initMap();
}

}
21 changes: 15 additions & 6 deletions src/app/components/utility/input/input.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
<div class="input-group">
<div *ngIf="type!='file'">
<input class="input-field" (input)="validateInput($event.target.value)" [class.isValid]="isValid" [class.theme-dark]="theme=='dark'" type="{{type}}" [value]="value" [readonly]="isReadonly">
<span class="input-bar"></span>
<label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme=='dark'">{{placeholder}}</label>
<img class="input-icon" src="{{icon}}" *ngIf="isIconPresent" />
<div class="input-message" #textValue [class.hidden]="!(((isRequired && isEmpty)||(!isValid && !isEmpty)) && isDirty)">{{message}}</div>
<div *ngIf="type!='file' && type!='textarea'">
<input class="input-field" (input)="validateInput($event.target.value)" [class.isValid]="isValid" [class.theme-dark]="theme=='dark'" type="{{type}}" [value]="value" [readonly]="isReadonly">
<span class="input-bar"></span>
<label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme=='dark'">{{placeholder}}</label>
<i class="input-icon {{icon}}" *ngIf="isIconPresent"></i>
<div class="input-message" #textValue [class.hidden]="!(((isRequired && isEmpty)||(!isValid && !isEmpty)) && isDirty)">{{message}}</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

conditions like !(((isRequired && isEmpty)||(!isValid && !isEmpty)) && isDirty) is not looking good and readable. You can create a separate method to check it- which will return True/False.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Shekharrajak done

</div>

<div *ngIf="type=='textarea'">
<textarea autosize class="input-field" (input)="validateInput($event.target.value)" [class.isValid]="isValid" [class.theme-dark]="theme=='dark'" [value]="value" [readonly]="isReadonly"></textarea>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please try to do this without adding new package. If it is required in multiple places or needed for other features which is not present in Angular then it is fine but for small improvement adding new package is not a good idea.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Shekharrajak I used this package thinking that it would be good if we have 'text-area' in other places in the future.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Using more packages can slow down the website. Can you check whether it is behaving properly in all the device size or not?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Shekharrajak yeah it's working perfectly, please check if it's working on your side too

<span class="input-bar"></span>
<label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme=='dark'">{{placeholder}}</label>
<i class="input-icon {{icon}}" *ngIf="isIconPresent"></i>
<div class="input-message" #textValue [class.hidden]="!(((isRequired && isEmpty)||(!isValid && !isEmpty)) && isDirty)">{{message}}</div>
</div>

<div class="file-upload" *ngIf="type=='file'">
<span class="btn btn-filter" (click)="transferClick('file-upload-custom')" [class.theme-dark]="theme=='dark'" [class.selected]="fileSelected"><i class="fas fa-upload"></i> {{placeholder}}</span>
<input type="file" accept=".json, .zip, .txt" class="transparent" id="file-upload-custom" (change)="handleFileInput($event.target.files)" name="fileupload" [readonly]="isReadonly"/>
Expand Down
Loading