Conversation
| } | ||
|
|
||
| #renderFullNav() { | ||
| // Update with navigation components once available |
There was a problem hiding this comment.
This will still get tweaks a bit since core can't reference the eventual LMS navbar in lms-core, but we can at least remove a lot of this.
| } | ||
|
|
||
| #renderImmersiveNav() { | ||
| // Update with navigation components once available |
There was a problem hiding this comment.
This WILL get replaced by the real immersive navbar soon, but this gets us a bit closer.
| { detail: { pointToCenter: selectedTab.offsetLeft + (selectedTab.offsetWidth / 2) }, bubbles: true, composed: true } | ||
| ) | ||
| ); | ||
| await nextFrame(); |
There was a problem hiding this comment.
The scroll happens in an animation frame, so this was necessary.
| tabs.dispatchEvent( | ||
| new CustomEvent( | ||
| 'd2l-page-band-slot-scroll-request', | ||
| { detail: { pointToCenter: selectedTab.offsetLeft + (selectedTab.offsetWidth / 2) }, bubbles: true, composed: true } |
There was a problem hiding this comment.
This is almost identical to what org tabs does.
| overflow-y: hidden; | ||
| scroll-behavior: smooth; | ||
| } | ||
| @media (prefers-reduced-motion: reduce) { |
There was a problem hiding this comment.
I added this block because the "smooth" scroll was requiring ~500ms delay in the vdiffs. Seems like a good compromise!
dlockhart
force-pushed
the
GAUD-9883/move-navigation
branch
from
efd79ab to
9b7caa6
Compare
dlockhart
force-pushed
the
GAUD-9883/move-navigation
branch
from
9b7caa6 to
f099bdb
Compare
dlockhart
force-pushed
the
GAUD-9883/move-navigation
branch
from
f099bdb to
02d05ee
Compare
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2 participants
This ports/copies the labs navigation and labs band components into core. There are stories to migrate existing uses of those over to this and ultimately remove them.
Most of the code was copied as it was, but I've made a few changes:
<d2l-page-header-custom>as discussed elsewhere, and in alignment with the other<d2l-page-*>components. Both the upcoming<d2l-page-header-immersive>and<d2l-page-header-lms>will leverage this under the covers.4pxtall line. I think it's worth it to amalgamate.<d2l-labs-navigation-main-header>and<d2l-labs-navigation-main-footer>have been replaced by a "top" and "bottom" slot. In doing so, the header's "left" and "right" slots are gone. They seemed arbitrary (why not in the footer? why not 3 areas? 4?), and can be re-created in the LMS navbar and immersive navbar and any other implementation of the header that wants them.I haven't copied the vdiffs due to the above changes and ended up making a fair number of improvements and additions to them (like the band org tabs).
More comments inline.