nerwyn / material-rounded-theme Goto Github PK

Hi,
First of all i love this theme, incredible work.
But i started playing with the new section view layout for the dashboard, and i noticed, that if i change views, the cards reorient to the top (probably since there is no header i guess). This only appears with the section layout, if i change back to any other, its not present. It also only shows with the material rounded theme (with the header mod). Is this something that could be looked into, or is this a problem with the section view in general?
I would love to keep using this theme, but the little jump after each change makes it look soo buggy :(

Is your feature request related to a problem? Please describe.
Can you please provide examples of the cards shows in the images?

Describe the solution you'd like
an examples YAML or something?

Describe alternatives you've considered
?

Additional context
Nothing, again just examples for the card styles shown in the example images. Thanks

When viewing a dashboard with multiple views created on mobile, the view doesn't expand to the screen edges and leaves a small border.

Additionally, the view menu at the bottom is squished and it is hard to access the buttons on either side.

Not entirely sure where to start with debugging this, but happy to help in any way possible.

Device: Pixel 8 Pro
Home Assistant: Core 2024.4.3, Frontend 20240404.2
Companion: 2024.4.1-full

Great work, one question: How to turn off the view names? Did not found a clew in the card-mod section.
I am asking because they are overlaying in HA companion app.

I really like the looks of this theme. But I don't like the badge colors in a picture-element card. They look a bit pinky instead of red.

Also, in light mode I cannot see the upper navigation bar. See attached screenshot.

Can I edit these things somehow without modifying your theme yaml ? Because that would give me issues whenever I update the theme.

Checklist:

• [x ] I updated to the latest version available
• [x ] I cleared the cache of my browser

Release with the issue:
2.1.0-beta.003

Browser and Operating System:
Home assistant companion app
Vivaldi (chromium)
Android 14
Pixel 7 Pro
1440 x 3120 resolution

Description of problem:
The title of the dashboard pops under the navigation drawer menu icon on the mobile browser. (And on desktop browser with the window resized to a mobile resolution).

Title of the dashboard also visibly pops under the menu icon on page load.

Page title should sit next to the menu icon, not under it.

Today I found this theme and I do like it very much: The optic is very nice and it was always my whish to have the titlebar on the bottom.
I recently redesigned my dashboard to fit on iPhone, iPad and desktop and I also use the new badges (HA2024.8) on the top now.

Now I noticed one problem with this new theme:
The distances to right and left edges of the screen seem to be different than in the HA theme and that leads to changes in my layout, specially on my iPhone (the most narrow sceen)

Latest version 1.6 installed, but was an issue with older versions, too.

I'm using the navigate function to other lovelace pages on some chip or mushroom cards and whenever I go back the navigation bar on the bottoms shrinks horizontally as shown in the video.
https://github.com/Nerwyn/material-rounded-theme/assets/98790344/a615f87c-46da-4ca4-985d-3bb8c94b574f

The problem shows on Chrome on Mac, Home Assistant App on Mac, Chrome on Android and Home Assistant app on Android.

Checklist:

• [ X] I updated to the latest version available
• [ X] I cleared the cache of my browser

Release with the issue:
latest

I have tried multiple browsers but cannot seem to get the bar to move down even if I install manually

Is your feature request related to a problem? Please describe.
position of the backarrow and title of a subview is off

Describe the solution you'd like
adding following code moves both items:

      .main-title {
        padding-bottom: 10px;
      }
      .mdc-icon-button {
        padding-bottom: 20px;
      }
      ha-icon-button-arrow-prev {
        padding-bottom: 10px;
        padding-left: 20px;
      }

Additional context

how it looks right now (looks way worse on an iphone 13 pro)

how it looks fixed:

Is your feature request related to a problem? Please describe.
When it come to get as close as possible to Google Home app, i can see 2 details :
1)Rubber band effect when scrolling on limitations
2)Top status bar and bottom nav bar colors

Describe the solution you'd like
1)Rubber band effect should be avoided on homme assistant app nav bar
2)Top status bar should be same as background
3)Bottom nav bar should be same color app nav bar

Describe alternatives you've considered
Android 14 comes with a solution that is not working for Bottom nav bar color in dev settings, it's called transparent navigation bar.

Additional context
Probably related to companion app and not themes, but is there something that can be done ?

VIDEOS

The base color of the Material You can be set or adjusted depending on the selected background image. Wouldn't it be cool to adopt this here in HA as well?

Is your feature request related to a problem? Please describe.
As this theme is inspired by the Google Home app, having the back button/exit button at the top left of sub-views would make the overall experience more intuitive and alike to the Google Home app. Currently, because of the global nav bar adjustment, the back button appears at the bottom of the screen alongside the page title.

Describe the solution you'd like
Allow the navigation bar to appear at the top of each sub-view page, along with the sub-view title, and remove the shading on the navigation bar.

Additional context
You can also see that the navigation bar on Home Assistant is shaded, whereas in the screenshot in Google Home, there’s no background to that navigation bar.

<3

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
2.1.0
Last working release (if known):
unknown
Browser and Operating System:
Home Assistant Companion App on iOS 17.6.1

Description of problem:
Somehow the Navigation Bar at the bottom doesn’t seem to take safe-area-insets into account.

Javascript errors shown in the web inspector (if applicable):

Additional information:
I’m new to Home Assistant and just set this up so I don’t know if this was working before. Judging from the screenshots in the readme, it probably did.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: 1.0

Last working release (if known): This has always been the case

Browser and Operating System: Home Assistant companion app for Android

Description of problem:

When I hit the edge of the scroll view on Android, the footer stretches with the overflow stretch. Instead, it should stay static.

Javascript errors shown in the web inspector (if applicable):

Additional information:

great them , plan to use it from now on, but problem is with text visibility in History period selection :

the dropdown test is almost invisible, compared to default theme 👍

It would be nice if the text was darker.
I looked at the theme yaml , but I could not work out which color variable to change!

rgds, jeff

Is your feature request related to a problem? Please describe.
N/A

Describe the solution you'd like
Could we get a little more documentation on how to use the theme? It took me a while to figure out that it's a dashboard theme and not a card theme, for example. Could we get some more sample code for the light cards you show in your screenshots? An example dashboard, essentially. :)

Describe alternatives you've considered
N/A

Additional context
N/A

Checklist:

• [X ] I updated to the latest version available
• [ X] I cleared the cache of my browser

Release with the issue: 1.5.1

Last working release (if known):

Browser and Operating System: Android HA App/Chrome/Firefox

Description of problem: When using the "Material Rounded No Mod" theme, icons are displayed fine. When using the normal "Material Rounded" theme, icons do not appear. With the normal theme, the card-mod features does not appear to work.

Javascript errors shown in the web inspector (if applicable):

Nothing is shown as an error in Chrome web inspector.

Additional information: This issue appears in Chrome/Firefox on my desktop and in Chrome on Android as well as the the HA app. All are latest versions.

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Browser and Operating System:
Chrome latest

Description of problem:
Color / Text not readable. The Dark Blue is "Condition not passed"
Condition passed on Green is readable

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue:
2024.6 | Now 2024.7
Last working release (if known):
2024.5 (before new experimental views)

Browser and Operating System:
Chrome, Firefox, Windows & Linux.
Smartphone too. All Newest Versions

Description of problem:
The new sections have been set up in the new version of Homeassistant.
These new sections directly define how many elements fit next to each other.
There are "headings" for these sections, which saves you additional entities / elements.

These headings are completely removed with the Material Round Design and the view is moved to the top

Pic 1:
Other Theme (Google Theme) - Headings visible:

Pic 2:
Material Theme - Headings invisible, all moved up

Only the Material Theme (No Mods) works.
Is that how it should be? If so, feel free to close the bug

Javascript errors shown in the web inspector (if applicable):
No Problem.

Additional information:

I have about 8 pages in my dashboard. Would be nice if sideways scrolling was possible, since they all get squished together in the bottom bar on the companion app now.
It's default behaviour in the app without this theme

I love this theme and would also use the transparent option.
However, one thing should be changed: the selection window is unreadable...

I love the theme and got it in use on all my devices! But on my wallpanels, there is no dark mode and i can only toggle dark/light mode with browser mod, which is kind of buggy sometimes. Would it be possible to get the theme as additional dark/light version that can be set with the default theme service and can be easier applied with automations to devices without the dark/light mode choosen by the device itself?

Is your feature request related to a problem? Please describe.
Currently if a background is defined in de Lovelace config e.g.
background: center / cover no-repeat url(/local/wallpaper.jpg)
The background is not visibile

Describe the solution you'd like
Allow the background to render behind the view. Either always or as a sub-theme.

Describe alternatives you've considered
I tried using card-mod but since the background is outside the card scope it is hard to do.

Additional context
I do understand the theme is meant to reflect the Google Home look and feel, however there might be a use-case for allow a background image to be (partly) visible.