dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Exclude SPA pages from Appearance Entry Page dropdown, remove hardcoded Hero paddings, fix Accordion dropdown clipping

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-28 01:10:49 +07:00
parent a62037d993
commit 6f23ccdda4
8 changed files with 126 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
admin-spa/src/components/ui/accordion.tsx
View File

@@ -44,7 +44,7 @@ const AccordionContent = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
className="text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>

3
admin-spa/src/routes/Appearance/General.tsx
View File

@@ -16,6 +16,7 @@ interface WordPressPage {
id: number;
title: string;
slug: string;
is_woonoow_page?: boolean;
}
export default function AppearanceGeneral() {
@@ -199,7 +200,7 @@ export default function AppearanceGeneral() {
</SelectTrigger>
<SelectContent>
<SelectItem value="0">— None —</SelectItem>
{availablePages.map((page) => (
{availablePages.filter(page => !page.is_woonoow_page).map((page) => (
<SelectItem key={page.id} value={page.id.toString()}>
{page.title}
</SelectItem>

47
admin-spa/src/routes/Appearance/Pages/components/InspectorPanel.tsx
View File

@@ -598,13 +598,14 @@ export function InspectorPanel({
</MediaUploader>
</div>
<div className="space-y-3 pt-2">
<div className="space-y-1 pt-2">
<div className="flex items-center justify-between">
<Label className="text-xs">{__('Overlay Opacity')}</Label>
<span className="text-xs text-gray-500">{selectedSection.styles?.backgroundOverlay ?? 0}%</span>
</div>
<Slider
value={[selectedSection.styles?.backgroundOverlay ?? 0]}
min={0}
max={100}
step={5}
onValueChange={(vals) => onSectionStylesChange({ backgroundOverlay: vals[0] })}
@@ -613,7 +614,49 @@ export function InspectorPanel({
</>
)}
<div className="space-y-2 pt-2">
{/* Spacing Controls */}
<div className="grid grid-cols-2 gap-2 pt-2 border-t mt-4">
<div className="space-y-1">
<Label className="text-xs text-gray-500">{__('Padding Top')}</Label>
<input
type="text"
placeholder="e.g. 40px, 4rem"
className="w-full h-8 text-xs rounded border px-2"
value={selectedSection.styles?.paddingTop || ''}
onChange={(e) => onSectionStylesChange({ paddingTop: e.target.value })}
/>
</div>
<div className="space-y-1">
<Label className="text-xs text-gray-500">{__('Padding Bottom')}</Label>
<input
type="text"
placeholder="e.g. 40px, 4rem"
className="w-full h-8 text-xs rounded border px-2"
value={selectedSection.styles?.paddingBottom || ''}
onChange={(e) => onSectionStylesChange({ paddingBottom: e.target.value })}
/>
</div>
</div>
<div className="space-y-2 pt-2 border-t mt-4">
<Label className="text-xs">{__('Content Width')}</Label>
<RadioGroup
value={selectedSection.styles?.contentWidth || 'full'}
onValueChange={(val: any) => onSectionStylesChange({ contentWidth: val })}
className="flex gap-4"
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="full" id="width-full" />
<Label htmlFor="width-full" className="text-sm font-normal cursor-pointer">{__('Full Width')}</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="contained" id="width-contained" />
<Label htmlFor="width-contained" className="text-sm font-normal cursor-pointer">{__('Contained')}</Label>
</div>
</RadioGroup>
</div>
<div className="space-y-2 pt-2 border-t mt-4">
<Label className="text-xs">{__('Section Height')}</Label>
<Select
value={selectedSection.styles?.heightPreset || 'default'}

19
admin-spa/src/routes/Appearance/Pages/components/section-renderers/HeroRenderer.tsx
View File

@@ -66,24 +66,12 @@ export function HeroRenderer({ section, className }: HeroRendererProps) {
// Helper for image styles
const imageStyle = section.elementStyles?.['image'] || {};
const getBackgroundStyle = () => {
if (scheme.bg === 'wn-gradient-bg') {
return { backgroundImage: 'linear-gradient(135deg, var(--wn-gradient-start, #9333ea), var(--wn-gradient-end, #3b82f6))' };
}
if (scheme.bg === 'wn-primary-bg') {
return { backgroundColor: 'var(--wn-primary, #1a1a1a)' };
}
if (scheme.bg === 'wn-secondary-bg') {
return { backgroundColor: 'var(--wn-secondary, #6b7280)' };
}
return undefined;
};
if (layout === 'hero-left-image' || layout === 'hero-right-image') {
return (
<div
className={cn('py-12 px-4 md:py-20 md:px-8', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
style={getBackgroundStyle()}
className={cn('w-full', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
>
<div className={cn(
'max-w-6xl mx-auto flex items-center gap-12',
@@ -158,8 +146,7 @@ export function HeroRenderer({ section, className }: HeroRendererProps) {
// Default centered layout
return (
<div
className={cn('py-12 px-4 md:py-20 md:px-8 text-center', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
style={getBackgroundStyle()}
className={cn('w-full text-center', !scheme.bg.startsWith('wn-') && scheme.bg, scheme.text, className)}
>
<div className="max-w-4xl mx-auto space-y-6">
<h1

25
customer-spa/src/lib/sectionStyles.ts
View File

@@ -1,15 +1,18 @@
export interface SectionStyleResult {
classNames?: string;
style?: React.CSSProperties;
hasOverlay?: boolean;
overlayOpacity?: number;
backgroundImage?: string;
}
/**
* Shared utility to compute background styles from section styles.
* Used by all customer SPA section components.
*/
export function getSectionBackground(styles?: Record<string, any>): {
style: React.CSSProperties;
hasOverlay: boolean;
overlayOpacity: number;
backgroundImage?: string;
} {
export function getSectionBackground(styles?: Record<string, any>): SectionStyleResult {
if (!styles) {
return { style: {}, hasOverlay: false, overlayOpacity: 0 };
return { style: {}, hasOverlay: false, overlayStyle: undefined };
}
const bgType = styles.backgroundType || 'solid';
@@ -18,6 +21,14 @@ export function getSectionBackground(styles?: Record<string, any>): {
let overlayOpacity = 0;
let backgroundImage: string | undefined;
if (styles.paddingTop) {
style.paddingTop = styles.paddingTop;
}
if (styles.paddingBottom) {
style.paddingBottom = styles.paddingBottom;
}
switch (bgType) {
case 'gradient':
style.background = `linear-gradient(${styles.gradientAngle ?? 135}deg, ${styles.gradientFrom || '#9333ea'}, ${styles.gradientTo || '#3b82f6'})`;

2
customer-spa/src/pages/DynamicPage/sections/ContentSection.tsx
View File

@@ -168,7 +168,7 @@ export function ContentSection({ section }: ContentSectionProps) {
const scheme = COLOR_SCHEMES[section.colorScheme || 'default'];
// Default to 'default' width if not specified
const layout = section.layoutVariant || 'default';
const widthClass = WIDTH_CLASSES[layout] || WIDTH_CLASSES.default;
const widthClass = section.styles?.contentWidth === 'full' ? WIDTH_CLASSES.full : (WIDTH_CLASSES[layout] || WIDTH_CLASSES.default);
const heightPreset = section.styles?.heightPreset || 'default';

21
customer-spa/src/pages/DynamicPage/sections/HeroSection.tsx
View File

@@ -61,16 +61,7 @@ export function HeroSection({
const imageStyle = elementStyles?.['image'] || {};
// Determine height classes
const heightPreset = styles?.heightPreset || 'default';
const heightMap: Record<string, string> = {
'default': 'py-12 md:py-24', // Original Default
'small': 'py-8 md:py-16',
'medium': 'py-16 md:py-32',
'large': 'py-24 md:py-48',
'screen': 'min-h-screen py-20 flex items-center',
};
const heightClasses = heightMap[heightPreset] || 'py-12 md:py-24';
// Helper to get background style for dynamic schemes
const getBackgroundStyle = (): React.CSSProperties | undefined => {
@@ -96,17 +87,13 @@ export function HeroSection({
className={cn(
'wn-section wn-hero',
`wn-hero--${layout}`,
`wn-scheme--${colorScheme}`,
'relative overflow-hidden',
isDynamicScheme && 'text-white',
colorScheme === 'muted' && !hasCustomBackground && 'bg-muted',
)}
style={getBackgroundStyle()}
style={sectionBg.style}
>
<div className={cn(
'mx-auto px-4',
heightClasses,
styles?.contentWidth === 'full' ? 'w-full' : 'container',
'mx-auto px-4 z-10 relative flex w-full',
styles?.contentWidth === 'full' ? 'w-full' : 'container max-w-7xl',
{
'flex flex-col md:flex-row items-center gap-8': isImageLeft || isImageRight,
'text-center': isCentered,

71
includes/Frontend/PageSSR.php
View File

@@ -167,12 +167,18 @@ class PageSSR
$subtitle_style = self::generate_style_attr($element_styles['subtitle'] ?? []);
$cta_style = self::generate_style_attr($element_styles['cta_text'] ?? []); // Button
// Image (if not background)
// Content Wrapper
$content_width = $section_styles['contentWidth'] ?? 'contained';
$wrapper_class = $content_width === 'full' ? 'w-full' : 'container max-w-7xl mx-auto px-4';
$html .= "<div class=\"wn-hero__content-wrapper {$wrapper_class}\" style=\"position: relative; z-index: 10;\">";
// Image (if not background) - Inside Content Wrapper for Proper Alignment
if ($image && !$bg_image && $layout !== 'default') {
$html .= "<img src=\"{$image}\" alt=\"{$title}\" class=\"wn-hero__image\" />";
}
$html .= '<div class="wn-hero__content" style="position: relative; z-index: 10;">';
$html .= '<div class="wn-hero__content">';
if ($title) {
$html .= "<h1 class=\"wn-hero__title\" {$title_style}>{$title}</h1>";
}
@@ -183,6 +189,7 @@ class PageSSR
$html .= "<a href=\"{$cta_url}\" class=\"wn-hero__cta\" {$cta_style}>{$cta_text}</a>";
}
$html .= '</div>';
$html .= '</div>';
$html .= '</section>';
return $html;
@@ -206,8 +213,10 @@ class PageSSR
$title_style = self::generate_style_attr($element_styles['title'] ?? []);
$text_style = self::generate_style_attr($element_styles['text'] ?? ($element_styles['content'] ?? []));
$contentWidth = $options['contentWidth'] ?? 'contained';
// Wrapper Classes
$wrapper_class = "wn-max-w-7xl wn-mx-auto wn-px-4";
$wrapper_class = $contentWidth === 'full' ? "wn-w-full" : "wn-max-w-7xl wn-mx-auto wn-px-4";
$grid_class = "wn-mx-auto";
if ($has_image && in_array($image_pos, ['left', 'right', 'image-left', 'image-right'])) {
@@ -275,8 +284,8 @@ class PageSSR
// Section Styles (Background)
$bg_type = $section_styles['backgroundType'] ?? 'solid';
$bg_color = $section_styles['backgroundColor'] ?? '';
$padding = $section_styles['paddingTop'] ?? '';
$height_preset = $section_styles['heightPreset'] ?? '';
$pt = $section_styles['paddingTop'] ?? '';
$pb = $section_styles['paddingBottom'] ?? '';
$css = "";
if ($bg_type === 'gradient') {
@@ -289,22 +298,34 @@ class PageSSR
}
// Height Logic
$preset_padding = '';
if ($height_preset === 'screen') {
$css .= "min-height: 100vh; display: flex; align-items: center;";
$padding = '5rem'; // Default padding for screen to avoid edge collision
$preset_padding = '5rem'; // Default padding for screen to avoid edge collision
} elseif ($height_preset === 'small') {
$padding = '2rem';
$preset_padding = '2rem';
} elseif ($height_preset === 'large') {
$padding = '8rem';
$preset_padding = '8rem';
} elseif ($height_preset === 'medium') {
$padding = '4rem';
$preset_padding = '4rem';
}
if ($padding) $css .= "padding:{$padding} 0;";
if ($pt) {
$css .= "padding-top:{$pt};";
} elseif ($preset_padding) {
$css .= "padding-top:{$preset_padding};";
}
if ($pb) {
$css .= "padding-bottom:{$pb};";
} elseif ($preset_padding) {
$css .= "padding-bottom:{$preset_padding};";
}
$style_attr = $css ? "style=\"{$css}\"" : "";
$inner_html = self::render_universal_row($props, 'left', $color_scheme, $element_styles);
$contentWidth = $section_styles['contentWidth'] ?? 'contained';
$inner_html = self::render_universal_row($props, 'left', $color_scheme, $element_styles, ['contentWidth' => $contentWidth]);
return "<section id=\"{$id}\" class=\"wn-section wn-content wn-scheme--{$color_scheme}\" {$style_attr}>{$inner_html}</section>";
}
@@ -316,8 +337,8 @@ class PageSSR
{
$bg_type = $section_styles['backgroundType'] ?? 'solid';
$bg_color = $section_styles['backgroundColor'] ?? '';
$padding = $section_styles['paddingTop'] ?? '';
$height_preset = $section_styles['heightPreset'] ?? '';
$pt = $section_styles['paddingTop'] ?? '';
$pb = $section_styles['paddingBottom'] ?? '';
$css = "";
if ($bg_type === 'gradient') {
@@ -330,21 +351,33 @@ class PageSSR
}
// Height Logic
$preset_padding = '';
if ($height_preset === 'screen') {
$css .= "min-height: 100vh; display: flex; align-items: center;";
$padding = '5rem';
$preset_padding = '5rem';
} elseif ($height_preset === 'small') {
$padding = '2rem';
$preset_padding = '2rem';
} elseif ($height_preset === 'large') {
$padding = '8rem';
$preset_padding = '8rem';
} elseif ($height_preset === 'medium') {
$padding = '4rem';
$preset_padding = '4rem';
}
if ($padding) $css .= "padding:{$padding} 0;";
if ($pt) {
$css .= "padding-top:{$pt};";
} elseif ($preset_padding) {
$css .= "padding-top:{$preset_padding};";
}
if ($pb) {
$css .= "padding-bottom:{$pb};";
} elseif ($preset_padding) {
$css .= "padding-bottom:{$preset_padding};";
}
$style_attr = $css ? "style=\"{$css}\"" : "";
$inner_html = self::render_universal_row($props, $layout, $color_scheme, $element_styles);
$contentWidth = $section_styles['contentWidth'] ?? 'contained';
$inner_html = self::render_universal_row($props, $layout, $color_scheme, $element_styles, ['contentWidth' => $contentWidth]);
return "<section id=\"{$id}\" class=\"wn-section wn-image-text wn-scheme--{$color_scheme}\" {$style_attr}>{$inner_html}</section>";
}