Merge pull request #3162 from ingef/change-dropzone-between-elements-…

…design Change top for last and first DropzoneBetweenElements and change timing for hover
ingef · Sep 4, 2023 · ab43b3d · ab43b3d
2 parents 15dbe56 + b1b24ee
commit ab43b3d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/js/external-forms/form-components/DropzoneList.tsx b/frontend/src/js/external-forms/form-components/DropzoneList.tsx
@@ -40,8 +40,16 @@ const Row = styled("div")`
 const ConceptContainer = styled("div")`
   position: relative;
 `;
-const SxDropzoneBetweenElements = styled(DropzoneBetweenElements)`
+
+const SxDropzoneBetweenElements = styled(DropzoneBetweenElements)<{
+  index: number;
+}>`
+  ${({ index }) => (index === 0 ? "top: 3px;" : "")}
+`;
+
+const SxLastDropzoneBetweenElements = styled(DropzoneBetweenElements)`
   height: 15px;
+  top: -5px;
 `;
 
 interface PropsT<DroppableObject> {
@@ -102,9 +110,10 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
           {items.map((item, i) => (
             <ConceptContainer key={i}>
               {!disallowMultipleColumns && (
-                <DropzoneBetweenElements
+                <SxDropzoneBetweenElements
                   acceptedDropTypes={acceptedDropTypes}
                   onDrop={dropBetween(i)}
+                  index={i}
                 />
               )}
               <ListItem>
@@ -115,7 +124,7 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
           ))}
           <ConceptContainer>
             {!disallowMultipleColumns && (
-              <SxDropzoneBetweenElements
+              <SxLastDropzoneBetweenElements
                 acceptedDropTypes={acceptedDropTypes}
                 onDrop={dropBetween(items.length)}
               />

diff --git a/frontend/src/js/small-tab-navigation/HoverNavigatable.tsx b/frontend/src/js/small-tab-navigation/HoverNavigatable.tsx
@@ -33,7 +33,7 @@ const Root = styled("div")<{
 `;
 
 // estimated to feel responsive, but not too quick
-const TIME_UNTIL_NAVIGATE = 1000;
+const TIME_UNTIL_NAVIGATE = 1300;
 
 export const HoverNavigatable = ({
   triggerNavigate,