48 lines
2.4 KiB
HTML
48 lines
2.4 KiB
HTML
<div class="h-full bg-gray-100 flex flex-col w-full"> <!-- แก้ h-screen เป็น h-full -->
|
|
|
|
<!-- Header: ใช้ flex-shrink-0 เพื่อไม่ให้โดนบีบ และ bg-white เพื่อให้ตัดกับ content -->
|
|
<header class="shrink-0 flex justify-between items-center py-4 px-6">
|
|
@if (mode == 'default') {
|
|
<div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
|
|
</h1>
|
|
<p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
|
|
</div>
|
|
</div>
|
|
} @else if (mode == 'add') {
|
|
<div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<button (click)="onCancelProject()"
|
|
class="group flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 transition-all mr-1"
|
|
title="ย้อนกลับ">
|
|
<i class="fas fa-arrow-left text-gray-400 group-hover:text-red-900 text-lg"></i>
|
|
</button>
|
|
<div class="h-6 w-px bg-gray-200 mr-2"></div>
|
|
|
|
<span class="w-2 h-8 bg-red-900 rounded-full"></span> เพิ่มโครงการ
|
|
</h1>
|
|
<p class="text-gray-500 mt-1 text-sm pl-14">กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
</header>
|
|
|
|
<!-- Content: ใช้ flex-1 เพื่อกินพื้นที่ที่เหลือ และ overflow-y-auto เพื่อให้ scroll เฉพาะส่วนนี้ -->
|
|
<div class="flex-1 overflow-y-auto px-6 pb-6">
|
|
|
|
@if ( mode == 'default') {
|
|
<app-main-project></app-main-project>
|
|
} @else if ( mode == 'add') {
|
|
<app-main-project-add
|
|
(projectAddSave)="onProjectAddSave($event)"
|
|
(cancel)="onCancelProject()">
|
|
</app-main-project-add>
|
|
}
|
|
|
|
</div>
|
|
</div>
|