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

usability: avoid gap between a wrapped link in aside bar #439

Merged
merged 3 commits into from
Jul 5, 2024

Conversation

peterdd
Copy link
Contributor

@peterdd peterdd commented Aug 31, 2021

The upcoming conference links are wrapped and clicking between should activate the link, not require the user to decide to click the upper or bottom line of the link.

wrappedlinkgap

The upcoming conference links are wrapped and clicking between should activate the link, not require the user to decide to click the upper or bottom line of the link.
@saundefined
Copy link
Member

I think in this case, usability loses out... I would prefer the link to be the text directly rather than the block.
Perhaps there are successful examples of this behavior?

example

image

@peterdd
Copy link
Contributor Author

peterdd commented Jul 5, 2024

Ah, another idea which keeps the hover underlining 'normal' and still no click-gap on wrapped link:

aside.tips li {margin-bottom:0.5rem;}
aside.tips a {padding-top:0.5rem;}

It also keeps the li items a bit separated (for better or 'worse'?)
php_linkgaps

@saundefined
Copy link
Member

Ah, another idea which keeps the hover underlining 'normal' and still no click-gap on wrapped link:

Looks good,
can you update PR, and we'll try it on preview environment?

instead of making a-tags display:inline-block, this CSS change adjusts the line-height of the li-tag, so the wrapped conference links are kept normal and has no link-gaps.
Copy link

github-actions bot commented Jul 5, 2024

🚀 Commit 40abc7c Deployed on https://web-php-pr-439.preview.thephp.foundation

@peterdd
Copy link
Contributor Author

peterdd commented Jul 5, 2024

Instead of the padding-top 'hack' I now adjusted the line-height of the li-tag...

Copy link
Member

@saundefined saundefined left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@saundefined saundefined merged commit d4acbf4 into php:master Jul 5, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants