Content
View differences
Updated by Parimal Satyal about 1 year 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 border border (like in GitHub)
* Colour: `--borderColor-accent-emphasis`
* Width: 2px
* Same colours for restricted comments; the colours should be the same across the application.
**Technical notes**
* Would we use the [**:target CSS pseudo-class**](https://developer.mozilla.org/en-US/docs/Web/CSS/:target)?
**Reference**
* GitHub uses a bllue 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 border border (like in GitHub)
* Colour: `--borderColor-accent-emphasis`
* Width: 2px
* Same colours for restricted comments; the colours should be the same across the application.
* Would we use the [**:target CSS pseudo-class**](https://developer.mozilla.org/en-US/docs/Web/CSS/:target)?
**Reference**
* GitHub uses a bllue 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)