Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(editor): support individual section background colors per section in editor and components

Browse Source
This commit is contained in:
Daniel S
2026-08-09 23:06:56 +02:00
parent 041cf20ca3
commit 6042c5ad23
4 changed files with 45 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/sections/BentoGrid.astro
View File

@@ -8,7 +8,8 @@ interface Props {
const { config } = Astro.props;
---
<section id="services" class={`py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative ${config.animation ? `anim-${config.animation}` : ''}`}>
<section id="services" class={`py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative ${config.animation ? `anim-${config.animation}` : ''}`} style={(config as any).bg_color ? `background-color: ${(config as any).bg_color};` : ''}>
<div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
<h2 class="text-3xl font-extrabold text-white tracking-tight uppercase">{config.sectionTitle}</h2>
<p class="text-slate-400 text-xs sm:text-sm">{config.sectionSubtitle}</p>

3
src/components/sections/ContactSection.astro
View File

@@ -9,7 +9,8 @@ interface Props {
const { contactConfig, smtpConfig } = Astro.props;
---
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto relative">
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto relative" style={(contactConfig as any).bg_color ? `background-color: ${(contactConfig as any).bg_color};` : ''}>
<div class="glass-panel rounded-3xl p-8 sm:p-12 relative overflow-hidden">
<div class="text-center space-y-3 mb-10">
<h2 class="text-3xl font-extrabold text-white tracking-tight uppercase">{contactConfig.title}</h2>

3
src/components/sections/HeroSection.astro
View File

@@ -19,10 +19,11 @@ const actionElements = elements.filter((el: UIComponent) => el.slotId === 'hero-
const customElements = elements.filter((el: UIComponent) => !el.slotId || el.slotId === 'hero-custom-slot');
---
<section class={`relative py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden ${config.animation ? `anim-${config.animation}` : ''}`}>
<section class={`relative py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden ${config.animation ? `anim-${config.animation}` : ''}`} style={config.bg_color ? `background-color: ${config.bg_color};` : ''}>
<span class="aurora-glow aurora-glow-sky w-[500px] h-[500px] -top-32 -left-32"></span>
<span class="aurora-glow aurora-glow-indigo w-[400px] h-[400px] bottom-0 right-0"></span>
<div class="relative z-10 text-center max-w-4xl mx-auto space-y-8">
<!-- Slot 1: Badge Slot -->

49
src/pages/admin/editor.astro
View File

@@ -295,21 +295,50 @@ const previewUrl = `${targetPage?.slug || '/'}?preview=draft`;
if (fieldsContainer) {
fieldsContainer.innerHTML = '';
Object.entries(currentSettings).forEach(([key, value]) => {
const allKeys = new Set(Object.keys(currentSettings));
if (!allKeys.has('bg_color')) {
allKeys.add('bg_color');
}
allKeys.forEach((key) => {
const value = currentSettings[key] || '';
const fieldWrapper = document.createElement('div');
fieldWrapper.innerHTML = `
<label class="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">${key}</label>
<input
type="text"
name="${key}"
value="${value}"
class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-500"
/>
`;
if (key === 'bg_color') {
fieldWrapper.innerHTML = `
<label class="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">🎨 Sektions-Hintergrundfarbe (HEX/RGBA)</label>
<div class="flex gap-2">
<input
type="color"
value="${value && value.startsWith('#') ? value : '#0f172a'}"
class="h-9 w-12 rounded bg-slate-800 border border-slate-700 cursor-pointer p-0.5"
onchange="this.nextElementSibling.value = this.value"
/>
<input
type="text"
name="bg_color"
value="${value}"
placeholder="z.B. #0F172A oder transparent"
class="flex-1 bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-500"
/>
</div>
`;
} else {
fieldWrapper.innerHTML = `
<label class="block text-xs font-semibold text-slate-400 mb-1 uppercase tracking-wider">${key}</label>
<input
type="text"
name="${key}"
value="${typeof value === 'object' ? JSON.stringify(value) : value}"
class="w-full bg-slate-800 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:border-sky-500"
/>
`;
}
fieldsContainer.appendChild(fieldWrapper);
});
}
editModal?.showModal();
});
});