1
00:00:00,770 --> 00:00:04,400
LET'S CONTINUE DOING A LITTLE BIT MORE styling on our results detail a component.

2
00:00:04,400 --> 00:00:08,720
I want to mention very quickly that if you're on a device with a slightly smaller screen you might notice

3
00:00:08,720 --> 00:00:11,280
that the content at the very bottom is kind of cut off.

4
00:00:11,340 --> 00:00:13,160
And right now we cannot scroll vertically.

5
00:00:13,370 --> 00:00:14,840
So we're gonna fix that up in just a moment.

6
00:00:14,840 --> 00:00:18,800
But right now let's finish up with styling on our results detail.

7
00:00:18,920 --> 00:00:19,340
All right.

8
00:00:19,340 --> 00:00:21,200
So thinking about the results detail.

9
00:00:21,200 --> 00:00:26,210
The first thing I want to do is that in a little bit of padding or margin on the left hand side of every

10
00:00:26,210 --> 00:00:31,610
results detail component that's going to push this card right here off the left hand edge to something

11
00:00:31,610 --> 00:00:33,160
like that right there.

12
00:00:33,290 --> 00:00:39,560
Now would definitely be pretty nice so inside of my results detail I got to find my style sheet and

13
00:00:39,560 --> 00:00:47,680
I'll add in a new section called container and I'll give it a margin left of 10 units I'll then be sure

14
00:00:47,680 --> 00:00:56,200
to apply that to the route view inside of my component so style is styles dot container then save that.

15
00:00:56,330 --> 00:00:58,840
And now we've got a little bit of margin on the left hand side.

16
00:00:58,880 --> 00:01:02,840
You'll notice that the title right there is still pushed up all the way to the left.

17
00:01:02,870 --> 00:01:08,110
The reason for that is that our title for each section is rendered inside of our results list.

18
00:01:08,240 --> 00:01:13,010
So chances are we want to make sure that all the content inside of our app has kind of a even margin

19
00:01:13,010 --> 00:01:14,510
on the left hand side.

20
00:01:14,540 --> 00:01:19,160
In addition you might notice that the 10 units that we just added right here on margin left is not the

21
00:01:19,160 --> 00:01:22,580
same as whatever margin we added into that search bar.

22
00:01:22,580 --> 00:01:26,810
So I think that we should make sure that we get a very consistent edge going all the way down the screen

23
00:01:27,640 --> 00:01:31,910
a very easy way to do this would be to go back over to our search screen component.

24
00:01:31,910 --> 00:01:36,230
Remember the search screen component is responsible for rendering everything on here.

25
00:01:36,230 --> 00:01:40,880
So instead of search screen we could add in some margin on the left and right hand side which would

26
00:01:40,880 --> 00:01:45,150
give us a very consistent margin all the way down along the edge.

27
00:01:45,200 --> 00:01:47,980
However that would really have a unintended result.

28
00:01:47,990 --> 00:01:49,390
Let me show you what I mean.

29
00:01:49,540 --> 00:01:51,180
I'm gonna go back to my results detail.

30
00:01:51,290 --> 00:01:56,150
I'm going to find that container style we just added and I'm gonna comment on the margin left on container.

31
00:01:56,250 --> 00:02:00,280
It's now back to where it was before then I'll go back to my search screen.

32
00:02:00,450 --> 00:02:05,520
I'm going to find the parent view right here and I'm just going to pass a style in directly to it so

33
00:02:05,520 --> 00:02:10,620
I can put a object literal inside there and I'll give the thing a margin left of ten.

34
00:02:10,640 --> 00:02:13,560
Now like I just mentioned that should give us a very consistent edge.

35
00:02:13,560 --> 00:02:17,630
Going down the left hand side that's not going to fix the search bar for right now.

36
00:02:17,670 --> 00:02:20,700
But we'll come back and figure that part out in just a moment.

37
00:02:20,700 --> 00:02:24,860
So going to save this and we're going to very quickly see that it kind of looks OK.

38
00:02:24,920 --> 00:02:31,200
But like I said there is an unintended result when I start to scroll this list right here horizontally.

39
00:02:31,200 --> 00:02:36,230
You'll notice that the image and all the text inside there starts to get cut off.

40
00:02:36,240 --> 00:02:40,890
Thanks to that margin on the left hand side it's easier to see if I start to increase that margin on

41
00:02:40,890 --> 00:02:44,640
the left hand side to maybe 30.

42
00:02:44,680 --> 00:02:46,470
Now I've got 30 units right there.

43
00:02:46,510 --> 00:02:51,850
And again as I start to scroll horizontally that card or that image in the text underneath it is just

44
00:02:51,850 --> 00:02:57,280
entirely cut off by that margin we just added in 2010 that we've got some element that's growing horizontally

45
00:02:57,490 --> 00:03:01,900
even though it would be really nice to solve all this kind of like sidebar issue and get some spacing

46
00:03:01,900 --> 00:03:05,040
in there by adding in a margin on our most parent element.

47
00:03:05,110 --> 00:03:11,080
Unfortunately it just doesn't quite work out because we're like I said just going to add up end up adding

48
00:03:11,080 --> 00:03:16,060
in a bunch of spacing that's going to cut off whatever we're trying to scroll which really doesn't look

49
00:03:16,060 --> 00:03:17,290
that great.

50
00:03:17,290 --> 00:03:21,630
So unfortunately adding some top level margin side here is just not going to work out.

51
00:03:21,910 --> 00:03:26,560
So we're going to have to go back to the other approach inside of our results detail going to find that

52
00:03:26,560 --> 00:03:30,010
container element again an uncommon day margin left.

53
00:03:30,010 --> 00:03:33,360
So essentially we're gonna have to go through all of our different components that show here and add

54
00:03:33,360 --> 00:03:36,960
in some margin to each one individually.

55
00:03:36,960 --> 00:03:37,280
Okay.

56
00:03:37,320 --> 00:03:42,550
So going to save this once again with the container margin left of 10 and I'm back to that where now

57
00:03:42,550 --> 00:03:48,140
I can see those elements scrolling very safely off the far left hand edge Yep.

58
00:03:48,190 --> 00:03:50,450
So that's a little bit better.

59
00:03:50,770 --> 00:03:55,210
So now we just need to make sure that we apply some very consistent margin left on all of these different

60
00:03:55,210 --> 00:03:55,970
components.

61
00:03:56,810 --> 00:04:00,780
I'm going to first open up my search bar component once again.

62
00:04:00,780 --> 00:04:07,000
So here's our search bar and remember we had that background style and this one has a margin horizontal

63
00:04:07,000 --> 00:04:09,190
so on the left and right of 15.

64
00:04:09,250 --> 00:04:12,160
So in one place we've got 10 in another place we have 15.

65
00:04:12,160 --> 00:04:14,860
And like I said we really just need to be consistent.

66
00:04:14,860 --> 00:04:20,530
So I think we can stick with a margin of 15 across this entire left hand and right hand edge.

67
00:04:20,730 --> 00:04:26,980
So back inside of results detail I'll change that margin left to 15 and now that's very consistent with

68
00:04:26,980 --> 00:04:31,810
the search bar and now we can do the same thing with that title as well that we have inside of our results

69
00:04:31,810 --> 00:04:32,680
list.

70
00:04:32,680 --> 00:04:34,750
So here's our results list element.

71
00:04:34,750 --> 00:04:39,620
There's the text element that's showing the cost effective bit pricier and big spender.

72
00:04:39,880 --> 00:04:47,390
So I'll find the title style and add in a margin left of 15 here as well.

73
00:04:47,480 --> 00:04:47,720
Okay.

74
00:04:47,750 --> 00:04:48,310
So there we go.

75
00:04:48,320 --> 00:04:54,040
Now we've got a very consistent edge on that left hand side so we can scroll through and I'd say that

76
00:04:54,040 --> 00:04:57,900
looks pretty reasonable.

77
00:04:57,910 --> 00:04:59,440
Let's go back over our results detail.

78
00:04:59,440 --> 00:05:02,470
We saw a couple more styling things to take care of.

79
00:05:02,590 --> 00:05:06,070
It's the next thing I think we should take care of is make sure that we just have a little bit of spacing

80
00:05:06,370 --> 00:05:10,750
underneath each of these elements to kind of offset the next section.

81
00:05:10,750 --> 00:05:15,550
We can add in some margin bottom to the container element inside of our results detail.

82
00:05:15,730 --> 00:05:20,260
However that would result in this kind of scrolling section ending up being a little bit larger.

83
00:05:20,440 --> 00:05:26,110
So chances are we instead want to open up our results list add in a new style where this wrapping view

84
00:05:26,140 --> 00:05:33,520
element and apply some margin bottom to it instead so inside of results list I'll add in another container

85
00:05:35,050 --> 00:05:42,110
I'll do some margin bottom of about 10 in this case and will apply that to the wrapping view.

86
00:05:42,110 --> 00:05:47,060
So style is styles dot container we'll save that.

87
00:05:47,070 --> 00:05:49,540
And now we've got some pretty good vertical spacing there.

88
00:05:49,620 --> 00:05:51,620
Definitely a lot better.

89
00:05:51,750 --> 00:05:56,850
I think maybe the last thing we need to take care of is to add in a little bit of text margin or margin

90
00:05:56,850 --> 00:06:00,780
underneath this title right here to get a little bit of space against that heading and the stuff we're

91
00:06:00,780 --> 00:06:02,040
scrolling through.

92
00:06:02,040 --> 00:06:08,020
So I'll find the title right here and I'll do some margin bottom there as well.

93
00:06:08,230 --> 00:06:08,500
I'll do.

94
00:06:08,500 --> 00:06:16,780
How about just an additional five units to add that in get even better and now maybe the last thing

95
00:06:16,780 --> 00:06:20,620
we have to do is add in a little bit of margin on the bottom of our image and just get a little bit

96
00:06:20,620 --> 00:06:23,270
of offset against the title of the restaurant.

97
00:06:23,310 --> 00:06:24,330
So back inside of results.

98
00:06:24,330 --> 00:06:29,540
Detail here's our image I'll add in some margin bottom there as well.

99
00:06:29,560 --> 00:06:30,850
And I'll once again just do five

100
00:06:33,870 --> 00:06:35,690
get that looks good to me.

101
00:06:35,960 --> 00:06:36,220
Okay.

102
00:06:36,260 --> 00:06:37,690
So that's on ISIS.

103
00:06:37,760 --> 00:06:39,260
And here is on Android.

104
00:06:39,260 --> 00:06:42,850
So they both look pretty good but there's still two things we need to take care of.

105
00:06:42,860 --> 00:06:45,370
First off if we've got a smaller size device.

106
00:06:45,470 --> 00:06:49,470
Well we need to make sure that we can scroll all the way to the bottom of all these different lists.

107
00:06:49,520 --> 00:06:54,320
And secondly you'll notice that right now we've still got that scroll bar showing on this list which

108
00:06:54,320 --> 00:06:57,360
is a little bit distracting and we probably don't have to show it.

109
00:06:57,380 --> 00:06:59,870
So let's take care of those two things inside the next video.