search

opensrp / miecd

0 stars 0 forks source link

7 replace cartoon avatars with actual images #20

Closed machariamuguku closed 3 years ago

machariamuguku commented 3 years ago

Fixes #7

machariamuguku commented 3 years ago

@rowo This might need a design review

rowo commented 3 years ago

@machariamuguku is there an easy way to view this in the site and a folder of the images I can access?

machariamuguku commented 3 years ago

@rowo You've been given access to the images folder. I'm sharing the env file with you so you can clone and run this locally.

peterMuriuki commented 3 years ago

@rowo You've been given access to the images folder. I'm sharing the env file with you so you can clone and run this locally.

@machariamuguku please add a a screen recording or a snapshots of the page, so that they can be reviewed much quicker.

machariamuguku commented 3 years ago

@rowo You've been given access to the images folder. I'm sharing the env file with you so you can clone and run this locally.

@machariamuguku please add a a screen recording or a snapshots of the page, so that they can be reviewed much quicker.

Before changes

Screenshot 2021-04-13 at 09 32 08

After Changes

Screenshot 2021-04-13 at 13 22 33
machariamuguku commented 3 years ago

I could be wrong, but it looks like the new image for "Nutrition" seems to have its aspect ratio messed up. Could you fix that please, and investigate that it does not happen for the other two?

fixed

moshthepitt commented 3 years ago

LGTM but let's let @rowo take a look

rowo commented 3 years ago

I will edit the image coloring

@machariamuguku On the MIECD site, are the images always in the ratio in the screenshot, https://github.com/OpenSRP/miecd/pull/20#issuecomment-818479684, or do they follow the width of the grey container behind it? I guess I’m wondering at narrow and wide browser widths, do they images look okay at their current ratio? I guess it doesn't matter if the images are all the same size and behave the same.

machariamuguku commented 3 years ago

I will edit the image coloring

@machariamuguku On the MIECD site, are the images always in the ratio in the screenshot, #20 (comment), or do they follow the width of the grey container behind it? I guess I’m wondering at narrow and wide browser widths, do they images look okay at their current ratio? I guess it doesn't matter if the images are all the same size and behave the same.

They scale linearly, following the width of the container at a ratio. They always fit the container without stretching

rowo commented 3 years ago

@machariamuguku here are some images where I matched the nutrition image to same ratio as the other two and tried to normalize the color. In my opinion, it would look better to put the images within the container now that they are full-bleed photos and not cutout illustrations, but I understand if that's not possible for the project.

Nutrition (1)-sm Pregnancy (2)-sm PNC NBC (2)-sm Nutrition (1)-md Pregnancy (2)-md PNC NBC (2)-md Nutrition (1)-lg Pregnancy (2)-lg PNC NBC (2)-lg

machariamuguku commented 3 years ago

In my opinion, it would look better to put the images within the container now that they are full-bleed photos and not cutout illustrations

@rowo I could try that.

Are you thinking more of this card_1

or this? card_2

machariamuguku commented 3 years ago

@rowo In hindsight, due to timelines, I think we can schedule these changes for the future

moshthepitt commented 3 years ago

I think we can schedule these changes for the future

@machariamuguku could you add an issue for this?