pongpon/survey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance UX/UI proportions and unified design system across all devices

Browse Source
This commit is contained in:
pongpon pitisuk
2026-09-12 15:59:22 +07:00
parent f5a302bf9f
commit fb5b4b4c95
8 changed files with 159 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/admin.js
+19 -19
View File
@@ -226,14 +226,14 @@ function renderUserCards(filteredList) {
</div>
</div>
<div class="flex items-center gap-1.5 flex-shrink-0 self-end sm:self-auto">
<button onclick="editUser(${u.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-3 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขข้อมูลผู้ใช้">
✏️ แก้ไข
<button onclick="editUser(${u.id})" class="btn-action btn-action-edit" title="แก้ไขข้อมูลผู้ใช้">
<i class="fas fa-edit"></i> แก้ไข
</button>
${!isCurrentUser ? `
<button onclick="deleteUser(${u.id}, '${escapeHtml(u.full_name)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-3 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบผู้ใช้">
🗑️ ลบ
<button onclick="deleteUser(${u.id}, '${escapeHtml(u.full_name)}')" class="btn-action btn-action-delete" title="ลบผู้ใช้">
<i class="fas fa-trash-alt"></i> ลบ
</button>
` : '<span class="text-xs text-slate-400 font-semibold px-2 py-1 bg-slate-100 rounded">บัญชีคุณ</span>'}
` : '<span class="text-xs text-slate-400 font-semibold px-2.5 py-1 bg-slate-100 rounded-md">บัญชีคุณ</span>'}
</div>
</div>
`;
@@ -485,29 +485,29 @@ function renderSurveyCards() {
</div>
</div>
</div>
<div class="flex flex-wrap lg:flex-nowrap gap-1 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
<select class="bg-slate-50 border border-slate-300 text-slate-800 px-1.5 py-1 rounded text-xs font-bold shadow-sm transition-all focus:outline-none" onchange="changeStatus(${s.id}, this.value)" title="เปลี่ยนสถานะ">
<div class="flex flex-wrap lg:flex-nowrap gap-1.5 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
<select class="btn-status-select" onchange="changeStatus(${s.id}, this.value)" title="เปลี่ยนสถานะ">
<option value="draft" ${s.status==='draft'?'selected':''}>📝 ร่าง</option>
<option value="active" ${s.status==='active'?'selected':''}>🟢 เปิดใช้งาน</option>
<option value="closed" ${s.status==='closed'?'selected':''}>🔴 ปิดแล้ว</option>
</select>
<button onclick="editSurvey(${s.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขแบบสอบถาม">
✏️ แก้ไข
<button onclick="editSurvey(${s.id})" class="btn-action btn-action-edit" title="แก้ไขแบบสอบถาม">
<i class="fas fa-edit"></i> แก้ไข
</button>
<button onclick="duplicateSurvey(${s.id})" class="bg-blue-600 hover:bg-blue-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="คัดลอกแบบสอบถาม">
📑 คัดลอก
<button onclick="duplicateSurvey(${s.id})" class="btn-action btn-action-copy" title="คัดลอกแบบสอบถาม">
<i class="fas fa-copy"></i> คัดลอก
</button>
<button onclick="generateLink(${s.id})" class="bg-blue-900 hover:bg-blue-950 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลิงก์และ QR Code">
🔗 ลิงก์
<button onclick="generateLink(${s.id})" class="btn-action btn-action-link" title="ลิงก์และ QR Code">
<i class="fas fa-link"></i> ลิงก์
</button>
<button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="bg-emerald-600 hover:bg-emerald-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="นำเข้าคำตอบจาก CSV">
📥 นำเข้าคำตอบ
<button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-import" title="นำเข้าคำตอบจาก CSV">
<i class="fas fa-file-import"></i> นำเข้า
</button>
<button onclick="viewStats(${s.id})" class="bg-indigo-600 hover:bg-indigo-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ผลสถิติ">
📊 สถิติ
<button onclick="viewStats(${s.id})" class="btn-action btn-action-stats" title="ผลสถิติ">
<i class="fas fa-chart-pie"></i> สถิติ
</button>
<button onclick="deleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบแบบสอบถาม">
🗑️ ลบ
<button onclick="deleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-delete" title="ลบแบบสอบถาม">
<i class="fas fa-trash-alt"></i> ลบ
</button>
</div>
</div>
js/teacher.js
+13 -13
View File
@@ -88,24 +88,24 @@ function renderTeacherSurveys() {
</div>
</div>
</div>
<div class="flex flex-wrap lg:flex-nowrap gap-1 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
<button onclick="teacherEditSurvey(${s.id})" class="bg-amber-400 hover:bg-amber-500 text-gray-900 border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="แก้ไขแบบสอบถาม">
✏️ แก้ไข
<div class="flex flex-wrap lg:flex-nowrap gap-1.5 items-center flex-shrink-0 w-full lg:w-auto overflow-x-auto pb-1 lg:pb-0">
<button onclick="teacherEditSurvey(${s.id})" class="btn-action btn-action-edit" title="แก้ไขแบบสอบถาม">
<i class="fas fa-edit"></i> แก้ไข
</button>
<button onclick="teacherDuplicateSurvey(${s.id})" class="bg-blue-600 hover:bg-blue-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="คัดลอกแบบสอบถาม">
📑 คัดลอก
<button onclick="teacherDuplicateSurvey(${s.id})" class="btn-action btn-action-copy" title="คัดลอกแบบสอบถาม">
<i class="fas fa-copy"></i> คัดลอก
</button>
<button onclick="teacherGenerateLink(${s.id})" class="bg-blue-900 hover:bg-blue-950 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลิงก์และ QR Code">
🔗 ลิงก์
<button onclick="teacherGenerateLink(${s.id})" class="btn-action btn-action-link" title="ลิงก์และ QR Code">
<i class="fas fa-link"></i> ลิงก์
</button>
<button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="bg-emerald-600 hover:bg-emerald-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="นำเข้าคำตอบจาก CSV">
📥 นำเข้าคำตอบ
<button onclick="showImportResponsesModal(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-import" title="นำเข้าคำตอบจาก CSV">
<i class="fas fa-file-import"></i> นำเข้า
</button>
<button onclick="teacherViewStats(${s.id})" class="bg-indigo-600 hover:bg-indigo-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ผลสถิติ">
📊 สถิติ
<button onclick="teacherViewStats(${s.id})" class="btn-action btn-action-stats" title="ผลสถิติ">
<i class="fas fa-chart-pie"></i> สถิติ
</button>
<button onclick="teacherDeleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="bg-rose-600 hover:bg-rose-700 text-white border border-slate-800 px-2 py-1 rounded text-xs font-bold flex items-center gap-1 shadow-sm transition-all whitespace-nowrap active:scale-95" title="ลบแบบสอบถาม">
🗑️ ลบ
<button onclick="teacherDeleteSurvey(${s.id}, '${escapeHtml(s.title)}')" class="btn-action btn-action-delete" title="ลบแบบสอบถาม">
<i class="fas fa-trash-alt"></i> ลบ
</button>
</div>
</div>