Simplify css and DropzoneBetweenElements #3158
Conversation
|
|
||
| const Line = styled("div")` | ||
| background-color: ${({ theme }) => theme.col.blueGrayDark}; | ||
| margin: 1px 0; |
There was a problem hiding this comment.
No need for margin or flex-grow, instead just setting width: 100%
| height: number; | ||
| } | ||
|
|
||
| const Root = styled("div")` |
There was a problem hiding this comment.
No need for a root wrapper
| @@ -5,52 +5,41 @@ import Dropzone, { | |||
| PossibleDroppableObject, | |||
| } from "../../ui-components/Dropzone"; | |||
|
|
|||
| interface Props { | |||
There was a problem hiding this comment.
Co-locate props with where they're used below
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| transform: translateY(calc(-50% - ${LINE_HEIGHT / 2}px)); |
There was a problem hiding this comment.
No need to allow passing height or top, we can simply set height to 30px, that makes the droppable area always 30px high. Then we can use transform to move the dropzone "between" the elements by -50% related to its own height of 30px, minus half the height of the line. That makes it sit right in the middle
There was a problem hiding this comment.
Thats a nice solution for most of the Elements. The issue I see now however, is that the Dropzone at the bottom will in part be overshadowed by the last DropzoneBetweenElements.
Do you think thats an issue? I think it could be annoying for the users.
There was a problem hiding this comment.
Yeah good point, fixed it with a classname and making the last dropzone less high
|
Hey @fabian-bizfactory , I thought this was quicker than doing another round of review |
frontend/src/js/external-forms/form-components/DropzoneBetweenElements.tsx
Show resolved
Hide resolved
frontend/src/js/external-forms/form-components/DropzoneBetweenElements.tsx
Show resolved
Hide resolved
frontend/src/js/external-forms/form-components/DropzoneBetweenElements.tsx
Show resolved
Hide resolved
frontend/src/js/external-forms/form-components/DropzoneBetweenElements.tsx
Show resolved
Hide resolved
Kadrian
merged commit 028a378
into
feature/allow-insertion-of-concepts-between-each-other
delete-merged-branch
bot
deleted the
simplify-dropzone-between-elements
branch
No description provided.