← All changes | app/Agent/Skeleton.php +13 -7 3.1.5 → 3.2.2 View file →

		@@ -113,8 +113,11 @@
113	113	@media (min-width: <?php echo (int) self::DESKTOP; ?>px) {
114	114	/* useLayoutShift takes body out of flow, so core's admin-bar
115	115	html margin disappears. */
116	116	html.extendify-agent-skeleton { margin-top: 0 !important; }
	117	+ /* The mounted Agent drops the page scrollbars; classic ones would shift everything on mount. */
	118	+ html.extendify-agent-skeleton { scrollbar-width: none; }
	119	+ html.extendify-agent-skeleton::-webkit-scrollbar { display: none; }
117	120	/* tan(atan2()) is the only way to divide two lengths in CSS. */
118	121	.extendify-agent-skeleton .wp-site-blocks {
119	122	transform-origin: top left;
120	123	transform: translateX(<?php echo (int) self::WIDTH; ?>px) translateY(<?php echo (int) self::TOP; ?>px) scale(tan(atan2(calc(100vw - <?php echo (int) self::WIDTH; ?>px), 100vw)));
		@@ -128,20 +131,24 @@
128	131	display: block;
129	132	position: fixed;
130	133	top: <?php echo (int) self::FRAME; ?>px;
131	134	right: <?php echo (int) self::FRAME; ?>px;
132		- bottom: <?php echo (int) self::FRAME; ?>px;
	135	+ bottom: calc(<?php echo (int) self::FRAME; ?>px + var(--extendify-notification-bar-height, 0px));
133	136	left: <?php echo (int) self::WIDTH; ?>px;
134	137	border-radius: 1rem;
135	138	box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a, #e0e0e0 0 0 0 9999px;
	139	+ /* Unclipped, the 9999px shadow covers the notification bar. */
	140	+ clip-path: inset(-9999px -9999px -<?php echo (int) self::FRAME; ?>px -9999px);
136	141	pointer-events: none;
137	142	z-index: 100000;
138	143	}
139		- .extendify-agent-skeleton #extendify-agent-skeleton {
	144	+ /* Set by doReload (src/Agent/lib/reload.js) before a reload. */
	145	+ .extendify-agent-skeleton #extendify-agent-skeleton,
	146	+ .extendify-agent-reloading #extendify-agent-skeleton {
140	147	display: block;
141	148	position: fixed;
142	149	top: 0;
143		- bottom: 0;
	150	+ bottom: var(--extendify-notification-bar-height, 0px);
144	151	left: 0;
145	152	width: <?php echo (int) self::WIDTH; ?>px;
146	153	padding: <?php echo (int) self::FRAME; ?>px;
147	154	box-sizing: border-box;
		@@ -234,11 +241,10 @@
234	241	. 'var q=JSON.parse(localStorage.getItem(%3$s));'
235	242	. 'if(q&&q.state&&q.state.on){r.classList.add("extendify-quick-edit-on")}'
236	243	// Left on, it re-offsets the page when the panel closes and clears its styles.
237	244	. 'var t=Date.now();'
238		- . 'var d=function(){r.classList.remove("extendify-agent-skeleton");'
239		- . 'var a=document.getElementById("extendify-agent-skeleton");if(a){a.remove()}'
240		- . 'var b=document.getElementById("extendify-agent-skeleton-frame");if(b){b.remove()}};'
	245	+ // Only hides the rail; doReload shows it again before a reload.
	246	+ . 'var d=function(){r.classList.remove("extendify-agent-skeleton")};'
241	247	. 'var i=setInterval(function(){'
242	248	. 'if(!document.getElementById("extendify-agent-sidebar")){return}'
243	249	. 'clearInterval(i);setTimeout(d,Math.max(0,%4$d-(Date.now()-t)))},50);'
244	250	. 'setTimeout(function(){clearInterval(i);d()},10000)}catch(e){}',
		@@ -276,9 +282,9 @@
276	282	<div class="ext-skeleton-icon"></div>
277	283	</div>
278	284	</div>
279	285	<div class="relative z-50 flex h-full flex-col justify-between overflow-auto">
280		- <div class="relative grow overflow-y-auto overflow-x-hidden p-2 flex items-center justify-center">
	286	+ <div class="relative grow overflow-y-auto overflow-x-hidden p-2 flex items-center justify-center" style="scrollbar-gutter: stable">
281	287	<div class="ext-skeleton-bars"><span></span><span></span><span></span></div>
282	288	</div>
283	289	<div>
284	290	<div class="relative flex flex-col px-4 pb-2 pt-2.5 shadow-lg-flipped"></div>