diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index e6a347c..4db9f34 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -1815,6 +1815,25 @@ body.layout-modern .global-sidebar-right { grid-column: 1; } + /* Body-level left-sidebar hide — set by blocking inline script before first paint + to prevent the sidebar from flashing visible. Mirrors the .sidebar-hidden rules above + but activates from the body class so it works before the container element exists. */ + body.layout-modern.sidebar-left-hidden .item-layout-container { + grid-template-columns: minmax(0, 1fr) 400px; + } + + body.layout-modern.sidebar-left-hidden.sidebar-right-hidden .item-layout-container { + grid-template-columns: 1fr; + } + + body.layout-modern.sidebar-left-hidden .item-layout-container .item-sidebar-left { + display: none; + } + + body.layout-modern.sidebar-left-hidden .item-layout-container .item-main-content { + grid-column: 1; + } + body.layout-modern .item-sidebar-right, body.layout-modern .global-sidebar-right { grid-column: 3; @@ -5440,13 +5459,14 @@ span#tags:not(.tags-expanded) .tags-inner>span:nth-child(n+11) { } */ /* layout-modern: both sidebar AND comments visible — column is narrow, full 16:9 fits */ - body.layout-modern:not(.sidebar-right-hidden) .item-layout-container:not(.sidebar-hidden) .embed-responsive-16by9::before { + body.layout-modern:not(.sidebar-right-hidden):not(.sidebar-left-hidden) .item-layout-container:not(.sidebar-hidden) .embed-responsive-16by9::before { padding-top: 54.25%; } /* layout-modern: either sidebar OR comments hidden (or both) — column is wider, reduce */ body.layout-modern.sidebar-right-hidden .embed-responsive-16by9::before, - body.layout-modern .item-layout-container.sidebar-hidden .embed-responsive-16by9::before { + body.layout-modern .item-layout-container.sidebar-hidden .embed-responsive-16by9::before, + body.layout-modern.sidebar-left-hidden .embed-responsive-16by9::before { padding-top: 40.25%; } } diff --git a/public/s/js/comments.js b/public/s/js/comments.js index ebee305..6c08bbc 100644 --- a/public/s/js/comments.js +++ b/public/s/js/comments.js @@ -41,6 +41,9 @@ class CommentSystem { }; // Restore visibility state + // The body class 'sidebar-left-hidden' is already set by the blocking + // inline script in header.html (prevents flash). Here we sync the + // container-level class and display state to match. if (this.container) { const isHidden = localStorage.getItem('comments_hidden') === 'true'; // Force show if hash is present @@ -48,9 +51,13 @@ class CommentSystem { this.container.classList.remove('faded-out'); this.container.style.display = 'block'; localStorage.setItem('comments_hidden', 'false'); + document.body.classList.remove('sidebar-left-hidden'); + const layout = this.container.closest('.item-layout-container'); + if (layout) layout.classList.remove('sidebar-hidden'); } else if (isHidden) { this.container.classList.add('faded-out'); this.container.style.display = 'none'; + document.body.classList.add('sidebar-left-hidden'); const layout = this.container.closest('.item-layout-container'); if (layout) layout.classList.add('sidebar-hidden'); } @@ -3784,6 +3791,7 @@ class CommentSystem { if (isHidden) { // SHOW: expand grid first, then slide content in if (layout) layout.classList.remove('sidebar-hidden'); + document.body.classList.remove('sidebar-left-hidden'); this.container.style.display = ''; localStorage.setItem('comments_hidden', 'false'); void this.container.offsetWidth; // force reflow so transition fires @@ -3798,6 +3806,7 @@ class CommentSystem { if (!this.container.classList.contains('faded-out')) return; this.container.style.display = 'none'; if (layout) layout.classList.add('sidebar-hidden'); + document.body.classList.add('sidebar-left-hidden'); }, 300); } } diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 1486889..24fe95f 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -6618,6 +6618,7 @@ window.cancelAnimFrame = (function () { sb.style.setProperty('transition', 'none', 'important'); if (isHidden) { layout.classList.remove('sidebar-hidden'); + document.body.classList.remove('sidebar-left-hidden'); sb.style.display = ''; sb.querySelectorAll('.faded-out').forEach(el => el.classList.remove('faded-out')); const c = sb.querySelector('#comments-container'); @@ -6643,11 +6644,13 @@ window.cancelAnimFrame = (function () { if (shouldOpen) { sb.style.removeProperty('transform'); localStorage.setItem('comments_hidden', 'false'); + document.body.classList.remove('sidebar-left-hidden'); } else { // Hide BEFORE removing transform to prevent snap-back flash sb.style.display = 'none'; layout.classList.add('sidebar-hidden'); localStorage.setItem('comments_hidden', 'true'); + document.body.classList.add('sidebar-left-hidden'); sb.style.removeProperty('transform'); } requestAnimationFrame(() => syncLeftEdgeZone()); diff --git a/views/snippets/header.html b/views/snippets/header.html index 5059cb4..2c74a9b 100644 --- a/views/snippets/header.html +++ b/views/snippets/header.html @@ -78,7 +78,7 @@ - + @if(!private_society || session) @endif