feat: styling for kanban
This commit is contained in:
parent
da264777da
commit
e932b993a4
@ -20,7 +20,18 @@ const ColDivider = (props) => {
|
|||||||
backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined,
|
backgroundColor: isOver ? 'rgba(241, 139, 98, .1)' : undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
return <div ref={setNodeRef} style={{ width: 24, ...droppableStyle }}></div>;
|
return (
|
||||||
|
<div
|
||||||
|
ref={setNodeRef}
|
||||||
|
className={cls(
|
||||||
|
'nb-col-divider',
|
||||||
|
css`
|
||||||
|
width: 24px;
|
||||||
|
`,
|
||||||
|
)}
|
||||||
|
style={{ ...droppableStyle }}
|
||||||
|
></div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const RowDivider = (props) => {
|
const RowDivider = (props) => {
|
||||||
@ -52,17 +63,26 @@ const RowDivider = (props) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<span
|
||||||
ref={setNodeRef}
|
ref={setNodeRef}
|
||||||
|
className={cls(
|
||||||
|
'nb-row-divider',
|
||||||
|
css`
|
||||||
|
height: 24px;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -24px;
|
||||||
|
`,
|
||||||
|
)}
|
||||||
style={{
|
style={{
|
||||||
zIndex: active ? 1000 : 0,
|
zIndex: active ? 1000 : 0,
|
||||||
height: 2,
|
// height: 24,
|
||||||
width: '100%',
|
// width: '100%',
|
||||||
position: 'absolute',
|
// position: 'absolute',
|
||||||
marginTop: -24,
|
// marginTop: -24,
|
||||||
...droppableStyle,
|
...droppableStyle,
|
||||||
}}
|
}}
|
||||||
></div>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -152,7 +172,7 @@ export const Grid: any = observer((props: any) => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</DndWrapper>
|
</DndWrapper>
|
||||||
<div>{render()}</div>
|
{render()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -27,8 +27,18 @@ export const KanbanCard: any = observer((props: any) => {
|
|||||||
bordered={false}
|
bordered={false}
|
||||||
hoverable
|
hoverable
|
||||||
style={{ cursor: 'pointer', overflow: 'hidden' }}
|
style={{ cursor: 'pointer', overflow: 'hidden' }}
|
||||||
bodyStyle={{ paddingBottom: 0 }}
|
// bodyStyle={{ paddingBottom: 0 }}
|
||||||
className={css`
|
className={css`
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.nb-row-divider {
|
||||||
|
height: 16px;
|
||||||
|
margin-top: -16px;
|
||||||
|
&:last-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
.ant-description-input {
|
.ant-description-input {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -39,6 +49,18 @@ export const KanbanCard: any = observer((props: any) => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.ant-formily-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.nb-grid-row:last-of-type {
|
||||||
|
.nb-grid-col {
|
||||||
|
.nb-form-item:last-of-type {
|
||||||
|
.ant-formily-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
<SchemaComponentOptions components={{}}>
|
<SchemaComponentOptions components={{}}>
|
||||||
|
Loading…
Reference in New Issue
Block a user