Content
Updated by Oliver Günther 1 day ago
**As** a user who follows a deep link on a page with an anchor
**I want to** get to the page in the right scroll position and the item highlighted in some way
**so that** I know which element I should be looking at
**Acceptance criteria**
* When the user follows a link with an anchor (eg. to a specific comment in the Activity tab or a meeting agenda item)
* Auto-scroll such that the deep-linked element is around the top of the page
* Leave a 100px gap at the top so that it doesn't sit flush with the top and doesn't end up being hidden behind the header
* Highlight that element with a blue outline outside border (like in GitHub)
* Colour: `--borderColor-accent-emphasis`
* Width: 2px
* The browser url (with anchor) is replaced with the canonical URL after the next user interaction (eg. click anywhere on the page).
* The blue outline is also removed.
**Technical notes**
* This has been implemented for work packages already with <mention class="mention" data-id="62712" data-type="work_package" data-text="#62712">#62712</mention> (see this [PR](https://github.com/opf/openproject/pull/20124)) and only needs to be done for meeting agenda items
* The [**:target CSS pseudo-class**](https://developer.mozilla.org/en-US/docs/Web/CSS/:target) could be used, but un-highlighting by clicking anywhere in the page is probably not easy that way
* How does GitHub do the replacing of an anchored deep-link with the canonical? Can we take inspiration from that?
**Mockups**
Please see [Figma file](https://www.figma.com/design/w0YoqQ5v0JGNT5NS5NZJZq/Comments-with-restricted-visibility?node-id=563-5329) for the most up-to-date mockups. The following is just a reference:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:529px;" src="/api/v3/attachments/404829/content">
GitHub uses a blue border (eg. [Deep-linked comment on a PR](https://github.com/opf/openproject-website/pull/3475#pullrequestreview-2318494347))**:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:506px;" src="/api/v3/attachments/400730/content">
**Permissions and visibility considerations**
* _Nothing specific_
**Translation considerations**
* _None_
**Out of scope**
* [Animation](https://primer.style/brand/getting-started/animation) is not in this scope, although Primer seems to afford some (but in Primer)
**I want to** get to the page in the right scroll position and the item highlighted in some way
**so that** I know which element I should be looking at
**Acceptance criteria**
* When the user follows a link with an anchor (eg. to a specific comment in the Activity tab or a meeting agenda item)
* Auto-scroll such that the deep-linked element is around the top of the page
* Leave a 100px gap at the top so that it doesn't sit flush with the top and doesn't end up being hidden behind the header
* Highlight that element with a blue outline
* Colour: `--borderColor-accent-emphasis`
* Width: 2px
* The browser url (with anchor) is replaced with the canonical URL after the next user interaction (eg. click anywhere on the page).
* The blue outline is also removed.
**Technical notes**
* This has been implemented for work packages already with <mention class="mention" data-id="62712" data-type="work_package" data-text="#62712">#62712</mention> (see this [PR](https://github.com/opf/openproject/pull/20124)) and only needs to be done for meeting agenda items
* The [**:target CSS pseudo-class**](https://developer.mozilla.org/en-US/docs/Web/CSS/:target) could be used, but un-highlighting by clicking anywhere in the page is probably not easy that way
* How does GitHub do the replacing of an anchored deep-link with the canonical? Can we take inspiration from that?
**Mockups**
Please see [Figma file](https://www.figma.com/design/w0YoqQ5v0JGNT5NS5NZJZq/Comments-with-restricted-visibility?node-id=563-5329) for the most up-to-date mockups. The following is just a reference:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:529px;" src="/api/v3/attachments/404829/content">
GitHub uses a blue border (eg. [Deep-linked comment on a PR](https://github.com/opf/openproject-website/pull/3475#pullrequestreview-2318494347))**:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:506px;" src="/api/v3/attachments/400730/content">
**Permissions and visibility considerations**
* _Nothing specific_
**Translation considerations**
* _None_
**Out of scope**
* [Animation](https://primer.style/brand/getting-started/animation) is not in this scope, although Primer seems to afford some (but in Primer)