Merge pull request #34 from artem-sedykh/dev

fix #33

README.md

@@ -29,7 +29,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=2.2.2
+    - url: /local/mini-humidifier-bundle.js?v=2.2.3
       type: module
   ```
 
@@ -40,14 +40,14 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 2. Grab `mini-humidifier-bundle.js`
 
   ```console
-  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v2.2.2/mini-humidifier-bundle.js
+  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v2.2.3/mini-humidifier-bundle.js
   ```
 
 3. Add a reference to `mini-humidifier-bundle.js` inside your `ui-lovelace.yaml`.
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=2.2.2
+    - url: /local/mini-humidifier-bundle.js?v=2.2.3
       type: module
   ```
 
@@ -60,7 +60,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=2.2.2
+    - url: /local/mini-humidifier-bundle.js?v=2.2.3
       type: module
   ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-humidifier",
-  "version": "v2.2.2",
+  "version": "v2.2.3",
   "description": "humidifier card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

release_notes/v2.2.3.md

@@ -0,0 +1,6 @@
+## v2.2.3
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-humidifier/v2.2.3/total.svg)](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v2.2.3)
+
+### FIXED
+- variable `ha-card-border-radius` added to styles, for rounding the edges of the card in various themes
+- small style fixes

src/components/targetHumidity.js

@@ -87,6 +87,7 @@ class TargetHumidity extends LitElement {
         flex-direction: column-reverse;
         align-items: center;
         height: var(--mh-unit);
+        width: 100%;
       }
       .mh-target_humidifier ha-slider {
         flex: 1;

src/main.js

@@ -376,6 +376,7 @@ class MiniHumidifier extends LitElement {
   }
 
   render() {
+    const cls = this.config.target_humidity.hide ? 'full' : '';
     return html`
       <ha-card
         class=${this.computeClasses()}
@@ -387,7 +388,7 @@ class MiniHumidifier extends LitElement {
             ${this.renderIcon()}
             <div class='entity__info'>
               <div class="wrap">
-                <div class="entity__info__name_wrap" 
+                <div class="entity__info__name_wrap ${cls}" 
                   @click=${e => this.handlePopup(e)}>
                   ${this.renderEntityName()}
                 </div>

src/style.js

@@ -55,6 +55,7 @@ const style = css`
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     opacity: var(--mh-bg-opacity);
+    border-radius: var(--ha-card-border-radius, 0);
   }
   
   .mh-humidifier {
@@ -164,9 +165,12 @@ const style = css`
   }
   .entity__info__name_wrap {
     margin-right: 0;
-    max-width: calc(var(--mh-unit) * 2.25);
+    max-width: calc(var(--mh-unit) * 4.25);
     cursor: pointer;
   }
+  .entity__info__name_wrap.full {
+    max-width: 80%;
+  }
   .--unavailable .ctl-wrap {
     margin-left: auto;
     margin-top: auto;
@@ -189,16 +193,19 @@ const style = css`
     display: flex;
   }
   .ctl-wrap {
-    width: 100%;
+    flex: 1;
+    margin-left: auto;
     display: flex;
     flex-direction: row;
   }
   mh-power {
     margin-left: auto;
     min-width: calc(var(--mh-unit) * .875);
+    margin-right: calc(var(--mh-unit) * -0.125);
   }
   mh-target-humidity {
-    width: 100%;
+    display: flex;
+    flex: 1;
   }
 `;