Angular Material Layout

by Arasu RRK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<div data-ng-app="testApp" data-ng-cloak>
<div id='appCtrl' data-ng-controller="testCtrl">
  <button id="button">
    Update value in Dialog
  </button>
  
  <span>Value: {{brokenLink}}</span>
</div>
</div>

CSS

*[flex] > img {
    max-width: 100%;
}

.wrapper {
    background: peachpuff;
}

header > md-content {
    background: lavender;
}

main > md-content {
    background: ivory;
}

JavaScript

var testApp = angular.module('testApp', ['ngMaterial']);

testApp.controller('testCtrl', function ($scope, $mdDialog, $mdMedia) {
$scope.brokenLink = "Initial Value";

$scope.showDialog = function(ev) {
            var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
            $mdDialog.show({
                    controller: DialogController,
                    template: "<md-dialog aria-label='testArea' ng-cloak flex='66'><form><md-toolbar><div class='md-toolbar-tools'><h2>Add Redirection Link</h2><span flex></span><md-button class='md-icon-button' ng-click='cancel()'><md-icon md-font-icon='fa-times-circle' aria-label='Close dialog' class='fa fa-2x'></md-icon></md-button></div></md-toolbar><md-dialog-content layout='column' style='min-width: 500px'><div class='md-dialog-content'><md-input-container class='md-block'><md-icon md-font-icon='fa-chain-broken' class='fa fa-2x'></md-icon><input id='broken-link' ng-model='brokenLink' type='text' placeholder='Broken Link (required)' ng-required='true'></md-input-container></div></md-dialog-content><md-dialog-actions layout='row'><md-button ng-click='answer()'>Cancel</md-button><md-button ng-click='answer()' style='margin-right:20px;'>Add</md-button></md-dialog-actions></form></md-dialog>",
                    parent: angular.element(document.body),
                    targetEvent: ev,
                    clickOutsideToClose: true,
                    fullscreen: useFullScreen
                })
                .then(function(answer) {
                    $scope.status = 'You said the information was "' + answer + '".';
                }, function() {
                    $scope.status = 'You cancelled the dialog.';
                });
            $scope.$watch(function() {
                return $mdMedia('xs') || $mdMedia('sm');
            }, function(wantsFullScreen) {
                $scope.customFullscreen = (wantsFullScreen === true);
            });
        };

});

function...