diff --git a/css/kunai/site/sidebar.css b/css/kunai/site/sidebar.css index a84603a..22f0857 100644 --- a/css/kunai/site/sidebar.css +++ b/css/kunai/site/sidebar.css @@ -103,6 +103,10 @@ main[role="main"] .kunai-sidebar.force-legacy { } } + ul, li { + box-sizing: border-box; + } + .cr-index { display: flex; flex-basis: 100%; @@ -165,8 +169,6 @@ main[role="main"] .kunai-sidebar.force-legacy { overflow: hidden; .kunai-branch { - overflow: hidden; - margin: .2rem 0 0 0; padding: 0; @@ -205,6 +207,8 @@ main[role="main"] .kunai-sidebar.force-legacy { > .expandbar { display: inline-flex; + position: sticky; + top: -1px; } @@ -249,9 +253,11 @@ main[role="main"] .kunai-sidebar.force-legacy { } &.expanded { - > .expandbar > .expander { - &:before { - transform: rotate(45deg); + > .expandbar { + > .expander { + &:before { + transform: rotate(45deg); + } } } } @@ -358,37 +364,6 @@ main[role="main"] .kunai-sidebar.force-legacy { position: relative; } - - &.scrolling { - > .content > .kunai-branch > ul.branch { - // margin-top: 4em; - - > li.preview.expanded { - > .expandbar { - position: absolute; - left: 0; - width: 100%; - - // box-shadow: 0 2px 20px -2px rgba(20, 20, 20, 0.3); - // background-color: #FBFBFB; - - background-color: rgba(220, 220, 240, 0.5); - - > a { - background: rgba(250, 250, 255, 1); - font-weight: bold; - } - - .cr-index { - ul.badges { - display: none; - } - } - } - } - } - } - } } } @@ -534,6 +509,22 @@ main[role="main"] .kunai-sidebar.force-legacy { > .expandbar { margin-bottom: .5em; + + // box-shadow: 0 2px 20px -2px rgba(20, 20, 20, 0.3); + // background-color: #FBFBFB; + + background-color: rgba(220, 220, 240, 0.5); + + > a { + background: rgba(250, 250, 255, 1); + font-weight: bold; + } + + .cr-index { + ul.badges { + display: none; + } + } } } diff --git a/js/kunai/ui/treeview.js b/js/kunai/ui/treeview.js index 547a1ed..d876185 100644 --- a/js/kunai/ui/treeview.js +++ b/js/kunai/ui/treeview.js @@ -31,76 +31,6 @@ class DOM { // this.scrollIsAutoFired = false } - static scrollEps = 8 - - async handleScroll(e) { - // if (this.scrollIsAutoFired) { - // this.log.debug(`handleScroll(auto)`, e) - // this.scrollIsAutoFired = false - // return false - // } - - let content_wrapper = $(e.target) - const content = content_wrapper.children('.content') - - const st = content_wrapper.scrollTop() - const cOfs = content.position().top - - const k_branch = content.children('.kunai-branch[data-branch-for="headers"]') - const bID = k_branch.attr('data-branch-id') - const branch = k_branch.children('.branch') - // this.log.debug(`handleScroll #${bID} (top = ${st}px, cOfs = ${cOfs}px)`, e, content_wrapper, content, k_branch, branch) - - let closestChild = null - let closestDelta = 0 - - // find a child item with least deltaY to current scrollTop - for (const child_ of branch.children('li')) { - const child = $(child_) - const cTop = child.position().top - const delta = st - cTop - - // this.log.debug(`checking '${child.find('.cr-index .title').get(0).innerText.trim()}' | cTop: ${cTop}, delta: ${delta} (closestDelta: ${closestDelta})`, child_) - - if (!closestChild) { - closestDelta = delta - closestChild = child - } else { - // if (cTop + (st + cOfs) < st) { - if (cTop < st) { - closestDelta = cTop - closestChild = child - } else { - break - } - } - } - - { - let last = this.branchPrevs.get(bID) - if (last) { - // this.log.debug(`preview target change --> '${closestChild.find('.cr-index > .title > .keys')[0].innerText.trim()}'`, closestChild[0]) - last.removeClass('preview') - } - } - - this.branchPrevs.set(bID, closestChild) - closestChild.addClass('preview') - // throw [closestChild, closestDelta] - - if (closestChild.hasClass('expanded')) { - let bar = $(closestChild.children('.expandbar')[0]) - bar.css({top: `${(st)}px`}) - // throw true - } - - if (st < DOM.scrollEps) { - content_wrapper.removeClass('scrolling') - } else { - content_wrapper.addClass('scrolling') - } - } - async createContent(obj) { this.log.info(`createContent '${obj.self.id}'`, obj) @@ -461,10 +391,6 @@ class Treeview { stack.addClass('empty') } - if (top.category.index === this.kc.categories().get('reference').index) { - content_wrapper.on('scroll', ::this.dom.handleScroll) - } - return stack }) ))