Add labels to tabs - Githubissues

visualize-admin / visualization-tool

The tool for visualizing Swiss Open Government Data. Project ownership: Federal Office for the Environment FOEN

https://visualize.admin.ch

BSD 3-Clause "New" or "Revised" License

29 stars 3 forks source link

Add labels to tabs #1584

Closed ptbrowne closed 3 weeks ago

ptbrowne commented 3 weeks ago

Goals

Add labels to tabs in editor mode and preview mode. We use the title of the charts.

The behavior of the tabs is as follows:

Each tab is of the same size for consistency
The ellipsis of the title is done by a semi transparent element
The tabs have a minimum width
The tabs list content can scroll once the tabs are too numerous and cannot shrink
The tabs list also indicate cut-off content via semi transparent element

How to test

Open a chart
Add 4 to 5 charts
Add titles to each of the charts

Result

https://github.com/visualize-admin/visualization-tool/assets/465582/97d19e39-bea6-4a4e-9d3d-af874f5a25ae

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
visualization-tool	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 10, 2024 3:29pm

ptbrowne commented 3 weeks ago

Sure, both behavior were not wanted ;) I fixed them.

bprusinowski commented 3 weeks ago

Looks great now, thanks 💯