Hi and welcome back to our course
on donation application with the Redux toolkit.
Today we're going to be putting these items that we designed using single
donation item component in a grid so that we see two items in a row and to do
that we are going to need a view container for each single donation item.
So let's do that it.
And then we're going to have to switch this key to the view container because
this is going to be the parent element that is generated using Map and if we
don't do that then our simulator might start yelling at us.
So right now we're going to need to apply some styling to this view container.
So let's create a style single donation item and let's create it here.
And let's say that its max width can be
49% and that is because we want to place two items next to each other plus we want
to have some kind of space in between so let's make sure that we do that.
For that we're going to have to apply some styling to the donation item container.
So let's say that we want the direction to be row.
Great.
And then let's say that we want some spacing between the items so we're going
to need justified content space between and even after that we see that these
items are just stacked in a row and they are not really wrapping for which
we can use a flex property called Flex
wrap and we're going to say that it should wrap.
Great.
Now they are next to each other but there is no space in between
and for that we can say 48% maybe or maybe even less like something like 46%.
But as we're looking at it actually this margin horizontal that we had here is
getting discarded which we don't want to do.
So let's put this to 49% back and let's go to the single donation item and let's style
these images to have a little bit of less width such as 150 maybe or maybe even 140.
Okay, this looks much better. Great.
And now we also need some kind of margin
bottom for these items because we see that this picture comes right after this
text here and I'm pretty sure that our design will have some kind of margin.
So let's see what that is.
That is approximately 23.
So let's go to our home styles and let's
say that single donation item should have a margin bottom of vertical scale 23.
Okay great.
This looks much better but what does not look better is this wrapped text here.
And in our design that were given to us here we see that if the name is too long
it's continued with this three dots and it doesn't really show fully.
So let's go to our single donation item
and as we see the donation title is shown using the header.
So what we want to do is actually say
that this particular header should have number of lines set to one.
And then what we can do is we can go
to header component and here we can say that we create a new prop here say number
of lines that is going to be prop type number.
And then here we can pass number of lines.
Thank props number of lines and now we see that our
title has been converted to a text with three dots given here which means
that we are matching our design requirements.
But what we don't want to happen is
that if number of lines is not passed we don't want to limit it.
So if we pass number of lines null it would show like this.
So we're just going to say here if props
number of lines is available then props number of lines otherwise we
are going to pass null so this won't mess with our header components that we have
used at other places where we actually don't need those three dots.
That's it for this video.
In the next video what we're going to be doing is on press of an item we're going
to be redirected to a new page that is going to grab the information about
the selected donation item and displays on the screen.
Thanks so much for watching, I'll see you in the next video.