CSS fixes and shadow fix (#58)

Using class instead of id in css
shadow_height now not visible if not configured.
Could fix some of the problems in #34

Author: helto4real

.devcontainer/HA/config/ui-lovelace.yaml

@@ -5,6 +5,8 @@ views:
         card_height: 220
         entity: sensor.processor_use
         # dropshadow: false 
+        # shadow_height: "20%"
+        # name: Hello
         gauge:
           # colorValueBoxBackground: "#000"
           borderShadowWidth: 0
@@ -18,7 +20,7 @@ views:
           # data-width: 400
           # data-height: 400
           height: 400
-          # width: 100%
+          # width: 120
           highlights:
             - color: "rgba(200, 50, 50, .75)"
               from: 80
@@ -49,6 +51,61 @@ views:
           type: radial-gauge
           valueBox: false
 
+        style:
+          left: 4.2%
+          top: 9.6%
+          transform: none
+
+      - type: "custom:canvas-gauge-card"
+        card_height: 420
+        entity: sensor.processor_use
+        # dropshadow: false 
+        shadow_height: "20%"
+        name: Hello
+        gauge:
+          # colorValueBoxBackground: "#000"
+          borderShadowWidth: 0
+          borderOuterWidth: 0
+          borderMiddleWidth: 0
+          borderInnerWidth: 0
+          animationDuration: 1500
+          animationRule: linear
+          borders: false
+          colorPlate: "#ddd"
+          # data-width: 400
+          # data-height: 400
+          height: 600
+          # width: 100%
+          highlights:
+            - color: "rgba(200, 220, 50, .75)"
+              from: 80
+              to: 100
+          majorTicks:
+            - "0"
+            - "10"
+            - "20"
+            - "30"
+            - "40"
+            - "50"
+            - "60"
+            - "70"
+            - "80"
+            - "90"
+            - "100"
+          maxValue: 100
+          minValue: 0
+          minorTicks: 2
+          needleCircleInner: false
+          needleCircleOuter: true
+          needleCircleSize: 7
+          needleType: arrow
+          needleWidth: 2
+          startAngle: 90
+          strokeTicks: true
+          ticksAngle: 180
+          type: radial-gauge
+          valueBox: false
+          
         style:
           left: 4.2%
           top: 9.6%

RELEASENOTES.md

@@ -23,6 +23,12 @@ Update to latest guage-card package to 2.1.7
 Fix animation issues
 
 # 0.8.0
+
 - Dropshadow is now optional
 - Removed dependency on custom-card-helpers
 - Added devconainer that let you run HA and debug card
+
+# 0.9.0
+
+- Using class instead of id in css
+- shadow_height now not visible if not configured.

VERSION

@@ -1 +1 @@
-0.8.0
+0.9.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-gauge-card",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Lovelace canvas-gauge-card",
   "keywords": [
     "home-assistant",

src/canvas-gauge-card.ts

@@ -132,7 +132,7 @@ export class CanvasGaugeCard extends LitElement {
       ? config.card_height
       : config.gauge["height"];
 
-    this._shadowHeight = config.shadow_height ? config.shadow_height : "10%";
+    this._shadowHeight = config.shadow_height ? config.shadow_height : "0%";
     this._useDropshadow = config.dropshadow ? config.dropshadow : false;
 
     this._fontSize = config.font_size
@@ -204,7 +204,7 @@ export class CanvasGaugeCard extends LitElement {
         ? this._config.background_color
         : "transparent"} !important;
         }
-        #cardroot {
+        .cardroot {
           width: ${this._gaugeWidth}px;
           height: calc(
             ${this._gaugeHeight}px +
@@ -213,28 +213,29 @@ export class CanvasGaugeCard extends LitElement {
           position: relative;
           margin: auto;
         }
-        #container {
+        .container {
           width: ${this._gaugeWidth}px;
           height: ${this._gaugeHeight}px;
           position: relative;
           top: 0px;
           overflow: hidden;
           text-align: center;
         }
-        #innercontainer {
+        .innercontainer {
           position: relative;
           top: ${this._config.card_top ? this._config.card_top : 0};
           left: ${this._config.card_left ? this._config.card_left : 0};
         }
         .shadow {
+          visible: ${this._shadowHeight == "0%" ? `none` : `block`};
           width: 100%;
           height: ${this._shadowHeight};
           left: 0px;
           bottom: 0px;
           background: rgba(0, 0, 0, 0.5);
           position: absolute;
         }
-        #state {
+        .state {
           position: relative;
           float: left;
           top: 50%;
@@ -244,23 +245,23 @@ export class CanvasGaugeCard extends LitElement {
           transform: translate(-50%, -50%);
         }
       </style>
-      <div id="cardroot">
+      <div class="cardroot">
         <div
-          id="container"
+          class="container"
           width=${this._gaugeWidth}
           height=${this._gaugeHeight}
         >
           <div
-            id="innercontainer"
+            class="innercontainer"
             width=${this._gaugeWidth}
             height=${this._gaugeHeight}
             @click=${this.clickHandler}
           >
             <canvas id="canvaselement"> </canvas>
           </div>
         </div>
-        <div id="shadow">
-          <div id="state" style="font-size: ${this._fontSize}">
+        <div class="shadow">
+          <div class="state" style="font-size: ${this._fontSize}">
             ${this._config.name}
           </div>
         </div>

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = "0.8.0";
+export const CARD_VERSION = "0.9.0";