Add our team page with current theme(#137)

Cloud-CV · Jul 3, 2019 · 965800b · 965800b
1 parent 13ea14f
commit 965800b
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 40 deletions.
diff --git a/src/app/components/our-team/our-team.component.html b/src/app/components/our-team/our-team.component.html
@@ -1,24 +1,32 @@
 <app-header-static></app-header-static>
 <div class="container-top">
-	<div class="our-team-container ">
-	<div class="our-team-title">
-		{{coreTeamType}}
-	</div>
+    <div class="our-team-container">
+        <div class="our-team-title">
+            {{coreTeamType}}
+        </div>
         <div class="row">
             <h3 ng-if="noTeamDisplay" class="team-heading">{{noTeamDisplay}}</h3>
             <!-- This card is for Core Team -->
-            <div class="col-lg-3 col-md-3 col-sm-12" *ngFor="let data of coreTeamDetails">
+            <div class="col-lg-3 col-md-3 col-sm-12" *ngFor="let data of
+                coreTeamDetails">
                 <div class="team-card">
                     <div class="team-link-head">
-                        <span>
-                <a ng-if="data.linkedin_url !== 'null'" href="{{data.linkedin_url}}" target="_blank"><i class="fab fa-linkedin"></i></a>
-            </span>
-                        <span>
-                <a ng-if="data.github_url !== 'null'" href="{{data.github_url}}" target="_blank"><i class="fab fa-github"></i></a>
-            </span>
-                        <span class="right link-team-user">
-                <a ng-if="data.personal_website !== 'null'" href="{{data.personal_website}}" target="_blank">Personal Website</a>
-            </span>
+                        <span class="col-md-1 col-sm-1 col-xs-1">
+                            <a ng-if="data.linkedin_url !== 'null'"
+                                href="{{data.linkedin_url}}" target="_blank"><i
+                                    class="fab fa-linkedin"></i></a>
+                        </span>
+                        <span class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
+                            <a ng-if="data.github_url !== 'null'"
+                                href="{{data.github_url}}" target="_blank"><i
+                                    class="fab fa-github"></i></a>
+                        </span>
+                        <span class="col-lg-6 col-md-7 col-sm-7 col-xs-6 right
+                            link-team-user">
+                            <a ng-if="data.personal_website !== 'null'"
+                                href="{{data.personal_website}}"
+                                target="_blank">Personal Website</a>
+                        </span>
                     </div>
                     <div class="team-bg">
                         <img src="{{data.background_image || '#'}}">
@@ -38,21 +46,28 @@ <h3 ng-if="noTeamDisplay" class="team-heading">{{noTeamDisplay}}</h3>
         </div>
         <!-- This card is for Contributing Team -->
         <div class="our-team-title">
-        	{{contributingTeamType}}
+            {{contributingTeamType}}
         </div>
         <div class="row">
-            <div class="col-lg-3 col-md-3 col-sm-12" *ngFor="let data of contributingTeamDetails">
+            <div class="col-lg-3 col-md-3 col-sm-12" *ngFor="let data of
+                contributingTeamDetails">
                 <div class="team-card contributor">
                     <div class="team-link-head">
                         <span>
-                <a ng-if="data.linkedin_url !== 'null'" href="{{data.linkedin_url}}" target="_blank"><i class="fab fa-linkedin"></i></a>
-            </span>
+                            <a ng-if="data.linkedin_url !== 'null'"
+                                href="{{data.linkedin_url}}" target="_blank"><i
+                                    class="fab fa-linkedin"></i></a>
+                        </span>
                         <span>
-                <a ng-if="data.github_url !== 'null'" href="{{data.github_url}}" target="_blank"><i class="fab fa-github"></i></a>
-            </span>
+                            <a ng-if="data.github_url !== 'null'"
+                                href="{{data.github_url}}" target="_blank"><i
+                                    class="fab fa-github"></i></a>
+                        </span>
                         <span class="right link-team-user">
-                <a ng-if="data.personal_website !== 'null'" href="{{data.personal_website}}" target="_blank">Personal Website</a>
-            </span>
+                            <a ng-if="data.personal_website !== 'null'"
+                                href="{{data.personal_website}}"
+                                target="_blank">Personal Website</a>
+                        </span>
                     </div>
                     <div class="team-bg">
                         <img src="{{data.background_image || '#'}}">
@@ -70,7 +85,7 @@ <h3 ng-if="noTeamDisplay" class="team-heading">{{noTeamDisplay}}</h3>
                 </div>
             </div>
         </div>
-	</div>
+    </div>
 </div>
 
 <app-footer></app-footer>
diff --git a/src/app/components/our-team/our-team.component.scss b/src/app/components/our-team/our-team.component.scss
@@ -13,9 +13,10 @@
   padding:20px;
   text-align:center;
   .our-team-title {
-  	font-size:$fs-24;
+    color: $gray-dark;
+  	font-size:$fs-36;
   	margin-top:20px;
-  	margin-bottom:30px;
+  	margin-bottom: 20px;
   }
 
   .exist-team-card {
@@ -87,14 +88,14 @@
       max-width: 235px;
       height: 270px;
       border-radius: 6px;
-      @include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
+      @include box-shadow(0px, 0px, 10px, 5px, $overlay-light);  
       overflow: hidden;
       margin-bottom: 30px;
       margin-left: auto;
       margin-right: auto;
       transition: all 0.2s ease-in-out;
       &:hover {
-      	@include box-shadow(0px, 0px, 10px, 5px, $overlay-light);
+        @include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
       }
   }
 
@@ -140,18 +141,33 @@
       text-align: right;
       padding-left: 50px;
       right: 15px;
+      .text-dark-black {
+          color: $dark-black;
+          font-size: $fs-15;
+          font-weight: $fw-semibold;
+      }
+      .text-med-black {
+          color: $dark-black;
+          font-size: $fs-13;
+      }
       h4 {
-          font-size: 16px;
+          font-size: $fs-16;
       }
   }
 
   .team-link-head {
-      padding: 10px 15px;
+      padding: 10px 5px 10px 5px;
       position: absolute;
       width: 100%;
       top: 0;
-      left: 0;
       z-index: 10;
+      margin-left: 0px;
+      .link-team-user {
+          color: $blue-light;
+          padding-right: 0px;
+          font-size: 12px;
+          line-height: 25px;
+      }
       span {
           padding-right: 10px;
           a {
@@ -165,12 +181,6 @@
       }
   }
 
-  span.link-team-user {
-      padding-right: 0px;
-      font-size: 12px;
-      line-height: 25px;
-  }
-
   .team-heading {
       margin-bottom: 30px;
       color: #9d9d9d;

diff --git a/src/app/components/our-team/our-team.component.spec.ts b/src/app/components/our-team/our-team.component.spec.ts
@@ -14,6 +14,11 @@ import { HttpClientModule } from '@angular/common/http';
 describe('OurTeamComponent', () => {
   let component: OurTeamComponent;
   let fixture: ComponentFixture<OurTeamComponent>;
+  let endpointsService;
+  let apiService;
+  let endpointsServiceSpy;
+  let fetchOurTeamMembersSpy;
+  let apiServiceSpy;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -27,11 +32,26 @@ describe('OurTeamComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(OurTeamComponent);
+    endpointsService = TestBed.get(EndpointsService);
+    apiService = TestBed.get(ApiService);
     component = fixture.componentInstance;
+    fetchOurTeamMembersSpy = spyOn(component, 'fetchOurTeamMembers').and.callThrough();
+    endpointsServiceSpy = spyOn(endpointsService, 'ourTeamURL').and.callThrough();
+    apiServiceSpy = spyOn(apiService, 'getUrl').and.callThrough();
+
+    expect(fetchOurTeamMembersSpy).not.toHaveBeenCalled();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call fetchOurTeamMembers method on init', () => {
+    expect(fetchOurTeamMembersSpy).toHaveBeenCalledTimes(1);
+    expect(endpointsServiceSpy).toHaveBeenCalled();
+    const expectedTeamUrl = 'web/team/';
+    expect(apiServiceSpy).toHaveBeenCalledWith(expectedTeamUrl);
+  });
+
 });
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -35,7 +35,7 @@
 
 
 @mixin screen-medium() {
-  @media(min-width: $screen-sm) and (max-width: $screen-md) {
+  @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
     @content;
   }
 }

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -5,7 +5,7 @@
 
 $blue-dark: #33526e;
 $blue-darker: #273e54;
-$blue-light: #adc8e0;
+$blue-light: #adb4d0;
 $blue-medium: #32485d;
 $blue-lighter: #2196F3;
 $blue-medium-dark: #056cf0;
@@ -21,7 +21,7 @@ $purple-medium: #a178b7;
 
 /* Red Shades */
 
-$red-dark: #cb8474;
+$red-dark: #252833;
 $red-light: #eb8474;
 
 
@@ -56,6 +56,7 @@ $gray-medium: #d4d4d4;
 $gray-dark: #9d9d9d;
 $gray-darker: #273e54;
 $gray-lighter: #fafafa;
+$dark-black: #4d4d4d;
 
 /* fire shades */
 
@@ -72,13 +73,15 @@ $overlay-medium: rgba(0, 0, 0, 0.5);
 $white-overlay-light: rgba(255, 255, 255, 0.2);
 $white-overlay-medium: rgba(255, 255, 255, 0.5);
 $white-overlay-dark: rgba(255, 255, 255, 0.7);
-$blue-overlay-dark: rgba(39, 62, 84, 0.8);
+$blue-overlay-dark: #252833;
 
 
 /* Font sizes */
 
 $fs-12: 12px;
+$fs-13: 13px;
 $fs-14: 14px;
+$fs-15: 15px;
 $fs-16: 16px;
 $fs-18: 18px;
 $fs-20: 20px;