Merge pull request #64 from gugcz/speakers-redesign

Speakers redesign
gugcz · Jul 31, 2019 · 9e892c8 · 9e892c8
2 parents 0c6490f + 8a0fb50
commit 9e892c8
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 105 deletions.
diff --git a/src/app/schedule/components/speaker-card/speaker-card.component.html b/src/app/schedule/components/speaker-card/speaker-card.component.html
@@ -1,7 +1,7 @@
 <div class="speaker-holder" [@fadeInOut]>
   <div class="header">
-    <h3>{{speakerName}}</h3>
-    <h5>{{companyName}}</h5>
+    <h3 class="speaker-name">{{speakerName}}</h3>
+    <h5 class="speaker-company">{{companyName}}</h5>
   </div>
   <div class="image">
     <app-tag-avatar [hoverEnabled]="true" (avatarClicked)="openSpeakerDetail()" [firestorageImagePath]="imagePath" [name]="speakerName"

diff --git a/src/app/schedule/components/speaker-card/speaker-card.component.scss b/src/app/schedule/components/speaker-card/speaker-card.component.scss
@@ -1,16 +1,26 @@
 .speaker-holder {
   width: 100%;
   text-align: center;
-  height: 230px;
+  height: 280px;
+  margin-bottom: 16px;
+
   .header {
     width: 100%;
-    *{
-        margin-top: 0px;
-        margin-bottom: 5px;
+
+    .speaker-name {
+      font-size: 24px;
+      margin-top: 0;
+      margin-bottom: 4px;
+    }
+
+    .speaker-company {
+      margin-top: 0;
+      margin-bottom: 16px;
+      font-size: 14px;
     }
   }
   .image {
     margin: auto;
-    width: 150px;
+    width: 175px;
   }
 }
diff --git a/src/app/schedule/components/speaker-card/speaker-card.component.ts b/src/app/schedule/components/speaker-card/speaker-card.component.ts
@@ -29,26 +29,24 @@ export class SpeakerCardComponent implements OnInit {
   @Input() imagePath: string;
   @Input() tag: Tag;
 
-  private isMobile: boolean;
-
-  constructor(private matDialog: MatDialog, private deviceService: DeviceDetectorService) {
-    this.isMobile = this.deviceService.isMobile();
-  }
+  constructor(private matDialog: MatDialog, private deviceService: DeviceDetectorService) {}
 
 
   ngOnInit() {
   }
 
   openSpeakerDetail() {
-    const config = {
+    const isMobile = this.deviceService.isMobile();
+
+    const desktopConfig = {
       width: '800px',
-      height: '500px',
+      height: '550px',
       data: {
         ref: this.speakerRef
       },
       autoFocus: false,
     };
-    const mobiconfig = {
+    const mobileConfig = {
       maxWidth: '100vw',
       maxHeight: '100vh',
       height: '100%',
@@ -58,6 +56,6 @@ export class SpeakerCardComponent implements OnInit {
       },
       autoFocus: false,
     };
-    this.matDialog.open(SpeakerDetailComponent, this.isMobile ? mobiconfig : config);
+    this.matDialog.open(SpeakerDetailComponent, isMobile ? mobileConfig : desktopConfig);
   }
 }
diff --git a/src/app/schedule/components/speaker-detail/speaker-detail.component.html b/src/app/schedule/components/speaker-detail/speaker-detail.component.html
@@ -1,41 +1,33 @@
-<div class="speaker-holder" *ngIf="speaker | async as speak" [@fadeInOut]>
-  <mat-dialog-content>
-    <h1>{{speak.name}}</h1>
-    <div class="holder">
-      <div class="wrapper">
-        <div class="left-info">
-          <div class="avatar-holder">
-            <app-tag-avatar [firestorageImagePath]="speak.photoPath" [name]="speak.name" [tagColor]="speak.tagColor">
-            </app-tag-avatar>
-          </div>
-          <h4>
-            {{speak.company}}
-          </h4>
-          <h4>
-            {{speak.companyPosition}}
-          </h4>
-          <div *ngIf="speak.socials" class="socials">
-            <a tabindex="-1" *ngFor="let social of speak.socials | socials" [disableRipple]="true" [href]="social.url"
-              mat-icon-button target="_blank">
-              <mat-icon [svgIcon]="social.key"></mat-icon>
-            </a>
-          </div>
+<div class="speaker-dialog" *ngIf="speaker | async as speak" [@fadeInOut] mat-dialog-content>
+  <div class="card-column">
+    <div class="header-container">
+      <button mat-icon-button aria-label="Close speaker button." class="close-button" [mat-dialog-close]="true">
+        <mat-icon>clear</mat-icon>
+      </button>
+    </div>
+    <div class="card-row">
+      <div class="left-panel">
+        <div class="avatar-holder">
+          <app-tag-avatar [firestorageImagePath]="speak.photoPath" [name]="speak.name" [tagColor]="speak.tagColor" class="speaker-photo">
+          </app-tag-avatar>
         </div>
-        <div class="right-info">
-          <div class="bio">
-            <p>
-              {{speak.bio}}
-            </p>
-          </div>
-          <div class="talk">
-            <h3>{{speak.talkName}}</h3>
-            <p>
-              {{speak.talkDescription}}
-            </p>
-          </div>
+      </div>
+      <div class="right-panel">
+        <h1 class="speaker-name">{{speak.name}}</h1>
+        <h4 class="speaker-company">{{speak.company}}</h4>
+        <h4 class="company-position">{{speak.companyPosition}}</h4>
+        <p class="bio">{{speak.bio}}</p>
+        <div *ngIf="speak.socials" class="socials">
+          <a tabindex="-1" *ngFor="let social of speak.socials | socials" [disableRipple]="true" [href]="social.url"
+            mat-icon-button target="_blank">
+            <mat-icon [svgIcon]="social.key"></mat-icon>
+          </a>
         </div>
       </div>
     </div>
-    <button mat-button [mat-dialog-close]="true">CLOSE</button>
-  </mat-dialog-content>
+    <div class="talk">
+      <h3 class="talk-name">{{speak.talkName}}</h3>
+      <p class="talk-description">{{speak.talkDescription}}</p>
+    </div>
+  </div>
 </div>
diff --git a/src/app/schedule/components/speaker-detail/speaker-detail.component.scss b/src/app/schedule/components/speaker-detail/speaker-detail.component.scss
@@ -1,48 +1,82 @@
-.holder {
-  width: 100%;
-  margin-top: 10px;
+.speaker-dialog {
   margin-bottom: 10px;
-}
-
-.wrapper {
+  max-height: 100% !important;
+  height: 100%;
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-}
+  padding: 12px 24px 24px 24px;
 
-.left-info {
-  margin: 5px;
-  flex-basis: 150px;
-}
+  .card-column {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 32px;
 
-mat-dialog-content {
-  max-height: 100% !important;
-}
+    .header-container {
+      display: flex;
+      justify-content: flex-end;
 
-p {
-  text-align: justify;
-}
+      .close-button {
+        position: relative;
+        right: -18px;
+      }
+    }
 
-.right-info {
-  margin: 5px;
-  flex-basis: 550px;
-}
+    .card-row .right-panel {
+      .speaker-name {
+        margin: 8px 0 4px;
+      }
+
+      .speaker-company {
+        margin: 4px 0;
+      }
 
-.avatar-holder {
-  height: 160px;
-}
+      .company-position {
+        margin: 4px 0;
+      }
+    }
+  }
 
-.socials {
-  .mat-icon-button-focus-overlay { background-color: transparent!important; }
+  .talk {
+    &-name {
+      font-size: 26px;
+      margin-bottom: 12px;
+    }
+  }
 
+  .socials {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    min-height: 40px;
 
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  min-height: 40px;
+    .mat-icon-button-focus-overlay { 
+      background-color: transparent !important; 
+    }
+  }
 }
 
-.speaker-holder {
-  height: 100%;
-}
+@media only screen and (min-width: 768px) {
+  .speaker-dialog .card-column {
+    .card-row {
+      display: flex;
+      flex-direction: row;
+
+      .left-panel, .right-panel {
+        width: calc(50% - 16px);
+      }
+
+      .left-panel {
+        display: flex;
+        margin-right: 16px;
+        justify-content: center;
+
+        .avatar-holder {
+          width: 256px;
+        }
+      }
+
+      .right-panel {
+        margin-left: 16px;
+      }
+    }
+  }
+}
diff --git a/src/app/schedule/components/tag-avatar/tag-avatar.component.ts b/src/app/schedule/components/tag-avatar/tag-avatar.component.ts
@@ -15,8 +15,8 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
     ]),
     trigger('widthHover', [
       state('false', style({ width: '100%' })),
-      state('true', style({ width: '90%' })),
-      transition('false <=> true', animate('150ms ease-in'))
+      state('true', style({ width: '95%' })),
+      transition('false <=> true', animate('100ms ease-in'))
     ])
   ]
 })

diff --git a/src/app/schedule/pages/speakers/speakers.component.html b/src/app/schedule/pages/speakers/speakers.component.html
@@ -10,8 +10,6 @@
     </div>
   </div>
   <div class="info-holder">
-    <h1>
-      More coming soon...
-    </h1>
+    <h1 class="info-text">More coming soon...</h1>
   </div>
 </div>
diff --git a/src/app/schedule/pages/speakers/speakers.component.scss b/src/app/schedule/pages/speakers/speakers.component.scss
@@ -1,23 +1,27 @@
 .container {
   min-height: 100vh;
   width: 100%;
-}
 
-.wrapper {
-  padding-top: 80px;
-}
+  .wrapper {
+    padding-top: 80px;
 
-.speakers-cont {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
+    .speakers-cont {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
 
-.member {
-  flex-basis: 320px;
+      .member {
+        flex-basis: 320px;
+      }
+    }
+  }
 }
 
 .info-holder{
   text-align: center;
+
+  .info-text {
+    font-size: 28px;
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -38,3 +38,12 @@ html, body {
 ::-webkit-scrollbar-thumb:hover {
   background: #c2185b;
 }
+
+.cdk-overlay-container .cdk-global-overlay-wrapper .cdk-overlay-pane {
+  max-width: 100%;
+
+  .mat-dialog-container {
+    overflow: hidden;
+    padding: 0 24px;
+  }
+}