Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-12-28 20:04:14 +08:00
Code Issues Projects Releases Wiki Activity

feat(connections): sticky table thead

Browse Source
This commit is contained in:
kunish 2023-09-05 00:06:24 +08:00
parent 3728cd2e32
commit 7f8f8a9881
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Collapse.tsx
View File

@ -38,7 +38,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
<div <div
class={twMerge( class={twMerge(
getCollapseClassName(), getCollapseClassName(),
'collapse-arrow collapse mb-2 select-none overflow-visible border-secondary bg-base-200', 'collapse collapse-arrow mb-2 select-none border-secondary bg-base-200',
)} )}
> >
<div <div

2
src/components/Header.tsx
View File

@ -128,7 +128,7 @@ export const Header = () => {
} }
return ( return (
<ul class="navbar rounded-box sticky inset-x-0 top-2 z-10 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4"> <ul class="navbar rounded-box sticky inset-x-0 top-2 z-50 mx-2 mt-2 flex w-auto items-center justify-center bg-base-300 px-4">
<div class="navbar-start gap-4"> <div class="navbar-start gap-4">
<div class={twMerge('drawer w-auto lg:hidden', '')}> <div class={twMerge('drawer w-auto lg:hidden', '')}>
<input <input

10
src/pages/Connections.tsx
View File

@ -237,7 +237,7 @@ export default () => {
}) })
return ( return (
<div class="flex flex-col gap-4"> <div class="flex h-full flex-col gap-4 overflow-y-auto">
<div class="flex w-full items-center gap-2"> <div class="flex w-full items-center gap-2">
<input <input
class="input input-primary flex-1" class="input input-primary flex-1"
@ -268,15 +268,15 @@ export default () => {
/> />
</div> </div>
<div class="overflow-x-auto whitespace-nowrap rounded-md"> <div class="overflow-x-auto whitespace-nowrap rounded-md bg-base-300">
<table class="table table-xs rounded-none bg-base-200"> <table class="table table-xs relative rounded-none">
<thead> <thead class="sticky top-0 z-10">
<For each={table.getHeaderGroups()}> <For each={table.getHeaderGroups()}>
{(headerGroup) => ( {(headerGroup) => (
<tr> <tr>
<For each={headerGroup.headers}> <For each={headerGroup.headers}>
{(header) => ( {(header) => (
<th class="bg-base-300"> <th class="bg-base-200">
<div <div
class={twMerge( class={twMerge(
'flex items-center justify-between gap-2', 'flex items-center justify-between gap-2',