fix responsive all pages & change style page list blog and blog item & add date picker
This commit is contained in:
Ehsan
@@ -12,7 +12,7 @@ function Caption({ data }) {
|
||||
width={808}
|
||||
/>
|
||||
<div
|
||||
className="my-6 text-[#525252] text-[16px] font-normal leading-[32px]"
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
/>
|
||||
<Image
|
||||
@@ -23,7 +23,7 @@ function Caption({ data }) {
|
||||
width={808}
|
||||
/>
|
||||
<div
|
||||
className="my-6"
|
||||
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[32px]"
|
||||
dangerouslySetInnerHTML={{ __html: data.caption }}
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -10,7 +10,7 @@ const socials = [
|
||||
|
||||
function SocialMedia() {
|
||||
return (
|
||||
<ul className="flex mt-[8px] pb-[32px] relative items-center justify-end gap-4">
|
||||
<ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
|
||||
{socials.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
|
||||
@@ -3,11 +3,11 @@ import React from 'react'
|
||||
|
||||
function AddComment() {
|
||||
return (
|
||||
<div className='flex items-center justify-start gap-[16px] my-[24px]'>
|
||||
<div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
|
||||
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
|
||||
<Button
|
||||
variant='outlined'
|
||||
className='!border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[9px]'
|
||||
className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
|
||||
>
|
||||
ثبت نظر
|
||||
</Button>
|
||||
|
||||
@@ -6,7 +6,7 @@ import AddComment from './AddComment'
|
||||
|
||||
function CommentUser({ data }) {
|
||||
return (
|
||||
<div className='mt-[24px]'>
|
||||
<div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
|
||||
<AnimationTextHead name='zoom-in-up' text='نظرات'>
|
||||
<Underline />
|
||||
</AnimationTextHead>
|
||||
|
||||
@@ -4,7 +4,7 @@ import CommentUser from "./commentUser";
|
||||
|
||||
function Detail({ data }) {
|
||||
return (
|
||||
<div className="w-[68%]">
|
||||
<div className="w-full lg:w-[68%]">
|
||||
<Caption data={data} />
|
||||
<SocialMedia />
|
||||
<CommentUser data={data} />
|
||||
|
||||
@@ -2,19 +2,19 @@ function Head({ data }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[16px] font-normal">بلاگ {'>'}</p>
|
||||
<p className="text-[#9B9B9B] text-[16px] font-normal">پوست و مو {'>'}</p>
|
||||
<p className="text-[#525252] text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
|
||||
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
|
||||
</div>
|
||||
<p className="text-[#3B3B3B] mt-[40px] text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
|
||||
<div className="flex mt-6 items-center justify-start gap-[35px]">
|
||||
<p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
|
||||
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[14px] font-normal">تاریخ انتشار:</p>
|
||||
<p className="text-[#9B9B9B] text-[16px] font-medium">{data.date_of_release}</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<p className="text-[#9B9B9B] text-[14px] font-normal">زمان مطالعه:</p>
|
||||
<p className="text-[#9B9B9B] text-[16px] font-medium">{data.time}</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
|
||||
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,9 +4,9 @@ import RelatedContent from "./relatedContent";
|
||||
|
||||
function BlogPage({ article, articles }) {
|
||||
return (
|
||||
<div className="padding-responsive pt-[176px]">
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Head data={article} />
|
||||
<div className="flex items-start justify-center gap-[24px] mt-[24px]">
|
||||
<div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
|
||||
<Detail data={article} />
|
||||
<RelatedContent data={articles} />
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,35 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function Item({ data }) {
|
||||
function Item({ data, idx }) {
|
||||
return (
|
||||
<li className="flex relative items-center justify-start gap-[8px] py-[20px]">
|
||||
<li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className="w-[97px] h-[88px] rounded-[8px] overflow-hidden object-cover"
|
||||
className="
|
||||
min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px]
|
||||
min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px]
|
||||
rounded-[8px] overflow-hidden object-cover
|
||||
"
|
||||
src={data.src}
|
||||
alt="article"
|
||||
height={88}
|
||||
width={97}
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex flex-col gap-[24px] items-start justify-between">
|
||||
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p
|
||||
className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
|
||||
className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
|
||||
>{data.title}</p>
|
||||
</Link>
|
||||
<p
|
||||
className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
|
||||
>تاریخ انتشار: {data.date_of_release}</p>
|
||||
</div>
|
||||
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
|
||||
{data.id > idx + 1 && (
|
||||
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,13 +5,14 @@ import Item from './Item'
|
||||
|
||||
function RelatedContent({ data }) {
|
||||
return (
|
||||
<div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
|
||||
<div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
|
||||
<AnimationTextHead name='fade-up' text='مطالب مرتبط'>
|
||||
<UnderlineLG />
|
||||
</AnimationTextHead>
|
||||
<ul className='flex w-fit flex-col justify-start items-start'>
|
||||
{data.map(item => (
|
||||
<ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
|
||||
{data.map((item, idx) => (
|
||||
<Item
|
||||
idx={idx}
|
||||
data={item}
|
||||
key={item.id}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user