Przeglądaj źródła

fix(themes): restore sidebar slide animation at narrow viewports (#8747)

The `transition: width 200ms linear` rule on `.aside` in the narrow
`@media` block stopped firing after #8201 added inline `display: none`
toggling. Browsers don't interpolate width when an element flips to or
from `display: none`, so width snaps on open and the close transition
gets cut off before any frame renders.

Replace the inline `display` toggle with an `is-hidden` class, applied
only at wide viewports. At narrow viewports the existing `width: 0;
position: fixed; overflow: hidden` already hides the element, so
`display: none` is redundant there and was the only thing blocking the
transition.

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn 2 tygodni temu
rodzic
commit
3c61c84abf

+ 3 - 2
p/scripts/main.js

@@ -932,14 +932,15 @@ function toggle_aside_click(manual = true) {
 	}
 
 	const active = toggle_aside.classList.contains('active');
+	const isNarrow = window.matchMedia('(max-width: 840px)').matches;
 	if (active) {
 		toggle_aside.classList.remove('active');
 		aside.classList.remove('visible');
-		aside.style.display = 'none';
+		aside.classList.toggle('is-hidden', !isNarrow);
 	} else {
 		toggle_aside.classList.add('active');
 		aside.classList.add('visible');
-		aside.style.display = '';
+		aside.classList.remove('is-hidden');
 	}
 
 	if (manual && ['normal', 'reader'].includes(context.current_view)) {

+ 4 - 0
p/themes/base-theme/frss.css

@@ -1332,6 +1332,10 @@ input[type="search"] {
 	vertical-align: top;
 }
 
+.aside.is-hidden {
+	display: none;
+}
+
 .aside + .close-aside {
 	display: none;
 }

+ 4 - 0
p/themes/base-theme/frss.rtl.css

@@ -1332,6 +1332,10 @@ input[type="search"] {
 	vertical-align: top;
 }
 
+.aside.is-hidden {
+	display: none;
+}
+
 .aside + .close-aside {
 	display: none;
 }