Giters

anitab-org / anitab-org.github.io

AnitaB.org Open Source website has information about our community, including our open source projects, participation in programs, events, and a few contribution guidelines.

Home Page:https://anitab-org.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix: ScaledImage styling

tichnas opened this issue · comments

commented

Describe the bug

There is a ScaledImage component which is used to render images. It doesn't take any style prop, but it's expected when used to create ImageContent and ImageTextSection components. This results in expected styles like padding ignored.

To Reproduce

Steps to reproduce the behavior:

  1. Go to the homepage
  2. Scroll down to a section with image on right
  3. Observe that there is no (expected) space between the text and the image.

Expected behavior

Either the ScaledImage component should take and handle style prop or the styling should be explicitly added to its parent.

Screenshots

image

commented

@tichnas I would like to work on this issue.

commented

@nlok5923 I think you'll have to wait till a maintainer accepts this issue and assigns it to you. Sorry for the delay.

commented

its a v small issue so i think it will be better if you assign a newcomer to it
. or if you wan to work i can assign anyone
@tichnas

commented

i can work over it. @nandini45 & @tichnas

commented

Sorry @prabhat04011998, since @nlok5923 asked first, he should be given a chance.
So @nlok5923, start working on the issue and you'll get assigned soon, just let us know (by a comment) that you're working on it.

commented

Thanks @tichnas i am working on it.

commented

@nlok5923 if the time limit to do the work exceed 3 days
do give us update. happy coding

commented

@tichnas i think this issue has been resolved previously as there is enough padding between the image and text .
Screenshot (1644)
do i still need to add some more padding?

commented

@nlok5923 The padding observed in your screenshot is of Content component which is only on left. This means that the cases where the image is on right, there will be no padding in between.
Now, observe the ImageContent component. It returns a View containing another View and a ScaledImage. The ScaledImage component is expected to have a left and right padding of 16 (line 59 and 60).
So, what you need to do is wrap the ScaledImage inside another view (everywhere it's used), and give it the required styling.

Maybe my explanation is not up to the mark, so just let me know if you've any more doubts...

commented

Thanks @tichnas for clearing mine doubt 😄.