mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-07 17:36:35 +00:00
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:
parent
09fe2172b2
commit
9dc809cdb9
@ -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>
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -32,10 +32,6 @@
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
paper-dialog-scrollable {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
:host([domain=camera]) paper-dialog-scrollable {
|
||||
margin: 0 -24px -5px;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user