hrms-bangkok/hrms-exam
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

เพิ่ม css font และ ปรับหน้าสอบคัดเลือกคร่าวๆ

Browse source
This commit is contained in:
Tanyalak 2023-04-05 01:11:59 +07:00
parent fd32d7b1ff
commit 08bd7b0b6a
6 changed files with 65 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

1
cms/src/app.html
View file

@ -8,6 +8,7 @@
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/styles/tailwind.css" />
<link rel="stylesheet" href="/vendor/fontawesome-free/css/all.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap">
<title>กองสรรหาบุคคล</title>
%sveltekit.head%
</head>

13
cms/src/app.postcss
View file

@ -3,6 +3,9 @@
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Noto Sans Thai', sans-serif;
}
h1 {
@apply text-4xl;
}
@ -15,4 +18,14 @@
ol{
@apply list-decimal
}
.cardxl{
padding-right: 2rem;
}
@media only screen and (max-width: 1024px) {
.cardxl{
padding-right: 0rem !important;
padding-bottom: 2rem;
}
}
}

33
cms/src/routes/+page.svelte
View file

@ -77,7 +77,7 @@
<div class="container mx-auto">
<div class="flex flex-wrap px-6">
<div
class="w-full pt-24 mb-10 flex flex-wrap justify-between">
class="w-full pt-20 mb-10 flex flex-wrap justify-between">
<h6 class="text-2xl font-semibold ">
ประกาศเกี่ยวกับ<span class="text-red-400">การคัดเลือกบุคลากรกทม.</span>
</h6>
@ -123,7 +123,7 @@
<div class="flex flex-wrap space-y-8">
<div class="flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<figure class="w-full lg:w-5/12 imgCard">
<img src="{sel2}" alt="1" class="h-full" />
</figure>
<div class="card-body w-full lg:w-7/12">
@ -148,7 +148,7 @@
</div>
<div class=" flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<figure class="w-full lg:w-5/12 imgCard">
<img src="{sel3}" alt="1" class="h-full"/>
</figure>
<div class="card-body w-full lg:w-7/12">
@ -180,7 +180,7 @@
<div class="container mx-auto mt-4">
<div class="flex flex-wrap px-6">
<div
class="w-full pt-24 mb-10 flex flex-wrap justify-between">
class="w-full pt-20 mb-10 flex flex-wrap justify-between">
<h6 class="text-2xl font-semibold ">
ประกาศเกี่ยวกับ<span class="text-red-400">การสอบแข่งขัน</span>
</h6>
@ -226,7 +226,7 @@
<div class="flex flex-wrap space-y-8">
<div class="flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<figure class="w-full lg:w-5/12 imgCard">
<img src="{c2}" alt="1" class="h-full" />
</figure>
<div class="card-body w-full lg:w-7/12">
@ -251,7 +251,7 @@
</div>
<div class=" flex flex-col w-full">
<div class="card card-side bg-white shadow-xl w-full">
<figure class="w-full lg:w-5/12 imgCard img-hover-zoom--brightness">
<figure class="w-full lg:w-5/12 imgCard">
<img src="{c3}" alt="1" class="h-full"/>
</figure>
<div class="card-body w-full lg:w-7/12">
@ -283,10 +283,11 @@
@media only screen and (max-width: 1024px) {
.card-side{
flex-direction: column !important;
}
.cardxl{
padding-right: 0rem !important;
padding-bottom: 2rem;
.card-side :where(figure:first-child){
border-start-end-radius: 1rem !important;
border-end-start-radius: 0rem !important;
}
.imgCard{
height: 250px;
@ -295,9 +296,6 @@
.card-side{
flex-direction: row;
}
.cardxl{
padding-right: 2rem;
}
.card-title{
height: 80px;
align-items: start;
@ -311,15 +309,4 @@
.imgCard{
max-height: 220px;
}
.img-hover-zoom--brightness img {
transition: transform 2s, filter 1.5s ease-in-out;
transform-origin: center center;
filter: brightness(97%);
}
/* The Transformation */
.img-hover-zoom--brightness:hover img {
filter: brightness(100%);
transform: scale(1.3);
}
</style>

2
cms/src/routes/competitive/+page.svelte
View file

@ -4,7 +4,7 @@
const exams = data.exams
</script>
<section class="items-start h-screen flex max-h-860-px pt-10 bg-blueGray-100">
<section class="items-start h-screen flex max-h-860-px pt-12 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
การสอบแข่งขัน

75
cms/src/routes/qualifying/+page.svelte
View file

@ -6,50 +6,53 @@
const events = data.events
</script>
<div class="x">
<ActivityCalendar {events} />
</div>
<section class="items-start h-screen flex max-h-1000-px pt-10 bg-blueGray-100">
<section class="items-start flex pt-12 pb-20 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4 w-full">
การสอบคัดเลือก
</h2>
<div
class=" relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white"
>
<div class="rounded-t mb-0 px-4 py-3 border-0">
<div class="flex flex-wrap items-center">
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
<h3
class="font-semibold text-lg text-blueGray-700'"
>
รายการสอบ
</h3>
</div>
<div class="w-full lg:w-6/12 cardxl">
<div class="card bg-white shadow-xl w-full p-4">
<ActivityCalendar {events} />
</div>
</div>
<div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse">
<thead>
<tr>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th>
</tr>
</thead>
<tbody>
{#each exams as exam}
<tr>
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/exams/"+exam.id}>{exam.date}</a></th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.detail}</td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td>
{/each}
</tbody>
</table>
<div class="w-full lg:w-6/12">
<div
class=" card bg-white shadow-xl flex flex-col min-w-0 break-words w-full"
>
<div class="rounded-t mb-0 px-4 py-3 border-0">
<div class="flex flex-wrap items-center">
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
<h3
class="font-semibold text-lg text-blueGray-700'"
>
รายการสอบ
</h3>
</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse">
<thead>
<tr>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">วันที่</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">การสอบ</th>
<th class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left bg-blueGray-50 text-blueGray-500 border-blueGray-100">หน่วยงาน</th>
</tr>
</thead>
<tbody>
{#each exams as exam}
<tr>
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/exams/"+exam.id}>{exam.date}</a></th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.detail}</td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">{exam.institute}</td>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>

2
cms/src/routes/qualifying/[id]/+page.svelte
View file

@ -4,7 +4,7 @@
</script>
<section class="items-start h-screen flex max-h-1000-px pt-10 bg-blueGray-100">
<section class="items-start h-screen flex max-h-1000-px pt-12 bg-blueGray-100">
<div class="container mx-auto items-start flex flex-wrap px-4">
<h2 class="font-semibold text-2xl text-blueGray-600 mb-4">