From bc7cf6e01d396553e9cc39e10440d64c9fce2b2f Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Mon, 16 Mar 2020 12:34:01 -0300
Subject: [PATCH] fix sticky elements

---
 platform/ui/src/views/StudyList/StudyList.js  |   9 +-
 .../src/views/StudyList/components/Header.js  |   2 +-
 .../StudyList/components/StudyListFilter.js   | 190 ++++++++++--------
 3 files changed, 104 insertions(+), 97 deletions(-)

diff --git a/platform/ui/src/views/StudyList/StudyList.js b/platform/ui/src/views/StudyList/StudyList.js
index 54aa36364..652fb52ec 100644
--- a/platform/ui/src/views/StudyList/StudyList.js
+++ b/platform/ui/src/views/StudyList/StudyList.js
@@ -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>
+      <Header />
+      <StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
       <StudyListTable
         studies={studiesData}
         numOfStudies={numOfStudies}
diff --git a/platform/ui/src/views/StudyList/components/Header.js b/platform/ui/src/views/StudyList/components/Header.js
index 8d273b4f7..21e3d31a8 100644
--- a/platform/ui/src/views/StudyList/components/Header.js
+++ b/platform/ui/src/views/StudyList/components/Header.js
@@ -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>
diff --git a/platform/ui/src/views/StudyList/components/StudyListFilter.js b/platform/ui/src/views/StudyList/components/StudyListFilter.js
index c7682a1ef..5de435627 100644
--- a/platform/ui/src/views/StudyList/components/StudyListFilter.js
+++ b/platform/ui/src/views/StudyList/components/StudyListFilter.js
@@ -124,103 +124,115 @@ const StudyListFilter = ({
   };
 
   return (
-    <div className="border-t-4 border-b-4 border-black">
-      <div className="bg-custom-navyDark">
-        <div className="container m-auto relative flex flex-col pt-5 pb-3">
-          <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">
-                Study List
-              </Typography>
-              <div className="flex flex-row items-end">
-                <Button
-                  variant="text"
-                  size="small"
-                  color="inherit"
-                  className="text-custom-blueBright"
-                  startIcon={<Icon name="info-link" className="w-2" />}
+    <>
+      <div className="border-t-4 border-black">
+        <div className="bg-custom-navyDark">
+          <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"
                 >
-                  <span className="flex flex-col flex-1">
-                    <span>Learn more</span>
-                    <span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
-                  </span>
-                </Button>
+                  Study List
+                </Typography>
+                <div className="flex flex-row items-end">
+                  <Button
+                    variant="text"
+                    size="small"
+                    color="inherit"
+                    className="text-custom-blueBright"
+                    startIcon={<Icon name="info-link" className="w-2" />}
+                  >
+                    <span className="flex flex-col flex-1">
+                      <span>Learn more</span>
+                      <span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
+                    </span>
+                  </Button>
+                </div>
+              </div>
+              <div className="flex flex-row">
+                {isFiltering() && (
+                  <Button
+                    rounded="full"
+                    variant="outlined"
+                    color="primary"
+                    className="text-custom-blueBright border-custom-blueBright mx-8"
+                    startIcon={<Icon name="cancel" />}
+                    onClick={clearFilters}
+                  >
+                    Clear filters
+                  </Button>
+                )}
+                <Typography variant="h4" className="mr-2">
+                  {numOfStudies > 100 ? '>100' : numOfStudies}
+                </Typography>
+                <Typography
+                  variant="h6"
+                  className="text-custom-grayLight self-end pb-1"
+                >
+                  Studies
+                </Typography>
               </div>
             </div>
-            <div className="flex flex-row">
-              {isFiltering() && (
-                <Button
-                  rounded="full"
-                  variant="outlined"
-                  color="primary"
-                  className="text-custom-blueBright border-custom-blueBright mx-8"
-                  startIcon={<Icon name="cancel" />}
-                  onClick={clearFilters}
-                >
-                  Clear filters
-                </Button>
-              )}
-              <Typography variant="h4" className="mr-2">
-                {numOfStudies > 100 ? '>100' : numOfStudies}
-              </Typography>
-              <Typography
-                variant="h6"
-                className="text-custom-grayLight self-end pb-1"
-              >
-                Studies
-              </Typography>
-            </div>
-          </div>
-          <div className="flex flex-row w-full">
-            {filtersMeta.map(
-              ({ name, displayName, inputType, isSortable, gridCol }) => {
-                return (
-                  <div
-                    className={classnames(
-                      `w-${gridCol}/24`,
-                      'pl-4 first:pl-12'
-                    )}
-                  >
-                    <FilterLabel
-                      key={name}
-                      label={displayName}
-                      isSortable={
-                        isSortable && numOfStudies <= 100 && numOfStudies > 0
-                      }
-                      isBeingSorted={sortBy === name}
-                      sortDirection={sortDirection}
-                      onLabelClick={() => handleFilterLabelClick(name)}
-                      inputType={inputType}
-                    >
-                      {inputType !== 'none' && (
-                        <Input
-                          className="border-custom-blue mt-2 bg-black"
-                          type="text"
-                          containerClassName="mr-2"
-                          value={currentFiltersValues[name] || ''}
-                          onChange={event =>
-                            handleFilterValueChange(event, name)
-                          }
-                        />
-                      )}
-                    </FilterLabel>
-                  </div>
-                );
-              }
-            )}
           </div>
         </div>
       </div>
-      {numOfStudies > 100 && (
-        <div className="container m-auto">
-          <div className="bg-custom-blue text-center text-base py-1 rounded-b">
-            <p className="text-white">
-              Filter list to 100 studies or less to enable sorting
-            </p>
+      <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'
+                      )}
+                    >
+                      <FilterLabel
+                        key={name}
+                        label={displayName}
+                        isSortable={
+                          isSortable && numOfStudies <= 100 && numOfStudies > 0
+                        }
+                        isBeingSorted={sortBy === name}
+                        sortDirection={sortDirection}
+                        onLabelClick={() => handleFilterLabelClick(name)}
+                        inputType={inputType}
+                      >
+                        {inputType !== 'none' && (
+                          <Input
+                            className="border-custom-blue mt-2 bg-black"
+                            type="text"
+                            containerClassName="mr-2"
+                            value={currentFiltersValues[name] || ''}
+                            onChange={event =>
+                              handleFilterValueChange(event, name)
+                            }
+                          />
+                        )}
+                      </FilterLabel>
+                    </div>
+                  );
+                }
+              )}
+            </div>
           </div>
         </div>
-      )}
-    </div>
+        {numOfStudies > 100 && (
+          <div className="container m-auto">
+            <div className="bg-custom-blue text-center text-base py-1 rounded-b">
+              <p className="text-white">
+                Filter list to 100 studies or less to enable sorting
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
   );
 };