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
admin.html
+3 -3
View File
@@ -28,7 +28,7 @@
}
}
</script>
<link rel="stylesheet" href="css/style.css?v=8">
<link rel="stylesheet" href="css/style.css?v=9">
</head>
<body class="font-thai">
@@ -358,8 +358,8 @@
</div>
<script src="js/qrcode.min.js"></script>
<script src="js/app.js?v=5"></script>
<script src="js/admin.js?v=5"></script>
<script src="js/app.js?v=9"></script>
<script src="js/admin.js?v=9"></script>
</body>
</html>
css/style.css
+114 -1
View File
@@ -2583,7 +2583,119 @@ table {
border-collapse: collapse !important;
}
/* 9. Standalone Editor Auto-Fit & Clean Scroll */
/* ============================================================
Action Buttons & Card Proportions (Tapee University Design System)
============================================================ */
.card-tapi {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.card-tapi:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(30, 58, 138, 0.08);
transform: translateY(-1px);
}
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 10px;
font-size: 11.5px;
font-weight: 700;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: all 0.18s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.btn-action:active {
transform: scale(0.96);
}
.btn-action-edit {
background: #fbbf24;
color: #78350f;
border-color: #f59e0b;
}
.btn-action-edit:hover {
background: #f59e0b;
color: #ffffff;
}
.btn-action-copy {
background: #3b82f6;
color: #ffffff;
border-color: #2563eb;
}
.btn-action-copy:hover {
background: #1d4ed8;
}
.btn-action-link {
background: #1e3a8a;
color: #ffffff;
border-color: #172554;
}
.btn-action-link:hover {
background: #1e40af;
}
.btn-action-import {
background: #10b981;
color: #ffffff;
border-color: #059669;
}
.btn-action-import:hover {
background: #047857;
}
.btn-action-stats {
background: #6366f1;
color: #ffffff;
border-color: #4f46e5;
}
.btn-action-stats:hover {
background: #4338ca;
}
.btn-action-delete {
background: #f43f5e;
color: #ffffff;
border-color: #e11d48;
}
.btn-action-delete:hover {
background: #be123c;
}
.btn-status-select {
background: #f8fafc;
border: 1px solid #cbd5e1;
color: #334155;
padding: 5px 8px;
font-size: 11.5px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-status-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
/* Standalone Editor Auto-Fit & Clean Scroll */
.editor-container {
max-width: 960px;
width: 100%;
@@ -2633,3 +2745,4 @@ table {
}
}
edit.html
+3 -3
View File
@@ -24,7 +24,7 @@
}
}
</script>
<link rel="stylesheet" href="css/style.css?v=8">
<link rel="stylesheet" href="css/style.css?v=9">
<style>
* { box-sizing: border-box; }
body {
@@ -179,7 +179,7 @@
</div>
</div>
<script src="js/app.js?v=6"></script>
<script src="js/editor.js?v=6"></script>
<script src="js/app.js?v=9"></script>
<script src="js/editor.js?v=9"></script>
</body>
</html>
index.html
+1 -1
View File
@@ -27,7 +27,7 @@
}
}
</script>
<link rel="stylesheet" href="css/style.css?v=8">
<link rel="stylesheet" href="css/style.css?v=9">
</head>
<body class="font-thai">
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>
respond.php
+3 -3
View File
@@ -31,7 +31,7 @@
}
}
</script>
<link rel="stylesheet" href="css/style.css?v=8">
<link rel="stylesheet" href="css/style.css?v=9">
</head>
<body class="font-thai">
<div class="survey-page">
@@ -43,7 +43,7 @@
</div>
</div>
<script src="js/app.js?v=7"></script>
<script src="js/survey.js?v=7"></script>
<script src="js/app.js?v=9"></script>
<script src="js/survey.js?v=9"></script>
</body>
</html>
teacher.html
+3 -3
View File
@@ -28,7 +28,7 @@
}
}
</script>
<link rel="stylesheet" href="css/style.css?v=8">
<link rel="stylesheet" href="css/style.css?v=9">
</head>
<body class="font-thai">
@@ -204,8 +204,8 @@
</div>
<script src="js/qrcode.min.js"></script>
<script src="js/app.js?v=5"></script>
<script src="js/teacher.js?v=5"></script>
<script src="js/app.js?v=9"></script>
<script src="js/teacher.js?v=9"></script>
</body>
</html>