client/css: make tab navigations scrollable on smaller screens

5 files changed, 39 insertions, 4 deletions

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
             }
         }