[Bug]: custom shortcuts and title overlap

[amitkeret]

The new custom shortcuts added in PR #169 create a layout issue.
They overlap with the title, if it is configured.

type: custom:webrtc-camera
entity: camera.sd
title: Dining Room
ui: true
shortcuts:
  - name: Record
    icon: mdi:record-circle-outline
    service: switch.toggle
    service_data:
      entity_id: switch.camera_record

[AlexxIT]

@dmamontov

[dmamontov]

Yeah, I'll fix it in the evening.

[dmamontov]

Fixed) #214

[Napalmcold]

I did edited webrtc-camera.js accordingly to #214. Still can't change position of shortcut.
This config doesn't show any shotcuts:

type: custom:webrtc-camera
entity: camera.hall_camera
ui: true
shortcuts:
  top: 0
  left: 0
  orientation: vertical
  services:
    - name: Open
      icon: mdi:lock-open
      service: button.press
      service_data:
        entity_id: button.hall_unlocker
background: true

This one shows shortcut overlaped with title:

type: custom:webrtc-camera
entity: camera.ulitsa_camera
title: Вход с улицы
background: true
ui: true
shortcuts:
  - name: Open
    icon: mdi:lock-open
    service: button.press
    service_data:
      entity_id: button.ulitsa_unlocker

[amitkeret]

@Napalmcold
seems like #214 hasn't been added to a release yet.
once @AlexxIT releases v2.2.1 you'll be able to pull it and use the new configuration
otherwise use master branch directly

[Napalmcold]

The deal is that I am using master. Removed webrtc integration completely And installed the master.

[dmamontov]

@Napalmcold Try clearing your browser cache. and top:0, left:0 have a minimum spacing of 13px.

[dmamontov]

for example:

[Napalmcold]

for example:

As soon as add lines "top, left, orientation, services", buttons just dissapear

[dmamontov]

@Napalmcold The behavior is very similar to the fact that you have an old script either in hass or cached in the browser, check in another browser (in the browser, not in the application)

[Napalmcold]

Ok, I managed it. Indeed it was cache as for the Chrome browser and for the android app.
Now I've noticed another issue: position of shortcuts differs depending on resolution of the screen (laptop or mobile app).
Here are some example of the same card on different devices:

[dmamontov]

@Napalmcold it is in pixels because. in theory, it can be modified so that it is possible to transfer the unit of measurement and some kind of% or vh.

[dmamontov]

@Napalmcold in the next PR added the ability to use padding in other css units, be it % or vh #245

[Napalmcold]

@dmamontov, видимо можем по-русски)
Поправил код в соответствии с PR, но всё равно не могу понять, как указать положиние ровно по середине на разных экранах. Что px что vh делают одно и то же. Может нужно переставить master?

[dmamontov]

@Napalmcold

1. Смотрим размер блока в режиме отладки в chrome
   
2. Добавляем расчет:

shortcuts:
  left: calc(50% - 12px - 48px)
  services:

где:
12px это отступ по умолчанию который всегда есть (оставляем как есть)
48px это половина ширины из 1 пункта.

[Napalmcold]

@dmamontov, а 50% от чего он считает? При таком коде у меня иконка просто упирается в левый край камеры

[dmamontov]

@Napalmcold calc пропустил

по умолчанию 50% от (100% - 12px)

[Napalmcold]

@Napalmcold calc пропустил

по умолчанию 50% от (100% - 12px)

Это я уже играться пытался, но calc ничего не меняет. И это не из-за кэша. проверил простые числовые значения - положение меняется.

[dmamontov]

@Napalmcold попробуй переставить с мастера либо удалить webrtc-camera.js.gz. скорее всего тянется он. по скрину явно просто ломается css

[Napalmcold]

@dmamontov то есть всё удаляю и заново ставлю master? без ручной корректировки файла?

[dmamontov]

@Napalmcold для начала переставь, если не поможет то переименуй файл gz, если тоже нет то проверь в режиме инкогнито.

[Napalmcold]

@dmamontov всё, связанное с webrtc снёс, поставил master - вообще шорткаты пропали, через инкогнито тоже)))

[Napalmcold]

Переставил еще раз. Шорткаты появились, но всё так же жмутся к левому краю. Как будто с формулой что-то не так

[dmamontov]

@Napalmcold специально переставил и все работает) Какая конфигурация сейчас?

[dmamontov]

Так, ну проверил c left: calc(50% - 12px - 48px):

важно чтобы был calc и пробелы внутри calc(специфика css)

[Napalmcold]

@dmamontov Не знаю, что поменялось, но щас выходил из дома, пришёл, увидел твоё сообщение, скопипастил и всё пошло))) Спасибо!

[AlexxIT]

All fixes in latest release https://github.com/AlexxIT/WebRTC/releases/tag/v2.3.0
Please reopen issue if it still actual