Updated tasks styling (#224)

* Updated tasks styling to be more aligned with Web Fluent/Fabric 7

* Fixes.

* Updated new task styling.

* Fixed alignment.

* Use classmap.

* Use task to check instead.

* moved componentMediaQuery to baseComponent

* Added alt design when there's no plan displayed.

* Fixed desktop design when there's no plan.

* Fixed tasks styling for ie11.

* Fixed vertical alignment.

* Restored index.html.

* Updated button.

* Fixed ie 11 resizing issue.

Author: JustinXinLiu

package.json

@@ -52,7 +52,7 @@
     "@microsoft/microsoft-graph-types-beta": "microsoftgraph/msgraph-typescript-typings#beta",
     "lit-element": "^2.2.1",
     "msal": "1.1.3",
-    "office-ui-fabric-core": "10.1.0"
+    "office-ui-fabric-core": "11.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",

src/components/baseComponent.ts

@@ -6,6 +6,30 @@
  */
 
 import { LitElement, PropertyValues } from 'lit-element';
+
+/**
+ * Defines media query based on component width
+ *
+ * @export
+ * @enum {string}
+ */
+export enum ComponentMediaQuery {
+  /**
+   * devices with width < 768
+   */
+  mobile = '',
+
+  /**
+   * devies with width < 1200
+   */
+  tablet = 'tablet',
+
+  /**
+   * devices with width > 1200
+   */
+  desktop = 'desktop'
+}
+
 /**
  * BaseComponent extends LitElement including ShadowRoot toggle and fireCustomEvent features
  *
@@ -35,6 +59,23 @@ export abstract class MgtBaseComponent extends LitElement {
     this._useShadowRoot = value;
   }
 
+  /**
+   * Gets the ComponentMediaQuery of the component
+   *
+   * @readonly
+   * @type {ComponentMediaQuery}
+   * @memberof MgtBaseComponent
+   */
+  public get mediaQuery(): ComponentMediaQuery {
+    if (this.offsetWidth < 768) {
+      return ComponentMediaQuery.mobile;
+    } else if (this.offsetWidth < 1200) {
+      return ComponentMediaQuery.tablet;
+    } else {
+      return ComponentMediaQuery.desktop;
+    }
+  }
+
   private static _useShadowRoot: boolean = true;
 
   constructor() {
@@ -71,6 +112,7 @@ export abstract class MgtBaseComponent extends LitElement {
     });
     return this.dispatchEvent(event);
   }
+
   /**
    * method to create ShadowRoot if disabled flag isn't present
    *

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

@@ -31,20 +31,17 @@ $color: var(--color, #{$ms-color-neutralDark});
 
       .display-name {
         font-size: 27.3103px;
-        // line-height: 36px;
         color: #333333;
       }
 
       .job-title {
         font-size: 18.2069px;
-        // line-height: 31px;
         color: #767676;
         font-weight: 600;
       }
 
       .department {
         font-size: 15.1724px;
-        // line-height: 31px;
         color: #767676;
       }
 
@@ -68,14 +65,13 @@ $color: var(--color, #{$ms-color-neutralDark});
 
   .additional-details-container {
     .additional-details-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       height: 28px;
       background: rgba(196, 196, 196, 0.1);
-      text-align: center;
-      position: relative;
       .additional-details-svg {
-        width: 50%;
-        bottom: 0;
-        top: 100%;
+        margin-bottom: 3px;
       }
     }
     .additional-details-button:hover {