Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Calculate --sidebar-wrapper-height in pure CSS #360

Merged
merged 4 commits into from
Sep 2, 2021
Merged

Calculate --sidebar-wrapper-height in pure CSS #360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6611f43
Calculate `--sidebar-wrapper-height` in pure CSS
stevenjoezhang Aug 29, 2021
c54b835
$sidebar-offset & $sidebar-padding
stevenjoezhang Aug 29, 2021
2a55ee4
Do not scroll when site-overview is active
stevenjoezhang Aug 29, 2021
28fa98e
Remove EventListener
stevenjoezhang Aug 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions layout/_macro/sidebar.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,9 @@
<!--/noindex-->

<div class="site-overview-wrap sidebar-panel">
<div class="site-overview">
{{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
{{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}

{{- next_inject('sidebar') }}
</div>
{{- next_inject('sidebar') }}
</div>
</div>

Expand Down
8 changes: 4 additions & 4 deletions source/css/_common/outline/sidebar/index.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.sidebar-inner {
color: $grey-dark;
// Init Sidebar & TOC inner dimensions on all pages and for all schemes.
$offset = (($scheme == 'Pisces') or ($scheme == 'Gemini')) ? $sidebar-offset : $sidebar-padding;
max-height: 'calc(100vh - %s)' % unit($offset * 2, 'px');
padding: $sidebar-padding 10px;
text-align: center;
}

.site-overview {
max-height: var(--sidebar-wrapper-height);
flex-column();
}

.site-overview-item:not(:first-child) {
Expand Down
3 changes: 2 additions & 1 deletion source/css/_common/outline/sidebar/sidebar-nav.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,9 @@
}
}

// Need for Sidebar/TOC inner scrolling if content taller then viewport.
.sidebar-panel-container {
max-height: var(--sidebar-wrapper-height);
flex: 1;
overflow-x: hidden;
overflow-y: auto;
}
Expand Down
2 changes: 0 additions & 2 deletions source/js/next-boot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@ NexT.boot.registerEvents = function() {
});
});

window.addEventListener('resize', NexT.utils.initSidebarDimension);

window.addEventListener('hashchange', () => {
const tHash = location.hash;
if (tHash !== '' && !tHash.match(/%\S{2}/)) {
Expand Down
19 changes: 1 addition & 18 deletions source/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@ NexT.utils = {
}
// Scrolling to center active TOC element if TOC content is taller then viewport.
const tocElement = document.querySelector('.sidebar-panel-container');
if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
window.anime({
targets : tocElement,
duration : 200,
Expand All @@ -319,25 +320,7 @@ NexT.utils = {
});
},

/**
* Init Sidebar & TOC inner dimensions on all pages and for all schemes.
* Need for Sidebar/TOC inner scrolling if content taller then viewport.
*/
initSidebarDimension: function() {
const sidebarNav = document.querySelector('.sidebar-nav');
const sidebarb2t = document.querySelector('.sidebar-inner .back-to-top');
const sidebarNavHeight = sidebarNav ? sidebarNav.offsetHeight : 0;
const sidebarb2tHeight = sidebarb2t ? sidebarb2t.offsetHeight : 0;
const sidebarOffset = CONFIG.sidebar.offset || 12;
let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
// Initialize Sidebar & TOC Height.
const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
document.documentElement.style.setProperty('--sidebar-wrapper-height', sidebarWrapperHeight);
},

updateSidebarPosition: function() {
NexT.utils.initSidebarDimension();
if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
// Expand sidebar on post detail page by default, when post has a toc.
const hasTOC = document.querySelector('.post-toc');
Expand Down