Update compact-custom-header.js and grab new companion script “cch_v002.js” You can delete the old one, be sure to add version number to resources. I will make the update process easier in the next update.
great work! can you add support for custom updater to make it easier to update to latest versions?
I was hoping it could be not an “either / or” but “a both / and”, like the original gist which lets you either put the config options into the .yaml OR into the URL. That way you can do it either way as your situation warrants.
For my own use-case, mobile/touchscreen detection would not actually give me what I want because I want to treat my wall-mounted tablet differently from my phone. But if you could come up with a way to differentiate views based on user-agent, that would be awesome.
Configurable user agent is the way I’m going with it. Will be in next version.
That’s the plan.
Neat feature! Same issue “Gratizzz” had: The clock doesn’t work. Any ideas?
Did you try a full refresh or clearing your cache?
You can safely delete the .js file named ch_v002 or ch_v001. I changed it to play nice with custom-updater. Be sure to grab the new one.
I apologize to anyone that followed, forked, or starred on github, but I deleted the old repository in favor of creating one to hold any and all lovelace stuff I work on. Updated link in first post.
I liked the first post to show my appreciation for this enhancement, but I thought I’d chime in here too. Great work and made my wall mounted tablet a much better device as I can get rid of all the unnecessary white space. Hope we get this added as a default or an option going forward.
Yes, already tried that, no change. It’s the same on desktop, tablet and mobile.
Do any errors display? What’s your code look like? Have you tried the latest version? Do you have “javascript_version: latest” in your configuration.yaml? Are you putting this card inside a container card, panel, etc?
I got it to work with everything on one line but the clock is not showing up. Below is my ui-lovelace. Any ideas?
resources:
- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
type: js
views:
- title: Home
icon: mdi:home-outline
panel: true
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: glance
title: Sensors
entities:
- binary_sensor.front_door
- binary_sensor.garage_entry
- binary_sensor.deck_entry
- binary_sensor.lower_entry
- binary_sensor.main_motion
- binary_sensor.lower_motion
- binary_sensor.ring_basement_motion
- binary_sensor.ring_front_door_motion
- binary_sensor.ring_backyard_motion
- type: entities
title: Garage Doors
entities:
- cover.main_door
- cover.side_door
- type: alarm-panel
entity: alarm_control_panel.home_alarm
- type: vertical-stack
cards:
- type: glance
title: Indoor Conditions
entities:
- entity: sensor.ecobee_upstairs_temperature
name: Upstairs Temp
- entity: sensor.ecobee_upstairs_humidity
name: Upstairs Humidity
- entity: sensor.ecobee_basement_temperature
name: Basement Temp
- entity: sensor.ecobee_basement_humidity
name: Basement Humidity
- type: weather-forecast
entity: weather.dark_sky
- type: custom:compact-custom-header
- title: Camera
icon: mdi:video-outline
panel: true
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: picture-glance
title: Front Door
entities:
- binary_sensor.ring_front_door_ding
- binary_sensor.ring_front_door_motion
camera_image: camera.front_door
- type: picture-glance
title: Basement
entities:
- binary_sensor.ring_basement_motion
camera_image: camera.basementYou haven’t set any of the icons to be a clock, at the very least you should have:
- type: custom:compact-custom-header
clock: notification
Change “notification” to the icon you want to be the clock or leave as notification if you’d like it to be a clock.
Very nice, I was looking for something like this for my wall mounted tablet.
On my phone however, the scrollbar for the different views is now very small (like half the screen width).
Could a configuration entry be added to not disable the name for some user agents? So that these devices have the normal HASS layout?
So, just a way to disable custom header for a certain user agent? Totally doable. Good idea. Will be in the next release.
Exactly 
Great, thanks !
How about being able to show / hide individual views (tabs) by user agent?
e.g. i have a view that is totally admin-related stuff like the tracker-card that shows when your compact-custom-header needs to be updated. It would be nice to be able to suppress this view’s icon from the header on the wall tablet / dashboard.
I like that a lot. You’d be able to essentially make per user (device) views. Need to think on the best way to set up config, so that for each user agent you can hide show any tab/view. Maybe something like:
visibility:
1, 2, 3, 4
2, 3
1, 2, 4Yup, I was thinking along the same lines.
I’d chip in and throw some PR’s at your repo, but I have not bit into polymer and components yet and the js in there is greek to me.
Yeah, that’s on me as well. It’s for sure lacking in readability/accessibility. Need to work on that and commenting a bit.