Skip to content

E
El-Captain Sports Management
Commit 1a36b69c authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

Add per-section visual controls UI (background, animation, padding, mobile toggle) 

Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent d61babad
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 0 deletions
app/Livewire/Website/SectionManager.php
View file @ 1a36b69c
...@@ -27,6 +27,17 @@ class SectionManager extends Component ...@@ -27,6 +27,17 @@ class SectionManager extends Component
public string $sectionContentEn = ''; public string $sectionContentEn = '';
public array $sectionSettings = []; public array $sectionSettings = [];
// Section visual controls
public string $sectionBgType = 'inherit';
public string $sectionBgColor = '#ffffff';
public string $sectionBgGradientFrom = '#1a1a2e';
public string $sectionBgGradientTo = '#16213e';
public int $sectionBgGradientAngle = 180;
public int $sectionBgOverlayOpacity = 60;
public string $sectionAnimation = 'fade-up';
public string $sectionPaddingY = 'inherit';
public bool $sectionHiddenOnMobile = false;
public bool $isPublished = false; public bool $isPublished = false;
public function mount(): void public function mount(): void
...@@ -98,6 +109,15 @@ public function editSection(string $key): void ...@@ -98,6 +109,15 @@ public function editSection(string $key): void
$this->sectionContent = $section->content ?? ''; $this->sectionContent = $section->content ?? '';
$this->sectionContentEn = $section->content_en ?? ''; $this->sectionContentEn = $section->content_en ?? '';
$this->sectionSettings = $section->settings ?? []; $this->sectionSettings = $section->settings ?? [];
$this->sectionBgType = $section->bg_type ?? 'inherit';
$this->sectionBgColor = $section->bg_color ?? '#ffffff';
$this->sectionBgGradientFrom = $section->bg_gradient_from ?? '#1a1a2e';
$this->sectionBgGradientTo = $section->bg_gradient_to ?? '#16213e';
$this->sectionBgGradientAngle = $section->bg_gradient_angle ?? 180;
$this->sectionBgOverlayOpacity = $section->bg_overlay_opacity ?? 60;
$this->sectionAnimation = $section->animation ?? 'fade-up';
$this->sectionPaddingY = $section->padding_y ?? 'inherit';
$this->sectionHiddenOnMobile = $section->hidden_on_mobile ?? false;
} }
} }
...@@ -120,7 +140,20 @@ public function saveSection(): void ...@@ -120,7 +140,20 @@ public function saveSection(): void
'settings' => $this->sectionSettings, 'settings' => $this->sectionSettings,
]); ]);
$section->update([
'bg_type' => $this->sectionBgType,
'bg_color' => $this->sectionBgType === 'solid' ? $this->sectionBgColor : null,
'bg_gradient_from' => $this->sectionBgType === 'gradient' ? $this->sectionBgGradientFrom : null,
'bg_gradient_to' => $this->sectionBgType === 'gradient' ? $this->sectionBgGradientTo : null,
'bg_gradient_angle' => $this->sectionBgGradientAngle,
'bg_overlay_opacity' => $this->sectionBgOverlayOpacity,
'animation' => $this->sectionAnimation,
'padding_y' => $this->sectionPaddingY,
'hidden_on_mobile' => $this->sectionHiddenOnMobile,
]);
$this->loadSections(); $this->loadSections();
$this->editingSection = null;
session()->flash('success', __('تم حفظ القسم بنجاح')); session()->flash('success', __('تم حفظ القسم بنجاح'));
} }
} }
......
resources/views/livewire/website/section-manager.blade.php
View file @ 1a36b69c
...@@ -168,6 +168,102 @@ class="shrink-0 w-9 h-5 rounded-full transition-colors {{ $section['is_enabled'] ...@@ -168,6 +168,102 @@ class="shrink-0 w-9 h-5 rounded-full transition-colors {{ $section['is_enabled']
</div> </div>
@endif @endif
{{-- Visual Controls --}}
<div class="border-t border-gray-200 dark:border-gray-700 pt-5 mt-5">
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">الإعدادات المرئية</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
{{-- Background Type --}}
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">نوع الخلفية</label>
<select wire:model.live="sectionBgType" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<option value="inherit">افتراضي</option>
<option value="solid">لون واحد</option>
<option value="gradient">تدرج</option>
<option value="image">صورة</option>
<option value="video">فيديو</option>
</select>
</div>
{{-- Animation --}}
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">تأثير الدخول</label>
<select wire:model="sectionAnimation" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<option value="none">بدون</option>
<option value="fade-up">ظهور من الأسفل</option>
<option value="fade-down">ظهور من الأعلى</option>
<option value="fade-left">ظهور من اليسار</option>
<option value="fade-right">ظهور من اليمين</option>
<option value="zoom-in">تكبير</option>
<option value="flip">انقلاب</option>
<option value="bounce">ارتداد</option>
</select>
</div>
{{-- Padding --}}
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">المسافة الداخلية</label>
<select wire:model="sectionPaddingY" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
<option value="inherit">افتراضي</option>
<option value="none">بدون</option>
<option value="small">صغيرة</option>
<option value="medium">متوسطة</option>
<option value="large">كبيرة</option>
<option value="xlarge">كبيرة جدًا</option>
</select>
</div>
</div>
{{-- Background Color/Gradient Controls --}}
@if($sectionBgType === 'solid')
<div class="mt-3">
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">لون الخلفية</label>
<div class="flex items-center gap-2">
<input type="color" wire:model="sectionBgColor" class="w-8 h-8 rounded cursor-pointer border-0 p-0">
<input type="text" wire:model="sectionBgColor" dir="ltr" class="w-28 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
@endif
@if($sectionBgType === 'gradient')
<div class="mt-3 grid grid-cols-3 gap-3">
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">من</label>
<div class="flex items-center gap-1">
<input type="color" wire:model="sectionBgGradientFrom" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
<input type="text" wire:model="sectionBgGradientFrom" dir="ltr" class="flex-1 text-xs rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">إلى</label>
<div class="flex items-center gap-1">
<input type="color" wire:model="sectionBgGradientTo" class="w-7 h-7 rounded cursor-pointer border-0 p-0">
<input type="text" wire:model="sectionBgGradientTo" dir="ltr" class="flex-1 text-xs rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
<div>
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">الزاوية</label>
<input type="number" wire:model="sectionBgGradientAngle" min="0" max="360" step="45" class="w-full text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
</div>
</div>
@endif
@if(in_array($sectionBgType, ['image', 'video']))
<div class="mt-3">
<label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">شفافية الطبقة المظلمة ({{ $sectionBgOverlayOpacity }}%)</label>
<input type="range" wire:model.live="sectionBgOverlayOpacity" min="0" max="95" step="5" class="w-full">
</div>
@endif
{{-- Mobile Visibility --}}
<div class="mt-4">
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" wire:model="sectionHiddenOnMobile" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm text-gray-700 dark:text-gray-300">إخفاء على الجوال</span>
</label>
</div>
</div>
{{-- Actions --}} {{-- Actions --}}
<div class="flex items-center gap-3 pt-4 border-t border-gray-200 dark:border-gray-700"> <div class="flex items-center gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
<button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm transition-colors" <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm transition-colors"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment