diff --git a/client/css/core-general.styl b/client/css/core-general.styl index 02f4516..33499fa 100644 --- a/client/css/core-general.styl +++ b/client/css/core-general.styl @@ -76,6 +76,17 @@ form .fa-question-circle-o margin: 0 auto >*:first-child, form h1 margin-top: 0 + nav.buttons + ul + display: block + max-width: 100% + white-space: nowrap + overflow-x: auto + &::-webkit-scrollbar + height: 6px + background-color: $scrollbar-bg-color + &::-webkit-scrollbar-thumb + background-color: $scrollbar-thumb-color >.content-wrapper:not(.transparent) background: $top-navigation-color padding: 1.8em diff --git a/client/js/views/help_view.js b/client/js/views/help_view.js index 61a1330..4938b23 100644 --- a/client/js/views/help_view.js +++ b/client/js/views/help_view.js @@ -44,11 +44,18 @@ class HelpView { subsectionTemplates[section][subsection](ctx)); } + views.replaceContent(this._hostNode, sourceNode); + for (let itemNode of sourceNode.querySelectorAll('.primary [data-name]')) { itemNode.classList.toggle( 'active', itemNode.getAttribute('data-name') === section); + if (itemNode.getAttribute('data-name') === section) { + itemNode.parentNode.scrollLeft = + itemNode.getBoundingClientRect().left - + itemNode.parentNode.getBoundingClientRect().left + } } for (let itemNode of @@ -56,9 +63,13 @@ class HelpView { itemNode.classList.toggle( 'active', itemNode.getAttribute('data-name') === subsection); + if (itemNode.getAttribute('data-name') === subsection) { + itemNode.parentNode.scrollLeft = + itemNode.getBoundingClientRect().left - + itemNode.parentNode.getBoundingClientRect().left + } } - views.replaceContent(this._hostNode, sourceNode); views.syncScrollPosition(); } } diff --git a/client/js/views/post_detail_view.js b/client/js/views/post_detail_view.js index 4c19059..14786d3 100644 --- a/client/js/views/post_detail_view.js +++ b/client/js/views/post_detail_view.js @@ -26,6 +26,11 @@ class PostDetailView extends events.EventTarget { for (let item of this._hostNode.querySelectorAll('[data-name]')) { item.classList.toggle( 'active', item.getAttribute('data-name') === ctx.section); + if (item.getAttribute('data-name') === ctx.section) { + item.parentNode.scrollLeft = + item.getBoundingClientRect().left - + item.parentNode.getBoundingClientRect().left + } } ctx.hostNode = this._hostNode.querySelector('.post-content-holder'); diff --git a/client/js/views/tag_view.js b/client/js/views/tag_view.js index fe9d4c1..c3457bc 100644 --- a/client/js/views/tag_view.js +++ b/client/js/views/tag_view.js @@ -29,6 +29,11 @@ class TagView extends events.EventTarget { for (let item of this._hostNode.querySelectorAll('[data-name]')) { item.classList.toggle( 'active', item.getAttribute('data-name') === ctx.section); + if (item.getAttribute('data-name') === ctx.section) { + item.parentNode.scrollLeft = + item.getBoundingClientRect().left - + item.parentNode.getBoundingClientRect().left + } } ctx.hostNode = this._hostNode.querySelector('.tag-content-holder'); diff --git a/client/js/views/user_view.js b/client/js/views/user_view.js index 685e662..d52e899 100644 --- a/client/js/views/user_view.js +++ b/client/js/views/user_view.js @@ -24,11 +24,14 @@ class UserView extends events.EventTarget { _install() { const ctx = this._ctx; views.replaceContent(this._hostNode, template(ctx)); + for (let item of this._hostNode.querySelectorAll('[data-name]')) { + item.classList.toggle( + 'active', item.getAttribute('data-name') === ctx.section); if (item.getAttribute('data-name') === ctx.section) { - item.className = 'active'; - } else { - item.className = ''; + item.parentNode.scrollLeft = + item.getBoundingClientRect().left - + item.parentNode.getBoundingClientRect().left } }