From 84fd953b5d99ed720208eb38a7fdb22648a43e44 Mon Sep 17 00:00:00 2001
From: Pattaradanai <65160186@go.buu.ac.th>
Date: Thu, 13 Mar 2025 22:13:31 +0700
Subject: [PATCH] Make EmployeeCard responsive and prevent default drag
behavior on images
---
src/components/EmployeeSector.vue | 29 ++++++++++++++++++++++++-----
1 file changed, 24 insertions(+), 5 deletions(-)
diff --git a/src/components/EmployeeSector.vue b/src/components/EmployeeSector.vue
index 1ce9b14..95105d1 100644
--- a/src/components/EmployeeSector.vue
+++ b/src/components/EmployeeSector.vue
@@ -4,7 +4,8 @@
<div class="employee-list">
<div v-for="employee in employees" :key="employee.id" class="employee-card" draggable="true"
@dragstart="onDragStart($event, employee)">
- <img :src="employee.image || defaultImage" alt="employee" class="employee-image" />
+ <!-- ✅ ปิด Drag Default ของรูปภาพ -->
+ <img :src="employee.image || defaultImage" alt="employee" class="employee-image" @dragstart.prevent />
<span>{{ employee.name }}</span>
</div>
</div>
@@ -44,17 +45,17 @@ const onDragStart = (event: DragEvent, employee: Employee) => {
text-align: center;
}
-/* ✅ ใช้ Grid ให้มี 5 คอลัมน์ */
+/* ✅ ปรับ Employee Card ให้เป็น Responsive */
.employee-list {
display: grid;
- grid-template-columns: repeat(5, 1fr);
- /* 5 คนต่อแถว */
+ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+ /* ปรับจำนวนคอลัมน์อัตโนมัติ */
gap: 10px;
justify-items: center;
padding: 10px;
}
-/* ✅ ปรับ Employee Card ให้พอดีกับ Grid */
+/* ✅ ปรับขนาด Employee Card ตามหน้าจอ */
.employee-card {
display: flex;
flex-direction: column;
@@ -69,6 +70,24 @@ const onDragStart = (event: DragEvent, employee: Employee) => {
transition: all 0.3s ease;
}
+/* ✅ Responsive: ถ้าหน้าจอเล็กกว่า 600px */
+@media (max-width: 600px) {
+ .employee-list {
+ grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+ /* ลดขนาด */
+ }
+
+ .employee-card {
+ width: 80px;
+ height: 100px;
+ }
+
+ .employee-image {
+ width: 40px;
+ height: 40px;
+ }
+}
+
.employee-card:hover {
background: #f0f0f0;
}
--
GitLab