maykar / compact-custom-header Goto Github PK

View Code? Open in Web Editor NEW

239.0 239.0 32.0 2.12 MB

This project has been replaced by Custom Header

License: MIT License

JavaScript 98.71% Dockerfile 0.46% Shell 0.84%

compact-custom-header's Introduction

compact-custom-header's People

Contributors

Stargazers

Watchers

compact-custom-header's Issues

Add to Readme

Is your feature request related to a problem? Please describe.
This is not a problem, just a small suggestion to make the cofiguration even smoother:
It is not obvious that you are supposed to use Name in exceptions, since Usernames are more common in other systems.

Describe the solution you'd like
Add (or if it's already there) make it clearer that exceptions are case sensitive and uses the Name, not the Username (which was my default guess).

Additional Context
Thank you so much for your effort!

Cant get it to work

Describe the bug

After updating no longer works. Did what was told in readme.

Config

  - id: 50
    title: Test Page
    background: center / cover no-repeat url("/local/background-abstract.jpg") fixed
    cards:
      - type: custom:compact-custom-header
        main_config: true
        menu: overflow
        options: clock
        voice: hide
        clock_format: 24

  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=1.0.0b1
    type: module

Error

in homeassistant.log

:8123/lovelace/5:0:0 Uncaught SyntaxError: The requested module './compact-custom-header.js' does not provide an export named 'html'

Version
0.87.1 Home Assistant Version
1.0.0b1 Compact Custom Header Version
Google chrome Browser type and version

Need an example for container cards

Describe the bug:

This is not a bug but a question rather. Could you please additional examples for the following.

To use with panel view place this card inside a "container card" with the panel card (vertical stack card, layout-card, etc.), otherwise this card isn't "displayed" and won't load.

In the following code snippet, some sensor values were not shown when I used 'custom:useful-markdown-card'.

I have also used 'layout-card' from 'thosmaslaven' and after switching this UI then all the layouts that I set from that card were messed up.

I commented out all the lines where 'panel: true' was set.

Config:

  - url: /local/custom-lovelace/maykar/compact-custom-header.js?v=0.0.1
    type: module
views:
  - id: 0  # Automatically created id
    icon: mdi:home-assistant
    title: Main view
    # panel: true
    cards:
      - type: custom:compact-custom-header
        main_config: true
        menu: overflow
        options: clock
        voice: hide
        clock_format: 12
      - id: 92ad9f49f71e4735b07e512c06ad6722 # i added this
        type: custom:layout-card
        layout: horizontal
        cards:
          - id: f2f76e770b8f43cdb249d90a2b16c3c6  # Automatically created id
            type: custom:useful-markdown-card
            title: Today
            content: >

              [[ sensor.friendly_date.state ]]


              ***[[ sensor.tmpl_cal_primary.state ]]***


              **Weather** - [[sensor.pws_weather_1d.state]]


              High : **[[ sensor.dark_sky_daytime_high_temperature_0.state ]]° F**
              Overnight Low :  **[[ sensor.dark_sky_overnight_low_temperature_0.state ]]° F**


              Last notification: **[[ sensor.appd_notify_message.state ]]**


          - id: f63e113c5e324a808af460a605bac84d # i added this
            type: entities
            title: Control Panel
            show_header_toggle: false
            columns: 4
            entities:
              - entity: input_boolean.where_are_the_kids
                name: Where Is Everyone?
              - entity: input_boolean.show_upcoming_events
                name: Show upcoming events
              - type: weblink
                name: Automation Schedule
                url: /lovelace/3
                icon: mdi:theme-light-dark
              - type: weblink
                name: Weather Maps
                url: /lovelace/2
                icon: mdi:weather-lightning-rainy
              - type: weblink
                name: Cameras
                url: /lovelace/6
                icon: mdi:cctv  
              - entity: script.refresh_wink

Error:

Versions:

Version : 1.0.1b2

arch	x86_64
dev	false
docker	true
hassio	false
os_name	Linux
python_version	3.7.2
timezone	America/Chicago
version	0.88.2
virtualenv	false

mode	yaml
resources	15
views	8

[Feature Request] Add tracker.json for updater

Can you add a tracker.json for tracking updates?

[Feature Request] show_tabs

Is there any way to change from [hide_tabs] to [show_tabs].
Because when i add some new view, every time i have to change exceptions conditions of hide_tabs for all devices.

Error after update using by custom component updator

I have some errors after update using by custom component updator, today.
0.0.1 -> 1.0.0b2

After update all, it was chaged like that

url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=1.0.0b2

so I changed as below, and fixed.

url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1

Grey bar appears under menu

Describe the bug
Grey bar appears under menu

Config

          - type: "custom:compact-custom-header"
            main_config: true
            header: true
            menu: show
            notification: overflow
            voice: clock
            options: show
            clock_format: 24
            background_image: true
            hide_tabs: 0,1,2,3,4,5,6,7,8,9,10

Error

Screenshots
https://imgur.com/dK6C9n7

Version
Home Assistant Version
0.87.1
Compact Custom Header Version
1.0.0b1
Browser type and version
Chrome 71.0.3578.98
Additional context

That grey bar appears when I load the page, but if I push menu button, or if I go to another page (Configuration Menu for example) and then back to lovelace, that grey bar dissapear. It happens on my Pc and Android mobile. For additional info, I'm hiding all my tabs.

Views hidden by clock on small screen

On small screens tab icons disappear.

Can be replicated by making your window narrow:
All icons:

Missing icons:

bottom of background not showing again

The issue was fixed until I upgraded to 0.1.8. just wanted to let you know

Single tab user agent view error

I'm not getting the user agent to work with usernames.

my config
user_agent: 'username1, username2, username3'
user_agent_views:
- 5
- '0,1,2'
- '0,1,2'
- 2
clock: 'notification, menu'
clock_format: 24
menu: 'false, true'
notification: true
voice: true
type: 'custom:compact-custom-header'

It's also spitting out this error every time I load a view, not sure if this is related?
https://my.homeassistant.domain/local/custom-lovelace/compact-custom-header/compact-custom-header.lib.js?v0.2.9:219:49 Uncaught TypeError: Cannot read property 'click' of undefined

Hiding tabs doesn't work

Describe the bug
Trying to hide tabs under a specific user

Config

exceptions:
  - conditions:
      user: Test User
    config:
      menu: hide
      voice: hide
      notifications: hide
      options: hide
      hide_tabs: 'Dev,11,10'

Error
No error but it still shows the tabs under the specific user

Screenshots
If applicable, add screenshots to help explain your problem.

Version
0.87.1
1.0.0b1
Chrome & Firefox

Additional context
Would love to be ableto hide my Dev & Automations tab for the non tech users :)

Module not loading if there is only one view

Describe the bug

When you only have 1 view configured in Lovelace this module will not load.
Adding a "dummy" view is a workaround for the problem.

Config

resources:
  - url: /customcards/compact-custom-header.js
    type: module
....
      - clock_am_pm: true
        clock_format: '12'
        header: true
        main_config: true
        notifications: hide
        options: clock
        type: 'custom:compact-custom-header'
        voice: hide

I use the UI to configure it, that's why this looks "wierd"

Error

dev-console errors:

compact-custom-header.js:199 Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
    at HTMLElement.run (compact-custom-header.js:199)
    at HTMLElement.buildConfig (compact-custom-header.js:168)
    at HTMLElement.updated (compact-custom-header.js:67)
    at HTMLElement.performUpdate (app-1017f5da.js:101)
    at HTMLElement._enqueueUpdate (app-1017f5da.js:101)
run @ compact-custom-header.js:199
buildConfig @ compact-custom-header.js:168
updated @ compact-custom-header.js:67
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
CompactCustomHeader @ compact-custom-header.js:50
(anonymous) @ VM356:1
create_card_element_createElement @ b932ff0e33612a653941.chunk.js:4741
createCardElement @ b932ff0e33612a653941.chunk.js:4741
createCardElement @ b932ff0e33612a653941.chunk.js:5594
_rebuildCard @ b932ff0e33612a653941.chunk.js:5666
element.addEventListener.ev @ b932ff0e33612a653941.chunk.js:5594
fireEvent @ app-1017f5da.js:1222
customElements.whenDefined.then @ b932ff0e33612a653941.chunk.js:4741
Promise.then (async)
createCardElement @ b932ff0e33612a653941.chunk.js:4741
createCardElement @ b932ff0e33612a653941.chunk.js:5594
config.cards.forEach @ b932ff0e33612a653941.chunk.js:5666
_createCards @ b932ff0e33612a653941.chunk.js:5666
updated @ b932ff0e33612a653941.chunk.js:5666
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
hui_view_HUIView @ b932ff0e33612a653941.chunk.js:5594
(anonymous) @ VM356:1
_selectView @ b932ff0e33612a653941.chunk.js:5888
async function (async)
_selectView @ b932ff0e33612a653941.chunk.js:5888
updated @ b932ff0e33612a653941.chunk.js:5888
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
hui_root_HUIRoot @ b932ff0e33612a653941.chunk.js:5666
_clone @ app-1017f5da.js:444
_commitTemplateResult @ app-1017f5da.js:215
commit @ app-1017f5da.js:215
render @ app-1017f5da.js:366
shady_render_render @ app-1017f5da.js:89
update @ app-1017f5da.js:135
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
_fetchConfig @ b932ff0e33612a653941.chunk.js:5924
async function (async)
_fetchConfig @ b932ff0e33612a653941.chunk.js:5924
firstUpdated @ b932ff0e33612a653941.chunk.js:5924
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
ha_panel_lovelace_LovelacePanel @ b932ff0e33612a653941.chunk.js:5888
(anonymous) @ VM356:1
loadingProm.then @ app-1017f5da.js:3075
Promise.then (async)
updated @ app-1017f5da.js:3075
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
commit @ app-1017f5da.js:215
commit @ app-1017f5da.js:215
update @ app-1017f5da.js:444
_commitTemplateResult @ app-1017f5da.js:215
commit @ app-1017f5da.js:215
render @ app-1017f5da.js:366
shady_render_render @ app-1017f5da.js:89
update @ app-1017f5da.js:135
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
commit @ app-1017f5da.js:215
commit @ app-1017f5da.js:215
update @ app-1017f5da.js:444
_commitTemplateResult @ app-1017f5da.js:215
commit @ app-1017f5da.js:215
update @ app-1017f5da.js:444
_commitTemplateResult @ app-1017f5da.js:215
commit @ app-1017f5da.js:215
render @ app-1017f5da.js:366
shady_render_render @ app-1017f5da.js:89
update @ app-1017f5da.js:135
performUpdate @ app-1017f5da.js:101
_enqueueUpdate @ app-1017f5da.js:101
async function (async)
_enqueueUpdate @ app-1017f5da.js:101
requestUpdate @ app-1017f5da.js:101
set @ app-1017f5da.js:101
_updateHass @ app-1017f5da.js:3139
services @ app-1017f5da.js:3139
n @ core-41c8125e.js:1
(anonymous) @ core-41c8125e.js:1
Promise.then (async)
c @ core-41c8125e.js:1
subscribe @ core-41c8125e.js:1
I @ core-41c8125e.js:1
window.hassConnection.then @ core-41c8125e.js:1
Promise.then (async)
151 @ core-41c8125e.js:1
__webpack_require__ @ core-41c8125e.js:1
(anonymous) @ core-41c8125e.js:1
(anonymous) @ core-41c8125e.js:1

There was no errors in HA log

Screenshots

One view:

More than one view:

Versions

Please include all of the following:

Compact Custom Header Version: 1.0.0b5
Home Assistant version: 0.88.0b2
YAML or storage mode: both
Browser type and version: Chrome (72.0.3626.109)

Additional context

Not sure what more to put here 🤷‍♂️

After upgraded from 1.0.0 to 1.0.0b2 it doent work....

Thx. for development this awesome custom card.

few minutes ago.. After I upgraded from 1.0.0 to 1.0.0b2 it doent work somehow.....

is there any changes??

https://ha.ohminy.com/lovelace/default_view?clear_cch_cache:0:0 Uncaught SyntaxError: The requested module './compact-custom-header.js' does not provide an export named 'LitElement'
Service system_log/write called.

https://ha.ohminy.com/local/custom_ui/clock-card.js:83:10 Uncaught ReferenceError: moment is not defined
Service system_log/write called.

etc...

[Feature Request] Day/Month Formatting

Is your feature request related to a problem? Please describe.
No.

Describe the solution you'd like
Add month/day and day/month to clock's date.

Additional Context
None.

[Feature Request] Customize icons and order

Add ability to change the order of icons and customize the icons themselves.

Tagging releases

Please tag your releases so we can track them via the atom feed.

Time doesn't appear when on top of Menu Icon

Describe the bug:

Time stamp does not appear on top of the menu button as requested and date does not appear. When changing time stamp on top of voice button there is no issue

Config YAML:

exceptions:
  - config:
      hide_tabs: '2'
    conditions:
      user_agent: Mobile
menu: clock
voice: hide
clock_format: '12'
clock_am_pm: false
type: 'custom:compact-custom-header'
clock_date: true
main_config: true

HA and/or Browser Error:

Other than this the card is working very well. I don't get an error in HA and I'm not sure what you want to see from the browser. I do get this messeage "Unable to find icon for domain counter (0) d39aefe3f62fd41b4b8b.chunk.js:1441" but don't know what else to give you

HA, Card, and Browser Versions:

HA 0.89 card1.01.1b3 chrome 72.0.3626.119 and firefox 65.0.2

And let me thank you for the excelent work

[Feature Request] - Hide tab but manually navigate to it

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
I use browser commander to take blue iris triggers/scripts to command all browsers to change to that camera (iframe) and then afterwards back home...works great. BUT, I was hoping that I could hide the tabs from the normal interface header but still be able to navigate to them via path. Seems as though any hidden tabs just send you home when trying to get them manually via path.

Additional Context
Add any other context or screenshots about the feature request here.

ISSUES WITH HA VERSION > 0.84

As far as I'm aware, the only problems are icon overlap in edit mode and layout issues. Please, comment here if you discover more.

To fix layout issues (extra column etc) add this card to the end of a vertical stack with the last card in the view. Working on a better solution.

I haven't updated to 0.84 yet myself, but I am very aware of the issues. Rest assured I will be on it soon.

[Feature Request] add an option to add the date to the existing clock

just an idea, great work by the way !

Feature: Add support for multiple rows

This would be great for mobile devices in portrait mode. It is awkvard to be forced to scroll using the > arrow to get to the views which does not fit horizontally.
Thanks!

Configurable path

Add path to config to allow for custom placement of card files.

[Feature Request]Align time and date

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Would it be possible to have time and date center aligned rather than right aligned?
I think it would look better, but this is just me.

Additional Context

Clicking the menu icon doesn't toggle the menu but clicking the menu text does

Describe the bug:

Clicking the actual hamburger menu icon doesn't toggle the menu, clicking the text "Menu" does. When clicking the icon my graph cards seem to redraw but the menu doesn't slide in/out of view.

Config YAML:

- type: custom:compact-custom-header
  menu: overflow
  options: clock
  voice: hide

HA and/or Browser Error:

No errors in the HA logs or in the dev console.

HA, Card, and Browser Versions:

HA 0.89.1
Card 1.0.1b3
Browser Chrome 72.0.3626.81, same thing happens in Safari 12.0.3.

Hide individual tabs/views & set default tab/view

Add config to hide individual tabs. This will also require the ability to set the default view since this would give you the ability to hide the first view. Think using a redirect will be the only option here.

Troubleshoot an error on a mobile device

Describe the bug:

How do I troubleshoot this on a mobile device?

HA and/or Browser Error:

Following snippet works fine when I browse on my tablet and laptop. But on my phone I get an error for 'Custom element doesn't exist: layout-card.'

Config YAML:

<!-- Paste your lovelace code for the card after this line -->

  - id: 1  # Automatically created id
    icon: mdi:lightbulb-on-outline
    title: Switches Lights view
    panel: true
    path: lights_switches
    theme: done1
    cards:
      # - type: custom:compact-custom-header
      #   header: true
      - id: 55608c01f1c540b28138c20eda69baff  # Automatically created id
        # type: glance
        type: custom:layout-card
        layout: horizontal
        cards:
          - id: ad2d5336-16ee-4240-a059-f8e42a1c1e10  # I created id
            type: glance
            title: Switches
            columns: 3
            entities:
              - type: entity-button
                entity: switch.ge_12722_onoff_relay_switch_switch_3
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: entity-button
                entity: switch.ge_12722_onoff_relay_switch_switch_2
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: entity-button
                entity: switch.ge_12722_onoff_relay_switch_switch_4
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: entity-button
                entity: switch.leviton_dzs151lz_switch_switch
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
              - type: entity-button
                entity: switch.ge_12722_onoff_relay_switch_switch
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
          - id: 34b5b700f9204892bc35f5ffbf7e7896  # Automatically created id
            type: entities
            title: Lights
            show_header_toggle: false
            entities:
              - entity: light.hallway_light_bulb_one
                secondary_info: last-changed
                name: Hallway light One
              - entity: light.notused_light
                secondary_info: last-changed
                name: Hallway light Two    
              - entity: light.shreya_bedroom_bulb
                secondary_info: last-changed
              - entity: light.steps_light
                icon: mdi:stairs
                secondary_info: last-changed
                name: Staircase light
              - entity: light.garage_light
                secondary_info: last-changed
          - break
          - id: b448d8fbbda54e2c9e75e806964d0403  # Automatically created id
            type: custom:vertical-stack-in-card
            cards:
              - type: entities
                title: Outlets
                show_header_toggle: false
                entities:
                  - entity: input_boolean.show_addl_outlets
              - type: glance
                columns: calc(100% / 3)
                show_header_toggle: false
                entities:
                  - type: entity-button
                    # entity: switch.google_home_outlet
                    entity: switch.bedroom_light
                    name: Master Bedroom light
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                    icon: mdi:power-socket-us  
                  - type: entity-button
                    entity: switch.7684600084f3eb9c8745
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                  - type: entity-button
                    entity: switch.51163006bcddc2070fe5
                    name: Family room light One                    
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
                  - type: entity-button
                    entity: switch.uverse_outlet
                    name: Family room light Two
                    tap_action:
                      action: toggle
                    hold_action:
                      action: more-info
          - break
          - id: 63073348cb0746ac99b53c82d7006264  # Automatically created id
            type: custom:vertical-stack-in-card
            cards:
              - type: entities
                title: Hubs and Sensors
                show_header_toggle: false
                entities:
                  - entity: binary_sensor.winkhub
                  - entity: zwave.aeotec_zw090_zstick_gen5_us
              - type: glance
                columns: 3
                entities:
                  - entity: sensor.tmpl_garage_entry_door_sensor_status
                    name: Garage Sensor
                    hold_action: more-info
                  - entity: sensor.tmpl_garage_entry_door_sensor_battery
                    name: Battery
                  - entity: sensor.tmpl_second_floor_hallway_sensor_status
                    name: Hallway Sensor
                  - entity: binary_sensor.motion_sensor_opened
                    name: Opened?
                  - entity: sensor.tmpl_second_floor_hallway_motion_sensor_battery
                    name: Battery
          - id: 0472524f6a264111a32be5b30bb050a8  # Automatically created id
            type: conditional
            conditions:
              - entity: input_boolean.show_addl_outlets
                state: "on"
            card:
              type: entities
              title: Always On Outlets
              show_header_toggle: false
              entities:
                - entity: switch.0720034284f3eb852067_1
                - entity: switch.0720034284f3eb852067_2
          - type: custom:compact-custom-header    
            header: true

HA, Card, and Browser Versions:

arch	x86_64
dev	false
docker	true
hassio	false
os_name	Linux
python_version	3.7.2
timezone	America/Chicago
version	0.89.2
virtualenv	false

No clock when using Firefox

Describe the bug
Clock is not displayed when using Mozilla Firefox but displays as expected with Google Chrome.

Config
- id: 73595f72d1 type: custom:compact-custom-header header: true menu: true notification: true voice: true options: true tabs: true clock: voice clock_format: 12 clock_am_pm: true disable: false dir: '/local/compact-custom-header/'

Error
No error messages in Firefox's dev console or home assistant logs.

Screenshots
Chrome on left and Firefox on right

Version
Home Assistant Version 86.4
Compact Custom Header Version 0.2.9
Firefox 64.0.2
Chrome 72.0.3626.81

Additional context

TypeError: notify_dot is null

Home Assistant 0.86.3
compact-custom-header 0.2.9

compact-custom-header.lib.js:236:9
TypeError: notify_dot is null

background bottom

Firstly I would just like to say this is a awesome addition lovelace and thanks for all the work that's gone into this.

Describe the bug:

With header: false and background_image: true the background does not stretch to the full page when using background gradient. I have also tried adding a image in case its an issue with using gradient but get the same issue.
with header: true the background covers the whole screen as expected
This is logging in with the user called bedroom.

View with the issue

A test view with way less going on, which is the yaml below

Config YAML:

title: Dev
path: dev
theme: midnight
#panel: true
icon: mdi:script
background: radial-gradient(circle, rgba(84,34,84,1) 0%, rgba(0,0,0,1) 100%)

cards:
  - type: custom:compact-custom-header
    main_config: true
    header: true
    background_image: true
    menu: hide
    notifications: hide
    voice: hide
    options: hide
    hide_tabs: 9,10,11,12
    exceptions:

      - conditions:
          user: bedroom
        config:
          header: false
          hide_tabs: 0,1,2,3,4,5,6,7,8,9,10,11
  

  - type: custom:button-card
    entity: media_player.living_room_tv
    action: more_info
    name: TV Remote

HA and/or Browser Error:

No errors in Chrome

HA, Card, and Browser Versions:

Using YAML Mode
HA Version: 89.1
compact-custom-header: 1.0.1b3

clock issue 0.88.0b4

in HA version 0.88.0b4 clock not working
on dev getting this

compact-custom-header.js:445 Uncaught (in promise) TypeError: Cannot read property 'style' of null
    at HTMLElement.insertClock (compact-custom-header.js:445)
    at HTMLElement.run (compact-custom-header.js:232)
    at HTMLElement.buildConfig (compact-custom-header.js:169)
    at HTMLElement.updated (compact-custom-header.js:68)
    at HTMLElement.performUpdate (app-1d07a0b4.js:101)
    at HTMLElement._enqueueUpdate (app-1d07a0b4.js:101)

Margin on top (89.1)

Describe the bug:

Hello

First, thanks for the great work !
I just upgrade to 89.1, and I get this margin on top (look at screenshot)

Config YAML:

    - type: 'custom:compact-custom-header'
       main_config: true
       # disable: true
       menu: overflow
       notifications: overflow
       voice: hide
       options: overflow
       clock_format: 24
       exceptions:
         - conditions:
             user_agent: Windows
           config:
             disable: true
         - conditions:
             user: Marion
           config:
             hide_tabs: 5

HA and/or Browser Error:

no error

HA, Card, and Browser Versions:

HA : 89.1

TypeError if only one lovelace view/tab exists

Hi after 0.51.1 update the compact custom error stop working and I start to have this message :

Uncaught TypeError: Cannot read property 'querySelectorAll' of null

TypeError: Cannot read property 'split' of undefined

When installed on 0.84.1, the header bar stays in place, but none of the lovelace page contents below are shown. Im also getting this error in the log:

(...)/local/custom_lovelace/compact-custom-header/compact-custom-header.js?v0:13:51 Uncaught TypeError: Cannot read property 'split' of undefined

[Feature Request] Date Formatting

It would be good to be able to be able to format the date (even if its just to swap Month and Day)

bottom of page background missing

If your cards do not go all the way to the end of the page or beyond then the amount of the header that has been removed at the top gets removed from the bottom of the page. I have a background picture and this bottom almost inch is white for my light theme and black for my dark theme. But if you have cards go into this area or beyond then the background goes to that point or the bottom if cards go beyond the page. I have a fixed background so it does not move just the cards scroll. Beside this it has worked great. thanks.

FireOS Outdated Webview

Describe the bug:

Outdated Webview in FireOS results in card not working. Browsers on the Fire tablet that utilize the OS Webview display an error in the card, but if you install Chrome on the device it works fine.
Use case for issue: CCH is ideal for use on a tablet interface to Home Assistant, and because apps like Fully Kiosk Browser use the FireOS webview it will not work. Chrome browser no longer allows a fullscreen mode so it cannot be used for a workaround.

Very possible this is not fixable until Amazon updates the webview version in a future OS update, but wanted to make you aware of it.

Config:

- type: 'custom:compact-custom-header' main_config: true options: clock voice: hide notifications: hide clock_format: 12 clock_am_pm: true

Error:

In Fully Kiosk Browser:
Custom element doesn't exist: compact-custom-header

In Chrome:
Works fine

Versions:

Version of this card: Latest
Home Assistant version: 0.88.0
Browser type and version: Fully Kiosk Browser for FireOS, latest
YAML or Storage Mode: Storage

Custom-updater does not work by default when following instructions in the readme

Describe the bug
Custom-updater does not work by default when following the installation instructions in the readme

The customization does work, but custom-updater does not list the card in its custom card list.

This is the issue:

This goes into under "resources:" in ui-lovelace.yaml or using the raw config editor.

- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
  type: js

In order for custom-updater to actually detect this card for the first time, this is needed instead:

resources:
- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
  type: js

Following the instructions, it would seem that the "v=0.0.1" is only needed when NOT using custom-updater. Actually, v=0.0.1 is needed in order for custom-updater to work for the first time with this card.

0.90.0b2 broke the CCH

Describe the bug:

All tabs show up on all clients after beta 0.90.0b2
Back on 0.90.0b1, everythins OK.

Config YAML:

- type: custom:compact-custom-header
  menu: overflow
#  background_image: true
  exceptions:
#    - conditions:
#        user_agent: Mobile
#      config:
#        options: hide
#        hide_tabs: 13,14,15,16,17
    - conditions:
        user: TPad
      config:
        menu: hide
        options: hide
        hide_tabs: 0,1,2,3,4,5,6,7,8,9,10,11,12

HA and/or Browser Error:

No HA Error in the log.

HA, Card, and Browser Versions:

Beta 0.90.0b2, latest CCH, FF and Chrome

TypeError: Cannot read property 'querySelector' of null

Currently on Home Assistant 0.86.0 beta. First use of this custom 'card' so I don't know if I would have this issue on previous releases. However, recently the routing has changed which probably introduced this bug.

VM581 compact-custom-header.lib.js:23
 TypeError: Cannot read property 'querySelector' of null
    at VM581 compact-custom-header.lib.js:18

Can't start using card

Hi.
This is the start of my config

resources:
# https://github.com/maykar/compact-custom-header
# https://community.home-assistant.io/t/compact-custom-header-custom-user-device-views/83716
  - url: /local/js/compact-custom-header.js?v=6
    type: js  

title: "  "
background: center / cover no-repeat url("/local/images/back.png") fixed
excluded_entities:
  - weblink.router
views:
  - icon: mdi:home-variant
    title: Главная
    path: main
    background: center / cover no-repeat url("/local/images/back.png") fixed
    theme: dark_theme
    cards:
      - type: custom:compact-custom-header
        voice: false
        header: false
        clock: notification
        clock_format: 24

      - type: custom:card-modder
        card: 
          type: entity-filter
          entities:
            - device_tracker.igor
            - device_tracker.jana
            - device_tracker.vika
            - device_tracker.lesha
          state_filter:
            - 'home'
          card:
            type: glance
            title: КТО ДОМА?
        style:                 
          background-image: url("/local/images/cardbackK.png")
          background-repeat: no-repeat
          background-color: rgba(50,50,50,0.3)
          background-size: 100% 68px
          border-radius: 20px
          border: solid 1px rgba(100,100,100,0.3)
          box-shadow: 3px 3px rgba(0,0,0,0.4)

But I can't make icons of all my views start showing in one row with menu.

What am I doing wrong?
Thanks.

[Feature Request] backgraound using input boolean

Can i use some like this below?

background: center / cover repeat url(/local/background/[[ input_select.background.state ]].jpg)

Exceptions not working with user_agent: mobile. v1.0.0b2

Describe the bug
I have the config set to disable custom compact header on mobile user agents but it's not disabling. I tried hiding the notification icon as well and it appears the exception is simply not applying to the mobile user agent, or it's not detecting the agent properly.

I have already cleared cache and that has not helped.

Config

    cards:
      - type: 'custom:compact-custom-header'
        main_config: true
        options: clock
        voice: hide
        clock_format: 12
        clock_am_pm: true
        exceptions:
          - conditions:
              user_agent: mobile
            config:
              disable: true

Screenshots
If applicable, add screenshots to help explain your problem.

Version
Home Assistant Version 87.0
Compact Custom Header Version 1.0.0b2
Browser type and version Chrome/72.03626.105 Mobile

Panel: true issue

i'm trying to do something like that : but as soon as i uncomment "panel:true: nothing display

  - title: IframPanel
#   panel: true
    cards:
    - type: custom:compact-custom-header
      header: false
      background_image: true

    - type: iframe
      url: /local/test2.html
      aspect_ratio: 5%

[Feature Request] Two rows of groups/views?

Is your feature request related to a problem? Please describe.
I have to scroll for all of the tabes

Describe the solution you'd like
Now that we don't have the added hight is there any way we can have two rows of groups/views?

Compact Header + Background Image

Describe the bug:

When Compact header enabled background didn't fill all space, if disabled background is correct, pay attention to the dark line at the bottom

Config:

background: center / cover no-repeat url("/local/images/main_background.jpeg")

Versions:

1.0.1b2

Notification badge not displayed correctly when set to overflow

Describe the bug:

When notifications is set to overflow the badge is not displayed correctly, as seen on this community forum post

Config:

      - type: custom:compact-custom-header
        main_config: true
        menu: hide
        options: clock
        voice: overflow
        notifications: overflow
        header: true

Error:

No errors logged

Versions:

compact-custom-card v1.0.1b3
HA v 0.88.1

maykar / compact-custom-header Goto Github PK

compact-custom-header's Introduction

compact-custom-header's People

Contributors

Stargazers

Watchers

Forkers

compact-custom-header's Issues

Describe the bug:

Config:

Error:

Versions:

On small screens tab icons disappear.

Describe the bug

Config

Error

Screenshots

Versions

Additional context

Describe the bug:

Config YAML:

HA and/or Browser Error:

HA, Card, and Browser Versions:

Describe the bug:

Config YAML:

HA and/or Browser Error:

HA, Card, and Browser Versions:

Describe the bug:

HA and/or Browser Error:

Config YAML:

HA, Card, and Browser Versions:

Describe the bug:

Config YAML:

HA and/or Browser Error:

HA, Card, and Browser Versions:

Describe the bug:

Config YAML:

HA and/or Browser Error:

HA, Card, and Browser Versions:

Describe the bug:

Config:

Error:

Versions:

Describe the bug:

Config YAML:

HA and/or Browser Error:

HA, Card, and Browser Versions:

Describe the bug:

Config:

Versions:

Describe the bug:

Config:

Error:

Versions:

Recommend Projects

Recommend Topics

Recommend Org

Jobs