Hide header but on hover show

[Trzinka]

Hello

Is it possible for all users to hide the header and make it appear on hover?

I currently have it set up for users and it works as expected:

kiosk_mode:
  non_admin_settings:
    hide_header: true
    ignore_entity_settings: true

I tried to solve with card mode width style hide header but on hover show like:

card_mod:
    style: |
      .header {
        opacity: 0;
      }
      
      .header:hover {
        opacity: 1;
      }

I don't know where in the card (yaml) I have to put the above written for it to work?

Is there some setting in kiosk mode that I've overlooked to make it work, because as an administrator I occasionally need the header, but most of the time it occupies the visible space unnecessarily??

Thanks!

[elchininet]

Hi @Trzinka,

Kiosk-mode adds multiple styles to the header, and one of them is a display: none, so even if you try to set its opacity in 1 it will be still hidden. What you want is a very specific use case and for that the best is to use card-mod as you were trying, but you need something else to make it work. Follow these steps:

1. Enable a card-mod theme
2. Add these styles to your card-mod theme:

your-custom-theme:
  card-mod-theme: your-custom-theme
  card-mod-root-yaml: |
    .: |
      #view {
        min-height: 100vh !important;
        --header-height: 0px;
      }
      .header {
        opacity: 0;
        transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out !important;
        transform: translateY(-60%);
        position: fixed;
      }
      .header .toolbar {
        pointer-events: none;
      }
      .header:hover {
        opacity: 1;
        transform: translateY(0%);
      }
      .header:hover .toolbar {
        pointer-events: all;
      }

3. Tweak it at your need but I think that the result is close to what you are searching for.

Regards

Note: roll-over events are not very user friendly in touch devices, so be aware that it will be very hard for mobile users to interact with that header.

[Trzinka]

Hi, thanks for the reply.

As I mentioned, I have written in the card at the top:

kiosk_mode:
  non_admin_settings:
    hide_header: true
    ignore_entity_settings: true

A non-admin user does not need a header, but I have enabled the sidebar (I still need to play around with the placement of the button):

When I tap on the left button above, it shows me a sidebar under users, which is exactly what I want:

As an admin, I have this view on my computer:

It's true that I was thinking in the wrong direction with opcity, because I don't gain anything from it!

How would I solve the issue of hiding the header (maybe with one more button), given that it's at the top of the page, so that I can detect that when the mouse is on top, it shows the header (of course, only I as an admin need this temporarily)?

[elchininet]

Hi @Trzinka,

As I mentioned, what you want is a very specific use case and for that the best is to use card-mod as you were trying.

Forget about kiosk-mode for that, because what you want is a personalised use case, so use card-mod which gives you all the flexibility that you need, take the example that I gave you and tweak it to match what you are searching for.

If you want to hide the header for all the users excluding a set of users for which you want to show the header on rollover, just use Jinja templates for that. You can add display: none to the header only if the user is not in the specific list of users that you want to show the header on rollover.

your-custom-theme:
  card-mod-theme: your-custom-theme
  card-mod-root-yaml: |
    .: |
      #view {
        min-height: 100vh !important;
        --header-height: 0px;
      }
      .header {
        opacity: 0;
        transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out !important;
        transform: translateY(-60%);
        position: fixed;
        {% if user != 'Palaus' and user != 'Sauron' %}
          display: none;
        {% endif %}
      }
      .header .toolbar {
        pointer-events: none;
      }
      .header:hover {
        opacity: 1;
        transform: translateY(0%);
      }
      .header:hover .toolbar {
        pointer-events: all;
      }

The relevant piece of code is this one:

## If the user is not Palaus or Sauron, add display none to the header
{% if user != 'Palaus' and user != 'Sauron' %}
   display: none;
{% endif %}

Regards

[Trzinka]

@elchininet sorry for the late reply!

I have to admit you are a wizard. The thing works as I imagined.

Thank you very much for your help.

I forgot to add a picture of what it looks like after following your instructions. The header is hidden, the image shows when I move the mouse towards the upper edge and the header appears.

[elchininet]

@Trzinka,
Glad to hear that 👍🏼
Regards