banner size in mobile + fix security bug
This commit is contained in:
hamid zarghami
@@ -29,20 +29,20 @@ const Banners3: FC = () => {
|
||||
{/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
|
||||
<div className='flex flex-col gap-4 lg:w-[60%] w-full'>
|
||||
<div
|
||||
className='bg-gray-400 rounded-lg flex items-center justify-center w-full flex-1'
|
||||
className='bg-gray-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[200px]'
|
||||
>
|
||||
<span className='text-white text-lg font-bold'>بنر 1</span>
|
||||
</div>
|
||||
<div
|
||||
className='bg-blue-400 rounded-lg flex items-center justify-center w-full flex-1'
|
||||
className='bg-blue-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[200px]'
|
||||
>
|
||||
<span className='text-white text-lg font-bold'>بنر 2</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
|
||||
<div className='lg:w-[40%] w-full' style={{ aspectRatio: '1/1' }}>
|
||||
<div className='lg:w-[40%] w-full lg:[aspect-ratio:1/1] h-auto'>
|
||||
<div
|
||||
className='bg-purple-600 rounded-lg flex items-center justify-center w-full h-full'
|
||||
className='bg-purple-600 rounded-lg flex items-center justify-center w-full lg:h-full h-auto min-h-[200px]'
|
||||
>
|
||||
<span className='text-white text-lg font-bold'>بنر 3 - بزرگ</span>
|
||||
</div>
|
||||
@@ -61,33 +61,33 @@ const Banners3: FC = () => {
|
||||
<div className='flex lg:flex-row flex-col gap-4'>
|
||||
{/* دو بنر کوچک - سمت راست (60% عرض در RTL) */}
|
||||
<div className='flex flex-col gap-4 lg:w-[60%] w-full'>
|
||||
<Link href={firstBanner.linkUrl || '#'} className='block flex-1'>
|
||||
<Link href={firstBanner.linkUrl || '#'} className='block lg:flex-1 h-auto'>
|
||||
<Image
|
||||
src={firstBanner.imageUrl}
|
||||
height={400}
|
||||
width={1000}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={firstBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
<Link href={secondBanner.linkUrl || '#'} className='block flex-1'>
|
||||
<Link href={secondBanner.linkUrl || '#'} className='block lg:flex-1 h-auto'>
|
||||
<Image
|
||||
src={secondBanner.imageUrl}
|
||||
height={400}
|
||||
width={1000}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={secondBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
{/* بنر بزرگ - سمت چپ (40% عرض در RTL) */}
|
||||
<div className='lg:w-[40%] w-full' style={{ aspectRatio: '1/1' }}>
|
||||
<Link href={thirdBanner.linkUrl || '#'} className='block h-full'>
|
||||
<div className='lg:w-[40%] w-full lg:[aspect-ratio:1/1] h-auto'>
|
||||
<Link href={thirdBanner.linkUrl || '#'} className='block lg:h-full h-auto'>
|
||||
<Image
|
||||
src={thirdBanner.imageUrl}
|
||||
height={1000}
|
||||
width={1000}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={thirdBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
@@ -24,27 +24,27 @@ const Banners4: FC = () => {
|
||||
}, [data?.results?.banners])
|
||||
|
||||
const renderPlaceholder = () => (
|
||||
<div className='flex lg:flex-row flex-col gap-4 lg:h-[340px]'>
|
||||
<div className='flex lg:flex-row flex-col gap-4 lg:h-[340px] h-auto'>
|
||||
{/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
|
||||
<div className='lg:w-[34%] w-full lg:h-full h-[200px]'>
|
||||
<div className='bg-pink-300 rounded-lg flex items-center justify-center w-full h-full'>
|
||||
<div className='lg:w-[34%] w-full lg:h-full h-auto'>
|
||||
<div className='bg-pink-300 rounded-lg flex items-center justify-center w-full lg:h-full h-auto min-h-[200px]'>
|
||||
<span className='text-white text-lg font-bold'>بنر 1 (Order 4) - بزرگ راست</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* دو بنر کوچک عمودی - 12% عرض */}
|
||||
<div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full'>
|
||||
<div className='bg-gray-400 rounded-lg flex items-center justify-center w-full flex-1 min-h-[100px]'>
|
||||
<div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full h-auto'>
|
||||
<div className='bg-gray-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[100px]'>
|
||||
<span className='text-white text-sm font-bold'>بنر 2 (Order 5)</span>
|
||||
</div>
|
||||
<div className='bg-green-400 rounded-lg flex items-center justify-center w-full flex-1 min-h-[100px]'>
|
||||
<div className='bg-green-400 rounded-lg flex items-center justify-center w-full lg:flex-1 h-auto min-h-[100px]'>
|
||||
<span className='text-white text-sm font-bold'>بنر 3 (Order 6)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
|
||||
<div className='lg:w-[54%] w-full lg:h-full h-[200px]'>
|
||||
<div className='bg-teal-300 rounded-lg flex items-center justify-center w-full h-full'>
|
||||
<div className='lg:w-[54%] w-full lg:h-full h-auto'>
|
||||
<div className='bg-teal-300 rounded-lg flex items-center justify-center w-full lg:h-full h-auto min-h-[200px]'>
|
||||
<span className='text-white text-lg font-bold'>بنر 4 (Order 7) - عریض چپ</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,50 +67,50 @@ const Banners4: FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex lg:flex-row flex-col gap-4 lg:h-[340px]'>
|
||||
<div className='flex lg:flex-row flex-col gap-4 lg:h-[340px] h-auto'>
|
||||
{/* بنر 1 (Order 4) - بزرگ سمت راست - 34% عرض */}
|
||||
<div className='lg:w-[34%] w-full lg:h-full'>
|
||||
<Link href={firstBanner.linkUrl || '#'} className='block h-full'>
|
||||
<div className='lg:w-[34%] w-full lg:h-full h-auto'>
|
||||
<Link href={firstBanner.linkUrl || '#'} className='block lg:h-full h-auto'>
|
||||
<Image
|
||||
src={firstBanner.imageUrl}
|
||||
height={340}
|
||||
width={340}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={firstBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* دو بنر کوچک عمودی - 12% عرض */}
|
||||
<div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full'>
|
||||
<Link href={secondBanner.linkUrl || '#'} className='block flex-1 min-h-0'>
|
||||
<div className='flex flex-col gap-4 lg:w-[12%] w-full lg:h-full h-auto'>
|
||||
<Link href={secondBanner.linkUrl || '#'} className='block lg:flex-1 h-auto min-h-0'>
|
||||
<Image
|
||||
src={secondBanner.imageUrl}
|
||||
height={160}
|
||||
width={160}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={secondBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
<Link href={thirdBanner.linkUrl || '#'} className='block flex-1 min-h-0'>
|
||||
<Link href={thirdBanner.linkUrl || '#'} className='block lg:flex-1 h-auto min-h-0'>
|
||||
<Image
|
||||
src={thirdBanner.imageUrl}
|
||||
height={160}
|
||||
width={160}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={thirdBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* بنر 4 (Order 7) - عریض سمت چپ - 54% عرض */}
|
||||
<div className='lg:w-[54%] w-full lg:h-full'>
|
||||
<Link href={fourthBanner.linkUrl || '#'} className='block h-full'>
|
||||
<div className='lg:w-[54%] w-full lg:h-full h-auto'>
|
||||
<Link href={fourthBanner.linkUrl || '#'} className='block lg:h-full h-auto'>
|
||||
<Image
|
||||
src={fourthBanner.imageUrl}
|
||||
height={340}
|
||||
width={800}
|
||||
className='w-full h-full rounded-lg object-cover'
|
||||
className='w-full lg:h-full h-auto rounded-lg object-cover'
|
||||
alt={fourthBanner.altText}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user