fixed minor issues in ie11

Author: nmetulev

index.html

@@ -32,9 +32,10 @@
     <!-- <mgt-mock-provider></mgt-mock-provider> -->
 
     <mgt-login></mgt-login>
+    <mgt-person person-query="me" show-name show-email person-card="hover"></mgt-person>
+    <mgt-people-picker></mgt-people-picker>
     <mgt-tasks data-source="todo"></mgt-tasks>
     <mgt-agenda group-by-day></mgt-agenda>
     <mgt-people></mgt-people>
-    <mgt-people-picker></mgt-people-picker>
   </body>
 </html>

package.json

@@ -64,7 +64,7 @@
     "@babel/preset-typescript": "^7.3.3",
     "@types/jest": "^24.0.11",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "babel-polyfill": "6.26.0",
+    "babel-polyfill": "^6.5.0",
     "browser-sync": "^2.26.7",
     "cpx": "^1.5.0",
     "gulp": "^4.0.0",

src/components/mgt-person-card/mgt-person-card.scss

@@ -10,7 +10,7 @@ $font-size: var(--font-size, #{$ms-font-size-m});
 $font-weight: var(--font-weight, #{$ms-font-weight-semibold});
 $color: var(--color, #{$ms-color-neutralDark});
 
-.root {
+:host .root {
   position: relative;
   width: 340px;
   background: #ffffff;
@@ -21,7 +21,7 @@ $color: var(--color, #{$ms-color-neutralDark});
     display: flex;
     padding: 18px 14px;
 
-    mgt-person {
+    mgt-person.person-image {
       --avatar-size-s: 75px;
     }
 
@@ -53,7 +53,10 @@ $color: var(--color, #{$ms-color-neutralDark});
         -webkit-align-items: center;
         align-items: center;
         max-width: 120px;
-        justify-content: space-between;
+
+        .icon {
+          margin: 0 22px 0 0;
+        }
         .icon:hover {
           opacity: 0.6;
         }
@@ -78,6 +81,8 @@ $color: var(--color, #{$ms-color-neutralDark});
     }
     .additional-details-info {
       margin: 0 0 0 20px;
+      padding-bottom: 18px;
+
       .contact-text {
         margin: 0 0 24px 0;
         font-weight: 600;

src/components/mgt-person-card/mgt-person-card.ts

@@ -121,7 +121,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
           <div class="default-view">
             ${this.renderTemplate('default', { person: this.personDetails }) ||
               html`
-                <mgt-person .personDetails=${this.personDetails} .personImage=${this.personImage}></mgt-person>
+                <mgt-person
+                  class="person-image"
+                  .personDetails=${this.personDetails}
+                  .personImage=${this.personImage}
+                ></mgt-person>
                 <div class="details">
                   <div class="display-name">${user.displayName}</div>
                   ${jobTitle} ${department}
@@ -214,6 +218,8 @@ export class MgtPersonCard extends MgtTemplatedComponent {
           </div>
         `;
       }
+      const renderAdditionalSection: boolean = this.templates && this.templates['additional-details'];
+
       return html`
         <div class="additional-details-info">
           <div class="contact-text">Contact</div>
@@ -222,10 +228,14 @@ export class MgtPersonCard extends MgtTemplatedComponent {
               <div class="icons">
                 ${chat} ${email} ${phone} ${location}
               </div>
-              <div class="section-divider"></div>
-              <div class="custom-section">
-                ${this.renderTemplate('additional-details', null)}
-              </div>
+              ${renderAdditionalSection
+                ? html`
+                    <div class="section-divider"></div>
+                    <div class="custom-section">
+                      ${this.renderTemplate('additional-details', null)}
+                    </div>
+                  `
+                : null}
             </div>
           </div>
         </div>