search

custom-cards / spotify-card

Spotify playlist card for Home Assistant card
Other
362 stars 61 forks source link

Device list on touch device #169

Closed v0ltage120 closed 2 years ago

v0ltage120 commented 2 years ago

Describe the bug On touch device when you click on the device list (also the volume) the event is normaly a mouse over event which is not well handle on touch device.. (its ok on iPhone, because the home assitant app handle de mouse over / click quite well) but not on external tablet via web browser

Expected behavior Add a toggle button option to set the menu on click event instead of the mouse over (called , touchdevice)

Thank you!

v0ltage120 commented 2 years ago

I found a quick way to fix it by editing the spotify-card.js and changing de bottom position of the menu

.dropdown-content {
  left: 1em;
  bottom: 3.5em;
  max-height: calc(100% - 1em);
  overflow-y: auto;
  min-width: 250px;
}
antonio1475 commented 2 years ago

I had a related issue: on PC, list is displayed on hover, but the instinct is to click. This caused selecting a device to cast, as the list opened on hover a microsecond before.

Adding this to the card fixes that, preventing accidental clicks. It also works okay on mobile (more tweaking necessary for perfect):

        card_mod:
          style: |
            .dropdown-content {bottom: 2.8em!important;}

One might need to play around with the values for their setup/browser