State display wrapping and fix full screen more-info (#991)

* state-info lower min-width, remove unnesecary wrapping div

* State normal line height, align flex baseline. Get rid of wrapping div

* fix full screen more-info-dialog
This commit is contained in:
NovapaX 2018-03-14 19:42:10 +01:00 committed by Paulus Schoutsen
parent 09fe2172b2
commit 9dc809cdb9
5 changed files with 39 additions and 21 deletions

View File

@ -9,7 +9,7 @@
<style>
:host {
@apply --paper-font-body1;
min-width: 150px;
min-width: 120px;
white-space: nowrap;
}
@ -37,7 +37,6 @@
}
</style>
<div>
<state-badge state-obj='[[stateObj]]'></state-badge>
<div class='info'>
@ -52,7 +51,6 @@
<slot>
</template>
</div>
</div>
</template>
</dom-module>

View File

@ -17,9 +17,6 @@
font-size: 14px;
width: 365px;
border-radius: 2px;
--paper-dialog-scrollable: {
-webkit-overflow-scrolling: auto;
}
}
more-info-controls, more-info-settings {
@ -34,8 +31,7 @@
--more-info-header-color: var(--text-primary-color);
}
:host {
max-height: 100%;
height: 100%;
@apply(--ha-dialog-fullscreen);
}
}

View File

@ -32,10 +32,6 @@
margin-bottom: 16px;
}
paper-dialog-scrollable {
margin-bottom: 16px;
}
:host([domain=camera]) paper-dialog-scrollable {
margin: 0 -24px -5px;
}

View File

@ -148,8 +148,8 @@
<dom-module id='ha-style-dialog'>
<template>
<style>
@media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog {
:host {
--ha-dialog-narrow: {
margin: 0;
width: 100% !important;
max-height: calc(100% - 64px);
@ -162,6 +162,31 @@
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
--ha-dialog-fullscreen: {
min-height: 100% !important;
width: 100% !important;
border-radius: 0px;
position: fixed !important;
margin: 0;
}
--paper-dialog-scrollable: {
-webkit-overflow-scrolling: auto;
margin-bottom: 16px;
}
}
@media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog {
@apply(--ha-dialog-narrow);
}
:host {
--paper-dialog-scrollable: {
-webkit-overflow-scrolling: auto;
margin-bottom: 0px;
}
}
}
</style>
</template>

View File

@ -8,25 +8,28 @@
<dom-module id="state-card-display">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
@apply(--layout-horizontal);
@apply(--layout-justified);
@apply(--layout-baseline);
}
.state {
@apply --paper-font-body1;
color: var(--primary-text-color);
margin-left: 16px;
text-align: right;
line-height: 40px;
flex: 1 0 50px;
}
.state.has-unit_of_measurement {
white-space: nowrap;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
</div>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
</template>
</dom-module>