jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Badge fixes (#694)

Browse Source 
* Badge fixes

* Make sure label height is unchanged
This commit is contained in:
Andrey 2017-11-29 08:51:38 +02:00 committed by Paulus Schoutsen
parent 2680a3f7e3
commit 7d20d8fe71
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ha-label-badge.html
View File

@ -38,24 +38,28 @@
.label-badge .label { .label-badge .label {
position: absolute; position: absolute;
bottom: -1em; bottom: -1em;
left: 0; /* Make the label as wide as container+border. */
right: 0; left: -0.1em;
right: -0.1em;
line-height: 1em; line-height: 1em;
font-size: 0.5em; font-size: 0.5em;
} }
.label-badge .label span { .label-badge .label span {
max-width: 80%; max-width: 68%; /* Parent width minus two times 16% padding */
display: inline-block; display: inline-block;
background-color: var(--ha-label-badge-color, --primary-color); background-color: var(--ha-label-badge-color, --primary-color);
color: white; color: white;
border-radius: 1em; border-radius: 1em;
padding: 4px 8px; padding: 8% 16%;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out;
} }
.label-badge .label.big span {
font-size: 90%;
}
.badge-container .title { .badge-container .title {
margin-top: 1em; margin-top: 1em;
font-size: var(--ha-label-badge-title-font-size, .9em); font-size: var(--ha-label-badge-title-font-size, .9em);
@ -73,11 +77,13 @@
<div class='badge-container'> <div class='badge-container'>
<div class='label-badge' id='badge'> <div class='label-badge' id='badge'>
<div class$='[[computeClasses(value)]]'> <div class$='[[computeValueClasses(value)]]'>
<iron-icon icon='[[icon]]' hidden$='[[computeHideIcon(icon, value, image)]]'></iron-icon> <iron-icon icon='[[icon]]' hidden$='[[computeHideIcon(icon, value, image)]]'></iron-icon>
<span hidden$='[[computeHideValue(value, image)]]'>[[value]]</span> <span hidden$='[[computeHideValue(value, image)]]'>[[value]]</span>
</div> </div>
<div class='label' hidden$='[[!label]]'><span>[[label]]</span></div> <div hidden$='[[!label]]' class$='[[computeLabelClasses(label)]]'>
<span>[[label]]</span>
</div>
</div> </div>
<div class='title' hidden$='[[!description]]'>[[description]]</div> <div class='title' hidden$='[[!description]]'>[[description]]</div>
</div> </div>
@ -101,10 +107,14 @@ class HaLabelBadge extends Polymer.Element {
}; };
} }
computeClasses(value) { computeValueClasses(value) {
return value && value.length > 4 ? 'value big' : 'value'; return value && value.length > 4 ? 'value big' : 'value';
} }
computeLabelClasses(label) {
return label && label.length > 5 ? 'label big' : 'label';
}
computeHideIcon(icon, value, image) { computeHideIcon(icon, value, image) {
return !icon || value || image; return !icon || value || image;
} }