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

เปลี่ยน list รายการการสอบคัดเลือก,แข่งขัน

Browse source
This commit is contained in:
Tanyalak 2023-04-13 15:34:45 +07:00
parent ddaa8f8efb
commit cf59bb8949
7 changed files with 118 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

38
cms/src/app.postcss
View file

@ -99,4 +99,42 @@
.display-none{
display: none;
}
.imgCard2{
height: 85px;
filter: brightness(0.98);
}
.fit2{
display: block;
height: 100%;
width: 100%;
object-fit: cover;
object-position: top;
}
.text-sub{
height: 45px;
align-items: start;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.card-list{
height: 530px;
overflow-x: scroll;
width: 100%;
}
.card-outline{
border-radius:5px !important;
border: 1px solid #d6dee195;
background-color: white;
cursor: pointer;
font-size: 0.95rem;
}
.card-outline:hover{
color: #02A998;
box-shadow: rgba(149, 157, 165, 0.15) 0px 5px 10px;
}
}

2
cms/src/lib/components/ActivityCalendar.svelte
View file

@ -11,7 +11,7 @@
headerToolbar: {
left: 'title',
center: '',
right: 'prev,next today'
right: 'prev next today'
},
dayMaxEventRows:3,
moreLinkContent:function(args: { num: number; }){

2
cms/src/lib/utils.ts
View file

@ -6,7 +6,7 @@
* @param nameColor dictionary like object for name and color
*/
export function getBgColorDict(name:string,nameColor:{ [index: string]:string}){
const eventBg = ["#E6B0AA","#D2B4DE","#AED6F1","#A2D9CE","#FAD7A0 ","#D5DBDB",]
const eventBg = ["#67a1ff4a","#D2B4DE","#D5DBDB","#a2d9ce8f","#FAD7A0 ","#E6B0AA",]
if(!nameColor[name]){
const len = Object.keys(nameColor).length
nameColor[name]=len>eventBg.length?eventBg[0]:eventBg[len]

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

@ -31,43 +31,67 @@
</div> -->
</div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
<div class="w-full lg:w-7/12 cardxl">
<div class="card bg-white shadow-xl w-full">
<div class="w-full lg:w-8/12 cardxl">
<div class="card bg-white shadow-lg w-full">
<ActivityCalendar {events} />
</div>
</div>
<div class="w-full lg:w-5/12">
<div class="w-full lg:w-4/12">
<div
class=" card bg-white shadow-xl flex flex-col min-w-0 break-words w-full auto-rows-max"
>
<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="text-lg text-blueGray-700'"
>
รายการสอบ
</h3>
class="flex flex-col min-w-0 break-words w-full shadow-lg auto-rows-max card bg-white">
<div class="rounded-t mb-0 p-3 border-0 ">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg text-blueGray-700 font-semibold">
รายการสอบแข่งขัน
</h3>
<div class="text-xs font-light">จำนวน {exams.length} รายการ</div>
</div>
</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<div class="w-full">
<div class="flex flex-wrap space-y-3 card-list px-3">
{#each exams as exam}
<div class="flex flex-col w-full">
<a href={"/competitive/"+exam.id}>
<div class="card card-side card-outline w-full">
<figure class="w-full lg:w-3/12 imgCard2">
<img src={exam.image} alt="1" class="h-full fit2" />
</figure>
<div class="px-5 py-3 w-full lg:w-9/12">
<h2 class="text-xs font-light text-gray-500">
{exam.date??""}
</h2>
<div class="pt-1 text-sub">
{exam.title}
</div>
</div>
</div>
</a>
</div>
{/each}
</div>
<!-- <div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse tableScroll">
<thead>
<tr>
<th class="px-6 align-middle border border-solid py-3 text-sm 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-sm 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-sm 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-sm whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.date}</a></th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left"><a href="/competitive/{exam.id}">{exam.title}</a></td>
<th class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left">
<a href={"/competitive/"+exam.id}>
{exam.date??""}
</a>
</th>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left"><a href={"/competitive/"+exam.id}>{exam.title}</a></td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-left">{exam.category??""}</td>
{/each}
</tbody>
</table>
</div>
</div> -->
</div>
</div>
</div>

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

@ -33,24 +33,45 @@
</div> -->
</div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
<div class="w-full lg:w-7/12 cardxl">
<div class="card bg-white shadow-xl w-full">
<div class="w-full lg:w-8/12 cardxl">
<div class="card bg-white shadow-lg w-full">
<ActivityCalendar {events} />
</div>
</div>
<div class="w-full lg:w-5/12">
<div class="w-full lg:w-4/12">
<div
class=" card bg-white shadow-xl flex flex-col min-w-0 break-words w-full auto-rows-max">
<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="text-lg text-blueGray-700'">
รายการสอบ
class="flex flex-col min-w-0 break-words w-full shadow-lg auto-rows-max card bg-white">
<div class="rounded-t mb-0 p-3 border-0 ">
<div class="flex flex-wrap items-center justify-between">
<h3 class="text-lg text-blueGray-700 font-semibold">
รายการสอบคัดเลือก
</h3>
</div>
<div class="text-xs font-light">จำนวน {exams.length} รายการ</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<div class="w-full">
<div class="flex flex-wrap space-y-3 card-list px-3">
{#each exams as exam}
<div class="flex flex-col w-full">
<a href={"/qualifying/"+exam.id}>
<div class="card card-side card-outline w-full">
<figure class="w-full lg:w-3/12 imgCard2">
<img src={exam.image} alt="1" class="h-full fit2" />
</figure>
<div class="px-5 py-3 w-full lg:w-9/12">
<h2 class="text-xs font-light text-gray-500">
{exam.date??""}
</h2>
<div class="pt-1 text-sub">
{exam.title}
</div>
</div>
</div>
</a>
</div>
{/each}
</div>
<!-- <div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse tableScroll">
<thead>
<tr>
@ -72,7 +93,7 @@
{/each}
</tbody>
</table>
</div>
</div> -->
</div>
</div>
</div>

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

@ -47,7 +47,7 @@
<hr class="border-blueGray-200 my-2" />
<div class="text-lg py-1">
<div class="flex flex-wrap items-center">
<div class="flex flex-wrap items-center">
<a class="btn btn-sm btn-outline btn-info cursor-pointe" href={positions_base_url+p.path} target="_blank">
<i class="fa-solid fa-pen-to-square text-sm pr-2"></i>
สมัครสอบ

2
cms/static/styles/fullcalendar.css
View file

@ -91,7 +91,7 @@ table.fc-border-separate{
/* ----------- table today ----------- */
.fc .fc-daygrid-day.fc-day-today{
background-color: rgba(100, 116, 139, 0.06);
background-color: rgba(100, 116, 139, 0.15);
}
/* ----------- table event ----------- */