search

HugoBlox / hugo-blox-builder

🚨 GROW YOUR AUDIENCE WITH HUGOBLOX! 🚀 HugoBlox is an easy, fast no-code website builder for researchers, entrepreneurs, data scientists, and developers. Build stunning sites in minutes. 适合研究人员、企业家、数据科学家和开发者的简单快速无代码网站构建器。用拖放功能、可定制模板和内置SEO工具快速创建精美网站！
https://hugoblox.com/templates/
MIT License
8.2k stars 2.9k forks source link

Improve active link highlighting for edge cases #1199

Closed abahgat closed 5 years ago

abahgat commented 5 years ago

Found another interesting bug: active navbar link highlighting is broken in HEAD, basically browser always highlight the section before the one that is currently in view.

Can be reproduced on the demo site (just click on any navbar link): https://academic-demo.netlify.com/

I did not have a chance to dig too deep but from a cursory look it does seem to be caused by mismatching styles referencing different navbar heights (seems like navbar used to be 70px tall and is 50px tall now). The 20px in difference seem to be enough to trip the scrollspy logic.

gcushen commented 5 years ago

The issue is more complex. There are two dynamic height components - Portfolio widget and navbar - which can cause ScrollSpy/scrolling issues in some edge cases. There have been a few related issues on these edge cases.

I have a local fix for ScrollSpy which I'll push to master soon.

abahgat commented 5 years ago

Ok great, thanks for looking into this!

abahgat commented 5 years ago

Thanks, works much better. Not sure if it's intended but this does not seem to highlight "Home" by default when first landing on the site, but perhaps that is intended?

gcushen commented 5 years ago

That's unrelated - in the Demo, we link Home to the About widget (i.e. after the widgets which introduce Academic) in menus.toml. We could change the text to About instead, but at least with the current way it's slightly easier for users to create their site based on the Demo if they wish.

abahgat commented 5 years ago

It could be unrelated, but if the intent is for Home to be highlighted if About were to be the first widget, I am not sure it is working as intended, at least based on this preview of my demo site: https://deploy-preview-3--abahgat.netlify.com/

Home is the first widget on my site, and previous versions of the theme did highlight it by default.

gcushen commented 5 years ago

I see you weren't referring to the Demo. That issue should be fixed now too.

abahgat commented 5 years ago

Thanks!

nikslash commented 4 years ago

Has this issue reappeared? If I go to https://academic-demo.netlify.com and click Courses then Publications (or click Academic on the left, and then Publications), I don't get Publications highlighted, I get Projects highlighted (one position to the left). (And on my own attempt at a site, which started from the same template, several NavBar items do this.)

gcushen commented 4 years ago

@nikslash thanks for reporting the reoccurrence of this bug, although this time it has a very different cause.

I can confirm that since lazy loading was added in a recent version, the lazy loading of gallery images and figures could cause inaccurate anchor scrolling and link highlighting in some cases, depending on the structure of the page.

After investigation, the issue is that lazy loading without initial image sizes defined can lead to inaccurate anchor scrolling and active link highlighting as the anchor offset on the page changes after an uncached image occurring before the anchor is lazily loaded.

We've released an update that attempts to fix this. Please update to the latest master version of Academic and test it out.

nikslash commented 4 years ago

I've got my old site going on the latest hugo&academic, and the bug's fixed for me.