unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-22 04:54:18 +00:00
Code Activity

✨ Complete BoxFullScrollable !

Browse source
This commit is contained in:
Stefano Pigozzi 2021-04-24 00:27:35 +02:00
parent ff35676781
commit 09d84eeae8
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
2 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
code/frontend/src/components/BoxFullScrollable.js
View file

@ -11,19 +11,16 @@ import BoxFull from "./BoxFull"
*
* @param children - The contents of the box body.
* @param childrenClassName - Additional class(es) added to the inner `<div>` acting as the body.
* @param height - The fixed height of the box body.
* @param props - Additional props to pass to the box.
* @returns {JSX.Element}
* @constructor
*/
export default function BoxFullScrollable({ children, childrenClassName, height, ...props }) {
export default function BoxFullScrollable({ children, childrenClassName, ...props }) {
return (
<BoxFull
childrenClassName={classNames(Style.ScrollableBody, childrenClassName)}
childrenProps={{"style": {"height": height}}}
{...props}
>
{children}
<BoxFull childrenClassName={classNames(Style.BoxScrollableBody, childrenClassName)} {...props}>
<div className={classNames(Style.ScrollContainer)}>
{children}
</div>
</BoxFull>
)
}

22
code/frontend/src/components/BoxFullScrollable.module.css
View file

@ -1,5 +1,23 @@
.ScrollableBody {
flex-grow: 0;
.BoxScrollableBody {
position: relative;
border-bottom-right-radius: 0;
}
.ScrollContainer {
position: absolute;
padding: 10px 40px;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
/* Custom scrollbar (firefox only!) */
scrollbar-color: var(--bg-light) var(--bg-dark);
scrollbar-width: auto;
}