Skip to content

Commit

Permalink
Modified contact us page to the current version of EvalAI (Cloud-CV#133)
Browse files Browse the repository at this point in the history 
* modified contact us page

* minor change

* minor responsive change
  • Loading branch information
@Sanji515 @sanketbansal
Sanji515 authored and sanketbansal committed Jun 27, 2019
1 parent b0472bb commit 7cf974e
Show file tree
Hide file tree
Showing 14 changed files with 340 additions and 193 deletions.
1 change: 1 addition & 0 deletions package.json
View file
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
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 {EmailValidator, FormsModule} from '@angular/forms';

// Import serivces
Expand Down Expand Up @@ -128,6 +129,7 @@ import {EmailValidatorDirective} from './Directives/email.validator';
BrowserModule,
AppRoutingModule,
HttpClientModule,
TextareaAutosizeModule,
NgxTwitterTimelineModule,
FormsModule
],
Expand Down
54 changes: 30 additions & 24 deletions src/app/components/contact/contact.component.html
View file
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
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
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();
}

}
23 changes: 16 additions & 7 deletions src/app/components/utility/input/input.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
<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]="toggleErrorMessage()">{{message}}</div>
</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>
<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]="toggleErrorMessage()">{{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"/>
<div class="input-message" #textValue [class.hidden]="!(((isRequired && isEmpty)||(!isValid && !isEmpty)) && isDirty)">{{message}}</div>
<div class="input-message" #textValue [class.hidden]="toggleErrorMessage()">{{message}}</div>
</div>
</div>
Loading

0 comments on commit 7cf974e

Please sign in to comment.