- Adds header component and footer

- Updates project listing and main menu to make table scroll
- Updates Main Menu page with header and footer

react/src/components/HazmapperHeader/HazmapperHeader.module.css

@@ -0,0 +1,9 @@
+.root {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .userName {
+    color: white;
+  }

react/src/components/HazmapperHeader/HazmapperHeader.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
+import { AuthenticatedUser } from '@hazmapper/types';
+import { Layout } from 'antd';
+import styles from './HazmapperHeader.module.css'
+
+
+
+export const HazmapperHeader: React.FC<{ user: string;}>  = ({user}) => {
+    const { Header } = Layout;
+
+  return (
+    <Header className={styles.root}>
+    <img width="150px" src="./src/assets/hazmapper-header-logo.png" />
+    <div className={styles.userName}>{user}</div>
+  </Header>
+
+  )
+}
+export default HazmapperHeader;

react/src/components/HazmapperHeader/index.tsx

@@ -0,0 +1 @@
+export { default } from './HazmapperHeader';

react/src/components/Projects/ProjectListing.module.css

@@ -1,76 +1,101 @@
 .root {
   display: flex;
   flex-direction: column;
-  width: 100vh;
-  height: 100vh;
+  padding-left:50px;
+  padding-right: 50px;
 }
+
 .projectList {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  table-layout: fixed;
-  padding: 10px;
-  overflow-y: scroll;
-  height: 60%;
+  flex-grow: 1;
+  overflow: hidden;
+  justify-content: center;
+  padding:10px;
 }
-.errorMessage {
+
+.projectList table {
   width: 100%;
-  padding: 10px;
+  table-layout: fixed;
+  border-collapse: collapse;
+
 }
-.projectList th {
+
+.projectList thead {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   background: #d0d0d0;
+}
+
+.projectList thead th {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  background: #d0d0d0;
 }
-.projectList th,
-button {
-  overflow: visible;
-  overflow-wrap: normal;
+
+.projectList tbody {
+  display: block;
+  max-height: 300px; 
+  overflow-y: auto;
 }
-.projectList tr,
-td {
+
+.projectList tr {
+  display: table;
   width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+  table-layout: fixed;
 }
+
 .projectList tr:hover td {
   color: white;
   background-color: var(--global-color-accent--light);
 }
+
 .projectList tr:hover td button {
   color: white;
 }
+
 .mapColumn {
   width: 42%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
 .projectColumn {
   width: 42%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
+
 .buttonColumn {
   width: 16%;
   text-align: end;
 }
+
 .buttonColumn button {
   max-width: 100%;
   text-overflow: ellipsis;
-  white-space: wrap;
+  white-space: nowrap;
   justify-content: flex-start;
 }
+
 .userGuide {
   font-weight: bold;
   font-size: medium;
   justify-content: flex-end;
-  height: 10%;
+  padding-right: 10px;
 }
+
 .versionContainer {
   display: flex;
   flex-direction: column;
-  height: 30%;
+
   justify-content: center;
   align-items: center;
 }
+
 .versionContainer img {
-  height: 80%;
+  max-height: min-content;
+
 }

react/src/components/Projects/ProjectListing.tsx

@@ -56,7 +56,8 @@ const ProjectListing: React.FC = () => {
         <img src="./src/assets/[email protected]"></img>
         <div className={styles.version}>{'Version 2.17'}</div>
       </div>
-      <table className={styles.projectList}>
+      <div className={styles.projectList}>
+      <table >
         <thead>
           <tr>
             <th className={styles.mapColumn}>Map</th>
@@ -104,6 +105,7 @@ const ProjectListing: React.FC = () => {
           )}
         </tbody>
       </table>
+      </div>
       <Button
         className={styles.userGuide}
         iconNameBefore="exit"

react/src/pages/MainMenu/MainMenu.tsx

@@ -2,65 +2,54 @@ import React, { useState } from 'react';
 import {
   LoadingSpinner,
   InlineMessage,
-  SectionHeader,
 } from '@tacc/core-components';
 import useAuthenticatedUser from '@hazmapper/hooks/user/useAuthenticatedUser';
 import ProjectListing from '@hazmapper/components/Projects/ProjectListing';
-import { Layout } from 'antd';
 import styles from './layout.module.css';
+import HazmapperHeader from '@hazmapper/components/HazmapperHeader';
 
 const MainMenu = () => {
-  const { Header, Content, Footer } = Layout;
   const {
     data: userData,
     isLoading: isUserLoading,
     error: userError,
   } = useAuthenticatedUser();
 
-  const [selectedSystem, setSelectedSystem] = useState('');
-
   if (isUserLoading) {
     return (
       <>
-        <SectionHeader isNestedHeader>Main Menu</SectionHeader>
+      <HazmapperHeader user={""}/>
         <LoadingSpinner />
       </>
     );
   }
   if (userError) {
+    return (
     <>
-      <SectionHeader isNestedHeader>Main Menu</SectionHeader>
+      <HazmapperHeader user={""}/>
       <InlineMessage type="error">Unable to retrieve projects.</InlineMessage>
-    </>;
+    </>
+    );
   }
 
-  const handleSelectChange = (system: string) => {
-    setSelectedSystem(system);
-  };
-
   return (
-    <Layout className={styles.root}>
-      <Header className={styles.mainMenuHeader}>
-        <img width="150px" src="./src/assets/hazmapper-header-logo.png" />
-        <div className={styles.userName}>{userData.username}</div>
-      </Header>
-      <Content className={styles.listingContainer}>
-        <ProjectListing />
-      </Content>
-      <Footer className={styles.menuFooter}>
-        <div className={styles.sponsorContainer}>
-          <a href="https://www.nsf.gov/">
-            <img src="./src/assets/nsf.png" width="60px" />
-          </a>
-          <a href="https://www.designsafe-ci.org/">
-            <img src="./src/assets/designsafe.svg" width="200px" />
-          </a>
-          <a href="https://www.designsafe-ci.org/about/">
-            <img src="./src/assets/nheri.png" width="150px" />
-          </a>
-        </div>
-      </Footer>
-    </Layout>
+    <div className={styles.root}>
+    <HazmapperHeader user={userData.username}/>
+    <div className={styles.listingContainer}>
+    <ProjectListing />
+    </div>
+    <div className={styles.sponsorContainer}>
+      <a href="https://www.nsf.gov/">
+        <img src="./src/assets/nsf.png" width="60px" />
+      </a>
+      <a href="https://www.designsafe-ci.org/">
+        <img src="./src/assets/designsafe.svg" width="200px" />
+      </a>
+      <a href="https://www.designsafe-ci.org/about/">
+        <img src="./src/assets/nheri.png" width="150px" />
+      </a>
+    </div>
+    </div>
   );
 };
 

react/src/pages/MainMenu/layout.module.css

@@ -1,27 +1,19 @@
 .root {
   display: flex;
   flex-direction: column;
-  height: 100vh;
-}
-.mainMenuHeader {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.userName {
-  color: white;
+  min-height: 100vh;
+  min-width: 100vh;
 }
 .listingContainer {
-  display: flex;
+  flex-grow: 1;
   align-items: center;
+  justify-content: center;
   flex-direction: column;
 }
 .versionContainer {
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-bottom: 50px;
   justify-content: center;
   align-items: center;
 }
@@ -30,13 +22,14 @@
 }
 .sponsorContainer {
   display: flex;
-  flex-direction: row;
-  align-items: flex-end;
   justify-content: center;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  position: sticky;
   background-color: #f7f7f7;
 }
 .sponsorContainer img {
   padding: 10px;
-}
-.menuFooter {
+  object-fit:contain;
 }