[datahub] make header height configurable

[landryb]

afaict right now it's hardcoded to 560px in https://github.com/geonetwork/geonetwork-ui/blob/main/apps/datahub/src/app/home/home-page/home-page.component.html#L2 but after looking a bit how all this works, i'm not sure if [fullHeightPx] is a config stanza to put in the [theme] section of default.toml.

i've looked a bit and to me the configurable values are the ones listed in https://github.com/geonetwork/geonetwork-ui/blob/main/libs/util/app-config/src/lib/app-config.ts#L145 but i'm not sure if adding some here would make them available to the html templates.. so hints welcome ?

ofc i can hardcode 300px and rebuild datahub, but that's suboptimal, and breaks the display of the searchbar anyway.. so how can we have that header size more configurable, and the searchbar in the middle ?

[jahow]

Hmm, good question... The approach so far was to limit as much as possible the amount of settings in the config file, and only offer "theming" i.e. background, colors and fonts. We also managed to avoid having datahub-specific settings; all settings can currently make sense in the context of another app (theoretically). A header height setting sounds a bit more datahub-specific IMO.

On the other hand, the header size could definitely be relevant depending on the background image used for instance. To achieve this the following steps are needed:

• add a new setting in the theme section of the config file; this setting has to be optional, leaving it out means "use the best height in terms of UX"
• read the app config from the header component to get the height in px
• rework the header component to make its layout independant of the actual header height; this might be tricky but definitely doable while making it backwards compatible

Curious to hear other people's opinion :)

[landryb]

i thought too about trying with a 300px height image, but it's resized on the flight to 560px, so no dice :)

as you say 'best height in terms of UX', maybe that could also be expressed as a percentage of web page height, instead of a hardcoded value ? right now i suppose 560px is arbitrary, and fits well on 1920x1080, but maybe not so much on 1024x576 or 1280x720..

To me the [fullHeightPx] & [minHeightPx] were maybe meant as max/min, with the size adapting as a (configurable?) % of the available space.

Anyway... when you're down to tweaking that kind of things, that means all the other bits are great - datahub will be much appreciated here :)

[jahow]

I think the header was identified as being too high on mobile, but that would be a different issue.

One other approach that I see would be to offer a few "variations" of the datahub UX; again, being careful not to fall in the trap of having a "make-your-own-UI" with hundreds of settings, we could simply offer a setting like so:

[app.datahub]
variants='small_header' # then the header would be down to another fixed height, like 300px

This means that we could have a few variants here, such as disabling certain features or slightly tweak the general layout, while still guaranteeing a good UX overall.

[alexarobu]

@landryb is the problem you have with the gap between the tabs and the search being too big or is it the actual height you are after?

Because I think another option (which might make the header look better in general- down to personal preference of course) is reducing the gap. Currently, it's set to 8rem in https://github.com/geonetwork/geonetwork-ui/blob/421a7506c9e4c2772ab28c3fff9dacd95192719e/apps/datahub/src/app/home/home-header/home-header.component.html#LL61C1-L62C1 by the sm:mt-32 class. I have tried various configurations on a local copy and I think changing that class to sm:mt-20 gives it a margin of only 5rem, which in turn makes the search bar to be quite centered.

[landryb]

@landryb is the problem you have with the gap between the tabs and the search being too big or is it the actual height you are after?

i think too much space 'wasted' above and below the search field (in our case on https://ids.craig.fr/datahub/home/search). Not enough space is left for actual results below, even if they appear when scrolling down.. but i agree its' down to personal taste ofc :)

Because I think another option (which might make the header look better in general- down to personal preference of course) is reducing the gap. Currently, it's set to 8rem in https://github.com/geonetwork/geonetwork-ui/blob/421a7506c9e4c2772ab28c3fff9dacd95192719e/apps/datahub/src/app/home/home-header/home-header.component.html#LL61C1-L62C1 by the sm:mt-32 class. I have tried various configurations on a local copy and I think changing that class to sm:mt-20 gives it a margin of only 5rem, which in turn makes the search bar to be quite centered.

thanks for the pointer, i'll try that suggestion.

[fgravin]

I would recommend people not to desynchronize with the upstream repo :smiley: at your own risks ! It's better to have important things like this configurable, as @jahow mentioned (not with too many settings though).

The header size is coupled with the sticky header so it might not be that easy. We have the same issue on the mobile mode, in that case, the header is really to big :wink: