Implement span.anchor in panel to replace id

[jonahtanjz]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Overview of changes:
Follow-up to #1603 (comment). The support of scroll-margin-top on ios is still limited thus require a different approach to handle anchor navigation for panels.

Replace existing panel id with span.anchor (similar to how normal headers navigation works). This prevents the panels from getting blocked by the fixed-header bar as well as resolves #1601.

Anything you'd like to highlight / discuss:
If there is a better workaround.

Apparently changing the width of ::before does not fix #1601 as the entire panel block still occupies the vertical space of ::before as well.

The container which holds ::before still has the width of the panel

Testing instructions:

1. Create panel with header

<panel header="# Test">
</panel>

2. Click on panel link in page-nav
3. Panel should appear below the fixed-header
4. Can refer to User Guide: Unable to open details panel on mobile #1601 issue, visit nav bar section in UG, details panel should be clickable now

Proposed commit message: (wrap lines at 72 characters)
Implement span.anchor in panel to replace id

The support of scroll-margin-top on ios is still limited hence
would require a different approach to handle anchor navigation
for panels while keeping elements before panels from getting
blocked.

Let's introduce span.anchor into panel, similar to how the headers
navigation works, to support anchor navigation as well as to prevent
previous elements from getting blocked.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No blatantly unrelated changes
• Pinged someone for a review!

[ang-zeyu]

hmm what's this for?

[jonahtanjz]

Vue passes non-prop attributes such as id to the root node of a component. In this case, we do not want the main panel container, div or span, to have the id as this interferes with anchor navigation.
The inheriAttrs: false is needed to prevent the root node of minimalPanel and nestedPanel from inheriting the id attribute.

https://v3.vuejs.org/guide/component-attrs.html#disabling-attribute-inheritance

[ang-zeyu]

Thanks for clarifying! Hmm how about changing the property name under assignPanelId (then using it as a prop)?

So there's no risk of side effects from disabling attribute inheritance entirely.

[jonahtanjz]

Yup that would work as well. Will update it.

[jonahtanjz]

@ang-zeyu Updated the PR to pass in panelId as prop.

[ang-zeyu]

Lgtm 👍, just this portion that would have to be edited also since we aren't using ::before anymore.

(handles the auto scroll back to top)

// To enable behaviour of auto window scrolling during panel collapse
if (this.$el.getBoundingClientRect().top < 0) {
  jQuery('html').animate({
    scrollTop: window.scrollY + this.$el.getBoundingClientRect().top - 3,
  }, 500, 'swing');
}

[jonahtanjz]

@ang-zeyu Thanks for the catch. Have updated the PR :)

[ang-zeyu]

a really minor nit for keeping everything under the panel implementation -- would this work?

const el = $refs.anchor || this.$el;
el .getBoundingClientRect......

[jonahtanjz]

Hmm added ref="anchor" to the spans and doesn't seem to be working... The panel header still gets hidden under the navbar after collapsing.

[ang-zeyu]

try adding display: inline-block to the scoped anchor class here

[jonahtanjz]

Slightly better but half of it is still under the navbar... When lower navbar is present, it gets hidden again 😅

[ang-zeyu]

Looks like the sibling after span.anchor is interfering 🤣... let's leave it for now and revisit later

[ang-zeyu]

Lgtm 👍