#Companion App Layout vs Browser Layout

1 messages · Page 1 of 1 (latest)

meager tusk
#

This is probably more of a "me" problem as I'm sure there's a better solution to how to lay this data out that better shows information on both a browser and the companion app.

The screenshots show what I'm experiencing, but the gist is that I have a panel dashboard as a vertical-stack with a 3-card horizontal stack, followed by a single card for the thermostat controls.

This layout seems fine for the brower, but when viewing on app it's cutting off a lot of view. Is there a better way to lay out the mobile view so that the temperature cards could all be vertical? Open to any other suggestions as well.

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:apexcharts-card
              - type: custom:apexcharts-card
              - type: custom:apexcharts-card
          - type: thermostat
            entity: climate.living_room
            features:
              - type: climate-hvac-modes
                hvac_modes:
                  - 'off'
                  - heat
                  - cool
                  - heat_cool
    badges: []
    type: panel
Screenshot_2024-11-01_6.39.27_AM.png image.png
deft cosmos
#

Maybe use card visibility conditions to only show the horizontal stack if screen width is large, and make a second duplicate card of that in a vertical-stack if screen width is small

meager tusk
#

I guess I didn't think to check the visibility/condition tab, but that's pretty great. Thank you

image.png
mystic gorge
#

You might want to try Sections view, with wide sections. It will rearrange the 3 charts vertically when you switch to a narrow screen, at the expense of having to scroll more

#

if you want to prioritize mobile, then you need more information density, so stack multiple into 1 graph like this:

Screenshot_20241107-041839_Home_Assistant.png
plucky edge
#

You might consider using the layout-card with its mediaquery options. You can define layouts based upon screensize, for example. There's not a lot of info about it in the docs and, IMO, it isn't the easiest to get set up just right sometimes. You can see an example about three-quarters of the way down the page.

#

Here's the example in a "real-world" use demonstrated in the #3 card. ```yaml
title: Grid layout
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 30px 25%
grid-template-rows: auto
grid-template-areas: |
"header header header"
"main . sidebar"
"footer footer footer"
cards:

  • type: entities
    entities:
    • entity: light.living_room_lights
      title: "1"
      show_header_toggle: false
      view_layout:
      grid-area: header
  • type: entities
    entities:
    • entity: light.living_room_lights
      title: "2"
      show_header_toggle: false
      view_layout:
      grid-area: footer
  • type: entities
    entities:
    • light.living_room_lights
    • light.living_room_lights
    • light.living_room_lights
      title: "4"
      show_header_toggle: false
      view_layout:
      grid-area: main
  • type: markdown
    title: 3
    content: |
    This is only shown on screens more than 800 px wide
    view_layout:
    grid-area: sidebar
    show:
    mediaquery: "(min-width: 800px)"
  • type: markdown
    content: |
    This is only shown on screens less than 400 px wide
    view_layout:
    grid-area: sidebar
    show:
    mediaquery: "(max-width: 400px)"
  • type: markdown
    content: |
    This is only shown on touch screen devices
    view_layout:
    grid-area: sidebar
    show:
    mediaquery: "(pointer: coarse)"
image.png
meager tusk
#

@mystic gorge @plucky edge Thank you both for the suggestions, I appreciate it. My current implemention (which works, but feels ugly) is using visibility conditions and repeating all of the entity/cards (screenshot). After reading your guys' messages, it looks like either way (sections layout or layout-card) I could get a better layout without having duplicate card declarations.

image.png
upbeat coyote
#

You could try removing the horizontal stack and just add the 3 cards.

quick wagon
mystic gorge