dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve layout for small resolution screens.

Browse Source
This commit is contained in:
Igor Kulikov 2017-11-17 15:07:03 +02:00
parent 19ad5737d8
commit 19c5f92e21
10 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/app/components/details-sidenav.scss
View File

@ -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;

2
ui/src/app/components/js-func.scss
View File

@ -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%;

2
ui/src/app/components/js-func.tpl.html
View File

@ -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"

4
ui/src/app/entity/relation/relation-dialog.controller.js
View File

@ -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();
}

2
ui/src/app/entity/relation/relation-dialog.scss
View File

@ -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%;

2
ui/src/app/entity/relation/relation-dialog.tpl.html
View File

@ -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">

3
ui/src/app/home/home-links.controller.js
View File

@ -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;

26
ui/src/app/home/home-links.scss Normal file
View File

@ -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;
}
}
}

2
ui/src/app/home/home-links.tpl.html
View File

@ -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>

6
ui/src/scss/main.scss
View File

@ -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;
}
}