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