search

home-assistant / ui-schema

A schema to define a user interface for Home Assistant.
Apache License 2.0
41 stars 6 forks source link

Grid layout #143

Closed bramkragten closed 6 years ago

bramkragten commented 6 years ago

I would like a responsive grid layout, either with display: grid or with just giving an element a percentage width.

You should be able to set a width for various breakpoints (can be a global setting? Or configure them for each view?)

This would allow making a more flexible layout. I know you can "hack" a little with panels and stacks (https://gist.github.com/dale3h/37b34aebb0c336ffd5fb877c2651097a), but that is not responsive/doesn't work on mobile.

Or should this be added a functionality to stacks?

title: Home
breakpoints:
   - name: large
      media: all and (max-width: 1024px)
   - name: medium
      media: all and (max-width: 839px)
   - name: small
      media: all and (max-width: 480px)
views:
  - title: Grid
    cards:
        - type: glance
          style:
            - large:
               width: 25%
            - medium:
               width: 50%
            - small:
               width: 100%
          entities:
            - sun.sun
balloob commented 6 years ago

We're open for implementations of experimental cards showing new ways to layout cards and how that works on various screen sizes. However, we're currently not planning to add different layout engines.