search

datopian / datahub

🌀 Rapidly build rich data portals using a modern frontend framework
https://datahub.io/opensource
MIT License
2.19k stars 327 forks source link

ToC improvements #1174

Closed olayway closed 1 month ago

olayway commented 2 months ago

Datapackage pages look a bit weird with the ToC.

image

I can see two issues here: 1) The content is shifted to the left way to much. It's hard on the eyes as I need to look to the left all the time. I'm not sure if it should be shifted at all. Rather, when the LHS sidebar is disabled, there should just be an empty space/margin in place of it. But it shouldn't affect the main content position. 2) The ToC has too much width/ padding on the right. It should be very slim. 3) ToC is not aligned with the top of the content (h1 heading). Instead it seems to be starting right below the nav bar. Which btw, makes it slightly hide underneath the nav bar on scroll down:

image

Also, the ToC doesn't show the active section. All the headings listed in it are always greyed out and I can't see where I'm currently at.

Also, some changes to the layout introduced with the ToC added some unnecessary padding to the sidebar. It looks off right now:

image

LuisVCSilva commented 2 months ago

Regarding issue: https://github.com/orgs/datopian/projects/47/views/1?pane=issue&itemId=66276410

Problem

When scrolling down into a user-created site, the table of contents in the right corner of the screen is unaligned, with some of text in the top of the table being overflowed.

Appetite

The solution to the problem shouldn't take more than 2 days, since it only requires a change in the CSS.

Solution

Just fixing the CSS code at line 24 in the /componentes/table-contents.tsx script, changing the changing the <div className=... value.

Rabbit-holes

N/A

No Gos

The changes don't require the code to be changed significantly anywhere other than the specific script in the project.

LuisVCSilva commented 2 months ago

First idea made:

Image

A table of contents with round corners and semi-transparent background (it blurs the background), so it can overlay the content of the page without being distracting, it highlights each item correspondent to the page that you scroll to. It's on the right side which is easy on the eyes, it's not overlapped by the navbar, however its not aligned with the top content (H1 Heading), so the next fix will add that. https://www.youtube.com/watch?v=bkfZJXJRHdw

olayway commented 1 month ago

Closing as most of the layout issues related to the ToC has been fixed. Now it's just a matter of making the active item highlighted, for which I'll open a new issue.