diff --git a/assets/css/frontend/base.css b/assets/css/frontend/base.css index 2db88dd4..fc59b9e0 100644 --- a/assets/css/frontend/base.css +++ b/assets/css/frontend/base.css @@ -37,15 +37,6 @@ body { background-color: var(--surface-page); } -/* Shared horizontal icon-card contract. - * Header components and widget areas use different layout wrappers, but the - * card itself must retain the compact Zibll proportions in every context. */ -.icon-cover-card.aksrt-icon-cover-card { - padding: 10px; - font-size: 16px; - line-height: 1.6; -} - /* zibll compat: global link composite transition */ a[href] { transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s; @@ -100,8 +91,7 @@ main.container, /* Header multifunc icon cards need horizontal gutter (zibll content rows). * Global .container padding is 0 for dual-column float math. */ -.header-slider-card.container, -.header-components-card.container { +.header-slider-card.container { padding-left: 15px; padding-right: 15px; box-sizing: border-box; diff --git a/assets/css/frontend/header-cards.css b/assets/css/frontend/header-cards.css deleted file mode 100644 index ea17c149..00000000 --- a/assets/css/frontend/header-cards.css +++ /dev/null @@ -1,143 +0,0 @@ -/* ============================================================ - * Header icon cards — unified geometry (zibll 1:1) - * - * The top multi-function component ("顶部多功能组件") renders its icon - * cards through one path: aksrt_header_slide() → - * aksrt_icon_cover_card() (see inc/helpers/homepage/header-components.php - * and inc/helpers/aksrt-icon-cards.php). This file is the single source of - * truth for their size/layout, loaded after Zibll main.min.css on every - * page so cards stay identical across home / archive / single / search. - * - * DOM: .header-slider-card.container - * > (.zib-widget.padding-10 | div) - * > .flex.jse.flex-row.gutters-5.flex-col-sm-2 - * > (.flex1 | .relative-h) - * > [.main-color] .icon-cover-card.aksrt-icon-cover-card.flex.ac.(zib-widget|padding-10) - * > .icon-cover-icon.badg.cir.(c-*|jb-*)[.radius4] (the badge) - * > .icon-cover-desc.ml10.flex1.px12-sm - * ============================================================ */ - -/* --- Equal-width cells + zibll gutters (both header wrapper aliases) --- */ -.header-slider-card .flex, -.header-components-card .flex { - display: flex; -} -.header-slider-card .flex.jse, -.header-components-card .flex.jse, -.header-slider-card .jse, -.header-components-card .jse { - justify-content: space-evenly; -} -.header-slider-card .flex-row, -.header-components-card .flex-row { - flex-direction: row; -} -.header-slider-card .flex.ac, -.header-components-card .flex.ac, -.header-slider-card .ac, -.header-components-card .ac { - align-items: center; -} - -.header-slider-card .gutters-5, -.header-components-card .gutters-5, -.header-slider-card .flex.jse.flex-row, -.header-components-card .flex.jse.flex-row { - margin: -5px; -} -.header-slider-card .gutters-5 > *, -.header-components-card .gutters-5 > *, -.header-slider-card .flex.jse.flex-row > *, -.header-components-card .flex.jse.flex-row > * { - padding: 5px !important; - box-sizing: border-box; -} - -/* Higher-specificity scope selector wins over the single-post-only - * zibll-utilities.css `.flex1{flex:1 1 auto}` so every card is equal-width: - * zibll uses `flex:1; overflow:hidden`. */ -.header-slider-card .flex1, -.header-components-card .flex1, -.header-slider-card .flex .flex1, -.header-components-card .flex .flex1 { - flex: 1 1 0; - overflow: hidden; - min-width: 0; -} -.header-slider-card .relative-h, -.header-components-card .relative-h { - position: relative; - height: 100%; -} - -.header-slider-card, -.header-components-card { - position: relative; - margin-top: -40px; - z-index: 1; - width: 100%; -} - -.header-slider-card .zib-widget, -.header-components-card .zib-widget { - margin-bottom: 0; -} - -/* --- Card box: compact zibll proportions in every context --- */ -.icon-cover-card.aksrt-icon-cover-card { - padding: 10px; - font-size: 16px; - line-height: 1.6; - height: 100%; - box-sizing: border-box; -} - -/* --- Icon badge: fixed size so a custom (non-FA) icon cannot stretch it --- */ -.icon-cover-card .icon-cover-icon { - display: flex; - align-items: center; - justify-content: center; - width: 45px; - height: 45px; - min-width: 45px; - font-size: 25px; - flex: 0 0 auto; - box-sizing: border-box; -} -.icon-cover-card .icon-cover-icon > img, -.icon-cover-card .icon-cover-icon > svg { - width: 1.6em; - height: 1.6em; - max-width: 1.6em; - max-height: 1.6em; - object-fit: contain; -} - -/* --- Text column: equal truncation --- */ -.icon-cover-card .icon-cover-desc { - min-width: 0; -} - -/* --- Mobile: two columns + zibll padding overrides --- */ -@media (max-width: 767px) { - .header-slider-card, - .header-components-card { - margin-top: -35px; - } - .header-slider-card .flex.flex-row.flex-col-sm-2, - .header-components-card .flex.flex-row.flex-col-sm-2 { - flex-wrap: wrap; - } - .header-slider-card .flex.flex-row.flex-col-sm-2 > *, - .header-components-card .flex.flex-row.flex-col-sm-2 > * { - flex-basis: 50%; - } - .header-slider-card .icon-cover-card.zib-widget, - .header-components-card .icon-cover-card.zib-widget { - padding: 10px; - } - .header-slider-card .icon-cover-card.padding-10, - .header-components-card .icon-cover-card.padding-10 { - padding: 2px; - } -} \ No newline at end of file diff --git a/inc/helpers/aksrt-icon-cards.php b/inc/helpers/aksrt-icon-cards.php index e4be12b1..179be9a7 100644 --- a/inc/helpers/aksrt-icon-cards.php +++ b/inc/helpers/aksrt-icon-cards.php @@ -282,7 +282,7 @@ if (!function_exists('aksrt_icon_cover_card')) : } // Keep every horizontal icon card on the same compact visual contract, // regardless of the page-specific wrapper that renders it. - $html .= '
'; + $html .= '
'; $html .= $icon; $html .= $text !== '' ? '
' . $text . '
' : ''; $html .= '
'; diff --git a/inc/helpers/homepage/header-components.php b/inc/helpers/homepage/header-components.php index 12875c7f..d5144e3b 100644 --- a/inc/helpers/homepage/header-components.php +++ b/inc/helpers/homepage/header-components.php @@ -415,27 +415,24 @@ if (!function_exists('aksrt_header_slide')) { $card_count = 0; if (aksrt_header_slider_device_is_visible($args['header_slider_card_s'] ?? [])) { $card_options = wp_parse_args((array) ($args['header_slider_card_option'] ?? []), [ - 'show_widget_bg' => false, 'icon_radius4' => false, 'cards' => [], + 'icon_radius4' => false, 'cards' => [], ]); $items = ''; foreach ((array) $card_options['cards'] as $card) { if (!is_array($card) || (empty($card['icon']) && empty($card['customize_icon']) && empty($card['custom_icon']) && empty($card['icon_image']))) { continue; } - $card['class'] = !empty($card_options['show_widget_bg']) ? 'padding-10' : 'zib-widget'; $card['icon_class'] = trim((string) ($card['icon_class'] ?? '') . (!empty($card_options['icon_radius4']) ? ' radius4' : '')); $inner = function_exists('aksrt_icon_cover_card') ? aksrt_icon_cover_card($card) : ''; if ($inner === '') { continue; } - $items .= !empty($card_options['show_widget_bg']) ? '
' : '
'; - $items .= $inner . '
'; + $items .= '
' . $inner . '
'; $card_count++; } if ($items !== '') { $cards_html = '
' - . (!empty($card_options['show_widget_bg']) ? '
' : '
') - . '
' . $items . '
'; + . '
' . $items . '
'; } } diff --git a/src/Admin/PageConfigMetaBox.php b/src/Admin/PageConfigMetaBox.php index d818284d..c67e8769 100644 --- a/src/Admin/PageConfigMetaBox.php +++ b/src/Admin/PageConfigMetaBox.php @@ -262,7 +262,7 @@ final class PageConfigMetaBox { ], ]; } - return ['show_widget_bg' => !empty($value['show_widget_bg']), 'icon_radius4' => !empty($value['icon_radius4']), 'cards' => $cards]; + return ['icon_radius4' => !empty($value['icon_radius4']), 'cards' => $cards]; } /** @return array */ @@ -293,7 +293,7 @@ final class PageConfigMetaBox { /** @return array */ private static function card_defaults(): array { - return ['show_widget_bg' => false, 'icon_radius4' => false, 'cards' => [ + return ['icon_radius4' => false, 'cards' => [ ['icon' => 'zibsvg-vip_1', 'customize_icon' => '', 'icon_class' => 'c-yellow', 'link' => [], 'title' => '图标卡片', 'desc' => '这是一个图标卡片示例'], ['icon' => 'zibsvg-vip_2', 'customize_icon' => '', 'icon_class' => 'c-blue-2', 'link' => [], 'title' => '原创作品', 'desc' => '这是一个图标卡片示例'], ['icon' => 'zibsvg-hot', 'customize_icon' => '', 'icon_class' => 'jb-pink', 'link' => [], 'title' => '灵感来源NEW', 'desc' => '这是一个图标卡片示例'], diff --git a/src/Admin/Schema/SchemaPageDisplay.php b/src/Admin/Schema/SchemaPageDisplay.php index 7dfd088e..f30852c3 100644 --- a/src/Admin/Schema/SchemaPageDisplay.php +++ b/src/Admin/Schema/SchemaPageDisplay.php @@ -183,7 +183,7 @@ class SchemaPageDisplay { } private static function card_fields(): array { - return [self::field('show_widget_bg', '模块背景', 'switcher', false), self::field('icon_radius4', '方形图标', 'switcher', false), self::field('cards', '添加卡片', 'group', [], ['button_title' => '添加内容', 'fields' => [self::field('title', '文案标题', 'textarea', '', ['sanitize_type' => 'html']), self::field('desc', '文案简介', 'textarea', '', ['sanitize_type' => 'html']), self::field('icon', '选择图标', 'icon', 'fa fa-magic'), self::field('customize_icon', '自定义图标', 'textarea', '', ['sanitize_type' => 'html']), self::field('icon_class', '图标颜色', 'palette', 'c-yellow', ['options' => self::zib_palette(true)]), self::field('link', '跳转链接', 'link', [])]])]; + return [self::field('icon_radius4', '方形图标', 'switcher', false), self::field('cards', '添加卡片', 'group', [], ['button_title' => '添加内容', 'fields' => [self::field('title', '文案标题', 'textarea', '', ['sanitize_type' => 'html']), self::field('desc', '文案简介', 'textarea', '', ['sanitize_type' => 'html']), self::field('icon', '选择图标', 'icon', 'fa fa-magic'), self::field('customize_icon', '自定义图标', 'textarea', '', ['sanitize_type' => 'html']), self::field('icon_class', '图标颜色', 'palette', 'c-yellow', ['options' => self::zib_palette(true)]), self::field('link', '跳转链接', 'link', [])]])]; } private static function orderby_fields(): array { return [self::field('lists', '显示排序方式', 'select', ['modified', 'views', 'like', 'comment_count'], ['multiple' => true, 'sortable' => true, 'options' => self::post_order_options(false)]), self::field('dropdown', '更多排序方式', 'switcher', false)]; } @@ -192,7 +192,7 @@ class SchemaPageDisplay { private static function header_slider_defaults(): array { $img = self::asset('assets/vendor/zibll/img/'); return [['background' => $img . 'slider-bg.jpg', 'link' => ['url' => 'https://www.zibll.com/', 'target' => '_blank'], 'text' => ['title' => '', 'desc' => ''], 'text_align' => 'left-bottom', 'text_parallax' => 30, 'text_size_m' => 20, 'text_size_pc' => 30], ['background' => $img . 'user_t.jpg', 'link' => ['url' => 'https://www.zibll.com/', 'target' => '_blank'], 'text' => ['title' => '', 'desc' => ''], 'text_align' => 'left-bottom', 'text_parallax' => 30, 'text_size_m' => 20, 'text_size_pc' => 30]]; } private static function slider_options_defaults(): array { return ['direction' => 'horizontal', 'loop' => true, 'button' => true, 'pagination' => true, 'effect' => 'slide', 'scale_height' => false, 'auto_height' => false, 'pc_height' => 550, 'm_height' => 280, 'spacebetween' => 0, 'speed' => 0, 'autoplay' => true, 'interval' => 6]; } private static function search_defaults(): array { return ['show_keywords' => true, 'popular_limit' => 6, 'show_input_cat' => false, 'in_cat' => '', 'more_cats' => '', 'show_type' => false, 'in_type' => 'post', 'before_html' => '
更优雅的Wordpress主题
' . "\n" . '
这是导航栏幻灯片多功能组件，可在后台进行配置
', 'after_html' => '']; } - private static function card_defaults(): array { return ['show_widget_bg' => false, 'icon_radius4' => false, 'cards' => [['icon' => 'zibsvg-vip_1', 'customize_icon' => '', 'icon_class' => 'c-yellow', 'link' => [], 'title' => '图标卡片', 'desc' => '这是一个图标卡片示例'], ['icon' => 'zibsvg-vip_2', 'customize_icon' => '', 'icon_class' => 'c-blue-2', 'link' => [], 'title' => '原创作品', 'desc' => '这是一个图标卡片示例'], ['icon' => 'zibsvg-hot', 'customize_icon' => '', 'icon_class' => 'jb-pink', 'link' => [], 'title' => '灵感来源NEW', 'desc' => '这是一个图标卡片示例'], ['icon' => 'fa fa-ioxhost', 'customize_icon' => '', 'icon_class' => 'jb-cyan', 'link' => [], 'title' => '系统工具 GO ', 'desc' => '这是一个图标卡片示例']]]; } + private static function card_defaults(): array { return ['icon_radius4' => false, 'cards' => [['icon' => 'zibsvg-vip_1', 'customize_icon' => '', 'icon_class' => 'c-yellow', 'link' => [], 'title' => '图标卡片', 'desc' => '这是一个图标卡片示例'], ['icon' => 'zibsvg-vip_2', 'customize_icon' => '', 'icon_class' => 'c-blue-2', 'link' => [], 'title' => '原创作品', 'desc' => '这是一个图标卡片示例'], ['icon' => 'zibsvg-hot', 'customize_icon' => '', 'icon_class' => 'jb-pink', 'link' => [], 'title' => '灵感来源NEW', 'desc' => '这是一个图标卡片示例'], ['icon' => 'fa fa-ioxhost', 'customize_icon' => '', 'icon_class' => 'jb-cyan', 'link' => [], 'title' => '系统工具 GO ', 'desc' => '这是一个图标卡片示例']]]; } private static function field(string $key, string $label, string $type, $default = null, array $extra = []): array { return array_merge(['key' => $key, 'label' => $label, 'type' => $type, 'default' => $default], $extra); } private static function notice(string $content): array { return ['key' => '_notice_' . md5($content), 'type' => 'notice', 'content' => $content, 'tone' => 'warning']; } diff --git a/src/Core/ScriptsPart1b.php b/src/Core/ScriptsPart1b.php index 9a00e90b..fb02041e 100644 --- a/src/Core/ScriptsPart1b.php +++ b/src/Core/ScriptsPart1b.php @@ -106,7 +106,6 @@ trait ScriptsPart1b { // AKSRT domain styles load after Zibll main.css. The old aggregate is // intentionally not used because it contains the removed navigation CSS. $enqueue_module('base'); - $enqueue_module('header-cards'); $enqueue_module('card-primitives'); $enqueue_module('overlay-primitives'); $enqueue_module('layout'); diff --git a/src/Settings/DisplayPageGroups.php b/src/Settings/DisplayPageGroups.php index 1601de50..b05f2bea 100644 --- a/src/Settings/DisplayPageGroups.php +++ b/src/Settings/DisplayPageGroups.php @@ -132,7 +132,6 @@ trait DisplayPageGroups { /** @return array */ private static function header_slider_card_defaults(): array { return [ - 'show_widget_bg' => false, 'icon_radius4' => false, 'cards' => [ ['icon' => 'zibsvg-vip_1', 'customize_icon' => '', 'icon_class' => 'c-yellow', 'link' => [], 'title' => '图标卡片', 'desc' => '这是一个图标卡片示例'], diff --git a/tests/widget-system/icon-card-contract.test.cjs b/tests/widget-system/icon-card-contract.test.cjs index 821974e2..a1e744ec 100644 --- a/tests/widget-system/icon-card-contract.test.cjs +++ b/tests/widget-system/icon-card-contract.test.cjs @@ -14,25 +14,24 @@ test('icon card renderers keep vertical and horizontal Zibll DOM contracts separ const header = read('inc/helpers/homepage/header-components.php'); assert.match(helper, /