From bacb19245a151af5fea4a3b321ec068385218dfb Mon Sep 17 00:00:00 2001
From: miguelangel-nubla <miguelangel.nubla@gmail.com>
Date: Mon, 2 Sep 2019 17:32:03 +0200
Subject: [PATCH 1/4] Fix rounded image

---
 flower-card.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/flower-card.js b/flower-card.js
index 3a7bfa1..4de61d8 100644
--- a/flower-card.js
+++ b/flower-card.js
@@ -33,8 +33,10 @@ class FlowerCard extends cardTools.LitElement {
       height: 72px;
     }
     .header > img {
+      border-radius: 50%;
       width: 88px;
-      border-radius: var(--ha-card-border-radius, 2px);
+      height: 88px;
+      object-fit: cover;
       margin-left: 16px;
       margin-right: 16px;
       margin-top: -32px;

From df57863bcadb08b30264b60992c000caa2ce259e Mon Sep 17 00:00:00 2001
From: miguelangel-nubla <miguelangel.nubla@gmail.com>
Date: Mon, 2 Sep 2019 17:33:30 +0200
Subject: [PATCH 2/4] Interactive attributes

Added alt hover text and click to view sensor.
---
 flower-card.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/flower-card.js b/flower-card.js
index 4de61d8..a05c8ba 100644
--- a/flower-card.js
+++ b/flower-card.js
@@ -94,11 +94,15 @@ class FlowerCard extends cardTools.LitElement {
     const Flower = FlowerData[species];
     if(!this.stateObj)
       return cardTools.LitHtml``;
-
-    const attribute = (icon, val, min, max) => {
+console.log(this.stateObj);
+    const attribute = (icon, attr, min, max) => {
+      const unit = this.stateObj.attributes.unit_of_measurement_dict[attr];
+      const val = this.stateObj.attributes[attr];
       const pct = 100*Math.max(0, Math.min(1, (val-min)/(max-min)));
       return cardTools.LitHtml`
-        <div class="attribute">
+        <div class="attribute"
+        title="Current: ${val + " "+ unit}, min: ${min + " "+ unit}, max: ${max + " "+ unit}"
+        @click="${() => cardTools.moreInfo(this.stateObj.attributes.sensors[attr])}">
           <ha-icon .icon="${icon}"></ha-icon>
           <div class="meter red">
             <span
@@ -135,12 +139,12 @@ class FlowerCard extends cardTools.LitElement {
     <div class="divider"></div>
 
     <div class="attributes">
-    ${attribute('mdi:thermometer', this.stateObj.attributes.temperature, Flower[4], Flower[5])}
-    ${attribute('mdi:white-balance-sunny', this.stateObj.attributes.brightness, Flower[2], Flower[3])}
+    ${attribute('mdi:thermometer', 'temperature', Flower[4], Flower[5])}
+    ${attribute('mdi:white-balance-sunny', 'brightness', Flower[2], Flower[3])}
     </div>
     <div class="attributes">
-    ${attribute('mdi:water-percent', this.stateObj.attributes.moisture, Flower[6], Flower[7])}
-    ${attribute('mdi:leaf', this.stateObj.attributes.conductivity, Flower[8], Flower[9])}
+    ${attribute('mdi:water-percent', 'moisture', Flower[6], Flower[7])}
+    ${attribute('mdi:leaf', 'conductivity', Flower[8], Flower[9])}
     </div>
 
     </ha-card>

From 98c0801477b3805192652540f6691566ed309d75 Mon Sep 17 00:00:00 2001
From: miguelangel-nubla <miguelangel.nubla@gmail.com>
Date: Mon, 2 Sep 2019 17:59:21 +0200
Subject: [PATCH 3/4] Update flower-card.js

---
 flower-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flower-card.js b/flower-card.js
index a05c8ba..5478c16 100644
--- a/flower-card.js
+++ b/flower-card.js
@@ -94,7 +94,7 @@ class FlowerCard extends cardTools.LitElement {
     const Flower = FlowerData[species];
     if(!this.stateObj)
       return cardTools.LitHtml``;
-console.log(this.stateObj);
+
     const attribute = (icon, attr, min, max) => {
       const unit = this.stateObj.attributes.unit_of_measurement_dict[attr];
       const val = this.stateObj.attributes[attr];

From 9e80ed5522f342b6af632dbfb897fbbc5922e1fb Mon Sep 17 00:00:00 2001
From: miguelangel-nubla <miguelangel.nubla@gmail.com>
Date: Mon, 2 Sep 2019 18:26:57 +0200
Subject: [PATCH 4/4] Added tooltip for mobile devices

Replaced alt text with a tooltip
---
 flower-card.js | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/flower-card.js b/flower-card.js
index 5478c16..66734de 100644
--- a/flower-card.js
+++ b/flower-card.js
@@ -86,6 +86,37 @@ class FlowerCard extends cardTools.LitElement {
       margin-left: 8px;
       margin-right: 8px;
     }
+
+    .tooltip {
+      position: relative;
+    }
+    .tooltip:after {
+      opacity: 0;
+      visibility: hidden;
+      position: absolute;
+      content: attr(data-tooltip);
+      padding: 6px 10px;
+      top: 1.4em;
+      left: 50%;
+      -webkit-transform: translateX(-50%) translateY(-180%);
+              transform: translateX(-50%) translateY(-180%);
+      background: grey;
+      color: white;
+      white-space: nowrap;
+      z-index: 2;
+      border-radius: 2px;
+      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+      transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+    }
+    .tooltip:hover:after, .tooltip:active:after {
+      display: block;
+      opacity: 1;
+      visibility: visible;
+      -webkit-transform: translateX(-50%) translateY(-200%);
+              transform: translateX(-50%) translateY(-200%);
+    }
+    
     `;
   }
 
@@ -100,8 +131,8 @@ class FlowerCard extends cardTools.LitElement {
       const val = this.stateObj.attributes[attr];
       const pct = 100*Math.max(0, Math.min(1, (val-min)/(max-min)));
       return cardTools.LitHtml`
-        <div class="attribute"
-        title="Current: ${val + " "+ unit}, min: ${min + " "+ unit}, max: ${max + " "+ unit}"
+        <div class="attribute tooltip"
+        data-tooltip="${val + " "+ unit + " | " + min + " ~ " + max + " " + unit}"
         @click="${() => cardTools.moreInfo(this.stateObj.attributes.sensors[attr])}">
           <ha-icon .icon="${icon}"></ha-icon>
           <div class="meter red">