← All changes | views/template-library.php +4 -112 3.7.5 → 3.4.9 View file →

		@@ -1,120 +1,12 @@
1	1	<?php
2	2	defined('ABSPATH') or die( 'Access denied!' ); // Avoid direct file request
3		-
4		- // Passed by Admin::display() — true only for the template-library grid
5		- // route (`?path=elementor/packs` and friends). Every other route (clouds,
6		- // downloads, subscription, settings, item-detail, saved templates, ...)
7		- // falls back to $show_grid_skeleton = false below.
8		- $show_grid_skeleton = $show_grid_skeleton ?? true;
9	3	?>
10	4
11	5	<div class="templately-admin-body">
12	6	<div id="templatelyAdmin">
13		- <?php
14		- // Server-rendered full-page skeleton (no logo, except the generic-shell
15		- // branch below). Shown only until the React app mounts into
16		- // #templatelyAdmin and replaces it, so a refresh shows something
17		- // instantly instead of a blank gap. Top nav + header are shared chrome
18		- // that's correct for every route, so they always render; only the
19		- // content area below them is route-aware. Layout classes mirror the
20		- // real components (TopNavigation, NewHeader, Filter,
21		- // TemplateGridSkeleton); the grey placeholder blocks are sized with
22		- // inline styles so they render correctly against the already-compiled
23		- // admin CSS (no rebuild required).
24		- ?>
25		- <div class="templately-admin-skeleton fixed inset-0 h-screen w-screen flex flex-col bg-surface-primary overflow-hidden" aria-busy="true" aria-hidden="true">
26		-
27		- <?php // Top navigation — mirrors TopNavigation.js (h-9) ?>
28		- <div class="shrink-0 h-9 flex items-center justify-between px-4 md:px-6 lg:px-7 border-b border-solid border-border-secondary">
29		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:12rem;height:.85rem;"></span>
30		- <div class="flex items-center gap-4">
31		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6.5rem;height:.85rem;"></span>
32		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:4.5rem;height:.85rem;"></span>
33		- </div>
34		- </div>
35		-
36		- <?php // Header — mirrors NewHeader (h-11 md:h-18): logo + switcher | search | support + avatar | close ?>
37		- <div class="shrink-0 w-full flex items-center gap-x-2 h-11 md:h-18 border-b border-solid border-border-secondary">
38		- <div class="flex items-center gap-3 ps-4 md:ps-6 lg:ps-7 shrink-0">
39		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:2rem;height:2rem;"></span>
40		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:5rem;height:1rem;"></span>
41		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.5rem;width:7rem;height:2rem;"></span>
42		- </div>
43		- <div class="grow hidden md:!flex justify-center items-center lg:pe-[2.78%]">
44		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:100%;max-width:37.5rem;height:2.75rem;"></span>
45		- </div>
46		- <div class="ml-auto md:ml-0 flex items-center self-stretch">
47		- <div class="hidden md:!flex items-center h-full pe-3 gap-x-3">
48		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6rem;height:.85rem;"></span>
49		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:2rem;height:2rem;"></span>
50		- </div>
51		- <div class="h-11 md:h-18 w-11 md:w-18 shrink-0 flex items-center justify-center border-s border-solid border-border-secondary">
52		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:1.5rem;height:1.5rem;"></span>
53		- </div>
54		- </div>
55		- </div>
56		-
57		- <?php if ( $show_grid_skeleton ) : ?>
58		- <?php // Outlet content — filter toolbar + card grid ?>
59		- <div class="grow overflow-hidden flex flex-col">
60		-
61		- <?php // Filter toolbar — mirrors FilterBarSkeleton.js ?>
62		- <div class="shrink-0 w-full flex pb-4 md:pb-6 lg:pb-8">
63		- <div class="px-4 w-full md:px-6 lg:px-7 py-2 h-18 shrink-0 flex gap-x-4 md:gap-x-6 items-center">
64		- <span class="motion-safe:animate-pulse motion-reduce:animate-none shrink-0" style="display:block;background:#F1F1F7;border-radius:9999px;width:6rem;height:2.5rem;"></span>
65		- <div class="hidden md:!flex items-center gap-x-2 overflow-hidden">
66		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:4rem;height:.75rem;"></span>
67		- <?php foreach ( array( '7rem', '5rem', '6rem', '7rem', '6rem', '5rem' ) as $chip_w ) : ?>
68		- <span class="motion-safe:animate-pulse motion-reduce:animate-none shrink-0" style="display:block;background:#F1F1F7;border-radius:9999px;width:<?php echo esc_attr( $chip_w ); ?>;height:2.5rem;"></span>
69		- <?php endforeach; ?>
70		- </div>
71		- <div class="ms-auto flex items-center gap-3 md:gap-4 shrink-0">
72		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:3.75rem;height:2.5rem;"></span>
73		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:9999px;width:6.25rem;height:2.5rem;"></span>
74		- </div>
75		- </div>
76		- </div>
77		-
78		- <?php // Card grid — mirrors TemplateGridSkeleton.js ?>
79		- <div class="grow flex flex-col px-4 md:px-6 lg:px-7 pb-8 overflow-hidden">
80		- <div class="grid grid-cols-auto-80 gap-x-4 md:gap-x-6 gap-y-8">
81		- <?php for ( $i = 0; $i < 12; $i++ ) : ?>
82		- <div class="w-full flex flex-col gap-3.5 mb-0">
83		- <div class="w-full bg-surface-secondary p-3 rounded-sm border border-solid border-border-secondary">
84		- <div class="w-full motion-safe:animate-pulse motion-reduce:animate-none" style="background:#F1F1F7;aspect-ratio:100/114.65;"></div>
85		- </div>
86		- <div class="flex flex-col gap-3">
87		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:75%;height:.875rem;"></span>
88		- <span class="w-full flex items-center gap-2">
89		- <span class="motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:6rem;height:2rem;"></span>
90		- <span class="ms-auto motion-safe:animate-pulse motion-reduce:animate-none" style="display:block;background:#F1F1F7;border-radius:.375rem;width:3rem;height:1rem;"></span>
91		- </span>
92		- </div>
93		- </div>
94		- <?php endfor; ?>
95		- </div>
96		- </div>
97		-
98		- </div>
99		- <?php else : ?>
100		- <?php
101		- // Generic shell — every other route (clouds, downloads, favourites,
102		- // manage-sites, subscription, purchased-items, ai-sites, settings,
103		- // item-detail, saved templates). None of them look like the template
104		- // grid, and their real shapes vary too much to hand-port here, so this
105		- // just holds the space with the same centered animated logo `Loader`
106		- // shows by default once React takes over — no layout-shape guess to
107		- // get wrong or keep in sync.
108		- ?>
109		- <div class="grow flex items-center justify-center">
110		- <img
111		- src="<?php echo esc_url( templately()->assets->icon( 'logos/loading-logo.gif' ) ); ?>"
112		- alt="Templately"
113		- width="120"
114		- height="120"
115		- />
116		- </div>
117		- <?php endif; ?>
	7	+ <div class="templately-admin-preloader">
	8	+ <svg viewBox="0 0 512 512" width="50px" xmlns="http://www.w3.org/2000/svg"><circle cx="90.5" cy="454.8" fill="#ffb45a" r="57.2"></circle><circle cx="256" cy="454.8" fill="#ff7b8e" r="57.2"></circle><circle cx="421.5" cy="454.8" fill="#5ac0ff" r="57.2"></circle><path d="M356.5 94.5c-3.1 0-6.1.2-9.1.4C335 40.6 286.4 0 228.3 0c-15.3 0-29.9 2.8-43.4 8 0 15.3.1 32.9.2 40.4 15.6.1 45.8.2 59.1.2v57.8h-58.8v97.7h60.5c-1.7 4.3-4.3 10.7-5.4 13.2-11 26.5-38.3 41.3-66.6 36.2-26.9-4.9-46.9-27.8-48.4-55.9-.4-8.2-.2-16.5-.2-24.7V106h-20.7c-41.8 19.4-70.9 61.7-70.9 110.8 0 67.5 54.7 122.2 122.2 122.2h202c66.9-.7 120.8-55.1 120.8-122.2 0-67.5-54.7-122.3-122.2-122.3z" fill="#5633d1"></path></svg>
	9	+ <p>Loading...</p>
118	10	</div>
119	11	</div>
120		-</div>
	12	+</div>