feat(dialog): added fullscreen option to small screens

Added `smFullscreen` option that if it's set to true `.md-dialog-fullscreen` class is added to `<md-dialog>` that
maximizing the dialog to the whole screen.

fixes #2148

Author: EladBezalel

src/components/dialog/demoBasicUsage/dialog1.tmpl.html

@@ -10,7 +10,7 @@ <h2>Mango (Fruit)</h2>
       </div>
     </md-toolbar>
 
-    <md-dialog-content style="max-width:800px;max-height:810px; ">
+    <md-dialog-content>
       <div class="md-dialog-content">
         <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
         <p>

src/components/dialog/demoBasicUsage/index.html

@@ -18,7 +18,9 @@
       Tab Dialog
     </md-button>
   </div>
-
+  <div hide-gt-sm layout="row" layout-align="center center">
+    <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
+  </div>
   <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
 
   <div ng-if="status">

src/components/dialog/demoBasicUsage/script.js

@@ -42,7 +42,8 @@ angular.module('dialogDemo1', ['ngMaterial'])
       templateUrl: 'dialog1.tmpl.html',
       parent: angular.element(document.body),
       targetEvent: ev,
-      clickOutsideToClose:true
+      clickOutsideToClose:true,
+      smFullscreen: $scope.customFullscreen
     })
     .then(function(answer) {
       $scope.status = 'You said the information was "' + answer + '".';

src/components/dialog/dialog.js

@@ -424,7 +424,7 @@ function MdDialogProvider($$interimElementProvider) {
 
   return $$interimElementProvider('$mdDialog')
     .setDefaults({
-      methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'closeTo', 'openFrom', 'parent'],
+      methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'closeTo', 'openFrom', 'parent', 'smFullscreen'],
       options: dialogDefaultOptions
     })
     .addPreset('alert', {
@@ -490,6 +490,7 @@ function MdDialogProvider($$interimElementProvider) {
       focusOnOpen: true,
       disableParentScroll: true,
       autoWrap: true,
+      smFullscreen: false,
       transformTemplate: function(template, options) {
         return '<div class="md-dialog-container">' + validatedTemplate(template) + '</div>';
 
@@ -895,6 +896,10 @@ function MdDialogProvider($$interimElementProvider) {
       var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
       var to = animator.toTransformCss("");  // defaults to center display (or parent or $rootElement)
 
+      if (options.smFullscreen) {
+        dialogEl.addClass('md-dialog-fullscreen');
+      }
+
       return animator
         .translate3d(dialogEl, from, to, translateOptions)
         .then(function(animateReversal) {

src/components/dialog/dialog.scss

@@ -119,3 +119,11 @@ md-dialog {
     border: 1px solid #fff;
   }
 }
+
+@media (max-width: $layout-breakpoint-sm) {
+  md-dialog.md-dialog-fullscreen {
+    min-height: 100%;
+    min-width: 100%;
+    border-radius: 0;
+  }
+}