diff --git a/services/web/frontend/js/features/bookmarkable-tab/index.js b/services/web/frontend/js/features/bookmarkable-tab/index.js new file mode 100644 index 0000000000..76855e970e --- /dev/null +++ b/services/web/frontend/js/features/bookmarkable-tab/index.js @@ -0,0 +1,21 @@ +function bookmarkableTab(tabEl) { + tabEl.addEventListener('click', () => { + window.location.hash = tabEl.getAttribute('href') + }) +} + +function handleHashChange() { + const hash = window.location.hash + if (!hash) return + + // Find the bookmarkable tab that links to the hash + const $tabEl = $(`[data-ol-bookmarkable-tab][href="${hash}"]`) + if (!$tabEl) return + + // Select the tab via Bootstrap + $tabEl.tab('show') +} + +document.querySelectorAll('[data-ol-bookmarkable-tab]').forEach(bookmarkableTab) +window.addEventListener('hashchange', handleHashChange) +handleHashChange() diff --git a/services/web/frontend/stylesheets/app/cms-page.less b/services/web/frontend/stylesheets/app/cms-page.less index 1f844da04c..98d055234b 100644 --- a/services/web/frontend/stylesheets/app/cms-page.less +++ b/services/web/frontend/stylesheets/app/cms-page.less @@ -17,7 +17,8 @@ Tabs */ .tab-content { - padding: 0; + padding-left: 0; + padding-right: 0; width: 100%; } diff --git a/services/web/frontend/stylesheets/app/portals.less b/services/web/frontend/stylesheets/app/portals.less index a89c81e92b..28e472b010 100644 --- a/services/web/frontend/stylesheets/app/portals.less +++ b/services/web/frontend/stylesheets/app/portals.less @@ -92,10 +92,6 @@ } // End Actions - .nav-tabs { - margin-bottom: @margin-md; - } - /* Begin Print */ diff --git a/services/web/frontend/stylesheets/components/tabs.less b/services/web/frontend/stylesheets/components/tabs.less index b9858416b9..5aa21722f0 100644 --- a/services/web/frontend/stylesheets/components/tabs.less +++ b/services/web/frontend/stylesheets/components/tabs.less @@ -38,3 +38,14 @@ border: none !important; } } + +// Scroll the page up a bit to allow tab links to be shown when navigating to +// a bookmarked tab hash +[data-ol-bookmarkable-tabset] .tab-pane { + scroll-margin-top: calc( + @line-height-computed + // Computed text height + 20px + // nav-link-padding top & bottom + @padding-md + // ol-tabs bottom padding + (@line-height-computed / 2) // tab-content top padding + ); +}