Commit 19c5f92e210c411376c1a91d4d87c4c44bc4c67c
1 parent
19ad5737
UI: Improve layout for small resolution screens.
Showing
10 changed files
with
44 additions
and
10 deletions
... | ... | @@ -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; | ... | ... |
... | ... | @@ -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 | ... | ... |
... | ... | @@ -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; | ... | ... |
ui/src/app/home/home-links.scss
0 → 100644
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 | ... | ... |