UI: Improve layout for small resolution screens.

ui/src/app/components/details-sidenav.scss

@@ -16,7 +16,10 @@
 @import '../../scss/constants';
 
 .tb-details-title {
-  font-size: 1.600rem;
+  font-size: 1.000rem;
+  @media (min-width: $layout-breakpoint-gt-sm) {
+    font-size: 1.600rem;
+  }
   font-weight: 400;
   text-transform: uppercase;
   margin: 20px 8px 0 0;

ui/src/app/components/js-func.scss

@@ -22,7 +22,7 @@ tb-js-func {
   border: 1px solid #C0C0C0;
   height: 100%;
   #tb-javascript-input {
-    min-width: 400px;
+    min-width: 200px;
     min-height: 200px;
     width: 100%;
     height: 100%;

ui/src/app/components/js-func.tpl.html

@@ -19,7 +19,7 @@
 	<div layout="row" layout-align="start center" style="height: 40px;">
 		<span style="font-style: italic;">function({{ functionArgsString }}) {</span>
 		<span flex></span>
-		<md-button id="expand-button" aria-label="Fullscreen" class="md-icon-button tb-md-32 tb-fullscreen-button-style"></md-button>
+		<div id="expand-button" layout="column" aria-label="Fullscreen" class="md-button md-icon-button tb-md-32 tb-fullscreen-button-style"></div>
 	</div>
 	<div flex id="tb-javascript-panel" class="tb-js-func-panel" layout="column">
 		<div flex id="tb-javascript-input"

ui/src/app/entity/relation/relation-dialog.controller.js

@@ -79,10 +79,8 @@ export default function RelationDialogController($scope, $mdDialog, types, entit
     });
 
     function updateEditorSize(element) {
-        var newWidth = 600;
         var newHeight = 200;
-        angular.element('#tb-relation-additional-info', element).height(newHeight.toString() + "px")
-            .width(newWidth.toString() + "px");
+        angular.element('#tb-relation-additional-info', element).height(newHeight.toString() + "px");
         vm.editor.resize();
     }
 

ui/src/app/entity/relation/relation-dialog.scss

@@ -19,7 +19,7 @@
   border: 1px solid #C0C0C0;
   height: 100%;
   #tb-relation-additional-info {
-    min-width: 600px;
+    min-width: 200px;
     min-height: 200px;
     width: 100%;
     height: 100%;

ui/src/app/entity/relation/relation-dialog.tpl.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<md-dialog aria-label="{{ (vm.isAdd ? 'relation.add' : 'relation.edit' ) | translate }}" style="min-width: 400px;">
+<md-dialog aria-label="{{ (vm.isAdd ? 'relation.add' : 'relation.edit' ) | translate }}" style="min-width: 600px;">
     <form name="theForm" ng-submit="vm.save()">
         <md-toolbar>
             <div class="md-toolbar-tools">

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

@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import './home-links.scss';
+
 /*@ngInject*/
 export default function HomeLinksController($scope, menu) {
     var vm = this;

ui/src/app/home/home-links.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright © 2016-2017 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../../scss/constants";
+
+.tb-home-links {
+    .md-headline {
+      font-size: 20px;
+      @media (min-width: $layout-breakpoint-xmd) {
+        font-size: 24px;
+      }
+    }
+}

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<md-grid-list md-cols="2" md-cols-gt-sm="4" md-row-height="280px">
+<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-card style='width: 100%;'>
 			<md-card-title>

ui/src/scss/main.scss

@@ -494,11 +494,15 @@ md-tabs.tb-headless {
   height: 100%;
   max-width: 240px;
   span {
-    padding: 10px 10px 20px 10px;
+    padding: 0 0 20px 0;
     font-size: 18px;
     font-weight: 400;
     white-space: normal;
     line-height: 18px;
+    max-height: 18px;
+    min-height: 18px;
+    height: 18px;
+    margin: auto;
   }
 }