diff --git a/.gitignore b/.gitignore index 502ff67a..1e827085 100644 --- a/.gitignore +++ b/.gitignore @@ -30,6 +30,8 @@ !/tests/widget-system/user-badges-contract.test.cjs !/tests/widget-system/user-features-contract.test.cjs !/tests/widget-system/zibll-modern-widgets-contract.test.cjs +!/tests/widget-system/user-card-runtime-contract.test.cjs +!/tests/widget-system/user-card-runtime-harness.php !/tests/widget-system/notification-preferences-contract.test.cjs !/tests/widget-system/message-center-contract.test.cjs !/tests/widget-system/message-center-url-harness.php diff --git a/assets/widgets/frontend.css b/assets/widgets/frontend.css index 853d146f..a731ca35 100644 --- a/assets/widgets/frontend.css +++ b/assets/widgets/frontend.css @@ -69,8 +69,20 @@ .zib-widget.padding-10 { padding:10px; } .zib-widget.nobottom.notop { padding-top:0; padding-bottom:0; } -.user-card__auth-btns { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; } -.user-card__auth-btns .but { margin: 0; } +.zib-widget-wrap { padding:var(--aksrt-widget-space-top,0) var(--aksrt-widget-space-right,0) var(--aksrt-widget-space-bottom,0) var(--aksrt-widget-space-left,0); background-color:var(--aksrt-widget-bg-light,transparent); background-image:var(--aksrt-widget-bg-image-light,none); background-position:center; background-size:cover; } +.dark-theme .zib-widget-wrap, [data-theme="dark"] .zib-widget-wrap { background-color:var(--aksrt-widget-bg-dark,var(--aksrt-widget-bg-light,transparent)); background-image:var(--aksrt-widget-bg-image-dark,var(--aksrt-widget-bg-image-light,none)); } +.zib-widget-wrap .widget-container { position:relative; } +.aksrt-user-widget-wrap > .widget-container > div > .widget-content { padding:0; } +.aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline:3px solid var(--focus-color,#ff5473) !important; outline-offset:3px; } +.dark-theme .aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible, [data-theme="dark"] .aksrt-user-widget-wrap :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color:#ffd166 !important; } + +.user-card.zib-widget { padding:0; overflow:hidden; } +.user-card.widget .user-info > .text-center > p:not(.muted-color) { white-space:nowrap; } +.user-card.widget .user-info > .text-center > p:not(.muted-color) .but { white-space:nowrap; } + +@media (max-width:767px) { + .zib-widget-wrap { padding:var(--aksrt-widget-space-m-top,0) var(--aksrt-widget-space-m-right,0) var(--aksrt-widget-space-m-bottom,0) var(--aksrt-widget-space-m-left,0); } +} .aksrt-widget-video { position: relative; overflow: hidden; border-radius: var(--aksrt-widget-radius); background: #000; aspect-ratio: 16 / 9; } .aksrt-widget-video--4-3 { aspect-ratio: 4 / 3; }.aksrt-widget-video--1-1 { aspect-ratio: 1; }.aksrt-widget-video--auto { aspect-ratio: auto; } diff --git a/src/WidgetSystem/FrontendRenderer.php b/src/WidgetSystem/FrontendRenderer.php index 3334bd4d..4168aabd 100644 --- a/src/WidgetSystem/FrontendRenderer.php +++ b/src/WidgetSystem/FrontendRenderer.php @@ -23,6 +23,10 @@ final class FrontendRenderer { } AssetManager::enqueue_for($definition); + if (in_array($definition->slug(), ['user_card', 'author_card'], true)) { + self::render_user_widget($definition, $instance, $widget, $content); + return; + } if (in_array($definition->slug(), ['post_pay', 'tab_posts', 'slider', 'slider_media_combo', 'icon_cards', 'icon_cover_cards', 'buttons', 'notice'], true)) { echo (string) ($args['before_widget'] ?? ''); if ($definition->slug() !== 'post_pay') echo self::reference_title($instance); @@ -31,7 +35,7 @@ final class FrontendRenderer { return; } $classes = ['aksrt-widget', 'aksrt-panel-wrap', 'aksrt-widget--' . $definition->slug(), 'aksrt-widget--' . $definition->size()]; - if ($definition->size() === 'sidebar' && !in_array($definition->slug(), ['user_card', 'author_card'], true)) { + if ($definition->size() === 'sidebar') { $classes[] = 'aksrt-panel'; } $device_class = WidgetVisibility::device_class($instance); @@ -64,6 +68,33 @@ final class FrontendRenderer { echo (string) ($args['after_widget'] ?? ''); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } + private static function render_user_widget(WidgetDefinition $definition, array $instance, SchemaWidget $widget, string $content): void { + $classes = ['zib-widget-wrap', 'aksrt-user-widget-wrap', 'aksrt-' . str_replace('_', '-', $definition->slug()) . '-wrap']; + $device_class = WidgetVisibility::device_class($instance); + if ($device_class !== '') { + $classes[] = $device_class; + } + if (!empty($instance['sidebar_affix'])) { + $classes[] = 'aksrt-widget--affix'; + } + + $content_classes = ['widget-content']; + if (!empty($instance['animation_in'])) { + $content_classes[] = 'aksrt-widget--animate'; + $content_classes[] = 'aksrt-widget--animate-' . sanitize_html_class((string) $instance['animation_in']); + } + if (!empty($instance['animation_repeat'])) { + $content_classes[] = 'aksrt-widget--animate-repeat'; + } + + $style = self::style($instance); + echo '