scl/szurubooru
1
0
Fork 0
mirror of https://github.com/rr-/szurubooru.git synced 2025-07-17 08:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

client/css: make tab navigations scrollable on smaller screens

Browse Source
This commit is contained in:
Michael Serajnik
2017-12-18 19:41:53 +01:00
committed by rr-
parent a962bb351a
commit 23a28ce69c
5 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/js/views/help_view.js
View File

@ -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();
}
}

5
client/js/views/post_detail_view.js
View File

@ -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');

5
client/js/views/tag_view.js
View File

@ -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');

9
client/js/views/user_view.js
View File

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