Skip to content

separate css file #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nav0za merged 1 commit into from
Apr 22, 2026
Merged

separate css file #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 177 additions & 6 deletions app/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ body {
color: #0f172a;
}

/* FullCalendar button theme (Premium Light) */
/* FullCalendar button theme (Primary) */
/* ===== FullCalendar Styles ===== */
.fc .fc-button,
.fc .fc-button-primary {
background-color: var(--color-primary-500, #3b82f6) !important;
Expand All @@ -48,7 +47,6 @@ body {
color: #ffffff !important;
}

/* FullCalendar date/holiday text (Premium Light) */
.fc .fc-daygrid-day-number,
.fc .fc-daygrid-day-top .fc-daygrid-day-number,
.fc .fc-daygrid-day-number > span,
Expand All @@ -62,13 +60,11 @@ body {
opacity: 1 !important;
}

/* Ensure holidays/events display as dark text */
.fc .fc-daygrid-event-harness .fc-event-title,
.fc .fc-daygrid-event-harness .fc-event-time {
color: #0f172a !important;
}

/* FullCalendar toolbar (title + nav buttons) */
.fc .fc-toolbar,
.fc .fc-toolbar-chunk {
background: #ffffff !important;
Expand All @@ -79,7 +75,182 @@ body {
color: #0f172a !important;
}

/* Ensure today button & nav icons show correctly */
.fc .fc-button.fc-button-primary .fc-icon {
color: #ffffff !important;
}

/* FullCalendar - extracted from AppCalendar.vue */
.fc-daygrid-event {
cursor: pointer;
}

.fc-event {
border-radius: 4px;
}

.event-holiday .fc-event-title,
.event-holiday .fc-event-main-frame {
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 2px 4px !important;
}

.fc .fc-col-header,
.fc .fc-col-header tr,
.fc .fc-col-header th {
background-color: #ffffff !important;
}

.fc .fc-col-header-cell {
background-color: #f8fafc !important;
border-color: #e2e8f0 !important;
}

.fc .fc-col-header-cell-cushion {
color: #0f172a !important;
font-weight: 600;
}

.fc .fc-scrollgrid {
border-color: #e2e8f0 !important;
}

.fc-theme-standard th {
background-color: #f8fafc !important;
}

.fc .fc-list-day th,
.fc .fc-list-day td,
.fc .fc-list-day-cushion,
.fc .fc-cell-shaded {
background-color: #ffffff !important;
}

.fc-list-day-text,
.fc-list-day-side-text,
.fc-list-day-cushion * {
color: #1e293b !important;
font-weight: 800 !important;
text-decoration: none !important;
}

.fc-list-event:hover td {
background-color: #f1f5f9 !important;
}

/* ===== Custom Scrollbar (ใช้ร่วมกันทุกหน้า) ===== */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}

/* ===== Animations (teacher/[id].vue) ===== */
@keyframes zoom-in {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.animate-in {
animation: zoom-in 0.2s ease-out forwards;
}

/* ===== Print Styles (summary.vue) ===== */
@media print {
body,
.min-h-screen {
background-color: white !important;
color: black !important;
}

.min-h-screen {
background: white !important;
padding-bottom: 0 !important;
}

.no-print,
header,
nav,
.bg-slate-800.sticky {
display: none !important;
}

.print-only {
display: block !important;
}

.bg-slate-800 {
background-color: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
color: black !important;
box-shadow: none !important;
}

.text-white { color: black !important; }
.text-slate-400 { color: #475569 !important; }
.text-green-500, .text-green-400 { color: #166534 !important; }
.text-amber-500, .text-amber-400 { color: #92400e !important; }
.text-red-500, .text-red-400 { color: #991b1b !important; }

.bg-slate-900 {
background-color: #f1f5f9 !important;
}

.bg-gradient-to-r {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}

table {
width: 100% !important;
border-collapse: collapse !important;
}

th {
background-color: #f1f5f9 !important;
color: black !important;
border-bottom: 2px solid black !important;
}

td {
border-bottom: 1px solid #e2e8f0 !important;
}

.container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}

.grid { display: grid !important; }

.lg\:grid-cols-2 {
grid-template-columns: 1fr 1fr !important;
}

.mb-8 { margin-bottom: 2rem !important; }

@page {
margin: 1cm;
size: A4;
}
}
76 changes: 0 additions & 76 deletions app/components/AppCalendar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -999,7 +999,7 @@

const { data: terms } = await useFetch('/api/terms')
const { data: rooms } = await useFetch('/api/rooms')
const { data: allSubjects } = await useFetch('/api/Subjects')

Check failure on line 1002 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'allSubjects' is assigned a value but never used. Allowed unused vars must match /^_/u

const availableSlots = ref([])
const selectedSlot = ref(null)
Expand Down Expand Up @@ -1084,7 +1084,7 @@
}
})

const roomOptions = computed(() => {

Check failure on line 1087 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'roomOptions' is assigned a value but never used. Allowed unused vars must match /^_/u
if (!rooms.value) return [{ label: 'ไม่ระบุห้องเรียน', value: null }]
const opts = rooms.value.map(r => ({
label: r.room_name,
Expand Down Expand Up @@ -1148,7 +1148,7 @@
end: info.endStr.split('T')[0]
}
},
viewDidMount: (info) => {

Check failure on line 1151 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'info' is defined but never used. Allowed unused args must match /^_/u
// แก้ไขสีพื้นหลังของ header หลังจาก calendar render เสร็จ
setTimeout(() => {
const headerCells = document.querySelectorAll('.fc-col-header-cell')
Expand Down Expand Up @@ -1691,7 +1691,7 @@
createdIds.push(res.id_makeup)
makeupIdsForThisClass.push(res.id_makeup)
}

Check failure on line 1694 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

Trailing spaces not allowed
// Save the ids for the calendar event creation
cls._makeupIds = makeupIdsForThisClass
currentTime = endTime
Expand Down Expand Up @@ -1893,7 +1893,7 @@
if (props.classes) {
try {
selectedClassesList = typeof props.classes === 'string' ? JSON.parse(props.classes) : props.classes
} catch (e) {

Check failure on line 1896 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'e' is defined but never used
selectedClassesList = []
}
}
Expand Down Expand Up @@ -1991,7 +1991,7 @@
}

// Helper functions
const formatDate = (date) => {

Check failure on line 1994 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'formatDate' is assigned a value but never used. Allowed unused vars must match /^_/u
if (!date) return ''
return new Date(date).toLocaleString('th-TH', {
year: 'numeric',
Expand Down Expand Up @@ -2052,81 +2052,5 @@
return classes[type] || classes.normal
}
</script>

Check failure on line 2055 in app/components/AppCalendar.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

Too many blank lines at the end of file. Max of 0 allowed
<style>
/* FullCalendar styling handled in main.css */
.fc-daygrid-event {
cursor: pointer;
}

.fc-event {
border-radius: 4px;
}

/* ปรับขนาดตัวอักษรสำหรับวันหยุด */
.event-holiday .fc-event-title,
.event-holiday .fc-event-main-frame {
font-size: 1.1rem !important;
font-weight: 700 !important;
padding: 2px 4px !important;
}

/* ปรับธีมปฏิทินเป็น Premium Light (พื้นขาว, ข้อความดำ) */
.fc .fc-col-header,
.fc .fc-col-header tr,
.fc .fc-col-header th {
background-color: #ffffff !important;
}

/* ปรับสีหัวตารางวัน ให้เป็นตัวอักษรดำ */
.fc .fc-col-header-cell {
background-color: #f8fafc !important;
border-color: #e2e8f0 !important;
}

.fc .fc-col-header-cell-cushion {
color: #0f172a !important;
font-weight: 600;
}

/* ปรับสีหัวเรื่อง (เดือน-ปี) ให้เป็นสีดำ */
.fc .fc-toolbar-title {
color: #0f172a !important;
}

/* ปรับสีตัวเลขวันให้เป็นสีดำ */
.fc .fc-daygrid-day-number {
color: #0f172a !important;
}

/* ปรับเส้นตารางให้ดูสว่างขึ้น */
.fc .fc-scrollgrid {
border-color: #e2e8f0 !important;
}

.fc-theme-standard th {
background-color: #f8fafc !important;
}

/* แก้ไขส่วนหัวของวันในมุมมองรายการ (List View) */
.fc .fc-list-day th,
.fc .fc-list-day td,
.fc .fc-list-day-cushion,
.fc .fc-cell-shaded {
background-color: #ffffff !important;
}

.fc-list-day-text,
.fc-list-day-side-text,
.fc-list-day-cushion * {
color: #1e293b !important;
/* slate-800 */
font-weight: 800 !important;
text-decoration: none !important;
}

.fc-list-event:hover td {
background-color: #f1f5f9 !important;
/* slate-100 */
}
</style>
4 changes: 0 additions & 4 deletions app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,3 @@
// Teacher data is still needed for the calendar filtering/display
const { data: teachers } = await useFetch('/api/teachers')
</script>

<style scoped>
/* Page specific styles */
</style>
20 changes: 0 additions & 20 deletions app/pages/rooms.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!-- Navbar -->
<nav class="sticky top-16 z-50 bg-white border-b border-slate-200 p-3 shadow-sm no-print">
<div class="container mx-auto flex items-center">
<UButton icon="i-lucide-arrow-left" label="ย้อนกลับ" color="gray" variant="ghost" size="lg" to="/" class="font-bold text-md cursor-pointer hover:bg-slate-100" />

Check warning on line 6 in app/pages/rooms.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'class' should be on a new line

Check warning on line 6 in app/pages/rooms.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'to' should be on a new line

Check warning on line 6 in app/pages/rooms.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'size' should be on a new line

Check warning on line 6 in app/pages/rooms.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'variant' should be on a new line

Check warning on line 6 in app/pages/rooms.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'color' should be on a new line

Check warning on line 6 in app/pages/rooms.vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'label' should be on a new line
</div>
</nav>

Expand Down Expand Up @@ -533,23 +533,3 @@
}
</script>

<style scoped>
/* Scrollbar Styling for Table */
.custom-scrollbar::-webkit-scrollbar {
height: 12px;
width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
</style>
15 changes: 0 additions & 15 deletions app/pages/sections/[id].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="container mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-4">
<UButton icon="i-lucide-arrow-left" color="gray" variant="ghost" to="/sections" />

Check warning on line 8 in app/pages/sections/[id].vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'to' should be on a new line

Check warning on line 8 in app/pages/sections/[id].vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'variant' should be on a new line

Check warning on line 8 in app/pages/sections/[id].vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

'color' should be on a new line
<h2 class="text-xl font-bold text-slate-800">
ตารางเรียน - {{ section?.section_name || 'Loading...' }}
</h2>
Expand All @@ -20,7 +20,7 @@
<!-- Profile Card -->
<div class="flex-1 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex items-center gap-6">
<div
class="w-20 h-20 rounded-full bg-blue-100 text-slate-800 font-bold flex items-center justify-center text-3xl shadow-sm border border-blue-200">

Check warning on line 23 in app/pages/sections/[id].vue

View workflow job for this annotation

GitHub Actions / ci (ubuntu-latest, 22) 

Expected 1 line break before closing bracket, but no line breaks found
<!-- Show initial of section -->
{{ section?.section_name ? section.section_name.substring(0, 2) : 'S' }}
</div>
Expand Down Expand Up @@ -1048,18 +1048,3 @@
})
</script>

<style scoped>
/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
background: #1e293b;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 3px;
}
</style>
Loading
Loading