TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix sticky elements

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-03-16 12:34:01 -03:00 committed by James A. Petts
parent b39a96cfb2
commit bc7cf6e01d
3 changed files with 104 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
platform/ui/src/views/StudyList/StudyList.js
View File

@ -69,13 +69,8 @@ const StudyList = ({ studies, perPage }) => {
'h-screen': isEmptyStudies,
})}
>
<div className="sticky top-0 z-10">
<Header />
<StudyListFilter
numOfStudies={numOfStudies}
filtersMeta={filtersMeta}
/>
</div>
<StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
<StudyListTable
studies={studiesData}
numOfStudies={numOfStudies}

2
platform/ui/src/views/StudyList/components/Header.js
View File

@ -12,7 +12,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
};
return (
<div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white">
<div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white sticky top-0 z-10">
<div className="flex items-center">
<div className="mx-3">{appLogo}</div>
<div>{children}</div>

18
platform/ui/src/views/StudyList/components/StudyListFilter.js
View File

@ -124,12 +124,16 @@ const StudyListFilter = ({
};
return (
<div className="border-t-4 border-b-4 border-black">
<>
<div className="border-t-4 border-black">
<div className="bg-custom-navyDark">
<div className="container m-auto relative flex flex-col pt-5 pb-3">
<div className="container m-auto relative flex flex-col pt-5">
<div className="flex flex-row justify-between mb-5 px-12">
<div className="flex flex-row">
<Typography variant="h4" className="text-custom-aquaBright mr-6">
<Typography
variant="h4"
className="text-custom-aquaBright mr-6"
>
Study List
</Typography>
<div className="flex flex-row items-end">
@ -171,11 +175,18 @@ const StudyListFilter = ({
</Typography>
</div>
</div>
</div>
</div>
</div>
<div className="sticky z-10" style={{ top: 54 }}>
<div className="bg-custom-navyDark pt-3 pb-3 border-b-4 border-black">
<div className="container m-auto relative flex flex-col">
<div className="flex flex-row w-full">
{filtersMeta.map(
({ name, displayName, inputType, isSortable, gridCol }) => {
return (
<div
key={name}
className={classnames(
`w-${gridCol}/24`,
'pl-4 first:pl-12'
@ -221,6 +232,7 @@ const StudyListFilter = ({
</div>
)}
</div>
</>
);
};