From db361fcc3f3ef8015bb98d80f489b8c998926e70 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 14 Jul 2026 23:38:50 +0800 Subject: [PATCH] fix(frontend): unbreak single post layout cascade Disable the global 2-col .content-layout grid on single pages (it was tiling breadcrumb/article/author/related/comments left-right), add the missing Zibll utility bridge used by the author/meta bar, and replace nonstandard // tags in the single surface. --- assets/css/frontend/single-post.css | 1 + .../frontend/single-post/author-actions.css | 16 ++- assets/css/frontend/single-post/shell.css | 20 +++ assets/css/frontend/zibll-utilities.css | 116 ++++++++++++++++++ inc/helpers/aksrt-single-components.php | 16 +-- inc/helpers/aksrt-single.php | 10 +- templates/parts/single-author-bar.php | 6 +- 7 files changed, 169 insertions(+), 16 deletions(-) create mode 100644 assets/css/frontend/zibll-utilities.css diff --git a/assets/css/frontend/single-post.css b/assets/css/frontend/single-post.css index 2cc92f87..dd1a951f 100644 --- a/assets/css/frontend/single-post.css +++ b/assets/css/frontend/single-post.css @@ -1,3 +1,4 @@ +@import url("zibll-utilities.css"); @import url("single-post/shell.css"); @import url("single-post/content.css"); @import url("single-post/code-blocks.css"); diff --git a/assets/css/frontend/single-post/author-actions.css b/assets/css/frontend/single-post/author-actions.css index dbef9bf5..5ee72529 100644 --- a/assets/css/frontend/single-post/author-actions.css +++ b/assets/css/frontend/single-post/author-actions.css @@ -98,6 +98,12 @@ } /* ===== Action Buttons Card ===== */ +.post-actions-wrap { + position: relative; + text-align: center; + margin-bottom: 16px; +} + .post-actions-card, .post-actions { position: relative; @@ -105,6 +111,10 @@ margin-bottom: 16px; } +.post-actions-wrap > .post-actions { + margin-bottom: 0; +} + .post-actions-card__hint { font-size: 13px; color: var(--color-ink-4, var(--color-ink-4)); @@ -482,9 +492,13 @@ html.dark .post-drop-meta__item:hover { gap: 0; } -.single-metabox .post-metas item { +.single-metabox .post-metas item, +.single-metabox .post-metas .item { margin: 0 6px; font-size: 13px; + display: inline-flex; + align-items: center; + gap: 4px; } .single-metabox .post-drop-meta { diff --git a/assets/css/frontend/single-post/shell.css b/assets/css/frontend/single-post/shell.css index a0464033..c5b2499d 100644 --- a/assets/css/frontend/single-post/shell.css +++ b/assets/css/frontend/single-post/shell.css @@ -9,6 +9,26 @@ body.single .content-wrap { width: 100%; } +/* + * Global layout.css turns .content-layout into a 2-col grid that expects + * .content-layout__primary + .content-layout__aside children. + * Single posts put breadcrumb / article / author / related / comments as + * direct children and float the sidebar outside — so the grid must be + * disabled here or those sections tile left/right and look "broken". + */ +body.single main.container .content-layout { + display: block; + grid-template-columns: none; + gap: 0; + width: 100%; + min-width: 0; +} + +body.single main.container .content-layout > * { + min-width: 0; + max-width: 100%; +} + /* Clear floats after main dual-column shell */ body.single main.container::after { content: ""; diff --git a/assets/css/frontend/zibll-utilities.css b/assets/css/frontend/zibll-utilities.css new file mode 100644 index 00000000..c913eff9 --- /dev/null +++ b/assets/css/frontend/zibll-utilities.css @@ -0,0 +1,116 @@ +/** + * Zibll utility class bridge + * + * Single / author / meta markup still uses Zibll utility class names + * (.flex / .ac / .jsb / .abs-right / .muted-2-color / …). Without these + * helpers the author bar and meta row collapse into a vertical mess. + * + * Keep this file tiny and pure utility — domain styles stay in single-post/*. + */ + +/* Layout helpers */ +.relative { position: relative; } +.flex { display: flex; } +.flex.ac, +.ac { align-items: center; } +.flex.jc, +.jc { justify-content: center; } +.flex.jsb, +.jsb { justify-content: space-between; } +.flex.at, +.at { align-items: flex-start; } +.flex.ae, +.ae { align-items: flex-end; } +.flex0 { flex: 0 0 auto; } +.flex1 { flex: 1 1 auto; min-width: 0; } +.flex.column { flex-direction: column; } +.flex.wrap { flex-wrap: wrap; } + +.clearfix::before, +.clearfix::after { + content: ""; + display: table; +} + +.clearfix::after { + clear: both; +} + +.abs-right { + position: absolute; + right: 0; + top: 0; +} + +.abs-center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +/* Typography / color helpers */ +.muted-color { color: var(--muted-color, var(--color-ink-3)); } +.muted-2-color { color: var(--muted-2-color, var(--color-ink-4)); } +.muted-3-color { color: var(--muted-3-color, #b1b1b1); } +.muted-4-color { color: var(--muted-4-color, #d2d2d2); } +.text-center { text-align: center; } +.em09 { font-size: 0.9em; } +.em12 { font-size: 1.2em; } +.px12-sm { font-size: 12px; } +.ml3 { margin-left: 3px; } +.ml6 { margin-left: 6px; } +.ml10 { margin-left: 10px; } +.mr3 { margin-right: 3px; } +.mr6 { margin-right: 6px; } +.mt10 { margin-top: 10px; } +.mt20 { margin-top: 20px; } +.mb10 { margin-bottom: 10px; } +.mb20 { margin-bottom: 20px; } + +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; +} + +.text-ellipsis-2 { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + word-break: break-word; +} + +/* Surfaces used by single article shell */ +.main-bg { + background-color: var(--main-bg-color, var(--surface-1)); +} + +.separator { + position: relative; + letter-spacing: 0.08em; +} + +/* Compact inline separators inside meta/time rows */ +.icon-circle + .icon-circle::before { + content: "·"; + display: inline-block; + margin: 0 0.45em; + opacity: 0.55; +} + +/* Author name row (was a non-standard element) */ +.article-avatar name, +.article-avatar .name, +.user-name { + display: inline-flex; + align-items: center; + gap: 4px; + min-width: 0; + max-width: 100%; +} + +.pull-right { float: right; } +.pull-left { float: left; } diff --git a/inc/helpers/aksrt-single-components.php b/inc/helpers/aksrt-single-components.php index 86f1d2a0..7c5c21ad 100644 --- a/inc/helpers/aksrt-single-components.php +++ b/inc/helpers/aksrt-single-components.php @@ -73,13 +73,13 @@ if (!function_exists('aksrt_get_posts_meta_items_html')) : ? 'javascript:(typeof scrollTopTo===\'function\'?scrollTopTo(\'#comments\'):void(0));' : get_comments_link($post_id); $count = (int) get_comments_number($post_id); - $html .= '' - . ' ' . esc_html((string) $count) . ''; + $html .= '' + . ' ' . esc_html((string) $count) . ''; } $views = function_exists('aksrt_get_post_views') ? (int) aksrt_get_post_views($post_id) : 0; $views_label = function_exists('aksrt_format_number') ? aksrt_format_number($views) : number_format_i18n($views); - $html .= ' ' . esc_html((string) $views_label) . ''; + $html .= ' ' . esc_html((string) $views_label) . ''; $like_on = true; if (class_exists('AKSRT_Settings')) { @@ -88,7 +88,7 @@ if (!function_exists('aksrt_get_posts_meta_items_html')) : } if ($like_on && $post->post_type === 'post') { $likes = function_exists('aksrt_get_post_likes') ? (int) aksrt_get_post_likes($post_id) : 0; - $html .= ' ' . esc_html((string) $likes) . ''; + $html .= ' ' . esc_html((string) $likes) . ''; } return $html; @@ -154,8 +154,8 @@ if (!function_exists('aksrt_get_post_status_badge')) : if (!isset($map[$status])) { return ''; } - return '' - . esc_html($map[$status]['label']) . ''; + return '' + . esc_html($map[$status]['label']) . ''; } endif; @@ -504,8 +504,8 @@ if (!function_exists('aksrt_render_related_graphic_card')) : $html .= '' . esc_attr($title) . ''; $html .= '
'; $html .= '
' . esc_html($title) . '
'; - $html .= '
' . esc_html($time) . ''; - $html .= ' ' . esc_html((string) $views_label) . '
'; + $html .= '
' . esc_html($time) . ''; + $html .= ' ' . esc_html((string) $views_label) . '
'; $html .= '
'; return $html; } diff --git a/inc/helpers/aksrt-single.php b/inc/helpers/aksrt-single.php index e534b8d5..9dce3782 100644 --- a/inc/helpers/aksrt-single.php +++ b/inc/helpers/aksrt-single.php @@ -363,7 +363,8 @@ if (!function_exists('aksrt_single_render_actions')) : $is_favorited = !empty($ctx['is_favorited']); ?>
-
+
+
-
+
- + - + +