Feature/joh 12 footer #2
Conversation
MichaelScodaeng
commented
Dec 20, 2023
•
MichaelScodaeng
commented
- Creating Footer
|
as commander boom said
Still need to debug code to be compatible with lint
|
src/components/Footer.tsx
Outdated
| return ( | ||
| <div className="mt-auto w-full"> | ||
| <div className="relative mx-auto h-[243px] w-full shrink-0 xl:h-[215px]"> | ||
| <div className="absolute left-0 top-0 h-full w-full bg-teal-600"> |
There was a problem hiding this comment.
หลีกเลี่ยงการใช้ position absolute ถ้าไม่จำเป็น คือมันสามารถจัด layout โดยใช้ flex ได้อ่ะ
src/components/Footer.tsx
Outdated
| <div className="absolute left-0 top-0 h-full w-full bg-teal-600"> | ||
| <div className="hidden xl:block"> | ||
| <div | ||
| className="absolute left-[1.85%] top-[40.46%] inline-flex h-[19.53%] |
There was a problem hiding this comment.
นี่ก็ด้วย ลองใช้การจัด layout ด้วย flex แทน
src/components/Footer.tsx
Outdated
| src={johnjudLogo} | ||
| alt="Johnjud Logo" | ||
| /> | ||
| <div className="font-Poppins text-base font-bold text-white"> |
There was a problem hiding this comment.
font-poppins ฝากแก้ทุกอันด้วย
src/components/Footer.tsx
Outdated
| </div> | ||
| </div> | ||
| {/* Below md*/} | ||
| <div className="absolute left-[7.63%] top-[12.20%] flex h-[76.27%] w-[55%] flex-col items-start justify-start gap-4 xl:hidden"> |
There was a problem hiding this comment.
ตอน responsive ใช้ lg: แทน xl: แล้วก็ถ้าเปลี่ยนไปใช้ flex แล้วอ่ะ จะไม่ต้องซ่อน element แล้ว ลอง responsive ด้วย flex ดู
src/components/Footer.tsx
Outdated
| return <div className="mt-auto">Footer</div>; | ||
| return ( | ||
| <div className="mt-auto w-full"> | ||
| <div className="relative mx-auto h-[215px] w-full shrink-0 lg:h-[215px]"> |
There was a problem hiding this comment.
บรรทัดนี้อ่ะ
- relative จะไม่มีผลอะไร เพราะเราไม่ได้ใช้คู่กับ absolute
- mx-auto ไม่มีผลอะไรเพราะว่า div เราเต็มหน้าจอ มันจะมีผลคือ ถ้า div เราไม่เต็มจอ มันจะจัดให้อยู่ตรงกลาง
h-[215px]กับlg:h-[215px]มันไม่ได้เปลี่ยน responsive อะไรเลย
บรรทัดนี้ลบ class ไปหมดเลยก็ได้ แล้วไปกำหนด padding py-.. บรรทัดต่อไปแทน
src/components/Footer.tsx
Outdated
| return ( | ||
| <div className="mt-auto w-full"> | ||
| <div className="relative mx-auto h-[215px] w-full shrink-0 lg:h-[215px]"> | ||
| <div className="relative flex h-full w-full justify-between bg-teal-600 px-[7.63%] py-[6.80%] lg:px-[1.85%] lg:py-[0%]"> |
There was a problem hiding this comment.
ตรงนี้สามารถกำหนด padding สำหรับ หน้าจอ desktop ได้ แทนการใช้ height
ก็คือลบ height แล้วเปลี่ยนไปใช้ padding แทนให้หมด
แล้วก็ padding อ่ะ ใช้เป็น px ไม่ก็ rem ได้ ใช้เป็น % ไม่เวิร์คเท่า px หรือ rem แต่จริงๆแนะนำให้ลองกะๆห้มันประมาณ docs tailwind ดู พวก px-5 px-6 px-8 อ่ะ
พยายามอย่าใช้ height มาก ถ้าสมมุติว่ามันสามารถจัดโดยให้มันแปรผันตาม element (ข้อความรูปภาพที่อยู่ข้างใน)
src/components/Footer.tsx
Outdated
| </div> | ||
| {/*Text*/} | ||
| <div className="inline-flex flex-col gap-4 lg:w-[458px] lg:gap-3"> | ||
| <div className="w-full p-0 text-xs font-normal leading-[15px] text-white lg:text-[20px] lg:leading-[25px]"> |
There was a problem hiding this comment.
อันนี้ฝากเปลี่ยน lg:text-base หน่อย คิดว่าใช้ font ขนาดธรรมดาน่าจะดูดีกว่า ใน figma ทำไมมันดูสมส่วนก็ไม่รู้
There was a problem hiding this comment.
จริงๆ leading ไม่ต้องก็ได้นะ พวก class text-base text-xs มันทำให้หมดละ
src/components/Footer.tsx
Outdated
| </div> | ||
| </div> | ||
| {/*Social*/} | ||
| <div className="inline-flex flex-col items-center justify-center gap-6"> |
There was a problem hiding this comment.
สงสัยว่าทำไมใช้ inline-flex
