[WEB] PR #101 Data for Researchers #281
Conversation
|
hi |
There was a problem hiding this comment.
Thanks Jordan! Most of the comments I left deal with stylistic concerns.
I do have one reimplementation detail I'm considering (we can have this before TWDR):
Instead of having the article below the dashboard, I'm thinking to resort back to the original idea. We would have some button on the dashboard (an "info" icon on the header), and once the user clicks it, it would open a modal with the information we have below.
Notice the info icon on the top right. Once the user clicks on the info icon, a modal will pop up as shown below:
There would be a vertical scroll bar on the modal so the user can also access the datasets below. IMO this design is cleaner and more intuitive (it keeps the dashboard as a dashboard and ensures the information is supplementary). Having the information below the dashboard gives the website "the feel" of an article, which I'm not sure we want.
What do you think? Let me know if you think otherwise, I'm open to a discussion!
FYI: Material MUI also has a modal component available: https://mui.com/material-ui/react-modal/
src/website/views/components/VoyagePageTemplate/VoyagePageStyles.css
Outdated
Show resolved
Hide resolved
src/website/views/components/VoyagePageTemplate/VoyagePageStyles.css
Outdated
Show resolved
Hide resolved
src/website/views/components/VoyagePageTemplate/VoyagePageTemplate.tsx
Outdated
Show resolved
Hide resolved
| @@ -0,0 +1,28 @@ | |||
| const downloadSensorData = async (sensorType) => { | |||
| try { | |||
| const response = await fetch(`http://localhost:3005/api/${sensorType}`); | |||
There was a problem hiding this comment.
Please use the env vars when calling an API using our host url. Example can be found here: https://github.com/UBCSailbot/sailbot_workspace/blob/main/src/website/stores/GPS/GPSService.ts#L9
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| font-family: 'Switzer, sans-serif'; |
There was a problem hiding this comment.
To use this specific font, we need to import it (as it's external). Take a look at this link: https://www.cdnfonts.com/switzer.font
Copy and paste the @import url(...) at the top of this file and ensure the font-family declaration is same as listed in the website: 'Switzer', sans-serif;
| flex: 1; | ||
| display: flex; | ||
| justify-content: center; | ||
| font-family: 'Switzer, sans-serif'; |
There was a problem hiding this comment.
Same issue - take a look at this link: cdnfonts.com/switzer.font to use this font.
Description
Verification
Resources