Restyling of GeoNetwork

[MichelGabriel]

Introduction

The main goal of the restyling was to make the user interface more consistent throughout the application and make the homepage more 'attractive'.

The following changes were made to achieve this:

• restrict the width of the application
• add more whitespace in the search results
• reduce the amount of icons used
• add a full background image (downloaded from Unsplash)
• align the elements
• 3 views for the lists on the homepage
• fixed toolbar
• repositioned the icons for the records on the ‘contribute’ page

The styling is kept minimal in order to serve as a ‘template’ for future implementations.

Screenshot of the ‘new’ homepage

What still needs to be done:

• optimise the background image
• the admin pages
• add micro-interactions
• ...

More screenshots

Search page

Contribute page

[pvgenuchten]

Looks good Michel, looking forward to hear opinions. Would it make sense to squash some of the commits before merging?

Would be interesting (next iteration) to allow to replace the background image by an uploaded alternative in the admin ui.

[josegar74]

@fgravin @fxprunayre if you hace time, please check for feedback and to verify if can be any issue with #1848

[fxprunayre]

After some testing (and a merge with current develop https://github.com/fxprunayre/core-geonetwork/tree/MichelGabriel-develop), here is some comments:

Some elements were removed/changed from the UI and it may be relevant to have the capability to turn them on or off depending on user needs/preferences (I think):

• Top toolbar icon removed. Add an option ? https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-b6cc814432e0a161ad0c659148014b6cL28

• Toolbar / Catalog logo removed. Add an option ?

• Container is not fluid - some prefer fluid, some don't. I liked the changes made by Florent recently to have a fixed width on metadata view only, fluid otherwise. Switching to fixed only may not be optimal for some users. Add an option ?

• Search results are not using grid mode anymore. Use the UI config option to choose the template to use. Only one or more than one with a switcher ?

• Footer hard coded english text should probably be set in catalog settings (https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-cad5b966572f3f06e94659b6398e9c7dR13)

• It's quite hard to know which facets are selected no ?

Issues (maybe related to the merge):

• Admin looks squeezed ? probably depends on screen and container fluid/fixed.

• Search results / Click on keyword open record instead of filtering on that keyword
• Editor / Button of same type used to be vertically aligned

• Harvester / Can't see bottom of dropdown

• Background image displayed in selection div

Some stuff I like:

• facet truncated by ellipsis (instead of number of char)
• black/white thumbnail in grid mode

Some questions:

• Result grid mode / Do we need to truncate title (https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-762e430aab3125c068cffc7d34099b2bR22) as we use ellipsis now ?
• Home page / Result layout switcher should be configurable ? same as in main search ?

• Editor / We had quite some discussion with Max and others to try to avoid to overload too much advanced form with borders and big legends ?

• Less / Should we use variables ? eg. https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-49c7c6b8b70aeec222d929e37262da27R5
• Formatting eg. https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-5b2cae1a25db9c5f14d20ac19acda78eR36, https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-f064f594c1e357c231caf8f838f43629R56 ...
• If we create new file to do something differently, it would be good to remove previous implementation ? eg. https://github.com/geonetwork/core-geonetwork/pull/1867/files#diff-cad5b966572f3f06e94659b6398e9c7d
• Top tool bar is different in search and other pages - would be better to be the same ?
• Delete icon / Has been discussed with Max a lot at some point and we worked on having the same icon every where. Now it's different ?

• 1.4Mo for a background image is a bit big; adding choices for that would be good ;)

That's it for now on my side. Maybe we should try to organize a mini-codesprint to finalize that; adding config where needed so that everyone can configure its UI (with the easy config made in #1848) and improving the minor missing items.

👍 @MichelGabriel

[fgravin]

I don't really approve this merge at this stage.
We made a lot of feedbacks, are they part of this PR ?

Also, we have many customers that have order the 3.2.x UI with little changes, will be hard to maintain them on develop with such of a change.

Could we discuss about this at Bolsena ?
Slightly too fast merge for me.

[josegar74]

I understand your concerns @fgravin.

I think a good way to go can be to add this work as a separate view, so users can select which view want to use. That way will be less traumatic for users having customisations based in the default view. But to discuss.