Beautify subpage with css and data

This commit is contained in:
schooltechx 2023-04-06 22:07:46 +07:00
parent c3ff670473
commit faaae95956
6 changed files with 112 additions and 26 deletions

View file

@ -24,13 +24,28 @@
</div>
</div>
</div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
<div class="card bg-white shadow-xl w-full p-8">
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl ">
<div>
{@html data.detail}
</div>
<div class="pt-12"></div>
<div></div>
<div></div>
{#if data.docUrl}
<div><a href={data.docUrl} >เอกสาร</a></div>
{/if}
</div>
</div>
{#if data.files}
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl">
{#each data.files as file}
<div>
<a href={file.url}>{file.title}</a>
</div>
{/each}
</div>
</div>
{/if}
</section>

View file

@ -37,19 +37,16 @@
</div>
<div class="w-full lg:w-5/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=" 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>
</div>
</div>
</div>
</div>
</div>
<div class="block w-full overflow-x-auto">
<table class="items-center w-full bg-transparent border-collapse">
<thead>
@ -63,7 +60,7 @@
{#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={"/qualifying/"+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.title}</td>
<td class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"><a href={"/qualifying/"+exam.id}>{exam.title}</a></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>

View file

@ -11,7 +11,7 @@
</div>
</section>
<section class="pb-40 relative bg-blueGray-100">
<div class="container mx-auto justify-center flex flex-wrap">
<div class="container mx-auto justify-center flex flex-wrap ">
<div class=" bg-blueGray-100 -mt-6 px-5 top-0 bottom-auto absolute z-40 rounded-md" >
<div class="text-sm breadcrumbs">
<ul>
@ -27,8 +27,8 @@
</div>
</div>
</div>
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11">
<div class="card bg-white shadow-xl w-full p-8">
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl ">
<div>
{@html data.detail}
</div>
@ -38,6 +38,18 @@
{/if}
</div>
</div>
{#if data.files}
<div class="container mx-auto items-start flex flex-wrap px-4 pt-11 justify-center">
<div class="card bg-white shadow-xl w-full p-8 max-w-4xl">
{#each data.files as file}
<div>
<a href={file.url}>{file.title}</a>
</div>
{/each}
</div>
</div>
{/if}
</section>