From 2a15e239c3c381d4a751cdbeba281e0557618869 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <Paulus@PaulusSchoutsen.nl>
Date: Wed, 22 Oct 2014 20:28:16 -0700
Subject: [PATCH] Improved state card
---
.../http/www_static/polymer/state-card.html | 43 ++++++++++++++++---
1 file changed, 36 insertions(+), 7 deletions(-)
diff --git a/homeassistant/components/http/www_static/polymer/state-card.html b/homeassistant/components/http/www_static/polymer/state-card.html
index ad618a7372d..95470205e61 100755
--- a/homeassistant/components/http/www_static/polymer/state-card.html
+++ b/homeassistant/components/http/www_static/polymer/state-card.html
@@ -10,15 +10,16 @@
:host {
position: relative;
background-color: white;
- padding: 20px 20px 50px 20px;
+ padding: 20px 20px 55px 20px;
width: 100%;
- font-weight: 300;
border-radius: 2px;
}
.header {
text-transform: capitalize;
+ font-weight: 300;
+
font-size: 1.5rem;
}
@@ -27,8 +28,22 @@
color: darkgrey;
}
- .content {
+ .state-attributes {
margin-top: 10px;
+ font-size: 1rem;
+ }
+
+ .state-attributes .key {
+ white-space: nowrap;
+ width: 85px;
+ float: left;
+ clear: left;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .state-attributes .value {
+ margin-left: 95px;
}
.actions {
@@ -47,7 +62,10 @@
</style>
<div class="header" horizontal justified layout>
- <span class="entity_id">{{entity_id | makeReadable}}</span>
+ <span class="entity_id">
+ <template if="{{state_attr['friendly_name']}}">{{state_attr['friendly_name']}}</template>
+ <template if="{{!state_attr['friendly_name']}}">{{entity_id | makeReadable}}</template>
+ </span>
<span class='state'>{{state | makeReadable}}</span>
</div>
@@ -59,9 +77,12 @@
</div>
- <div class="content">
+ <div class="state-attributes">
<template repeat="{{key in objectKeys(state_attr)}}">
- <div>{{key | makeReadable}}: {{state_attr[key]}}</div>
+ <template if="{{key != 'friendly_name'}}">
+ <div class='key'>{{key | makeReadable}}</div>
+ <div class='value'>{{state_attr[key] | makeReadable}}</div>
+ </template>
</template>
</div>
@@ -128,7 +149,15 @@
// used as filter
makeReadable: function(value) {
- return value.replace("_", " ")
+ if(typeof value == "string") {
+ return value.replace(/_/g, " ");
+
+ } else if(Array.isArray(value)) {
+ return value.join(", ");
+
+ } else {
+ return value;
+ }
},
objectKeys: function(obj) {
--
GitLab