noi-techpark / it.bz.opendatahub.databrowser

Explore and navigate through Open Data you need to build your next service.
https://databrowser.opendatahub.com
GNU Affero General Public License v3.0
9 stars 7 forks source link

Better display long Dataset names in the Table view #603

Open sseppi opened 1 month ago

sseppi commented 1 month ago

With the introduction of the new header of the Table view, we have a display problem of Dataset with long names (more than one line).

As you can see from the screenshot below, the long names exceed the borders of the drop-down component.

Screenshot from 2024-09-24 15-44-36

We should think a better solution for long dataset names.

sseppi commented 1 month ago

@pkritzinger what about cutting the name and putting the dots at the end?

pkritzinger commented 1 month ago

@sseppi yes, truncating the name after having defined the max-length would be a great solution (do you know how long the dataset name can be?). Maybe on hover we can show the full dataset name by using the tooltip provided by the browser, s. example below. image

sseppi commented 1 month ago

@pkritzinger we didn't define any limit for the dataset's name length. For now the "Echarging station accessibility" is the longest, but if future we could have even longer names.

I like the truncation of the name with the hover effect you proposed.

gappc commented 1 month ago

@sseppi @pkritzinger I recommend to let the browser do the truncation via css. Defining a max number of characters is not always helpful with non-monospaced fonts, e.g.

iiiiiiiiii => 10 chars oooooooooo => 10 chars

sseppi commented 1 month ago

@sseppi @pkritzinger I recommend to let the browser do the truncation via css. Defining a max number of characters is not always helpful with non-monospaced fonts, e.g.

iiiiiiiiii => 10 chars oooooooooo => 10 chars

@gappc Yes, you're right. I would do the truncation via css and implement the hover effect to see the full dataset name. Moreover, once the dropdown menu is open, in the list of dataset the full name must be shown, to let the user find the dataset he is looking for.

pkritzinger commented 1 month ago

@sseppi @gappc sounds good! do you need any design specs from our side or can you directly implement it?

sseppi commented 1 month ago

@pkritzinger in my point of view is ready to be implemented.