diff --git a/src/display/components/collapsible.css b/src/display/components/collapsible.css index b61443e45cf0feea7fbe9bfb98d6449066b8228f..930f02d3192a8fa1bb71b1c3b43a576324774cb3 100644 --- a/src/display/components/collapsible.css +++ b/src/display/components/collapsible.css @@ -1,9 +1,12 @@ .collapsible-content { overflow: hidden; - transition: height 0.2s ease-in-out; border-bottom: 1px solid #dee2e6 !important; } +.collapsible-transition-height { + transition: height 0.2s ease-in-out; +} + .collapsible-content-padding > ul { margin: 0 0 0 2em; } @@ -12,19 +15,6 @@ padding: 10px 0 10px 10px; } -.collapsible-rotate-center { - -moz-transition: all 0.2s linear; - -webkit-transition: all 0.2s linear; - font-size: 4em; - transition: all 0.2s linear; -} -.collapsible-rotate-center.down { - transform: rotate(-90deg); -} -.collapsible-rotate-center.up { - transform: rotate(90deg); -} - .collapsible-button { position: relative; display: flex; diff --git a/src/display/components/collapsible.tsx b/src/display/components/collapsible.tsx index 3c3e6fcea94f5eb6283a4fe7966431210fe1cbaf..44a87922a1b85d217b0eec6ba341e96d1d83c504 100644 --- a/src/display/components/collapsible.tsx +++ b/src/display/components/collapsible.tsx @@ -6,14 +6,16 @@ interface CollapsibleProps { header: string | React.ReactNode; children?: React.ReactNode | React.ReactNode[]; color?: string; + heightTransition?: boolean; } -// Implementation details at https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208 +// Implementation details partially from https://medium.com/edonec/build-a-react-collapsible-component-from-scratch-using-react-hooks-typescript-73dfd02c9208 function Collapsible({ open, header, children, color = "gray", + heightTransition = true, }: CollapsibleProps) { const [isOpen, setIsOpen] = useState(open); const [height, setHeight] = useState<number | undefined>( @@ -59,7 +61,7 @@ function Collapsible({ {header} </button> </div> - <div className={"collapsible-content"} style={{ height }}> + <div className={`collapsible-content ${heightTransition ? "collapsible-transition-height" : ""}`} style={{ height }}> <div ref={ref}> <div className={"collapsible-content-padding"}> {children} diff --git a/src/display/components/nodeinfo/neighbors.tsx b/src/display/components/nodeinfo/neighbors.tsx index 36bf8c37f07d7227eed61b7e31edb163ef08a491..219c3990cf2ad0d425fea1b5bf94561f5b1d2ba4 100644 --- a/src/display/components/nodeinfo/neighbors.tsx +++ b/src/display/components/nodeinfo/neighbors.tsx @@ -25,7 +25,7 @@ function Neighbors({ neighbors, nodeClickedCallback }: NeighborsProps) { <FancyScrollbar> <Collapsible header={"Verwandte Inhalte"}> {classes.map((cls) => ( - <Collapsible header={cls} key={cls}> + <Collapsible header={cls} key={cls} heightTransition={false}> <ul> {categories.get(cls).map((node) => ( <li key={node.name}>{node.name}</li>