Tweak entity card layout

This commit is contained in:
Paulus Schoutsen 2016-04-08 09:08:25 -07:00
parent cdfec7dc90
commit fb6b2fc5d6
3 changed files with 16 additions and 4 deletions

View File

@ -11,13 +11,16 @@
padding-bottom: 16px;
}
.state {
padding: 8px 16px;
padding: 4px 16px;
cursor: pointer;
}
.header {
@apply(--paper-font-headline);
/* overwriting line-height +8 because entity-toggle can be 40px height,
compensating this with reduced padding */
line-height: 40px;
color: var(--primary-text-color);
padding: 24px 16px 16px;
padding: 20px 16px 12px;
text-transform: capitalize;
}
.header .name {

View File

@ -22,6 +22,10 @@
text-transform: capitalize;
}
.main-text[take-height] {
line-height: 40px;
}
.secondary-text {
@apply(--paper-font-common-nowrap);
color: var(--secondary-text-color);
@ -31,8 +35,8 @@
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class='state'>
<div class='main-text'>[[computePrimaryText(stateObj, isPlaying)]]</div>
<div class='secondary-text'>[[computeSecondaryText(stateObj)]]</div>
<div class='main-text' take-height$='[[!secondaryText]]'>[[computePrimaryText(stateObj, isPlaying)]]</div>
<div class='secondary-text'>[[secondaryText]]</div>
</div>
</div>
</template>

View File

@ -21,6 +21,11 @@ export default new Polymer({
type: Boolean,
computed: 'computeIsPlaying(stateObj)',
},
secondaryText: {
type: String,
computed: 'computeSecondaryText(stateObj)',
},
},
computeIsPlaying(stateObj) {