Commit 19c5f92e210c411376c1a91d4d87c4c44bc4c67c

Authored by Igor Kulikov
1 parent 19ad5737

UI: Improve layout for small resolution screens.

... ... @@ -16,7 +16,10 @@
16 16 @import '../../scss/constants';
17 17
18 18 .tb-details-title {
19   - font-size: 1.600rem;
  19 + font-size: 1.000rem;
  20 + @media (min-width: $layout-breakpoint-gt-sm) {
  21 + font-size: 1.600rem;
  22 + }
20 23 font-weight: 400;
21 24 text-transform: uppercase;
22 25 margin: 20px 8px 0 0;
... ...
... ... @@ -22,7 +22,7 @@ tb-js-func {
22 22 border: 1px solid #C0C0C0;
23 23 height: 100%;
24 24 #tb-javascript-input {
25   - min-width: 400px;
  25 + min-width: 200px;
26 26 min-height: 200px;
27 27 width: 100%;
28 28 height: 100%;
... ...
... ... @@ -19,7 +19,7 @@
19 19 <div layout="row" layout-align="start center" style="height: 40px;">
20 20 <span style="font-style: italic;">function({{ functionArgsString }}) {</span>
21 21 <span flex></span>
22   - <md-button id="expand-button" aria-label="Fullscreen" class="md-icon-button tb-md-32 tb-fullscreen-button-style"></md-button>
  22 + <div id="expand-button" layout="column" aria-label="Fullscreen" class="md-button md-icon-button tb-md-32 tb-fullscreen-button-style"></div>
23 23 </div>
24 24 <div flex id="tb-javascript-panel" class="tb-js-func-panel" layout="column">
25 25 <div flex id="tb-javascript-input"
... ...
... ... @@ -79,10 +79,8 @@ export default function RelationDialogController($scope, $mdDialog, types, entit
79 79 });
80 80
81 81 function updateEditorSize(element) {
82   - var newWidth = 600;
83 82 var newHeight = 200;
84   - angular.element('#tb-relation-additional-info', element).height(newHeight.toString() + "px")
85   - .width(newWidth.toString() + "px");
  83 + angular.element('#tb-relation-additional-info', element).height(newHeight.toString() + "px");
86 84 vm.editor.resize();
87 85 }
88 86
... ...
... ... @@ -19,7 +19,7 @@
19 19 border: 1px solid #C0C0C0;
20 20 height: 100%;
21 21 #tb-relation-additional-info {
22   - min-width: 600px;
  22 + min-width: 200px;
23 23 min-height: 200px;
24 24 width: 100%;
25 25 height: 100%;
... ...
... ... @@ -15,7 +15,7 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<md-dialog aria-label="{{ (vm.isAdd ? 'relation.add' : 'relation.edit' ) | translate }}" style="min-width: 400px;">
  18 +<md-dialog aria-label="{{ (vm.isAdd ? 'relation.add' : 'relation.edit' ) | translate }}" style="min-width: 600px;">
19 19 <form name="theForm" ng-submit="vm.save()">
20 20 <md-toolbar>
21 21 <div class="md-toolbar-tools">
... ...
... ... @@ -13,6 +13,9 @@
13 13 * See the License for the specific language governing permissions and
14 14 * limitations under the License.
15 15 */
  16 +
  17 +import './home-links.scss';
  18 +
16 19 /*@ngInject*/
17 20 export default function HomeLinksController($scope, menu) {
18 21 var vm = this;
... ...
  1 +/**
  2 + * Copyright © 2016-2017 The Thingsboard Authors
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + */
  16 +
  17 +@import "../../scss/constants";
  18 +
  19 +.tb-home-links {
  20 + .md-headline {
  21 + font-size: 20px;
  22 + @media (min-width: $layout-breakpoint-xmd) {
  23 + font-size: 24px;
  24 + }
  25 + }
  26 +}
\ No newline at end of file
... ...
... ... @@ -15,7 +15,7 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<md-grid-list md-cols="2" md-cols-gt-sm="4" md-row-height="280px">
  18 +<md-grid-list class="tb-home-links" md-cols="2" md-cols-lg="3" md-cols-gt-lg="4" md-row-height="280px">
19 19 <md-grid-tile md-colspan="2" md-colspan-gt-sm="{{section.places.length}}" ng-repeat="section in vm.model">
20 20 <md-card style='width: 100%;'>
21 21 <md-card-title>
... ...
... ... @@ -494,11 +494,15 @@ md-tabs.tb-headless {
494 494 height: 100%;
495 495 max-width: 240px;
496 496 span {
497   - padding: 10px 10px 20px 10px;
  497 + padding: 0 0 20px 0;
498 498 font-size: 18px;
499 499 font-weight: 400;
500 500 white-space: normal;
501 501 line-height: 18px;
  502 + max-height: 18px;
  503 + min-height: 18px;
  504 + height: 18px;
  505 + margin: auto;
502 506 }
503 507 }
504 508
... ...