From 82ac31a3c4a1964e9ebfd2ba64109ef251ece0cf Mon Sep 17 00:00:00 2001 From: sophia-massie Date: Thu, 3 Oct 2024 15:47:59 -0500 Subject: [PATCH] task/WG-232-React-Listing-UI-clean --- react/package-lock.json | 9 +++ react/package.json | 1 + .../Projects/ProjectListing.module.css | 46 +++++++++++ .../components/Projects/ProjectListing.tsx | 80 ++++++++++--------- react/src/components/Projects/index.ts | 2 +- react/src/hazmapper.css | 20 ++++- react/src/index.css | 4 +- react/src/pages/MainMenu/MainMenu.tsx | 3 +- 8 files changed, 122 insertions(+), 43 deletions(-) create mode 100644 react/src/components/Projects/ProjectListing.module.css diff --git a/react/package-lock.json b/react/package-lock.json index 98be7366..d0ed23c0 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -12,6 +12,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.0", "@changey/react-leaflet-markercluster": "^4.0.0-rc1", + "@fortawesome/fontawesome-free": "^6.6.0", "@reduxjs/toolkit": "^1.8.4", "@tacc/core-styles": "^2.24.1", "@testing-library/react": "^13.4.0", @@ -2650,6 +2651,14 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", + "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/react/package.json b/react/package.json index 648f3f86..b36aa704 100644 --- a/react/package.json +++ b/react/package.json @@ -36,6 +36,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.0", "@changey/react-leaflet-markercluster": "^4.0.0-rc1", + "@fortawesome/fontawesome-free": "^6.6.0", "@reduxjs/toolkit": "^1.8.4", "@tacc/core-styles": "^2.24.1", "@testing-library/react": "^13.4.0", diff --git a/react/src/components/Projects/ProjectListing.module.css b/react/src/components/Projects/ProjectListing.module.css new file mode 100644 index 00000000..af7ce673 --- /dev/null +++ b/react/src/components/Projects/ProjectListing.module.css @@ -0,0 +1,46 @@ +.root{ + display: flex; + flex-direction: column; + width: 100%; +} +.projectList { + height: 270px; + border-collapse: collapse; + align-self: center; + overflow-y: scroll; + margin-top: 40px; + margin-bottom: 40px; +} +.projectHeader, .projectHeader th { + background: #d0d0d0; + position: sticky; + top: 0; + z-index: 1; +} + +.projectListItemButton{ + cursor: pointer; + color: initial; + margin-right: 10px; +} + +.projectListItemButton:hover{ + color: #666; +} + +.mapColumn { +width: 30%; +} +.projectColumn { +width: 60%; +} +.buttonColumn { + white-space: nowrap; +} + +.projectName { + max-width: fit-content; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} diff --git a/react/src/components/Projects/ProjectListing.tsx b/react/src/components/Projects/ProjectListing.tsx index 7da6ecf5..f0deb073 100644 --- a/react/src/components/Projects/ProjectListing.tsx +++ b/react/src/components/Projects/ProjectListing.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import { useProjectsWithDesignSafeInformation } from '../../hooks'; import { Button, LoadingSpinner, Icon } from '../../core-components'; +import styles from './ProjectListing.module.css'; import CreateMapModal from '../CreateMapModal/CreateMapModal'; import { useNavigate } from 'react-router-dom'; -export const ProjectListing: React.FC = () => { +const ProjectListing: React.FC = () => { const [isModalOpen, setIsModalOpen] = useState(false); const navigate = useNavigate(); @@ -20,47 +21,54 @@ export const ProjectListing: React.FC = () => { if (isLoading) { return ; - } + }; if (isError) { return

Unable to retrieve projects

; - } + }; return ( - <> - - - - - - - - - - {data?.map((proj) => ( - navigateToProject(proj.uuid)}> - - - + {data?.map((proj) => ( + navigateToProject(proj.uuid)}> + + + + + ))} + +
MapProject - - -
{proj.name} - {proj.ds_project?.value.projectId}{' '} - {proj.ds_project?.value.title} - - -
{proj.name} + {proj.ds_project?.value.projectId}{' - '} + {proj.ds_project?.value.title} + + + +
+ + ); }; +export default ProjectListing; diff --git a/react/src/components/Projects/index.ts b/react/src/components/Projects/index.ts index d4d7f8d0..abef4bd4 100644 --- a/react/src/components/Projects/index.ts +++ b/react/src/components/Projects/index.ts @@ -1 +1 @@ -export { ProjectListing } from './ProjectListing'; +export { default } from './ProjectListing'; diff --git a/react/src/hazmapper.css b/react/src/hazmapper.css index 21078670..ef734134 100644 --- a/react/src/hazmapper.css +++ b/react/src/hazmapper.css @@ -1,5 +1,7 @@ -@import url('@tacc/core-styles/dist/core-styles.base.css'); -@import url('@tacc/core-styles/dist/core-styles.portal.css'); +@import "leaflet/dist/leaflet.css"; +@import "@fortawesome/fontawesome-free/css/all.css"; +@import url('https://fonts.googleapis.com/css?family=Raleway'); +@import url('https://unpkg.com/mapillary-js@2.18.0/dist/mapillary.min.css'); /* for hazmapper specific overwrites of base and portal styles" like, @@ -8,3 +10,17 @@ } */ + + +/* CSS module styles taken from Angular styles.styl */ +:root { + --global-font-family: 'Raleway', san-serif; +} +html, +body { + height: 100%; + font-family: var(--global-font-family); +} +table, form, button { + font-family: inherit; +} diff --git a/react/src/index.css b/react/src/index.css index 70e3ac95..27f096d5 100644 --- a/react/src/index.css +++ b/react/src/index.css @@ -3,7 +3,7 @@ /* prettier-ignore */ @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation); -@import url('@tacc/core-styles/dist/core-styles.base.css'); /* layer(base);*/ -@import url('@tacc/core-styles/dist/core-styles.portal.css'); /* layer(base);*/ +@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base); +@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base); @import url('./hazmapper.css') layer(project); diff --git a/react/src/pages/MainMenu/MainMenu.tsx b/react/src/pages/MainMenu/MainMenu.tsx index 246aaf18..788d7079 100644 --- a/react/src/pages/MainMenu/MainMenu.tsx +++ b/react/src/pages/MainMenu/MainMenu.tsx @@ -7,8 +7,7 @@ import { } from '../../core-components'; import useAuthenticatedUser from '../../hooks/user/useAuthenticatedUser'; import { SystemSelect } from '../../components/Systems'; -import { ProjectListing } from '../../components/Projects/ProjectListing'; - +import ProjectListing from '../../components/Projects'; function MainMenu() { const { data: userData,