update classes to prevent cutoff of left side of project table (#1934)

* removed width:100% from contentContainer class when no sidebar * remove `overflow-y: scroll from body tag * add max-width and wrapper div to div.tableContainer * remove vertical scrollbar from body * modify styles on thead and popover, so heading is sticky and popover stacked on top * restore 100% width on contentContainer * tableContainer height must be calculated based on em * Remove scrolling from body * reduce minHeight of ContentContainer * correct minHeight of contentContainer to allow for changes in font size * restore vertical scrolling on body tag so other scrolling works on other pages in the site * make room for inner scroll bar * set maxWIdth on the multi project toolbar * slight adjustment to height of contentContainer * use js to change the body style in the ProjectsPage component * set width of the Multi Project Toolbar * Minor adj to div spacing above grid on My Projects --------- Co-authored-by: John Darragh <[email protected]>
hackforla · Nov 26, 2024 · c8f28c8 · c8f28c8
1 parent 8f01080
commit c8f28c8
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 74 deletions.
diff --git a/client/src/components/Layout/ContentContainer.jsx b/client/src/components/Layout/ContentContainer.jsx
@@ -7,7 +7,7 @@ const useStyles = createUseStyles({
     flex: "1",
     display: "flex",
     flexDirection: "row",
-    minHeight: "calc(100vh - 103px - 48px)"
+    minHeight: "calc(100vh - 71px - 5em)"
   },
   content: {
     boxSizing: "border-box",

diff --git a/client/src/components/Layout/ContentContainerNoSidebar.jsx b/client/src/components/Layout/ContentContainerNoSidebar.jsx
@@ -8,7 +8,7 @@ const useStyles = createUseStyles({
     flexDirection: "column",
     justifyContent: "flex-start",
     alignItems: "center",
-    minHeight: "calc(100vh - 103px - 48px)",
+    minHeight: "calc(100vh - 71px - 5em)",
     margin: "auto",
     width: "100%"
   }

diff --git a/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.jsx b/client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.jsx
@@ -112,6 +112,7 @@ const ProjectTableColumnHeader = ({
     <div style={{ width: "100%", height: "100%" }}>
       {header.id !== "checkAllProjects" && header.id !== "contextMenu" ? (
         <Popover
+          containerStyle={{ zIndex: 2 }}
           isOpen={isPopoverOpen}
           positions={["bottom", "left", "right", "top"]} // preferred positions by priority
           align="start"

diff --git a/client/src/components/Projects/MultiProjectToolbarMenu.jsx b/client/src/components/Projects/MultiProjectToolbarMenu.jsx
@@ -23,7 +23,8 @@ const useStyles = createUseStyles({
     flexDirection: "row",
     alignItems: "center",
     marginLeft: "0.5em",
-    marginBottom: "-1em"
+    marginBottom: "-1em",
+    padding: "0 5em 0 0.5em "
   },
   list: {
     display: "flex",
@@ -35,7 +36,7 @@ const useStyles = createUseStyles({
   },
   button: {
     border: "none",
-    padding: 0,
+    padding: "0",
     background: "none"
   },
   multiStatus: {

diff --git a/client/src/components/Projects/ProjectsPage.jsx b/client/src/components/Projects/ProjectsPage.jsx
@@ -110,6 +110,9 @@ const useStyles = createUseStyles({
     textAlign: "left"
   },
   thead: {
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
     fontWeight: "bold",
     backgroundColor: "#002E6D",
     color: "white",
@@ -144,9 +147,14 @@ const useStyles = createUseStyles({
     textAlign: "center"
   },
   tableContainer: {
-    overflow: "visible", // changed to allow Universal Select to show above the page container when expanded
-    width: "100%",
-    margin: "20px 0px"
+    overflow: "auto", // changed to allow Universal Select to show above the page container when expanded
+    width: "calc(100vw - 20px)",
+    margin: "20px 0px",
+    height: "calc(100vh - 275px - 11.34em)"
+  },
+  fixTableHead: {
+    overflowY: "auto",
+    height: "4em"
   },
   pageContainer: {
     display: "flex",
@@ -862,6 +870,8 @@ const ProjectsPage = ({ contentContainerRef }) => {
     indexOfLastPost
   );
 
+  document.body.style.overflowX = "hidden"; // prevent page level scrolling, becauase the table is scrollable
+
   return (
     <ContentContainerNoSidebar contentContainerRef={contentContainerRef}>
       <div className={classes.outerDiv}>
@@ -884,7 +894,8 @@ const ProjectsPage = ({ contentContainerRef }) => {
                 style={{
                   display: "flex",
                   flexDirection: "row",
-                  justifyContent: "flex-start"
+                  justifyContent: "flex-start",
+                  width: "100vw"
                 }}
               >
                 <MemoizedMultiProjectToolbar
@@ -918,82 +929,89 @@ const ProjectsPage = ({ contentContainerRef }) => {
                     />
                     <MdOutlineSearch className={classes.searchIcon} />
                   </div>
-                  <div>
+                  <div style={{ marginRight: "0.75em" }}>
                     <TertiaryButton
                       onClick={resetFiltersSort}
-                      style={{ height: "40px" }}
+                      style={{ height: "40px", marginRight: "1em" }}
                       isDisplayed={true}
                     >
                       RESET FILTERS/SORT
                     </TertiaryButton>
                   </div>
                 </div>
               </div>
-              <div className={classes.tableContainer}>
-                <table className={classes.table}>
-                  <thead className={classes.thead}>
-                    <tr className={classes.tr}>
-                      {headerData.map(header => {
-                        return (
-                          <td key={header.id}>
-                            <ProjectTableColumnHeader
-                              projects={projects}
-                              filter={filter}
-                              header={header}
-                              criteria={filterCriteria}
-                              setCriteria={setFilter}
-                              setSort={setSort}
-                              orderBy={
-                                sortCriteria[sortCriteria.length - 1].field
-                              }
-                              order={
-                                sortCriteria[sortCriteria.length - 1].direction
-                              }
-                              setCheckedProjectIds={setCheckedProjectIds}
-                              setSelectAllChecked={setSelectAllChecked}
-                            />
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  </thead>
-                  <tbody className={classes.tbody}>
-                    {projects.length ? (
-                      currentProjects.map(project => (
-                        <ProjectTableRow
-                          key={project.id}
-                          project={project}
-                          handleCsvModalOpen={handleCsvModalOpen}
-                          handleCopyModalOpen={handleCopyModalOpen}
-                          handleDeleteModalOpen={handleDeleteModalOpen}
-                          handleSnapshotModalOpen={handleSnapshotModalOpen}
-                          handleRenameSnapshotModalOpen={
-                            handleRenameSnapshotModalOpen
-                          }
-                          handleShareSnapshotModalOpen={
-                            handleShareSnapshotModalOpen
-                          }
-                          handleHide={handleHide}
-                          handleCheckboxChange={handleCheckboxChange}
-                          checkedProjectIds={checkedProjectIds}
-                          isAdmin={isAdmin}
-                          droOptions={droOptions}
-                          onDroChange={handleDroChange} // Pass the DRO change handler
-                          onAdminNoteUpdate={handleAdminNoteUpdate} // Pass the admin note update handler
-                          droName={
-                            isAdmin ? null : droNameMap[project.droId] || "N/A"
-                          } // Pass the droName
-                        />
-                      ))
-                    ) : (
-                      <tr>
-                        <td colSpan={9} className={classes.tdNoSavedProjects}>
-                          No Saved Projects
-                        </td>
+              <div>
+                <div className={classes.tableContainer}>
+                  <table className={classes.table}>
+                    <thead className={classes.thead}>
+                      <tr className={classes.tr}>
+                        {headerData.map(header => {
+                          return (
+                            <td key={header.id}>
+                              <th className={classes.stickyTh}>
+                                <ProjectTableColumnHeader
+                                  projects={projects}
+                                  filter={filter}
+                                  header={header}
+                                  criteria={filterCriteria}
+                                  setCriteria={setFilter}
+                                  setSort={setSort}
+                                  orderBy={
+                                    sortCriteria[sortCriteria.length - 1].field
+                                  }
+                                  order={
+                                    sortCriteria[sortCriteria.length - 1]
+                                      .direction
+                                  }
+                                  setCheckedProjectIds={setCheckedProjectIds}
+                                  setSelectAllChecked={setSelectAllChecked}
+                                />
+                              </th>
+                            </td>
+                          );
+                        })}
                       </tr>
-                    )}
-                  </tbody>
-                </table>
+                    </thead>
+                    <tbody className={classes.tbody}>
+                      {projects.length ? (
+                        currentProjects.map(project => (
+                          <ProjectTableRow
+                            key={project.id}
+                            project={project}
+                            handleCsvModalOpen={handleCsvModalOpen}
+                            handleCopyModalOpen={handleCopyModalOpen}
+                            handleDeleteModalOpen={handleDeleteModalOpen}
+                            handleSnapshotModalOpen={handleSnapshotModalOpen}
+                            handleRenameSnapshotModalOpen={
+                              handleRenameSnapshotModalOpen
+                            }
+                            handleShareSnapshotModalOpen={
+                              handleShareSnapshotModalOpen
+                            }
+                            handleHide={handleHide}
+                            handleCheckboxChange={handleCheckboxChange}
+                            checkedProjectIds={checkedProjectIds}
+                            isAdmin={isAdmin}
+                            droOptions={droOptions}
+                            onDroChange={handleDroChange} // Pass the DRO change handler
+                            onAdminNoteUpdate={handleAdminNoteUpdate} // Pass the admin note update handler
+                            droName={
+                              isAdmin
+                                ? null
+                                : droNameMap[project.droId] || "N/A"
+                            } // Pass the droName
+                          />
+                        ))
+                      ) : (
+                        <tr>
+                          <td colSpan={9} className={classes.tdNoSavedProjects}>
+                            No Saved Projects
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
               </div>
               <div className={classes.pageContainer}>
                 <Pagination