From a973f25d9a0e26668fceab56e0ba6b0f13e381e2 Mon Sep 17 00:00:00 2001 From: Gautam Jajoo Date: Thu, 26 Aug 2021 22:01:37 +0530 Subject: [PATCH] Frontend_V2: Add testimonial section on homepage(#3527) * add testimonial section on homepage * removed unnecessary animations * remove padding for mobile view * add wrapper * add testimonial org and logo * fix the testimonial card * fix indentation Co-authored-by: Rishabh Jain --- .../app/components/home/home.component.html | 33 +++- .../app/components/home/home.component.scss | 106 +++++++++++ .../components/home/home.component.spec.ts | 2 - .../src/app/components/home/home.component.ts | 120 +++++++++++- .../src/app/components/home/home.module.ts | 3 - .../testimonials/testimonials.component.html | 13 -- .../testimonials/testimonials.component.scss | 71 -------- .../testimonials.component.spec.ts | 24 --- .../testimonials/testimonials.component.ts | 171 ------------------ 9 files changed, 256 insertions(+), 287 deletions(-) delete mode 100644 frontend_v2/src/app/components/home/testimonials/testimonials.component.html delete mode 100644 frontend_v2/src/app/components/home/testimonials/testimonials.component.scss delete mode 100644 frontend_v2/src/app/components/home/testimonials/testimonials.component.spec.ts delete mode 100644 frontend_v2/src/app/components/home/testimonials/testimonials.component.ts diff --git a/frontend_v2/src/app/components/home/home.component.html b/frontend_v2/src/app/components/home/home.component.html index c187617398..808e1f55b1 100644 --- a/frontend_v2/src/app/components/home/home.component.html +++ b/frontend_v2/src/app/components/home/home.component.html @@ -429,8 +429,39 @@

Sponsors

+ +
+
+
+

Testimonials

+
+
+
+
+
+ +
+
{{ testimonialauthor}}
+ {{ testimonialorg }} +
+
+
+ {{ testimonialbody }} +
+
+ + + +
+
+
+
-
+

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 ---------------------------------- -}