From fbc83a726d9d0149815f3a39f6ef7899bec79173 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 4 Dec 2017 16:43:13 +0200
Subject: [PATCH] UI: Fix home page layout.

---
 ui/src/app/home/home-links.controller.js | 39 ++++++++++++++++++++++--
 ui/src/app/home/home-links.tpl.html      | 16 +++++-----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/home/home-links.controller.js b/ui/src/app/home/home-links.controller.js
index 799a0bc0b2..32ae0919a3 100644
--- a/ui/src/app/home/home-links.controller.js
+++ b/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;
+    }
+
 }
diff --git a/ui/src/app/home/home-links.tpl.html b/ui/src/app/home/home-links.tpl.html
index e27f20a820..f0e558257f 100644
--- a/ui/src/app/home/home-links.tpl.html
+++ b/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>