Subscribe to our newsletter
diff --git a/frontend_v2/src/app/components/home/home.component.scss b/frontend_v2/src/app/components/home/home.component.scss
index db00c6130d..f357a701ea 100644
--- a/frontend_v2/src/app/components/home/home.component.scss
+++ b/frontend_v2/src/app/components/home/home.component.scss
@@ -1,4 +1,5 @@
@import 'styles/variables';
+@import './mixins.scss';
.grad-container .row {
margin-left: auto;
@@ -92,6 +93,111 @@ p {
}
}
+.testimonial-container {
+ text-align: center;
+ width: 90%;
+ height: 30%;
+ padding-left: 5vw;
+
+ .testimonial-body {
+ padding-top: 150px;
+ padding-bottom: 70px;
+ width: 60%;
+
+ span {
+ color: #000;
+ font-weight: $fw-light;
+ font-style: italic;
+ }
+ }
+
+ .testimonial-author {
+ padding-top: 100px;
+ padding-bottom: 70px;
+ margin-left: 5%;
+
+ .logo {
+ height: 100px;
+ width: 100px;
+ }
+
+ .testimonial-details {
+ margin-top: 15px;
+ display: block;
+ }
+
+ .name {
+ margin: 0;
+ padding-bottom: 5px;
+ }
+ }
+
+ .testimonial-arrow-left {
+ position: absolute;
+ top: 40%;
+ left: 0;
+ height: 100px;
+ cursor: pointer;
+ }
+
+ .testimonial-arrow-right {
+ position: absolute;
+ top: 40%;
+ right: 0;
+ height: 100px;
+ cursor: pointer;
+ transform: rotate(180deg);
+ }
+
+ .testimonial-quotes {
+ position: absolute;
+ top: 22%;
+ left: 30%;
+ height: 50px;
+ }
+}
+
+@media only screen and (max-width: 600px) {
+ .testimonial-container {
+ .testimonial-author {
+ margin-left: 0;
+ }
+ .testimonial-body {
+ padding-top: 35px;
+ width: 80%;
+ margin-left: 10%;
+ }
+ .testimonial-quotes {
+ top: 280px;
+ left: 17%;
+ }
+ }
+}
+
+@include screen-medium {
+ .testimonial-container {
+ .testimonial-quotes {
+ top: 15% !important;
+ height: 40px !important;
+ }
+ }
+}
+
+@include screen-small {
+ .testimonial-container {
+ background-size: 80 !important;
+ padding-left: 0;
+ .testimonial-author {
+ padding-bottom: 40px;
+ }
+ }
+ .testimonial-wrapper {
+ .grad-container {
+ padding: 0px;
+ }
+ }
+}
+
#gsoc {
height: 45%;
}
diff --git a/frontend_v2/src/app/components/home/home.component.spec.ts b/frontend_v2/src/app/components/home/home.component.spec.ts
index 69b24112e0..a5c303bb68 100644
--- a/frontend_v2/src/app/components/home/home.component.spec.ts
+++ b/frontend_v2/src/app/components/home/home.component.spec.ts
@@ -12,7 +12,6 @@ import { HttpClientModule } from '@angular/common/http';
import { HomemainComponent } from './homemain/homemain.component';
import { PartnersComponent } from './partners/partners.component';
import { RulesComponent } from './rules/rules.component';
-import { TestimonialsComponent } from './testimonials/testimonials.component';
import { FeaturedChallengesComponent } from './featured-challenges/featured-challenges.component';
import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
@@ -34,7 +33,6 @@ describe('HomeComponent', () => {
HomemainComponent,
PartnersComponent,
RulesComponent,
- TestimonialsComponent,
FeaturedChallengesComponent,
TwitterFeedComponent,
],
diff --git a/frontend_v2/src/app/components/home/home.component.ts b/frontend_v2/src/app/components/home/home.component.ts
index 9efd12a4cd..9e2885c1db 100644
--- a/frontend_v2/src/app/components/home/home.component.ts
+++ b/frontend_v2/src/app/components/home/home.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnDestroy, OnInit, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChildren, QueryList, AfterViewInit, Inject } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { EndpointsService } from '../../services/endpoints.service';
import { AuthService } from '../../services/auth.service';
import { GlobalService } from '../../services/global.service';
import { Router } from '@angular/router';
import { InputComponent } from '../../components/utility/input/input.component';
+import { DOCUMENT } from '@angular/common';
/**
* Component Class
@@ -20,6 +21,42 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
public user = {};
public challengeList = [];
+ /**
+ * Selected testimonial index
+ */
+ selected = 0;
+
+ /**
+ * Placeholder text Lorem Ipsum
+ */
+ ipsum: any =
+ 'Lorem ipsum dolor sit amet,\
+ consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
+ /**
+ * Sample testimonials till the API comes up
+ */
+ testimonials = [
+ { text: '1-' + this.ipsum, author: 'Lorem', org: 'Georgia Tech', image:'' },
+ { text: '2-' + this.ipsum, author: 'Octopus', org: 'Google', image:'' },
+ { text: '3-' + this.ipsum, author: 'Penguin', org: 'Facebook', image:'' },
+ ];
+
+ /**
+ * Selected testimonial text
+ */
+ testimonialbody = this.testimonials[this.selected]['text'];
+
+ /**
+ * Selected testimonial author
+ */
+ testimonialauthor = this.testimonials[this.selected]['author'];
+
+ /**
+ * Selected testimonial orgName
+ */
+ testimonialorg = this.testimonials[this.selected]['org'];
+
/**
* Subscribe Form
*/
@@ -46,7 +83,8 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
private endpointService: EndpointsService,
private authService: AuthService,
private globalService: GlobalService,
- private router: Router
+ private router: Router,
+ @Inject(DOCUMENT) private document: Document
) {}
ngOnInit() {
@@ -124,6 +162,84 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
);
}
+ /**
+ * Right arrow clicked
+ */
+ testimonialRight() {
+ this.selected = this.selected + 1;
+ if (this.selected >= this.testimonials.length) {
+ this.selected = 0;
+ }
+ }
+
+ /**
+ * left arrow clicked
+ */
+ testimonialLeft() {
+ this.selected = this.selected - 1;
+ if (this.selected < 0) {
+ this.selected = this.testimonials.length - 1;
+ }
+ }
+
+ /**
+ * Testimonials navigated
+ */
+ testimonialNavigate(direction = 'left') {
+ const a = this.document.getElementsByClassName('testimonial-body')[0];
+ const b = this.document.getElementsByClassName('testimonial-author')[0];
+ const c = this.document.getElementsByClassName('testimonial-quotes')[0];
+ const d = this.document.getElementsByClassName('testimonial-org')[0];
+ if (direction === 'left') {
+ this.testimonialLeft();
+ } else {
+ this.testimonialRight();
+ }
+ this.flyOut(a, direction, this);
+ this.disappearAppear(a, this);
+ this.disappearAppear(b, this);
+ this.disappearAppear(c, this);
+ this.disappearAppear(d, this);
+ }
+
+ /**
+ * Fly out animation
+ */
+ flyOut = (element, direction, scope) => {
+ const temp = 15;
+ setTimeout(function () {
+ scope.testimonialbody = scope.testimonials[scope.selected]['text'];
+ scope.testimonialauthor = scope.testimonials[scope.selected]['author'];
+ scope.testimonialorg = scope.testimonials[scope.selected]['org'];
+ }, 1000);
+ };
+
+ /**
+ * Disappear animation
+ */
+ disappearAppearRecursive = (element, temp) => {
+ const x = temp - 0.01;
+ if (x >= 0) {
+ (function (scope) {
+ setTimeout(function () {
+ element.style.opacity = x + '';
+ scope.disappearAppearRecursive(element, x);
+ }, 5);
+ })(this);
+ }
+ };
+
+ /**
+ * Disappear animation wrapper
+ */
+ disappearAppear = (element, scope) => {
+ const temp = 1.0;
+ this.disappearAppearRecursive(element, temp);
+ setTimeout(function () {
+ element.style.opacity = '1';
+ }, 1000);
+ };
+
ngOnDestroy(): void {
if (this.authServiceSubscription) {
this.authServiceSubscription.unsubscribe();
diff --git a/frontend_v2/src/app/components/home/home.module.ts b/frontend_v2/src/app/components/home/home.module.ts
index bb9a6e4be5..a0eb18c4cf 100644
--- a/frontend_v2/src/app/components/home/home.module.ts
+++ b/frontend_v2/src/app/components/home/home.module.ts
@@ -7,7 +7,6 @@ import { FeaturedChallengesComponent } from './featured-challenges/featured-chal
import { HomemainComponent } from './homemain/homemain.component';
import { PartnersComponent } from './partners/partners.component';
import { RulesComponent } from './rules/rules.component';
-import { TestimonialsComponent } from './testimonials/testimonials.component';
import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
import { HomeComponent } from './home.component';
@@ -21,7 +20,6 @@ import { HomeRoutingModule } from './home-routing.module';
TwitterFeedComponent,
PartnersComponent,
RulesComponent,
- TestimonialsComponent,
HomemainComponent,
FeaturedChallengesComponent,
],
@@ -31,7 +29,6 @@ import { HomeRoutingModule } from './home-routing.module';
TwitterFeedComponent,
PartnersComponent,
RulesComponent,
- TestimonialsComponent,
HomemainComponent,
FeaturedChallengesComponent,
],
diff --git a/frontend_v2/src/app/components/home/testimonials/testimonials.component.html b/frontend_v2/src/app/components/home/testimonials/testimonials.component.html
deleted file mode 100644
index 8d8f1644a8..0000000000
--- a/frontend_v2/src/app/components/home/testimonials/testimonials.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
- {{ testimonialbody }}
-
-
- {{ testimonialauthor }}
-
-
-
-
diff --git a/frontend_v2/src/app/components/home/testimonials/testimonials.component.scss b/frontend_v2/src/app/components/home/testimonials/testimonials.component.scss
deleted file mode 100644
index a3ece8224b..0000000000
--- a/frontend_v2/src/app/components/home/testimonials/testimonials.component.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import './variables.scss';
-@import './mixins.scss';
-
-.testimonial-container {
- text-align: center;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- position: relative;
- margin-top: 100px;
- margin-bottom: 100px;
- .testimonial-body {
- width: 70%;
- margin-left: 15%;
- padding-top: 400px;
- padding-bottom: 200px;
- span {
- color: #fff;
- font-weight: $fw-light;
- font-style: italic;
- padding: 15px;
- }
- }
-
- .testimonial-author {
- color: #fff;
- font-weight: $fw-regular;
- padding-bottom: 200px;
- }
-
- .testimonial-arrow-left {
- position: absolute;
- top: 50%;
- left: 0;
- height: 100px;
- cursor: pointer;
- }
-
- .testimonial-arrow-right {
- position: absolute;
- top: 50%;
- right: 0;
- height: 100px;
- cursor: pointer;
- transform: rotate(180deg);
- }
-
- .testimonial-quotes {
- position: absolute;
- top: 30%;
- left: 10%;
- height: 50px;
- }
-}
-
-@include screen-medium {
- .testimonial-container {
- .testimonial-quotes {
- top: 20% !important;
- height: 40px !important;
- }
- }
-}
-
-@include screen-small {
- .testimonial-container {
- background-size: cover !important;
- .testimonial-quotes {
- height: 30px !important;
- }
- }
-}
diff --git a/frontend_v2/src/app/components/home/testimonials/testimonials.component.spec.ts b/frontend_v2/src/app/components/home/testimonials/testimonials.component.spec.ts
deleted file mode 100644
index 5dc4e9c5be..0000000000
--- a/frontend_v2/src/app/components/home/testimonials/testimonials.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TestimonialsComponent } from './testimonials.component';
-
-describe('TestimonialsComponent', () => {
- let component: TestimonialsComponent;
- let fixture: ComponentFixture
;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [TestimonialsComponent],
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(TestimonialsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/frontend_v2/src/app/components/home/testimonials/testimonials.component.ts b/frontend_v2/src/app/components/home/testimonials/testimonials.component.ts
deleted file mode 100644
index 1f82f79124..0000000000
--- a/frontend_v2/src/app/components/home/testimonials/testimonials.component.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import { Component, OnInit, Inject } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-/**
- * Component Class
- */
-@Component({
- selector: 'app-testimonials',
- templateUrl: './testimonials.component.html',
- styleUrls: ['./testimonials.component.scss'],
-})
-export class TestimonialsComponent implements OnInit {
- /**
- * Selected testimonial index
- */
- selected = 0;
-
- /**
- * Placeholder text Lorem Ipsum
- */
- ipsum: any =
- 'Lorem ipsum dolor sit amet,\
- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
-
- /**
- * Sample testimonials till the API comes up
- */
- testimonials = [
- { text: '1-' + this.ipsum, author: 'Lorem' },
- { text: '2-' + this.ipsum, author: 'Octopus' },
- { text: '3-' + this.ipsum, author: 'Penguin' },
- ];
-
- /**
- * Selected testimonial text
- */
- testimonialbody = this.testimonials[this.selected]['text'];
-
- /**
- * Selected testimonial author
- */
- testimonialauthor = this.testimonials[this.selected]['author'];
-
- /**
- * Component constructor
- * @param document Window document Injection.
- */
- constructor(@Inject(DOCUMENT) private document: Document) {}
-
- /**
- * Component on initialized
- */
- ngOnInit() {}
-
- /**
- * Right arrow clicked
- */
- testimonialRight() {
- this.selected = this.selected + 1;
- if (this.selected >= this.testimonials.length) {
- this.selected = 0;
- }
- }
-
- /**
- * left arrow clicked
- */
- testimonialLeft() {
- this.selected = this.selected - 1;
- if (this.selected < 0) {
- this.selected = this.testimonials.length - 1;
- }
- }
-
- /**
- * Testimonials navigated
- */
- testimonialNavigate(direction = 'left') {
- const a = this.document.getElementsByClassName('testimonial-body')[0];
- const b = this.document.getElementsByClassName('testimonial-author')[0];
- const c = this.document.getElementsByClassName('testimonial-quotes')[0];
- if (direction === 'left') {
- this.testimonialLeft();
- } else {
- this.testimonialRight();
- }
- this.flyOut(a, direction, this);
- this.disappearAppear(a, this);
- this.disappearAppear(b, this);
- this.disappearAppear(c, this);
- }
-
- // Testimonial animation BEGIN ----------------------------------
-
- /**
- * Fly left animation
- */
- flyLeftRecursive = (element, temp) => {
- const x = temp - 1;
- if (x > -100) {
- (function (scope) {
- setTimeout(function () {
- element.style.marginLeft = x + '%';
- scope.flyLeftRecursive(element, x);
- }, 5);
- })(this);
- }
- };
-
- /**
- * Fly right animation
- */
- flyRightRecursive = (element, temp) => {
- const x = temp + 1;
- if (x < 100) {
- (function (scope) {
- setTimeout(function () {
- element.style.marginLeft = x + '%';
- scope.flyRightRecursive(element, x);
- }, 5);
- })(this);
- }
- };
-
- /**
- * Fly out animation
- */
- flyOut = (element, direction, scope) => {
- const temp = 15;
- /*
- if (direction === 'right') {
- this.flyLeftRecursive(element, temp);
- } else {
- this.flyRightRecursive(element, temp);
- }
- */
- setTimeout(function () {
- scope.testimonialbody = scope.testimonials[scope.selected]['text'];
- scope.testimonialauthor = scope.testimonials[scope.selected]['author'];
- element.style.marginLeft = '15%';
- }, 1000);
- };
-
- /**
- * Disappear animation
- */
- disappearAppearRecursive = (element, temp) => {
- const x = temp - 0.01;
- if (x >= 0) {
- (function (scope) {
- setTimeout(function () {
- element.style.opacity = x + '';
- scope.disappearAppearRecursive(element, x);
- }, 5);
- })(this);
- }
- };
-
- /**
- * Disappear animation wrapper
- */
- disappearAppear = (element, scope) => {
- const temp = 1.0;
- this.disappearAppearRecursive(element, temp);
- setTimeout(function () {
- element.style.opacity = '1';
- }, 1000);
- };
-
- // Testimonial animation END ----------------------------------
-}
+