Card scaling

Fixes: #23

package.json

@@ -32,7 +32,8 @@
   },
   "dependencies": {
     "custom-card-helpers": "^1.6.4",
-    "lit-element": "^2.3.1"
+    "lit-element": "^2.3.1",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",

src/debounce.js

@@ -0,0 +1,31 @@
+// From: https://davidwalsh.name/javascript-debounce-function
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+// eslint-disable-next-line: ban-types
+export const debounce = (func, wait, immediate = false) =>
+{
+	let timeout;
+	return function (...args)
+	{
+		const context = this;
+		const later = () =>
+		{
+			timeout = null;
+			if (!immediate)
+			{
+				func.apply(context, args);
+			}
+		};
+		const callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow)
+		{
+			func.apply(context, args);
+		}
+	};
+};
+

src/meteoalarm-card.js

@@ -3,6 +3,8 @@ import { hasConfigOrEntityChanged, fireEvent } from 'custom-card-helpers';
 import './editor'
 import localize from './localize';
 import styles from './styles';
+import ResizeObserver from 'resize-observer-polyfill'
+import { debounce } from './debounce'
 
 import { MeteoAlarmIntegration } from './integrations/meteoalarm-integration';
 import { MeteoFranceIntegration } from './integrations/meteofrance-integration';
@@ -117,6 +119,49 @@ class MeteoalarmCard extends LitElement
 		);
 	}
 
+	firstUpdated()
+	{
+		this.measureCard();
+		this.attachObserver();
+	}
+
+	async attachObserver()
+	{
+		if (!this._resizeObserver)
+		{
+			this.resizeObserver = new ResizeObserver(
+				debounce(() => this.measureCard(), 250, false)
+			);
+		}
+		const card = this.shadowRoot.querySelector('ha-card');
+		if (!card) return;
+		this.resizeObserver.observe(card);
+	}
+
+	measureCard()
+	{
+		if (!this.isConnected) return;
+		const card = this.shadowRoot.querySelector('ha-card');
+		if (!card) return;
+
+		if (card.offsetWidth < 375)
+		{
+			this.setAttribute('narrow', '');
+		}
+		else
+		{
+			this.removeAttribute('narrow');
+		}
+		if (card.offsetWidth < 200)
+		{
+			this.setAttribute('verynarrow', '');
+		}
+		else
+		{
+			this.removeAttribute('verynarrow');
+		}
+	}
+
 	keyToIntegration(key, entity = this.entity)
 	{
 		if(key == 'automatic')
@@ -150,7 +195,7 @@ class MeteoalarmCard extends LitElement
 		{
 			result = {
 				...result,
-				...this.integration.getResult(entity)
+				...this.integration.getResult(entity),
 			}
 
 			if(result.awarenessLevel == undefined || result.awarenessType == undefined)
@@ -160,17 +205,26 @@ class MeteoalarmCard extends LitElement
 
 			if(result.headline === undefined || this.overrideHeadline)
 			{
+				// If headline is not issued, generate default one
 				result.headline = this.generateHeadline(result.awarenessType, result.awarenessLevel)
 			}
+			result.headlineNarrow = this.generateHeadline(result.awarenessType, result.awarenessLevel, true)
 
 		}
 		return result
 	}
 
-	generateHeadline(awarenessType, awarenessLevel)
+	generateHeadline(awarenessType, awarenessLevel, narrow = false)
 	{
-		// If headline is not issued, generate default one
-		return localize(awarenessLevel.translationKey).replace('{0}', localize(awarenessType.translationKey))
+		if(narrow)
+		{
+			const awareness = localize(awarenessType.translationKey);
+			return awareness.charAt(0).toUpperCase() + awareness.slice(1)
+		}
+		else
+		{
+			return localize(awarenessLevel.translationKey).replace('{0}', localize(awarenessType.translationKey))
+		}
 	}
 
 	getBackgroundColor()
@@ -205,14 +259,17 @@ class MeteoalarmCard extends LitElement
 
 	renderStatus()
 	{
-		const { isWarningActive: isWarningActive, headline } = this.getAttributes(this.entity);
+		const { isWarningActive: isWarningActive, headline, headlineNarrow } = this.getAttributes(this.entity);
 
 		if(isWarningActive)
 		{
 			return html`
 				<div class="status"> 
 					${headline}
 				</div> 
+				<div class="status-narrow"> 
+					${headlineNarrow}
+				</div> 
 			`
 		}
 		else

src/styles.js

@@ -30,29 +30,51 @@ export default css`
   {
     display: flex;
     padding: 32px 28px;
+    justify-content: center;
   }
 
-  .main-icon 
+  .main-icon
   {
     --mdc-icon-size: 50px;
     height: 50px;
     flex: 0;
-    margin-right: 18px;
   }
 
-  .status
+  .status, .status-narrow
   {
     flex: 1;
     display: flex;
     flex-direction: column;
     font-size: 22px;
     line-height: normal;
     margin: auto;
+    margin-left: 18px;
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
+
+  .status-narrow
+  {
+    display: none;
+  }
+
+  :host([narrow]) .status-narrow {
+    display: flex;
+  }
+
+  :host([narrow]) .status {
+    display: none;
+  }
+
+  :host([verynarrow]) .status-narrow {
+    display: none;
+  }
+
+  :host([verynarrow]) .status {
+    display: none;
+  }
 `;