Adding more content to About.jsx. Trying to add images now. #1298
Conversation
There was a problem hiding this comment.
Hey Shannan, thanks for working on this! I think the issue is that mui-image is only compatible with material-ui v5. So we need to use the older material-ui-image package.
|
Ohh. Will try that! |
|
Latest update so far with images showing now.
|
There was a problem hiding this comment.
Looks great! Cool to see the Grid in action.
For the images, please give them more descriptive names. the first one could be empower_la_logo.png. Please keep filenames lower case as well.
You mentioned the image sizing issue--let me know if you run into problems with that. Great progress though!
client/components/main/About.jsx
Outdated
| </Grid> | ||
| <Grid container> | ||
| <Grid item xs={12} sm={3}> | ||
| <Image src={partner1} animationDuration={0} width={378} /> |
There was a problem hiding this comment.
Is it necessary to give the animationDuration arg?
There was a problem hiding this comment.
Great, will make changes! And test if animationDuration is needed.
|
It seemed the MUI Image component was more for an image gallery so I get it to work with the tag img. |
client/components/main/About.jsx
Outdated
| import partner1 from '@assets/Partners_icon_1.png'; | ||
| import partner2 from '@assets/Partners_icon_2.png'; | ||
| import partner3 from '@assets/Partners_icon_3.png'; | ||
| import partner1 from '@assets/empower_la_logo.png'; |
There was a problem hiding this comment.
nit: let's give the imports more meaningful names as well, e.g.,:
import empower_la_logo from '@assets/empower_la_logo.png';
client/components/main/About.jsx
Outdated
| import partner2 from '@assets/Partners_icon_2.png'; | ||
| import partner3 from '@assets/Partners_icon_3.png'; | ||
| import partner1 from '@assets/empower_la_logo.png'; | ||
| import partner2 from '@assets/hackforla_logo.png'; |
There was a problem hiding this comment.
nit: add underscores to filename. i.e., hack_for_la_logo.png.
client/components/main/About.jsx
Outdated
| import partner3 from '@assets/Partners_icon_3.png'; | ||
| import partner1 from '@assets/empower_la_logo.png'; | ||
| import partner2 from '@assets/hackforla_logo.png'; | ||
| import partner3 from '@assets/codeforamerica.png'; |
client/package.json
Outdated
| @@ -32,6 +32,7 @@ | |||
| "html2canvas": "^1.0.0-rc.5", | |||
| "jest": "^24.9.0", | |||
| "mapbox-gl": "^1.12.0", | |||
| "material-ui-image": "^3.3.2", | |||
There was a problem hiding this comment.
Since we're not using this anymore, please remove it.
There was a problem hiding this comment.
Latest capture. Updated naming and minor style changes.
… MUI Image. Minor style adjustments.
This refers to issue #1202.
devbranchAny questions? See the getting started guide