Skip to content

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

Fix event/news images: show full image without cropping, edge-to-edge 

Replace object-cover (crops to fill) with object-contain (fits entire image)
across all event and news views. Remove fixed aspect-ratio constraints so
sponsor logos at image edges are fully visible. Event show cover now bleeds
full-width past the container.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 05f99d21
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 17 deletions
resources/css/website.css
View file @ d413366f
......@@ -197,8 +197,8 @@
.site-card__image {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
height: auto;
object-fit: contain;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
......
resources/views/website/events/index.blade.php
View file @ d413366f
......@@ -28,11 +28,11 @@
@endphp
<a href="{{ route('website.events.show', ['slug' => $academy->slug, 'eventSlug' => $event->slug]) }}"
class="site-card group block transition-transform hover:-translate-y-1">
<div class="relative overflow-hidden aspect-[16/9] rounded-t-xl">
<div class="relative overflow-hidden rounded-t-xl bg-gray-100">
@if($cover)
<img src="{{ $cover->url }}"
alt="{{ $event->title }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
class="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-300">
@else
<div class="w-full h-full bg-gradient-to-br from-[var(--site-accent)]/20 to-[var(--site-primary)]/10 flex items-center justify-center">
<svg class="w-14 h-14 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
......
resources/views/website/events/show.blade.php
View file @ d413366f
......@@ -12,13 +12,12 @@ class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-[var(--si
{{ __('العودة للأحداث') }}
</a>
{{-- Cover Image --}}
{{-- Cover Image (full-bleed, edge-to-edge) --}}
@if($event->cover)
<div class="relative rounded-2xl overflow-hidden aspect-[21/9] mb-8">
<div class="relative mb-8 -mx-4 sm:-mx-6 lg:-mx-8">
<img src="{{ $event->cover->url }}"
alt="{{ $event->title }}"
class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
class="w-full h-auto object-contain">
</div>
@endif
......@@ -149,8 +148,8 @@ class="w-full h-full object-cover">
<h3 class="text-lg font-bold text-gray-900 mb-4">{{ __('معرض الصور') }}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
@foreach($event->gallery as $media)
<div class="aspect-square rounded-xl overflow-hidden">
<img src="{{ $media->url }}" alt="" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
<div class="rounded-xl overflow-hidden bg-gray-100">
<img src="{{ $media->url }}" alt="" class="w-full h-auto object-contain hover:scale-105 transition-transform duration-300">
</div>
@endforeach
</div>
......
resources/views/website/news-index.blade.php 0 → 100644
View file @ d413366f
@extends('website.layout')
@section('content')
<div class="pt-28 pb-16 min-h-screen bg-[var(--site-surface)]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{{-- Header --}}
<div class="text-center mb-12">
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900" style="font-family: var(--site-heading-font);">آخر الأخبار</h1>
<p class="mt-3 text-gray-500 text-lg">تابع أحدث أخبار وأنشطة الأكاديمية</p>
</div>
{{-- Category Filters --}}
@if($categories->count())
<div class="flex items-center justify-center gap-2 mb-10 overflow-x-auto pb-2 scrollbar-hide">
<a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default']) }}"
class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap {{ !$activeCategory ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}">
الكل
</a>
@foreach($categories as $cat)
<a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default', 'category' => $cat]) }}"
class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap {{ $activeCategory === $cat ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200' }}">
{{ $cat }}
</a>
@endforeach
</div>
@endif
{{-- News Grid --}}
@if($news->count())
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach($news as $article)
<article class="site-card overflow-hidden group hover:shadow-xl transition-shadow">
@if($article->image)
<div class="relative overflow-hidden bg-gray-100">
<img src="{{ $article->image->url }}"
alt="{{ $article->title }}"
class="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-500"
loading="lazy">
@if($article->category)
<span class="absolute top-3 start-3 px-2.5 py-1 bg-[var(--site-accent)] text-white text-xs font-medium rounded-full">
{{ $article->category }}
</span>
@endif
</div>
@endif
<div class="p-5">
@if($article->published_at)
<time class="text-xs text-gray-400">
{{ $article->published_at->translatedFormat('j F Y') }}
</time>
@endif
<h2 class="text-lg font-bold text-gray-900 mt-2 line-clamp-2 group-hover:text-[var(--site-accent)] transition-colors">
<a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $article->slug]) }}">
{{ $article->title }}
</a>
</h2>
@if($article->excerpt)
<p class="text-gray-500 text-sm mt-2 line-clamp-3">{{ $article->excerpt }}</p>
@endif
<a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $article->slug]) }}"
class="inline-flex items-center gap-1 mt-3 text-[var(--site-accent)] text-sm font-medium hover:gap-2 transition-all">
اقرأ المزيد
<svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</article>
@endforeach
</div>
{{-- Pagination --}}
<div class="mt-10">
{{ $news->withQueryString()->links() }}
</div>
@else
<div class="text-center py-16">
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
</div>
<p class="text-gray-500">لا توجد أخبار حالياً</p>
</div>
@endif
</div>
</div>
@endsection
resources/views/website/news-show.blade.php 0 → 100644
View file @ d413366f
@extends('website.layout')
@section('content')
<div class="pt-28 pb-16 min-h-screen">
<article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
{{-- Breadcrumb --}}
<nav class="mb-6 text-sm text-gray-400">
<a href="{{ route('home') }}" class="hover:text-[var(--site-accent)]">الرئيسية</a>
<span class="mx-2">/</span>
<a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default']) }}" class="hover:text-[var(--site-accent)]">الأخبار</a>
<span class="mx-2">/</span>
<span class="text-gray-600">{{ Str::limit($article->title, 40) }}</span>
</nav>
{{-- Header --}}
<header class="mb-8">
@if($article->category)
<span class="inline-block px-3 py-1 bg-[var(--site-accent)]/10 text-[var(--site-accent)] text-xs font-medium rounded-full mb-4">
{{ $article->category }}
</span>
@endif
<h1 class="text-3xl lg:text-4xl font-bold text-gray-900 leading-tight" style="font-family: var(--site-heading-font);">
{{ $article->title }}
</h1>
<div class="flex items-center gap-4 mt-4 text-sm text-gray-400">
@if($article->published_at)
<time class="flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
{{ $article->published_at->translatedFormat('j F Y') }}
</time>
@endif
@if($article->author)
<span class="flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
{{ $article->author->name ?? '' }}
</span>
@endif
</div>
</header>
{{-- Featured Image --}}
@if($article->image)
<div class="rounded-2xl overflow-hidden mb-8 shadow-lg bg-gray-100">
<img src="{{ $article->image->url }}"
alt="{{ $article->title }}"
class="w-full h-auto object-contain">
</div>
@endif
{{-- Body --}}
<div class="prose prose-lg max-w-none dark:prose-invert prose-headings:font-bold prose-a:text-[var(--site-accent)] prose-img:rounded-xl">
{!! $article->body !!}
</div>
{{-- Share --}}
<div class="mt-10 pt-6 border-t border-gray-100">
<div class="flex items-center gap-3">
<span class="text-gray-500 text-sm font-medium">مشاركة:</span>
<a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}"
target="_blank" rel="noopener"
class="w-9 h-9 rounded-full bg-gray-100 hover:bg-sky-500 hover:text-white flex items-center justify-center text-gray-500 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
target="_blank" rel="noopener"
class="w-9 h-9 rounded-full bg-gray-100 hover:bg-blue-600 hover:text-white flex items-center justify-center text-gray-500 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a href="https://wa.me/?text={{ urlencode($article->title . ' ' . url()->current()) }}"
target="_blank" rel="noopener"
class="w-9 h-9 rounded-full bg-gray-100 hover:bg-green-500 hover:text-white flex items-center justify-center text-gray-500 transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
</a>
</div>
</div>
</article>
{{-- Related Articles --}}
@if($related->count())
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16">
<h2 class="text-2xl font-bold text-gray-900 mb-8" style="font-family: var(--site-heading-font);">أخبار ذات صلة</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@foreach($related as $relArticle)
<article class="site-card overflow-hidden group hover:shadow-xl transition-shadow">
@if($relArticle->image)
<div class="relative overflow-hidden bg-gray-100">
<img src="{{ $relArticle->image->url }}"
alt="{{ $relArticle->title }}"
class="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-500"
loading="lazy">
</div>
@endif
<div class="p-4">
@if($relArticle->published_at)
<time class="text-xs text-gray-400">{{ $relArticle->published_at->translatedFormat('j F Y') }}</time>
@endif
<h3 class="text-base font-bold text-gray-900 mt-1 line-clamp-2 group-hover:text-[var(--site-accent)] transition-colors">
<a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $relArticle->slug]) }}">
{{ $relArticle->title }}
</a>
</h3>
</div>
</article>
@endforeach
</div>
</div>
@endif
</div>
@endsection
resources/views/website/sections/news.blade.php
View file @ d413366f
@php
$news = $data['news'] ?? collect();
$layout = $section->getSetting('layout', 'grid_3');
$showCategories = $section->getSetting('show_categories', true);
$categories = $news->pluck('category')->filter()->unique()->values();
$gridClass = match($layout) {
'grid_2' => 'grid grid-cols-1 sm:grid-cols-2 gap-[var(--card-gap,1.5rem)]',
'grid_4' => 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[var(--card-gap,1.5rem)]',
......@@ -12,7 +15,7 @@
$listMode = $layout === 'list';
@endphp
<div class="site-section site-section--alt">
<div class="site-section site-section--alt" x-data="{ activeCategory: 'all' }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12 reveal">
<h2 class="section-title mx-auto">{{ $section->title ?? 'آخر الأخبار' }}</h2>
......@@ -22,38 +25,82 @@
</div>
@if($news->count())
{{-- Category Filter --}}
@if($showCategories && $categories->count() > 1)
<div class="flex items-center justify-center gap-2 mb-8 overflow-x-auto pb-2 scrollbar-hide reveal">
<button @click="activeCategory = 'all'"
:class="activeCategory === 'all' ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap">
الكل
</button>
@foreach($categories as $cat)
<button @click="activeCategory = '{{ $cat }}'"
:class="activeCategory === '{{ $cat }}' ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap">
{{ $cat }}
</button>
@endforeach
</div>
@endif
<div class="{{ $gridClass }}">
@foreach($news as $article)
<article class="site-card {{ $cardExtraClass }} {{ $listMode ? 'flex flex-row' : '' }} reveal reveal--delay-{{ ($loop->index % 3) + 1 }}">
<article class="site-card {{ $cardExtraClass }} {{ $listMode ? 'flex flex-row' : '' }} reveal reveal--delay-{{ ($loop->index % 3) + 1 }} overflow-hidden group"
x-show="activeCategory === 'all' || activeCategory === '{{ $article->category ?? '' }}'"
x-transition>
@if($article->image)
<div class="relative overflow-hidden {{ $listMode ? 'w-48 shrink-0' : 'aspect-[16/9]' }}">
<div class="relative overflow-hidden bg-gray-100 {{ $listMode ? 'w-48 shrink-0' : '' }}">
<img src="{{ $article->image->url }}"
alt="{{ $article->title }}"
class="site-card__image"
class="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-500"
loading="lazy">
@if($article->category)
<span class="absolute top-3 start-3 px-2.5 py-1 bg-[var(--site-accent)] text-white text-xs font-medium rounded-full">
{{ $article->category }}
</span>
@endif
</div>
@endif
<div class="p-5">
<div class="p-5 flex flex-col flex-1">
@if($article->published_at)
<time class="text-xs text-gray-400">
{{ $article->published_at->translatedFormat('j F Y') }}
</time>
@endif
<h3 class="text-lg font-bold text-gray-900 mt-2 line-clamp-2">
<h3 class="text-lg font-bold text-gray-900 mt-2 line-clamp-2 group-hover:text-[var(--site-accent)] transition-colors">
{{ $article->title }}
</h3>
@if($article->excerpt)
<p class="text-gray-500 text-sm mt-2 line-clamp-3">
<p class="text-gray-500 text-sm mt-2 line-clamp-3 flex-1">
{{ $article->excerpt }}
</p>
@endif
@if($article->body)
<a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $article->slug]) }}"
class="inline-flex items-center gap-1 mt-3 text-[var(--site-accent)] text-sm font-medium hover:gap-2 transition-all">
اقرأ المزيد
<svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
@endif
</div>
</article>
@endforeach
</div>
{{-- View All Link --}}
@if($news->count() >= 6)
<div class="text-center mt-8 reveal">
<a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default']) }}"
class="inline-flex items-center gap-2 px-6 py-2.5 rounded-full border border-[var(--site-accent)] text-[var(--site-accent)] text-sm font-medium hover:bg-[var(--site-accent)] hover:text-white transition-colors">
عرض جميع الأخبار
<svg class="w-4 h-4 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
@endif
@else
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@for($i = 0; $i < 3; $i++)
......
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