UI: Fix home page layout.

ui/src/app/home/home-links.controller.js

@@ -17,7 +17,42 @@
 import './home-links.scss';
 
 /*@ngInject*/
-export default function HomeLinksController($scope, menu) {
+export default function HomeLinksController($scope, $mdMedia, menu) {
+
     var vm = this;
-    vm.model = menu.getHomeSections();
+
+    vm.sectionColspan = sectionColspan;
+
+    $scope.$watch(function() { return $mdMedia('lg'); }, function() {
+        updateColumnCount();
+    });
+
+    $scope.$watch(function() { return $mdMedia('gt-lg'); }, function() {
+        updateColumnCount();
+    });
+
+    updateColumnCount();
+
+    menu.getHomeSections().then((homeSections) => {
+        vm.model = homeSections;
+    });
+
+    function updateColumnCount() {
+        vm.cols = 2;
+        if ($mdMedia('lg')) {
+            vm.cols = 3;
+        }
+        if ($mdMedia('gt-lg')) {
+            vm.cols = 4;
+        }
+    }
+
+    function sectionColspan(section) {
+        var colspan = vm.cols;
+        if (section && section.places && section.places.length <= colspan) {
+            colspan = section.places.length;
+        }
+        return colspan;
+    }
+
 }

ui/src/app/home/home-links.tpl.html

@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<md-grid-list class="tb-home-links" md-cols="2" md-cols-lg="3" md-cols-gt-lg="4" md-row-height="280px">
-	<md-grid-tile md-colspan="2" md-colspan-gt-sm="{{section.places.length}}" ng-repeat="section in vm.model">
+<md-grid-list class="tb-home-links" md-cols="{{vm.cols}}" md-row-height="280px">
+	<md-grid-tile md-colspan="2" md-colspan-gt-sm="{{vm.sectionColspan(section)}}" ng-repeat="section in vm.model">
 		<md-card style='width: 100%;'>
 			<md-card-title>
 				<md-card-title-text>
@@ -25,12 +25,12 @@
 			</md-card-title>
 			<md-card-content>
 				<md-grid-list md-row-height="170px" md-cols="{{section.places.length}}" md-cols-gt-md="{{section.places.length}}">
-					 <md-grid-tile class="card-tile" ng-repeat="place in section.places">
-			        	<md-button class="tb-card-button md-raised md-primary" layout="column" ui-sref="{{place.state}}">
-			        		<md-icon class="material-icons tb-md-96" aria-label="{{place.icon}}">{{place.icon}}</md-icon>
-			   				<span translate>{{place.name}}</span>
-			        	</md-button>
-					 </md-grid-tile>
+					<md-grid-tile class="card-tile" ng-repeat="place in section.places">
+						<md-button class="tb-card-button md-raised md-primary" layout="column" ui-sref="{{place.state}}">
+							<md-icon class="material-icons tb-md-96" aria-label="{{place.icon}}">{{place.icon}}</md-icon>
+							<span translate>{{place.name}}</span>
+						</md-button>
+					</md-grid-tile>
 				</md-grid-list>
 			</md-card-content>
 		</md-card>