From 55bed15f4cf728bccbd5172d2baea7a8d5bb8781 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kyle.johnson@alumni.duke.edu>
Date: Sat, 3 Jun 2023 17:43:20 -0400
Subject: [PATCH] added viewportheight configuration option

---
 README.md               | 1 +
 simple-weather-clock.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index eab6783..3b3f7c3 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ You should install this card using [HACS](https://hacs.xyz).
 | bottomrightcolor | string | #bdb76b | CSS color for bottom center slot (soft yellow)
 | displaywidth | integer | 800 | width (in px) of display on which this will be displayed
 | displayheight | integer | 480 | height (in px) of display on which this will be displayed
+| viewportheight | integer or text | 100 | height of the black background; if no measurement is included, it's in vh, otherwise it's the measurement you include (px, etc)
 | offset | integer | 0 | change vertical position of card (in px)
 | clockspacing | integer | 0 | change space between clock and info slots (in px)
 | infospacing | integer | 0 | change space between info rows (in px)
diff --git a/simple-weather-clock.js b/simple-weather-clock.js
index 28faf57..8f33ea3 100755
--- a/simple-weather-clock.js
+++ b/simple-weather-clock.js
@@ -5,7 +5,7 @@ class SimpleWeatherClock extends HTMLElement {
         <style>
         ha-card {
           display: flex;
-          height: 100vh;
+          height: ${this.config.viewportheight};
           border-width: 0px;
           border-radius: 0px;
           padding: 0px;
@@ -212,6 +212,7 @@ class SimpleWeatherClock extends HTMLElement {
     var eba = 0;
     const cardConfig = Object.assign({}, config);
 
+    if (!cardConfig.viewportheight) cardConfig.viewportheight = "100vh";
     if (!cardConfig.background) cardConfig.background = "#000000";
     if (!cardConfig.font) cardConfig.font = "IBM Plex Mono";
     if (!cardConfig.fontweight) cardConfig.fontweight = 700;