commit ddd996088bae897edff81033ff202819aa186c0d Author: Thomas Lovén Date: Thu Feb 28 13:31:14 2019 +0100 First version diff --git a/README.md b/README.md new file mode 100644 index 0000000..54fd345 --- /dev/null +++ b/README.md @@ -0,0 +1,41 @@ +gap-card +======== + +A dummy card that is invisible, but has a height. It's most useful together with [layout-card](https://github.com/thomasloven/lovelace-layout-card) + +![gap_card](https://user-images.githubusercontent.com/1299821/53566682-32b17a00-3b5d-11e9-9794-eace8ae8c0c2.jpg) + + +# Installation instructions + +For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins). + +The recommended type of this plugin is: `js` + +### If you are using [custom\_updater](https://github.com/custom-components/custom_updater): +```yaml +resources: +- url: /customcards/github/thomasloven/gap-card.js?track=true + type: js +``` + +# Usage instructions + +```yaml +type: custom:gap-card +height: +size: +``` + +### `` +Optional. Default: 50 + +The height of the gap, in pixels. + +### `` +Optional. Default: ``/50 + +The size of the card as seen by the layouting engine. + +--- +Buy Me A Coffee diff --git a/gap-card.js b/gap-card.js new file mode 100644 index 0000000..c6594bc --- /dev/null +++ b/gap-card.js @@ -0,0 +1,14 @@ +class GapCard extends HTMLElement { + + setConfig(config) { + this.height = ('height' in config) ? config.height : 50; + this.size = ('size' in config) ? config.size : Math.ceil(this.size/50); + this.style.setProperty('height', this.height + 'px'); + } + + getCardSize() { + return this.size; + } +} + +customElements.define('gap-card', GapCard);