[Datahub] Rework the metadata content page

[f-necas]

PR is intented to add some UI improvements for records. It adds :

• More contact information (location, phone)
• Record thumbnail on each records with a lightbox
• Record status information on search page and record page

Funded by SwissTopo geocat.ch

[github-actions]

Affected libs: feature-catalog, feature-search, feature-record, feature-router, feature-map, feature-dataviz, ui-elements, ui-catalog, ui-search, util-shared, feature-auth, ui-widgets, feature-editor, ui-inputs, ui-map, api-metadata-converter, data-access-datafeeder, util-data-fetcher, data-access-gn4, util-app-config, util-i18n, ui-dataviz, util-types, ui-layout,
Affected apps: datahub, metadata-editor, demo, webcomponents, search, map-viewer, metadata-converter, datafeeder, data-platform,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[coveralls]

coverage: 84.033% (+0.009%) from 84.024% when pulling 15d9958 on ui-improvements into 616ce22 on main.

[Angi-Kinas]

I think it might be easier to see the changes if there is a screenshot. Could you add one of this section? :)

[Angi-Kinas]

Well done :) ! It looks really nice on the screen record. And thanks for including that into the PR!
I added some comments, mostly things that I don't know about. We can also have a call about it.

[Angi-Kinas]

LGTM! :-)
Thanks for addressing my comments! I'm leaving you another comment, but that's optional.

[fgravin]

Thanks @f-necas

I compared to the mockup and many things remain different:

• height/ratio of the image
• button hover background
• top margin of the 'contact' label
• the contact information font size is too big
• the contact logo too big
• the "contact" label, should it be "owner" instead ? idk

I am really not a big fan of the status badge, and I don't think that other people would want it, it's geocat specific. BTW the text is not vertically aligned. I will talked with Lucile and customers about that.

Thanks for the PR though, it's just like we should not tweak too much the metadata presentation for the sake of geocat, to me all of this just bring noise into the view... anyway

[fgravin]

probably wrong type compare to the mockup (should be secondary bg).

[f-necas]

https://geonetwork.github.io/geonetwork-ui/main/storybook/demo/?path=/story/inputs-buttoncomponent--primary&args=type:secondary

Out of our 'default' buttons. In this case, is it better to follow the mockup or to implement one of our button ?

[fgravin]

You are right, and I think we need more convention about button styling. We should not have so many different button types...
Anyway, I think that gnui-btn should be replaced by a TW component, keep it like this we'll talk about that later, thanks.

[jahow]

we can simply add a new button type, like outline-secondary. I think it was the right choice to use the gn-ui-button component, our strategy is to rely as much as possible on reusable low-level presentation components to avoid having too many TW classes in the HTML.

[fgravin]

I do prefer

<button class="btn-secondary"> over <gnui-button type="secondary">, which just manages CSS.
It might be a matter of taste, but TW component is

• no code
• no maintenance
• easily overridden in the app

[fgravin]

You can do the same with pure css, don't you ?
It was my call by talking about "TW components".
Maybe we should keep the gnui-button and handle the css with TW component within the component CSS instead of from the javascript.
It's not a priority though...

[f-necas]

As far as I know, you can't for @apply.
And for sure, you cannot do nested classes, which is quite useful.

[fgravin]

This is what I tested in button.component.css

.btn-text-white {
  @apply text-white hover:text-primary-lighter;
}
.btn-text-white-a {
  @apply btn-text-white;
}

[f-necas]

Strange, we must have something else which preprocess our css ?
https://caniuse.com/sr_css-apply

Not even in mozilla doc : https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

[fgravin]

https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

[f-necas]

Close it, as it is outdated and will be reworked.