Frontend_V2: Add twitter feed section on homepage(Cloud-CV#3282)

* Add twitter section on homepage

* remove load command

* remove twitter-feed

* add border and fix small screen

* change the background color

Co-authored-by: Rishabh Jain <[email protected]>

frontend_v2/package.json

@@ -42,7 +42,6 @@
     "ngx-logger": "^4.1.9",
     "ngx-quill": "^6.3.1",
     "ngx-textarea-autosize": "^2.0.3",
-    "ngx-twitter-timeline": "^0.1.5",
     "normalize.css": "^8.0.0",
     "quill": "^1.3.7",
     "rxjs": "^6.5.2",

frontend_v2/src/app/components/home/home.component.html

@@ -385,8 +385,22 @@ <h3 class="fw-light center">Partner Organizations</h3>
         </div>
       </div>
     </section>
-    <!-- Arxiv Entry -->
+
+    <!-- Twitter Feed Container -->
     <section class="ev-container ev-reverse-details text-med-black ev-super-light-bg">
+      <div class="grad-container text-med-black">
+        <div class="row">
+          <h3 class="fw-light center">Twitter Feed</h3>
+        </div>
+        <div class="twitter-container">
+        <a class="twitter-timeline" data-height="400" data-width="700" data-chrome="nofooter noheader transparent" 
+        data-theme="light" href="https://twitter.com/eval_ai?ref_src=twsrc%5Etfw" data-aria-polite="assertive">Tweets by eval_ai</a>
+          </div>
+    </div>
+    </section>
+
+    <!-- Arxiv Entry -->
+    <section class="ev-container ev-reverse-details text-med-black">
       <div class="grad-container text-med-black">
         <div class="row">
           <h3 class="fw-light center">Cite our work</h3>
@@ -410,7 +424,7 @@ <h5 class="fw-light">
       </div>
     </section>
     <!-- Sponsors -->
-    <section class="ev-container ev-reverse-details text-med-black" id="ev-scroll-down">
+    <section class="ev-container ev-reverse-details text-med-black ev-super-light-bg " id="ev-scroll-down">
       <div class="grad-container text-med-black">
         <div class="row">
           <h3 class="fw-light center">Sponsors</h3>
@@ -429,8 +443,9 @@ <h3 class="fw-light center">Sponsors</h3>
         </div>
       </div>
     </section>
+
     <!-- Testimonials Section --> 
-    <section class="ev-container testimonial-wrapper text-med-black ev-super-light-bg">
+    <section class="ev-container testimonial-wrapper text-med-black">
       <div class="grad-container text-med-black">
         <div class="row">
           <h3 class="fw-light center">Testimonials</h3>
@@ -460,8 +475,9 @@ <h5 class="name fs-20">{{ testimonialauthor}}</h5>
         </div>
       </div>
     </section>
+
     <!-- Subscribe to newsletter -->
-    <section class="ev-container text-med-black">
+    <section class="ev-container text-med-black ev-super-light-bg">
       <div class="grad-container text-med-black">
         <div class="row">
           <h3 class="fw-light center">Subscribe to our newsletter</h3>

frontend_v2/src/app/components/home/home.component.scss

@@ -6,6 +6,22 @@
   margin-right: auto;
 }
 
+.twitter-container {
+  text-align: center;
+  margin-left: 23%;
+  width: 55%;
+  box-shadow: 0px 0px 12px $shadow-black;
+  border: 1px solid;
+  border-radius: 5px;
+  color: rgb(101, 97, 97);
+}
+
+@media (max-width: 400px) {
+  .grad-container {
+    padding: 25px 25px 25px 10px;
+  }
+}
+
 .org-logo {
   max-width: 100%;
   height: 120px;

frontend_v2/src/app/components/home/home.component.spec.ts

@@ -13,7 +13,6 @@ import { HomemainComponent } from './homemain/homemain.component';
 import { PartnersComponent } from './partners/partners.component';
 import { RulesComponent } from './rules/rules.component';
 import { FeaturedChallengesComponent } from './featured-challenges/featured-challenges.component';
-import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { WindowService } from '../../services/window.service';
 
@@ -34,7 +33,6 @@ describe('HomeComponent', () => {
         PartnersComponent,
         RulesComponent,
         FeaturedChallengesComponent,
-        TwitterFeedComponent,
       ],
       providers: [GlobalService, AuthService, ApiService, EndpointsService, WindowService],
       imports: [RouterTestingModule, HttpClientModule],

frontend_v2/src/app/components/home/home.module.ts

@@ -1,13 +1,11 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NgxTwitterTimelineModule } from 'ngx-twitter-timeline';
 
 // import components
 import { FeaturedChallengesComponent } from './featured-challenges/featured-challenges.component';
 import { HomemainComponent } from './homemain/homemain.component';
 import { PartnersComponent } from './partners/partners.component';
 import { RulesComponent } from './rules/rules.component';
-import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
 import { HomeComponent } from './home.component';
 
 // import module
@@ -17,16 +15,14 @@ import { HomeRoutingModule } from './home-routing.module';
 @NgModule({
   declarations: [
     HomeComponent,
-    TwitterFeedComponent,
     PartnersComponent,
     RulesComponent,
     HomemainComponent,
     FeaturedChallengesComponent,
   ],
-  imports: [CommonModule, HomeRoutingModule, NgxTwitterTimelineModule, SharedModule],
+  imports: [CommonModule, HomeRoutingModule, SharedModule],
   exports: [
     HomeComponent,
-    TwitterFeedComponent,
     PartnersComponent,
     RulesComponent,
     HomemainComponent,

frontend_v2/src/index.html

@@ -3,6 +3,7 @@
   <head>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     <meta charset="utf-8" />
     <title>EvalAI</title>
     <base href="/" />