72 lines
3.5 KiB
Markdown
72 lines
3.5 KiB
Markdown
ช่วยแก้ Layout หน้า บทเรียนออนไลน์
|
|
|
|
ปัญหา:
|
|
|
|
- ตารางล้นออกด้านขวา
|
|
- ปุ่ม "+ เพิ่มบทเรียนออนไลน์" ด้านบนขวาโดนตัด/ล้นจอ
|
|
- Column ผู้สร้างยาวเกินไป
|
|
- ไม่มี Action column หรือ Action column ถูกดันออกนอกหน้าจอ
|
|
|
|
สิ่งที่ต้องแก้:
|
|
|
|
1. ครอบ Page content ด้วย container ที่ไม่ล้นจอ เช่น `max-w-full overflow-hidden`
|
|
2. Header ด้านบนให้ใช้ layout แบบ responsive:
|
|
- ซ้ายเป็น Title/Subtitle
|
|
- ขวาเป็นปุ่มเพิ่มบทเรียน
|
|
- ถ้าพื้นที่ไม่พอให้ปุ่มลงบรรทัดใหม่
|
|
3. ปุ่มเพิ่มบทเรียนต้องไม่ล้นจอ ใช้ `shrink-0` และข้อความไม่ซ้อน
|
|
4. Table card ให้ใช้:
|
|
- `overflow-hidden`
|
|
- ด้านในใช้ `overflow-x-auto`
|
|
5. Table ให้ใช้:
|
|
- `w-full`
|
|
- `table-fixed`
|
|
- `min-w-[1050px]` หรือปรับให้พอดีกับ column
|
|
6. กำหนด width ของ column ทุกช่อง เช่น:
|
|
- รูปปก / ไฟล์: 120px
|
|
- ชื่อบทเรียน: 320px
|
|
- หมวดหมู่: 140px
|
|
- ประเภทวิดีโอ: 140px
|
|
- ไฟล์แนบ: 140px
|
|
- สถานะ: 130px
|
|
- วันที่เผยแพร่: 150px
|
|
- ผู้สร้าง: 160px
|
|
- จัดการ: 70px
|
|
7. ช่องชื่อบทเรียน รายละเอียด และผู้สร้าง ให้ใช้ `truncate`
|
|
8. Action column ต้องอยู่ขวาสุดและเห็นได้ ไม่โดนตัด
|
|
9. ถ้าข้อมูลเยอะ ให้ scroll เฉพาะในตาราง ไม่ใช่ทั้งหน้า
|
|
10. ห้ามแก้ API หรือ Business Logic แก้เฉพาะ Layout / className / columns เท่านั้น
|
|
|
|
ตัวอย่างโครงสร้าง:
|
|
|
|
<div className="w-full max-w-full overflow-hidden">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div className="min-w-0">
|
|
<h1>บทเรียนออนไลน์</h1>
|
|
<p>เรียนรู้จากวิดีโอและเอกสารประกอบที่ HRD เผยแพร่ให้กับพนักงาน</p>
|
|
</div>
|
|
|
|
<Button className="shrink-0">
|
|
+ เพิ่มบทเรียนออนไลน์
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<Card className="overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<Table className="w-full min-w-[1050px] table-fixed">
|
|
...
|
|
</Table>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
ผลลัพธ์ที่ต้องการ:
|
|
|
|
- หน้าไม่ล้นจอ
|
|
- ปุ่มเพิ่มบทเรียนแสดงครบ
|
|
- ตารางเลื่อนแนวนอนเฉพาะเมื่อจำเป็น
|
|
- Column ไม่เบียดกัน
|
|
- Action column แสดงครบ
|
|
- Layout เหมือนหน้า ประวัติการอบรม
|