Add Grid card by balloob · Pull Request #7476 · home-assistant/frontend

balloob · 2020-10-25T22:17:35Z

Breaking change

Proposed change

Add a new grid card. Config is like vertical/horizontal stack with an added optional columns count (default to 3) and a square option (default to true).

If square option is given, it will make sure all cells are square. This will make sure that 2 grid cards in different columns have the same height/width.

type: grid
columns: 3
square: false
cards:
  - …

2 cards with `square: true` (default):

2 cards with `square: false`

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

balloob · 2020-10-25T22:49:49Z

src/panels/lovelace/cards/hui-grid-card.ts

+            var(--grid-card-column-count, ${DEFAULT_COLUMNS}),
+            minmax(0, 1fr)
+          );
+          grid-gap: var(--grid-card-gap, 8px);


--grid-card-column-count is defined if columns is added to config, otherwise removed and it will take whatever is used.

--grid-card-gap cannot be defined from the config, relies on users setting their own CSS vars.

Why not just hard code the number in there. The JS in the Static CSS I though was no good?

also, then the variable can be overwritten in a theme which is not something we want right?

Why wouldn't we want a theme to change it? It's up to the user to decide to do so.

We don't want a theme to change it if the card can. Doesn't seem like the correct way having two ways that can change it

The gap I understand. I think that the grid column config should only be apart of the card config

zsarnett · 2020-10-27T01:18:57Z

src/panels/lovelace/cards/hui-grid-card.ts

+        #root {
+          display: grid;
+          grid-template-columns: repeat(
+            var(--grid-card-column-count, ${DEFAULT_COLUMNS}),


Variable css in the static styles? I thought this was frowned upon?

It's not variable, it's a constant defined at the top. Inside static styles it's fine, as it is only fetched and processed once. You should not have dynamic CSS inside a render block.

zsarnett

Is this a card that should be added to the Card Picker? If so, we need to add it to src\panels\lovelace\editor\lovelace-cards.ts

balloob · 2020-10-27T08:54:50Z

I think that with the grid card we can phase out the horizontal and vertical stack cards.

bramkragten · 2020-10-27T09:18:07Z

src/panels/lovelace/cards/hui-grid-card.ts

+
+    return (
+      maxCardSize *
+      (this._cards.length / (this._config.columns || DEFAULT_COLUMNS))


Should we limit the columns to the number of cards when there are less cards than columns?

Suggested change

(this._cards.length / (this._config.columns || DEFAULT_COLUMNS))

(this._cards.length / (this._config.columns || (Math.min(DEFAULT_COLUMNS, this._cards.length)))

^ thats not going it work reading the code below but still... 😛

So if we want that, we can't expose the CSS var. I'm fine either way. What do you prefer?

I think it is nice for a user to not have to worry about the columns setting, and if you add 2 cards you don't get a blank space. But also to make it work like our current horizontal stack.

I think that it depends on if you want this. For example, if I have 2 grid cards next to one another, I want all cards to be the same size!

Oh I guess we already don't have that now

Back to the drawing board. I think that we should make sure that the height is included (but removable maybe?) to have multiple grid cards look the same.

balloob · 2020-10-28T16:45:35Z

Thought about it more and decided to not reduce default column count to the number of cards if that is smaller, because it doens't work well:

Just setting it to default columns if none is set, gives a better result:

frenck · 2020-10-29T10:03:35Z

Docs missing?

balloob · 2020-10-29T11:58:06Z

home-assistant/home-assistant.io#15460

iantrich · 2020-10-30T05:39:58Z

I think that with the grid card we can phase out the horizontal and vertical stack cards.

That would currently be a breaking change which we shouldn't do as Lovelace is now considered 1.0.

Even if you intend to take defined horizontal/vertical cards and render them with grid, you are missing title in the current form of grid.

balloob · 2020-10-30T08:05:21Z

Sorry, my bad. With phasing out I didn't mean remove but don't promote in the card picker.

I actually have to also retract that statement, I think that vertical stack still has a use case in case you want to make sure 2 cards always get grouped together.

Add Grid card

4d9c2c9

homeassistant added the cla-signed label Oct 25, 2020

probot-home-assistant bot added the hacktoberfest label Oct 25, 2020

balloob added 5 commits October 25, 2020 22:18

Default to 3

d703feb

Clarify grid size algorithm

331f98a

Use grid in Isa's demo

1cae0f3

Fix grid CSS

4efd6f6

More grid for Isa

29569cb

balloob commented Oct 25, 2020

View reviewed changes

Set demo grid columns to 4.

13d973b

zsarnett reviewed Oct 27, 2020

View reviewed changes

zsarnett approved these changes Oct 27, 2020

View reviewed changes

Add Grid to card picker

bc45c2b

bramkragten reviewed Oct 27, 2020

View reviewed changes

balloob added 4 commits October 28, 2020 09:25

Add square option and enable by default

fe46356

Only force same height when in square mode

7c7debb

Default to auto columns

bb099be

Revert default columns change

6d0f78b

bramkragten approved these changes Oct 29, 2020

View reviewed changes

bramkragten merged commit c3718ff into dev Oct 29, 2020

bramkragten deleted the grid-card branch October 29, 2020 09:31

This was referenced Oct 29, 2020

Fix grid card size when square #7520

Merged

Add grid card docs home-assistant/home-assistant.io#15460

Merged

bramkragten mentioned this pull request Nov 11, 2020

20201111.0 #7654

Merged

This was referenced Nov 11, 2020

Vertical/Horizontal stack combined #7080

Closed

Keyboard shortcuts #6880

Closed

github-actions bot locked and limited conversation to collaborators Jul 5, 2022

	(this._cards.length / (this._config.columns \|\| DEFAULT_COLUMNS))
	(this._cards.length / (this._config.columns \|\| (Math.min(DEFAULT_COLUMNS, this._cards.length)))

Conversation

balloob commented Oct 25, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Breaking change

Proposed change

2 cards with square: true (default):

2 cards with square: false

Type of change

Example configuration

Additional information

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zsarnett left a comment

Choose a reason for hiding this comment

Uh oh!

balloob commented Oct 27, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

balloob commented Oct 28, 2020

Uh oh!

frenck commented Oct 29, 2020

Uh oh!

balloob commented Oct 29, 2020

Uh oh!

iantrich commented Oct 30, 2020

Uh oh!

balloob commented Oct 30, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

balloob commented Oct 25, 2020 •

edited

Loading

2 cards with `square: true` (default):

2 cards with `square: false`