fix(frontend): align article list metadata and pagination

assets/css/frontend/post-card.css

@@ -24,6 +24,33 @@
   transition: 0.2s;
 }
 
+.posts-item.flex,
+.posts-item .flex,
+.posts-mini .flex {
+  display: flex;
+}
+
+.posts-item .flex.xx,
+.posts-mini .flex.xx {
+  flex-direction: column;
+}
+
+.posts-item .flex.ac,
+.posts-mini .flex.ac {
+  align-items: center;
+}
+
+.posts-item .flex.jsb,
+.posts-mini .flex.jsb {
+  justify-content: space-between;
+}
+
+.posts-item .flex1,
+.posts-mini .flex1 {
+  flex: 1;
+  overflow: hidden;
+}
+
 .posts-item .post-graphic:not(.order1) {
   margin-right: 20px;
 }
@@ -157,10 +184,12 @@
 
 .posts-item .item-meta svg.icon,
 .posts-mini .item-meta svg.icon {
+  display: inline-block;
   width: 1em;
   height: 1em;
-  margin-right: 3px;
+  margin-right: 2px;
   fill: currentColor;
+  overflow: hidden;
   vertical-align: -0.15em;
 }
 

assets/js/core/ajax-list.js

@@ -358,8 +358,8 @@
     if (!link) return;
     // Ignore if inside a component that opts out.
     if (link.closest("[data-aksrt-ajax-list='off']")) return;
-    // Native pagination core may own .aksrt-pagination-ajax buttons.
+    // The canonical pagination engine exclusively owns these controls.
-    if (link.closest(".aksrt-pagination-ajax") && !link.classList.contains("ajax-next")) return;
+    if (link.closest("[data-aksrt-pagination], .aksrt-comment-pagination")) return;
 
     var href = link.getAttribute("href") || link.getAttribute("ajax-href") || link.getAttribute("data-aksrt-ajax-url");
     if (!href && !link.getAttribute("data-aksrt-ajax-url")) return;

inc/helpers/homepage/content.php

@@ -273,25 +273,11 @@ if (!function_exists('aksrt_homepage_render_pagination')) {
 		}
 
 		$contract = aksrt_homepage_get_latest_panel_contract();
-		?>
+		aksrt_render_pagination($query, [
-		<div class="ajax-pagination aksrt-pagination-ajax"
+			'query_context' => $contract['query_context'],
-			data-mode="<?php echo esc_attr($pagination_mode); ?>"
+			'render_config' => $contract['render_config_array'],
-			data-next-page="<?php echo esc_attr($current_page + 1); ?>"
+			'current_page'  => $current_page,
-			data-max-pages="<?php echo esc_attr($max_pages); ?>"
+		]);
-			data-query-context="<?php echo esc_attr($contract['query_context']); ?>"
-			data-query-vars="<?php echo esc_attr($contract['query_vars']); ?>"
-			data-render-config="<?php echo esc_attr($contract['render_config']); ?>"
-			data-page="<?php echo esc_attr($current_page); ?>"
-			data-tab="latest">
-			<a href="javascript:;" class="ajax-next aksrt-load-more-btn">
-				<?php esc_html_e('加载更多', 'aksrt'); ?>
-			</a>
-			<div class="aksrt-loading-indicator" style="display:none;" aria-hidden="true">
-				<i class="fas fa-spinner fa-spin"></i>
-				<span><?php esc_html_e('加载中...', 'aksrt'); ?></span>
-			</div>
-		</div>
-		<?php
 	}
 }
 

src/Core/ScriptsPart1c.php

@@ -227,9 +227,9 @@ trait ScriptsPart1c {
             wp_enqueue_script(
                 'aksrt-svg-icon',
                 $base_uri . '/assets/js/svg-icon.js',
-                [],
+                ['jquery'],
                 (string) filemtime($svg_icon_js),
-                false // load in <head> so icons are available early
+                true // load after <body> exists
             );
         }
 

tests/widget-system/post-visual-contract.test.cjs

@@ -183,6 +183,24 @@ test('post-card CSS owns the exact desktop and 767/640 responsive matrix', () =>
   assert.doesNotMatch(css, /\.aksrt-|post-card-cms|grid-cms/);
 });
 
+test('article metadata owns its flex and SVG contracts on every list route', () => {
+  const css = read('assets/css/frontend/post-card.css');
+  const scripts = read('src/Core/ScriptsPart1c.php');
+  const svgEnqueue = scripts.slice(
+    scripts.indexOf("'aksrt-svg-icon',"),
+    scripts.indexOf("'aksrt-svg-icon-helper',")
+  );
+
+  assert.match(svgEnqueue, /\['jquery'\]/);
+  assert.match(svgEnqueue, /true\s*\/\/ load after <body> exists/);
+  assert.match(css, /\.posts-item\.flex,[\s\S]*?\.posts-mini \.flex\s*\{[^}]*display:\s*flex;/);
+  assert.match(css, /\.posts-item \.flex\.xx,[\s\S]*?\.posts-mini \.flex\.xx\s*\{[^}]*flex-direction:\s*column;/);
+  assert.match(css, /\.posts-item \.flex\.ac,[\s\S]*?\.posts-mini \.flex\.ac\s*\{[^}]*align-items:\s*center;/);
+  assert.match(css, /\.posts-item \.flex\.jsb,[\s\S]*?\.posts-mini \.flex\.jsb\s*\{[^}]*justify-content:\s*space-between;/);
+  assert.match(css, /\.posts-item \.flex1,[\s\S]*?\.posts-mini \.flex1\s*\{[^}]*flex:\s*1;[^}]*overflow:\s*hidden;/);
+  assert.match(css, /\.posts-item \.item-meta svg\.icon,[\s\S]*?\.posts-mini \.item-meta svg\.icon\s*\{[^}]*display:\s*inline-block;[^}]*margin-right:\s*2px;/);
+});
+
 test('related posts, author page and widgets use their dedicated renderers', () => {
   const related = read('inc/helpers/aksrt-single-render.php');
   const relatedCard = read('inc/helpers/aksrt-single-components.php');
@@ -210,8 +228,10 @@ test('related posts, author page and widgets use their dedicated renderers', ()
 
 test('AJAX pagination can recover, caps auto loading and rehydrates appended media', () => {
   const php = read('inc/helpers/template-tags/pagination-permissions.php');
+  const homepage = read('inc/helpers/homepage/content.php');
   const admin = read('src/Admin/Admin.php');
   const js = read('assets/js/core/pagination.js');
+  const ajaxList = read('assets/js/core/ajax-list.js');
   const media = read('assets/js/core/misc.js');
 
   assert.match(php, /class="text-center theme-pagination ajax-pag"/);
@@ -226,6 +246,9 @@ test('AJAX pagination can recover, caps auto loading and rehydrates appended med
   assert.match(js, /successfulAutoLoads >= iasMax/);
   assert.match(js, /AksrtFrontend\.rehydrate\(target, "ajax"\)/);
   assert.match(js, /classList\.add\("lazyload"\)/);
+  assert.match(homepage, /aksrt_render_pagination\(\$query,[\s\S]*?'query_context'\s*=>\s*\$contract\['query_context'\]/);
+  assert.doesNotMatch(homepage, /href="javascript:;" class="ajax-next aksrt-load-more-btn"/);
+  assert.match(ajaxList, /if \(link\.closest\("\[data-aksrt-pagination\], \.aksrt-comment-pagination"\)\) return;/);
   assert.match(media, /thumb-dplayer-playing/);
   assert.match(media, /data-post-thumb-slider/);
   assert.match(media, /data-post-thumb-video/);