WEBVTT 1 00:00:00.160 --> 00:00:02.100 Hi and welcome back to our course 2 00:00:02.130 --> 00:00:05.570 on donation application with the Redux toolkit. 3 00:00:05.600 --> 00:00:09.940 Today we're going to be putting these items that we designed using single 4 00:00:09.970 --> 00:00:17.340 donation item component in a grid so that we see two items in a row and to do 5 00:00:17.370 --> 00:00:23.820 that we are going to need a view container for each single donation item. 6 00:00:23.850 --> 00:00:25.980 So let's do that it. 7 00:00:26.010 --> 00:00:31.140 And then we're going to have to switch this key to the view container because 8 00:00:31.170 --> 00:00:35.700 this is going to be the parent element that is generated using Map and if we 9 00:00:35.730 --> 00:00:40.420 don't do that then our simulator might start yelling at us. 10 00:00:40.450 --> 00:00:46.420 So right now we're going to need to apply some styling to this view container. 11 00:00:46.450 --> 00:00:56.840 So let's create a style single donation item and let's create it here. 12 00:00:57.560 --> 00:01:02.580 And let's say that its max width can be 13 00:01:02.610 --> 00:01:09.360 49% and that is because we want to place two items next to each other plus we want 14 00:01:09.390 --> 00:01:14.380 to have some kind of space in between so let's make sure that we do that. 15 00:01:14.410 --> 00:01:19.620 For that we're going to have to apply some styling to the donation item container. 16 00:01:19.650 --> 00:01:26.060 So let's say that we want the direction to be row. 17 00:01:26.090 --> 00:01:27.260 Great. 18 00:01:27.290 --> 00:01:31.200 And then let's say that we want some spacing between the items so we're going 19 00:01:31.230 --> 00:01:37.850 to need justified content space between and even after that we see that these 20 00:01:37.880 --> 00:01:42.340 items are just stacked in a row and they are not really wrapping for which 21 00:01:42.370 --> 00:01:45.460 we can use a flex property called Flex 22 00:01:45.490 --> 00:01:49.920 wrap and we're going to say that it should wrap. 23 00:01:50.280 --> 00:01:50.740 Great. 24 00:01:50.770 --> 00:01:55.290 Now they are next to each other but there is no space in between 25 00:01:55.320 --> 00:02:04.140 and for that we can say 48% maybe or maybe even less like something like 46%. 26 00:02:04.170 --> 00:02:09.730 But as we're looking at it actually this margin horizontal that we had here is 27 00:02:09.760 --> 00:02:12.140 getting discarded which we don't want to do. 28 00:02:12.170 --> 00:02:19.500 So let's put this to 49% back and let's go to the single donation item and let's style 29 00:02:19.530 --> 00:02:29.540 these images to have a little bit of less width such as 150 maybe or maybe even 140. 30 00:02:29.570 --> 00:02:32.340 Okay, this looks much better. Great. 31 00:02:32.370 --> 00:02:36.100 And now we also need some kind of margin 32 00:02:36.130 --> 00:02:41.380 bottom for these items because we see that this picture comes right after this 33 00:02:41.410 --> 00:02:45.780 text here and I'm pretty sure that our design will have some kind of margin. 34 00:02:45.800 --> 00:02:47.100 So let's see what that is. 35 00:02:47.130 --> 00:02:50.220 That is approximately 23. 36 00:02:50.250 --> 00:02:53.920 So let's go to our home styles and let's 37 00:02:53.950 --> 00:03:01.920 say that single donation item should have a margin bottom of vertical scale 23. 38 00:03:02.320 --> 00:03:03.180 Okay great. 39 00:03:03.210 --> 00:03:10.780 This looks much better but what does not look better is this wrapped text here. 40 00:03:10.810 --> 00:03:18.420 And in our design that were given to us here we see that if the name is too long 41 00:03:18.450 --> 00:03:24.100 it's continued with this three dots and it doesn't really show fully. 42 00:03:24.130 --> 00:03:26.940 So let's go to our single donation item 43 00:03:26.970 --> 00:03:32.980 and as we see the donation title is shown using the header. 44 00:03:33.010 --> 00:03:35.900 So what we want to do is actually say 45 00:03:35.930 --> 00:03:43.660 that this particular header should have number of lines set to one. 46 00:03:43.690 --> 00:03:46.460 And then what we can do is we can go 47 00:03:46.490 --> 00:03:54.340 to header component and here we can say that we create a new prop here say number 48 00:03:54.370 --> 00:04:01.800 of lines that is going to be prop type number. 49 00:04:02.680 --> 00:04:06.500 And then here we can pass number of lines. 50 00:04:06.530 --> 00:04:13.610 Thank props number of lines and now we see that our 51 00:04:13.640 --> 00:04:19.620 title has been converted to a text with three dots given here which means 52 00:04:19.650 --> 00:04:22.700 that we are matching our design requirements. 53 00:04:22.720 --> 00:04:25.100 But what we don't want to happen is 54 00:04:25.130 --> 00:04:29.280 that if number of lines is not passed we don't want to limit it. 55 00:04:29.300 --> 00:04:33.980 So if we pass number of lines null it would show like this. 56 00:04:34.010 --> 00:04:36.620 So we're just going to say here if props 57 00:04:36.650 --> 00:04:42.420 number of lines is available then props number of lines otherwise we 58 00:04:42.450 --> 00:04:49.060 are going to pass null so this won't mess with our header components that we have 59 00:04:49.090 --> 00:04:54.140 used at other places where we actually don't need those three dots. 60 00:04:54.160 --> 00:04:56.300 That's it for this video. 61 00:04:56.330 --> 00:05:01.840 In the next video what we're going to be doing is on press of an item we're going 62 00:05:01.860 --> 00:05:06.740 to be redirected to a new page that is going to grab the information about 63 00:05:06.770 --> 00:05:11.780 the selected donation item and displays on the screen. 64 00:05:11.800 --> 00:05:14.440 Thanks so much for watching, I'll see you in the next video.