chore: Change css class thead .th-filter to .frameless

This commit is contained in:
Cristian Ditaputratama 2024-11-04 23:49:06 +07:00
parent 1cd1b1a9c6
commit 7da5fdb10c
Signed by: ditatompel
GPG key ID: 31D3D06D77950979
3 changed files with 16 additions and 14 deletions

View file

@ -85,7 +85,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
name="host" name="host"
value={ fmt.Sprintf("%s", q.Host) } value={ fmt.Sprintf("%s", q.Host) }
autocomplete="off" autocomplete="off"
class="th-filter" class="frameless"
placeholder="Filter Host / IP" placeholder="Filter Host / IP"
hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"host"})) } hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"host"})) }
hx-push-url="true" hx-push-url="true"
@ -98,7 +98,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
<select <select
id="nettype" id="nettype"
name="nettype" name="nettype"
class="th-filter" class="frameless"
autocomplete="off" autocomplete="off"
hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"nettype"})) } hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"nettype"})) }
hx-trigger="change" hx-trigger="change"
@ -116,7 +116,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
<select <select
id="protocol" id="protocol"
name="protocol" name="protocol"
class="th-filter" class="frameless"
autocomplete="off" autocomplete="off"
hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"protocol"})) } hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"protocol"})) }
hx-trigger="change" hx-trigger="change"
@ -134,7 +134,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
<select <select
id="cc" id="cc"
name="cc" name="cc"
class="th-filter" class="frameless"
autocomplete="off" autocomplete="off"
hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"cc"})) } hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"cc"})) }
hx-trigger="change" hx-trigger="change"
@ -156,7 +156,7 @@ templ TableNodes(data monero.Nodes, countries []monero.Countries, q monero.Query
<select <select
id="status" id="status"
name="status" name="status"
class="th-filter" class="frameless"
autocomplete="off" autocomplete="off"
hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"status"})) } hx-get={ fmt.Sprintf("%s?%s", "/remote-nodes", paging.EncodedQuery(q, []string{"status"})) }
hx-trigger="change" hx-trigger="change"

View file

@ -146,7 +146,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
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("\" autocomplete=\"off\" class=\"th-filter\" placeholder=\"Filter Host / IP\" hx-get=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" autocomplete=\"off\" class=\"frameless\" placeholder=\"Filter Host / IP\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -159,7 +159,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
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("\" hx-push-url=\"true\" hx-trigger=\"keyup changed delay:0.4s\" hx-target=\"#tbl_nodes\" hx-swap=\"outerHTML\"></td><td><select id=\"nettype\" name=\"nettype\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-push-url=\"true\" hx-trigger=\"keyup changed delay:0.4s\" hx-target=\"#tbl_nodes\" hx-swap=\"outerHTML\"></td><td><select id=\"nettype\" name=\"nettype\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -218,7 +218,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"protocol\" name=\"protocol\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"protocol\" name=\"protocol\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -277,7 +277,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"cc\" name=\"cc\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td><select id=\"cc\" name=\"cc\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -366,7 +366,7 @@ func TableNodes(data monero.Nodes, countries []monero.Countries, q monero.QueryN
} }
} }
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td colspan=\"2\"><select id=\"status\" name=\"status\" class=\"th-filter\" autocomplete=\"off\" hx-get=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></td><td colspan=\"2\"><select id=\"status\" name=\"status\" class=\"frameless\" autocomplete=\"off\" hx-get=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

View file

@ -26,6 +26,12 @@ 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;
} }
/* forms */
input.frameless,
select.frameless {
@apply block w-full text-neutral-400 placeholder-neutral-500 bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-neutral-700 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-orange-400 focus:ring-0 focus:ring-orange-400 disabled:opacity-50 disabled:pointer-events-none;
}
/* table */ /* table */
table.dt { table.dt {
@apply min-w-full divide-y divide-neutral-700; @apply min-w-full divide-y divide-neutral-700;
@ -36,10 +42,6 @@ table.dt thead {
table.dt thead tr th { table.dt thead tr th {
@apply px-3 py-3 text-start text-xs font-semibold uppercase text-neutral-200; @apply px-3 py-3 text-start text-xs font-semibold uppercase text-neutral-200;
} }
thead input.th-filter,
thead select.th-filter {
@apply block w-full text-neutral-400 placeholder-neutral-500 bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-neutral-700 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-orange-400 focus:ring-0 focus:ring-orange-400;
}
table.dt tbody { table.dt tbody {
@apply divide-y divide-neutral-700; @apply divide-y divide-neutral-700;
} }