[Bug]: Icons misaligned

Mikescotland commented 1 year ago

Requirements

[X] I checked the troubleshooting section in the README to verify that I have the latest Mushroom version.
[X] I did a search to see if there is a similar issue or if a pull request is open.

Current Behavior

Some of the icons seem to be misaligned in the circle. See screenshot (Particulare icon, Window icon). It happens ONLY in the mushroom cards, the generic cards from HA don't have this problem. Strange, it does not appear on Motion, Temperature, Humidity icons but any other is misaligned (around 10 px down than it should be).

Here is Yaml for the card: square: false type: grid cards:

type: custom:mushroom-entity-card layout: vertical fill_container: true icon_color: orange primary_info: state secondary_info: name name: Temperature entity: sensor.lr_multisensor_temperature
type: custom:mushroom-entity-card icon_color: red layout: vertical primary_info: state secondary_info: name entity: binary_sensor.motion_lr_occupancy name: Motion
type: custom:mushroom-entity-card layout: vertical entity: sensor.lr_multisensor_lr_pm_2_5um_weight_concentration name: PM2.5 primary_info: state secondary_info: name

Expected Behavior

All icons should be centered

Steps To Reproduce

No response

Context

YAML state

Environment

- Browser:
- HA Version:
- Mushroom:

Anything else?

No response

piitaya commented 1 year ago

Do you have any theme? What browser do you use?

Mikescotland commented 1 year ago

I have Metro theme, however it also happens when Default HA theme. Happens regardless of a browser, Chrome, Firefox also mobile AndroidHA App.

zanix commented 1 year ago

I too have the metro theme and some of the Mushroom icons are now misaligned. However, the default theme icons are also misaligned.

Here are screenshots from the default theme.

Fan icons look alright

I did discover something else. It looks like the ones that are misaligned have mushroom-shape-icon > ha-state-icon > ha-icon

And the ones that look alright only have mushroom-shape-icon > ha-state-icon

I noticed template, cover, light, media, number, and entity look wrong. Fan and climate seem to look alright.

piitaya commented 1 year ago

Can you try with the latest 3.0.2 (beta version) ? https://github.com/piitaya/lovelace-mushroom/releases/tag/v3.0.2

zanix commented 1 year ago

Tested with the following test theme using a red outline for ha-state-icon. After checking the alignment with the outline, I disabled it and rechecked again.

A Test:
  card-mod-theme: "A Test"
  card-mod-card-yaml: |
    .: |
      ha-state-icon {
        outline: 1px solid red;
      }

  modes:
    light:
    dark:

Overall, it looks good. There is some shifting of the positioning but I think that's due to a 21px icon in a 42px container (on my screen anyway).

I also tested with the Metro theme and it looks good there as well (with no shifting, as it sets the icons to 24px in a 48px container).

Animations that use clipping are aligned correctly now.

Mikescotland commented 1 year ago

Can confirm icons aligned pretty good now. Thank you very much

On Mon, 10 Jul 2023, 19:27 Joshua Clark, @.***> wrote:

Tested with the following test theme using a red outline for ha-state-icon . After checking the alignment with the outline, I disabled it and rechecked again.

A Test: card-mod-theme: "A Test" card-mod-card-yaml: | .: | ha-state-icon { outline: 1px solid red; } modes: light: dark:

Overall, it looks good. There is some shifting of the positioning but I think that's due to a 21px icon in a 42px container (on my screen anyway).

I also tested with the Metro theme and it looks good there as well (with no shifting, as it sets the icons to 24px in a 48px container).

Animations that use clipping are aligned correctly now. [image: image] https://user-images.githubusercontent.com/1580378/252402955-377c6dae-fb29-4a91-b405-7482d5b58574.png [image: image] https://user-images.githubusercontent.com/1580378/252402912-42f14641-4d05-4d42-80b9-07482700487b.png

— Reply to this email directly, view it on GitHub https://github.com/piitaya/lovelace-mushroom/issues/1199#issuecomment-1629483817, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNLFK5EZOVBOQQYLNIQOXDXPRCR3ANCNFSM6AAAAAA2CXUSJY . You are receiving this because you authored the thread.Message ID: @.***>

piitaya / lovelace-mushroom