shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add board background grid

Browse Source
This commit is contained in:
Henry
2024-03-28 08:45:44 +00:00
parent 09cd6529fc
commit b5b8ba0700
3 changed files with 78 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/app/boards/[...boardId]/page.tsx
View File

@@ -163,8 +163,45 @@ export default function BoardPage() {
};
return (
<div className="flex h-full flex-col">
<div className="flex w-full justify-between p-8">
<div className="relative flex h-full flex-col">
<div>
<svg
style={{
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
color: "white",
}}
>
<pattern
id="pattern"
x="0.034759358288862785"
y="3.335370511841166"
width="14.423223834988539"
height="14.423223834988539"
patternUnits="userSpaceOnUse"
patternTransform="translate(-0.45072574484339184,-0.45072574484339184)"
>
<circle
cx="0.45072574484339184"
cy="0.45072574484339184"
r="0.45072574484339184"
fill="#3e3e3e"
></circle>
</pattern>
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="url(#pattern)"
></rect>
</svg>
</div>
<div className="z-10 flex w-full justify-between p-8">
<form
onSubmit={formik.handleSubmit}
className="focus-visible:outline-none"
@@ -195,7 +232,7 @@ export default function BoardPage() {
</div>
</div>
<div className="scrollbar-w-none flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-300 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px]">
<div className="scrollbar-w-none z-10 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-300 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px]">
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="all-lists" direction="horizontal" type="LIST">
{(provided) => (

38
src/app/boards/components/BoardsList.tsx
View File

@@ -19,7 +19,43 @@ export function BoardsList() {
<div className="xxl:grid-cols-5 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{data?.map((board) => (
<Link key={board.publicId} href={`boards/${board.publicId}`}>
<div className="align-center mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 hover:bg-dark-200">
<div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 hover:bg-dark-200">
<div>
<svg
style={{
position: "absolute",
width: "100%",
height: "100%",
top: "0px",
left: "0px",
color: "white",
}}
>
<pattern
id="pattern"
x="0.034759358288862785"
y="3.335370511841166"
width="14.423223834988539"
height="14.423223834988539"
patternUnits="userSpaceOnUse"
patternTransform="translate(-0.45072574484339184,-0.45072574484339184)"
>
<circle
cx="0.45072574484339184"
cy="0.45072574484339184"
r="0.45072574484339184"
fill="#3e3e3e"
></circle>
</pattern>
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="url(#pattern)"
></rect>
</svg>
</div>
<p className="text-md px-4 font-medium text-dark-1000">
{board.name}
</p>

2
src/app/components/CheckboxDropdown.tsx
View File

@@ -36,7 +36,7 @@ export default function CheckboxDropdown({
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute left-0 top-[26px] z-10 mt-2 w-56 origin-top-left rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="p-2">
<div className="p-1">
{items?.map((item) => (
<Menu.Item key={item.key}>
<div