style: Styling base datatable CSS

This commit is contained in:
Cristian Ditaputratama 2024-10-31 23:08:05 +07:00
parent 10182d9dbc
commit 6efa763e73
Signed by: ditatompel
GPG key ID: 31D3D06D77950979
3 changed files with 23 additions and 2 deletions

View file

@ -50,7 +50,7 @@ templ TableNodes(data monero.Nodes, q monero.QueryNodes, p paging.Pagination) {
@DtRowPerPage("/remote-nodes", "#tbl_nodes", q.Limit, q) @DtRowPerPage("/remote-nodes", "#tbl_nodes", q.Limit, q)
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table-striped table-hover"> <table class="dt">
<thead> <thead>
<tr> <tr>
<th scope="col">Host:Port</th> <th scope="col">Host:Port</th>

View file

@ -81,7 +81,7 @@ func TableNodes(data monero.Nodes, q monero.QueryNodes, p paging.Pagination) tem
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"overflow-x-auto\"><table class=\"table-striped table-hover\"><thead><tr><th scope=\"col\">Host:Port</th><th scope=\"col\">Nettype</th><th scope=\"col\">Protocol</th><th scope=\"col\">Country</th><th scope=\"col\">Status</th><th scope=\"col\">Estimate Fee</th><th scope=\"col\">Uptime</th><th scope=\"col\">Check</th></tr></thead> <tbody>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"overflow-x-auto\"><table class=\"dt\"><thead><tr><th scope=\"col\">Host:Port</th><th scope=\"col\">Nettype</th><th scope=\"col\">Protocol</th><th scope=\"col\">Country</th><th scope=\"col\">Status</th><th scope=\"col\">Estimate Fee</th><th scope=\"col\">Uptime</th><th scope=\"col\">Check</th></tr></thead> <tbody>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

View file

@ -26,6 +26,27 @@ button.copy-input {
@apply px-2 shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-orange-600 text-white hover:brightness-125 focus:outline-none focus:bg-orange-700 disabled:opacity-50 disabled:pointer-events-none; @apply px-2 shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-orange-600 text-white hover:brightness-125 focus:outline-none focus:bg-orange-700 disabled:opacity-50 disabled:pointer-events-none;
} }
/* table */
table.dt {
@apply min-w-full divide-y divide-neutral-700;
}
table.dt thead {
@apply bg-neutral-800;
}
table.dt thead tr th {
@apply px-3 py-3 text-start text-xs font-semibold uppercase text-neutral-200;
}
table.dt tbody {
@apply divide-y divide-neutral-700;
}
table.dt tbody tr {
@apply odd:bg-neutral-900 even:bg-neutral-800;
}
table.dt tbody tr th,
table.dt tbody tr td {
@apply px-3 py-2;
}
/* pagination */ /* pagination */
nav.pagination button.active { nav.pagination button.active {
@apply py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-bold rounded-lg border border-orange-500 bg-orange-500 text-white shadow-sm hover:brightness-125 disabled:opacity-90 disabled:pointer-events-none; @apply py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-bold rounded-lg border border-orange-500 bg-orange-500 text-white shadow-sm hover:brightness-125 disabled:opacity-90 disabled:pointer-events-none;