Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon links should be evenly distributed #1720

Closed
leifwalsh opened this issue Feb 15, 2024 · 12 comments · Fixed by #1726
Closed

Icon links should be evenly distributed #1720

leifwalsh opened this issue Feb 15, 2024 · 12 comments · Fixed by #1726

Comments

@leifwalsh
Copy link
Contributor

leifwalsh commented Feb 15, 2024

I think the icon links feature would look better with justify-content: space-evenly:

Before:

image

After:

image

I'm not sure what this looks like with multiple rows of icon links, and maybe someone else knows a better CSS way to do this than I do. But I found that this CSS makes things look better:

.navbar-icon-links {
  justify-content: space-evenly;
}
@drammock
Copy link
Collaborator

seems like a good idea to me. @gabalafou @12rambau any reason you can think of why we might not want that?

@12rambau
Copy link
Collaborator

In what context fdo you see these lines ? Is it in the right sidebar on small screen or on the top navbar on big ones ?
For me these things are always on 1 line and here I see 2.

@leifwalsh
Copy link
Contributor Author

I don't know what lines you're referring to? This proposal is about spacing between icon links

@trallard
Copy link
Collaborator

I believe @12rambau refers to the display shown in your images where the icons and the search field are presented in a two row layout (icons on top of search)

@12rambau
Copy link
Collaborator

12rambau commented Feb 16, 2024

yep, because if it's the left sidebar then I prefer to have them left align as th text. If its the top navbar I'm don't have strong opinion. You'll note that I have no other argument than "I prefer" so if any a11y justification comes in, please do as if I wasn't there ;-)

@leifwalsh
Copy link
Contributor Author

It is the primary sidebar, on the left.

@drammock
Copy link
Collaborator

if it's the left sidebar then I prefer to have them left align as th text. If its the top navbar I'm don't have strong opinion. You'll note that I have no other argument than "I prefer" so if any a11y justification comes in, please do as if I wasn't there ;-)

one thing that occurs to me is that spacing buttons farther apart makes them easier to hit on a touch device with big or shaky fingers --- so that's maybe an argument in favor of spreading them out when they're in the sidebar (which by default happens on small screens, which are usually touch devices).

@leifwalsh
Copy link
Contributor Author

image

image

I think they are indeed easier to target on mobile this way. But, if you all don't want to go this way, I'm ok with that, we can keep our own CSS customization too.

@drammock
Copy link
Collaborator

I think we have one usability argument in favor, and one "just my opinion, feel free to disregard" vote against. So I'd say please go ahead with a PR @leifwalsh

@leifwalsh
Copy link
Contributor Author

Will do, just need to wait for approval to contribute from $work, so probably next week. Thanks!

leifwalsh added a commit to leifwalsh/pydata-sphinx-theme that referenced this issue Feb 22, 2024
(rather than justified left)
@FranzRoters
Copy link

I am not sure, whether this might already solve my issue, but I came across a similar problem, when looking at the version-switcher. We are currently preparing multi-version documentation and in this process discuss where to best place the version switcher. One option is to put it into navbar_end next to the icon links. However, then it ends up in the same line as the logos in the primary sidebar on small dveices:

grafik

As you can see they do not align nicely. While I do not know, whether that would be easy to fix, I would like to suggest to put the version-switcher into a separate line. Again, I have no idea, whether that can ebe easily achieved.

@FranzRoters
Copy link

One more point: when you look carefully, you also realsie, that the font size is different for the version switcher and the other navigation items.

drammock pushed a commit that referenced this issue Mar 3, 2024
* space icon-links evenly across #1720

(rather than justified left)

* restore column-gap
ivanov pushed a commit to ivanov/pydata-sphinx-theme that referenced this issue Jun 5, 2024
* space icon-links evenly across pydata#1720

(rather than justified left)

* restore column-gap
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants