Merge pull request #88 from BrockCSC/development

Team component CSS update
BrockCSC · Jul 12, 2021 · ecb7923 · ecb7923
2 parents 24602b4 + d638da6
commit ecb7923
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 61 deletions.
diff --git a/src/app/views/team/team.component.html b/src/app/views/team/team.component.html
@@ -3,45 +3,47 @@
     <div class="container">
       <h3 class="csc-header">Current Executive Team</h3>
       <div class="csc-team-members">
-        <div class="exec" *ngFor="let exec of execs | async">
-          <div [id]="exec.$key + '-id'">
-            <img
-              class="exec-avatar"
-              [src]="exec.image ? exec.image.url : 'assets/exec-image-stub.png'"
-            />
+        <div class="exec-wrapper" *ngFor="let exec of execs | async">
+          <div class="exec">
+            <div class="exec-avatar" [id]="exec.$key + '-id'">
+              <img
+                class="exec-avatar-img"
+                [src]="
+                  exec.image ? exec.image.url : 'assets/exec-image-stub.png'
+                "
+              />
+            </div>
+            <div class="exec-info">
+              <div class="exec-name">{{ exec.name }}</div>
+              <div class="exec-title">{{ exec.title }}</div>
+              <div class="exec-disc">{{ exec.description }}</div>
+            </div>
           </div>
-          <div class="exec-info">
-            <div class="exec-name">{{ exec.name }}</div>
-            <div class="exec-title">{{ exec.title }}</div>
-          </div>
-          <csc-tooltip [forId]="exec.$key + '-id'" direction="right">
-            <div class="tooltip-exec-name">{{ exec.name }}</div>
-            <p class="tooltip-exec-title">{{ exec.title }}</p>
-            <p class="tooltip-exec-desc">{{ exec.description }}</p>
-          </csc-tooltip>
         </div>
       </div>
-      <h3 class="csc-header">Previous Executives</h3>
-      <div class="csc-team-members">
-        <div class="exec" *ngFor="let prevExec of prevExecs | async">
-          <img
-            class="exec-avatar"
-            [id]="prevExec.$key + '-id'"
-            [src]="
-              prevExec.image ? prevExec.image.url : 'assets/exec-image-stub.png'
-            "
-          />
-          <div class="exec-info">
-            <div class="exec-name">{{ prevExec.name }}</div>
-            <div class="exec-title">{{ prevExec.title }}</div>
+      <h3 class="prev-team" (click)="flipShowPrevExecs()">
+        Previous Executives
+      </h3>
+      <div [@showPrevExecsAnim]="prevDivState" class="csc-team-members">
+        <div class="exec-wrapper" *ngFor="let prevExec of prevExecs | async">
+          <div class="exec">
+            <div class="exec-avatar" [id]="prevExec.$key + '-id'">
+              <img
+                class="exec-avatar-img"
+                [id]="prevExec.$key + '-id'"
+                [src]="
+                  prevExec.image
+                    ? prevExec.image.url
+                    : 'assets/exec-image-stub.png'
+                "
+              />
+            </div>
+            <div class="exec-info">
+              <div class="exec-name">{{ prevExec.name }}</div>
+              <div class="exec-title">{{ prevExec.title }}</div>
+              <div class="exec-disc">{{ prevExec.description }}</div>
+            </div>
           </div>
-          <csc-tooltip [forId]="prevExec.$key + '-id'" direction="right">
-            <div class="tooltip-exec-name">{{ prevExec.name }}</div>
-            <p class="tooltip-exec-title">{{ prevExec.title }}</p>
-            <p class="tooltip-exec-desc">
-              {{ prevExec.description }}
-            </p>
-          </csc-tooltip>
         </div>
       </div>
     </div>

diff --git a/src/app/views/team/team.component.scss b/src/app/views/team/team.component.scss
@@ -1,6 +1,6 @@
 @import 'src/variables.scss';
 
-$exec-info-text-color: #515151;
+$exec-info-text-color: black;
 $tooltip-exec-name-color: $text-white;
 $tooltip-exec-desc-color: #a6a6a6;
 
@@ -10,43 +10,86 @@ $tooltip-exec-desc-color: #a6a6a6;
 
 .csc-team-members {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-gap: 1rem;
 }
 
-.exec {
-  margin-left: 20px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
+.prev-team {
+  display: inline-block;
+  position: relative;
+  background-color: white;
+  color: black;
+  border: none;
+  outline: none;
+  font-size: 1.125rem;
+  padding: 0px 0px 5px;
+  cursor: pointer;
+  border-bottom: solid 1px black;
+}
+.prev-team::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  left: 0;
+  bottom: 0;
+  background-color: red;
+  transform: scale(0, 1);
+  transform-origin: 0% 100%;
+  transition: transform 0.3s ease;
+}
 
-  .exec-avatar {
-    border-radius: 100%;
-    width: 76px;
-    height: 76px;
-    max-width: 76px;
-    max-height: 76px;
-    border: 0.3px solid black;
-    transition: border 100ms ease-in-out;
-
-    &:hover {
-      border: 1px solid $maroon;
-      cursor: pointer;
-    }
-  }
+.prev-team:hover::after {
+  transform: scale(1, 1);
+  cursor: pointer;
+}
 
+.exec {
+  max-width: 150px;
+  height: fit-content;
+  align-items: center;
+  //background: rgb(36, 33, 33);
+  border-radius: 10px;
   .exec-info {
     margin-left: 1rem;
     transition: opacity 200ms ease-in;
-
-    .exec-name,
+    .exec-name {
+      margin-top: 1rem;
+      color: $exec-info-text-color;
+      font-weight: bold;
+    }
     .exec-title {
-      font-size: 14px;
+      font-size: $smallText;
+      color: $text-grey;
+    }
+    .exec-disc {
       color: $exec-info-text-color;
     }
   }
 }
 
+.exec-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.exec-avatar {
+  height: 50%;
+  padding-top: 10%;
+  overflow: hidden;
+}
+
+.exec-avatar-img {
+  display: block;
+  margin: auto;
+  height: 150px;
+  width: 150px;
+  border-radius: 100%;
+  border: 2px solid;
+  border-color: rgba($color: #aa3b3b, $alpha: 1);
+  transition: all 0.5s ease-in-out;
+}
+
 .tooltip-exec-name {
   color: $tooltip-exec-name-color;
 }

diff --git a/src/app/views/team/team.component.ts b/src/app/views/team/team.component.ts
@@ -1,4 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import { Component, NgModule, OnInit } from '@angular/core';
 import { AngularFireList } from '@angular/fire/database';
 import { Exec, ExecApiService } from 'app/shared/api';
 import { Observable } from 'rxjs';
@@ -7,15 +14,45 @@ import { Observable } from 'rxjs';
   selector: 'csc-team',
   templateUrl: './team.component.html',
   styleUrls: ['./team.component.scss'],
+  animations: [
+    trigger('showPrevExecsAnim', [
+      state(
+        'show',
+        style({
+          overflow: 'hidden',
+          opacity: 1,
+          height: '*',
+        })
+      ),
+      state(
+        'hide',
+        style({
+          overflow: 'hidden',
+          opacity: 0,
+          height: '0px',
+        })
+      ),
+      transition('show => hide', animate('600ms ease-out')),
+      transition('hide => show', animate('1000ms ease-in')),
+    ]),
+  ],
 })
 export class TeamComponent implements OnInit {
   execs: Observable<Exec[]>;
   prevExecs: Observable<Exec[]>;
-
+  showPrevExecs = false;
   constructor(private _api: ExecApiService) {}
 
   ngOnInit() {
     this.execs = this._api.getCurrentExecs();
     this.prevExecs = this._api.getPreviousExecs();
   }
+
+  get prevDivState() {
+    return this.showPrevExecs ? 'show' : 'hide';
+  }
+
+  flipShowPrevExecs() {
+    this.showPrevExecs = !this.showPrevExecs;
+  }
 }
diff --git a/src/variables.scss b/src/variables.scss
@@ -15,6 +15,7 @@ $google-blue: #4285f4;
 // Font colours
 $text-white: rgba(255, 255, 255, 0.9);
 $text-black: rgba(0, 0, 0, 0.9);
+$text-grey: rgba(0, 0, 0, 0.8);
 
 // Font sizes
 $extraLargeHeading: 2.25rem;