Skip to content

fix: pfe-jump-links offset & updates to demo file#974

Merged
Djfaucette merged 32 commits intomasterfrom
pfe-jump-links-demo
Oct 22, 2020
Merged

fix: pfe-jump-links offset & updates to demo file#974
Djfaucette merged 32 commits intomasterfrom
pfe-jump-links-demo

Conversation

@starryeyez024
Copy link
Copy Markdown
Member

@starryeyez024 starryeyez024 commented Jul 9, 2020

  • Add fake navbar to demo page
  • Tidy demo CSS
  • shorten length of paragraphs between panel headings
  • Add offset variable in the jump links nav

Demo page

@starryeyez024 starryeyez024 requested a review from Djfaucette July 9, 2020 21:26
@castastrophe castastrophe added demo Updating demo pages styles An issue or PR pertaining only to CSS/Sass labels Jul 9, 2020
Copy link
Copy Markdown
Contributor

@Djfaucette Djfaucette left a comment

Choose a reason for hiding this comment

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

Left some comments.

Comment thread elements/pfe-jump-links/demo/index.html Outdated
</div>
<div class="pfe-l-grid__item pfe-m-12-col pfe-m-9-col-on-lg">
<pfe-jump-links-panel class="special" pfe-c-scrolltarget="jumplinks1">
<pfe-jump-links-panel pfe-c-offset="20" class="special" pfe-c-scrolltarget="jumplinks1">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This attribute actually does something, we should leave it. You can also put a css value on the panel --pfe-jump-links-panel--offset. It will read css if it's there, and if both are there it will use the attribute.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

not sure what you mean? I've added it here :)
It's also in the demo CSS; is that duplicative?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Comment thread elements/pfe-jump-links/demo/index.html Outdated
<div style="margin: 0 auto 400px;grid-column-gap: 30px;max-width:1140px;" class="pfe-l-grid">
<div class="sticky pfe-l-grid__item pfe-m-12-col pfe-m-3-col-on-lg">
<pfe-jump-links-nav id="jumplinks1" sr-text="Page navigation">
<pfe-jump-links-nav pfe-c-offset="100" id="jumplinks1" sr-text="Page navigation">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

pfe-c-offset here doesn't do anything.

Comment thread elements/pfe-jump-links/demo/index.html Outdated
@castastrophe castastrophe added ready: branch testing Test the component from a user-perspective. Try to break it! ready: browser testing Test the component in the supported browser environments. ready: code review Ready for code review! needs code updates Code updates have been requested. needs changelog Be sure to update the Changelog before merging. labels Jul 20, 2020
Comment thread elements/pfe-jump-links/src/pfe-jump-links-nav.scss Outdated
Comment thread elements/pfe-jump-links/src/pfe-jump-links-nav.scss Outdated
@starryeyez024 starryeyez024 linked an issue Jul 30, 2020 that may be closed by this pull request
Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
@starryeyez024 starryeyez024 changed the title pfe-jump-links offset pfe-jump-links offset & updates to demo file Jul 31, 2020
@castastrophe castastrophe added the functionality Functionality, typically pertaining to the JavaScript. label Aug 4, 2020
display: block;
position: relative;
width: 0;
margin-top: calc( -1 * var(--pfe-jump-links-panel__section--spacer) );
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@starryeyez024 I'm having trouble getting the height and margin-top styles to tie into the custom properties from the demo.css file. Do lines 2, 8 & 9 look ok?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

added fix for line 2 (no interpolation needed)

@starryeyez024 starryeyez024 linked an issue Aug 27, 2020 that may be closed by this pull request
Comment thread elements/pfe-jump-links/src/pfe-jump-links-panel.scss Outdated
@castastrophe castastrophe changed the title pfe-jump-links offset & updates to demo file fix: pfe-jump-links offset & updates to demo file Oct 8, 2020
Copy link
Copy Markdown
Contributor

@alazzara alazzara left a comment

Choose a reason for hiding this comment

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

+1 code review

@castastrophe
Copy link
Copy Markdown
Contributor

@starryeyez024 Can you take a look at why the CI is failing?

@Djfaucette
Copy link
Copy Markdown
Contributor

Lazarra good to merge

@Djfaucette Djfaucette merged commit 51d055a into master Oct 22, 2020
@Djfaucette Djfaucette deleted the pfe-jump-links-demo branch October 22, 2020 13:10
@castastrophe castastrophe added run e2e Trigger automated visual regression tests and removed ready: branch testing Test the component from a user-perspective. Try to break it! ready: browser testing Test the component in the supported browser environments. needs changelog Be sure to update the Changelog before merging. ready: code review Ready for code review! needs code updates Code updates have been requested. labels Oct 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

demo Updating demo pages functionality Functionality, typically pertaining to the JavaScript. run e2e Trigger automated visual regression tests styles An issue or PR pertaining only to CSS/Sass

Projects

None yet

Development

Successfully merging this pull request may close these issues.

pfe-jump-links issues with nav panel hash link + positioning Add headline offset styles to jump links

5 participants