1
00:00:01,790 --> 00:00:05,960
All right, little bit more styling to do, the next thing we're going to work on is making sure that

2
00:00:05,960 --> 00:00:08,300
these buttons are displayed in the middle of the screen.

3
00:00:08,510 --> 00:00:11,510
And I also want to make sure we've got a little bit of spacing between them as well.

4
00:00:12,260 --> 00:00:13,030
To account for that.

5
00:00:13,040 --> 00:00:16,910
I'm going to go back over to our component and I'm going to wrap both of our buttons right here with

6
00:00:16,910 --> 00:00:17,810
another div.

7
00:00:20,260 --> 00:00:21,460
And I'll give that div.

8
00:00:23,420 --> 00:00:24,350
A class name.

9
00:00:25,770 --> 00:00:27,450
Of ad buttons.

10
00:00:30,310 --> 00:00:33,550
I'm going to save that, we'll go back over to our Sears's file.

11
00:00:34,260 --> 00:00:36,330
I'll do another selecter for ad sell.

12
00:00:36,730 --> 00:00:39,340
I'm going to find ad buttons inside their.

13
00:00:40,990 --> 00:00:46,210
We're then going to add on a display of Fleck's a justify.

14
00:00:47,760 --> 00:00:49,410
Content of center.

15
00:00:50,880 --> 00:00:52,230
And we'll leave it like that for right now.

16
00:00:52,260 --> 00:00:55,430
So this is what's going to get these buttons to appear in the very center of the screen.

17
00:00:56,010 --> 00:00:57,030
Now we go back over.

18
00:00:58,220 --> 00:01:02,720
Yep, definitely displayed in the middle now we'll just add on one more rule to make sure there's a

19
00:01:02,720 --> 00:01:06,440
bunch of spacing between these two buttons, make sure that they're not directly touching.

20
00:01:08,390 --> 00:01:12,200
So I'm going to also take a look at ad sell.

21
00:01:13,380 --> 00:01:17,820
Ad buttons button the find button elements inside their.

22
00:01:19,070 --> 00:01:26,870
And I will add in a margin of zero, 20 pixels, so this will give us zero margin on top and on bottom

23
00:01:26,870 --> 00:01:30,050
of the button itself and then 20 pixels on the left and right hand sides.

24
00:01:31,090 --> 00:01:31,960
So we save that.

25
00:01:33,000 --> 00:01:36,820
Yeah, now we've got a little bit of spacing in there, if you think that there should be more spacing.

26
00:01:36,870 --> 00:01:37,680
Hey, no problem.

27
00:01:37,680 --> 00:01:40,650
You can just dial up this 20 pixels, maybe go up to 40.

28
00:01:40,920 --> 00:01:43,820
And that just means you're going to get all the more spacing inserted in.

29
00:01:44,610 --> 00:01:46,520
You can adjust that as much as you wish.

30
00:01:48,580 --> 00:01:51,410
OK, so definitely looks good from a positioning standpoint.

31
00:01:51,760 --> 00:01:56,470
One thing I don't really like too much is the fact that these dividers are going all the way off to

32
00:01:56,470 --> 00:01:58,110
the very edges of the screen.

33
00:01:58,450 --> 00:02:01,500
We will eventually add in some gutters on the left and right hand sides.

34
00:02:01,720 --> 00:02:06,130
But even then, I feel like it'd be a little bit better if they didn't run the entire full with the

35
00:02:06,130 --> 00:02:06,520
screen.

36
00:02:06,970 --> 00:02:10,930
So let's just shorten those things up a little bit while making sure that the overall divider is still

37
00:02:10,930 --> 00:02:13,660
positioned in the very center to do so.

38
00:02:13,660 --> 00:02:19,300
I'm going to find our width right here and I'm going to adjust the width down to 90 percent.

39
00:02:20,850 --> 00:02:26,970
I'll then add in a right of five percent and a left of five percent.

40
00:02:29,030 --> 00:02:29,810
So let's save that.

41
00:02:31,220 --> 00:02:33,770
And now we get that nice spacing on either side.

42
00:02:35,250 --> 00:02:38,470
However, looking at that, it looks like maybe that's just a little bit too much spacing.

43
00:02:38,490 --> 00:02:39,780
I know I'm nit picking here now.

44
00:02:40,080 --> 00:02:42,200
I'm just going to reduce this a little bit.

45
00:02:42,210 --> 00:02:43,730
We'll go to two point five percent.

46
00:02:44,150 --> 00:02:44,940
Let's try this.

47
00:02:46,070 --> 00:02:47,150
Yeah, that's a little bit better.

48
00:02:47,480 --> 00:02:51,590
OK, so it looks pretty good now, the last thing I think we need to really take care of is styling

49
00:02:51,590 --> 00:02:52,460
buttons themselves.

50
00:02:52,820 --> 00:02:55,150
So I want to have some nice little plus icons on them.

51
00:02:55,460 --> 00:03:00,200
I want them to kind of match the styling of our action buttons as well, or at least something similar

52
00:03:00,200 --> 00:03:00,590
to it.

53
00:03:02,910 --> 00:03:07,740
So for this, we're going to go back over to the components, we're going to find our two buttons and

54
00:03:07,740 --> 00:03:11,700
we're going to add in a couple of different class names, give them a structure very similar to the

55
00:03:11,700 --> 00:03:14,190
structure we had inside of our action bars.

56
00:03:14,490 --> 00:03:16,050
So we're going to put a span inside there.

57
00:03:16,290 --> 00:03:20,970
But in an element, a lot of different stuff going to first begin on the buttons themselves.

58
00:03:21,010 --> 00:03:28,410
I'll add on a class name of button is rounded is primary and is small.

59
00:03:30,520 --> 00:03:33,520
Then inside the button itself, I'm going to add in a span.

60
00:03:36,470 --> 00:03:39,680
Right before the word code, this is a separate span.

61
00:03:40,100 --> 00:03:43,880
I'll give it a class name of Ikon is small.

62
00:03:45,270 --> 00:03:51,420
And inside of the icon Aladdin, an eye with a class name of fase Fay plus.

63
00:03:52,820 --> 00:03:53,480
And then close at.

64
00:03:54,570 --> 00:03:57,870
Finally, I'm going to wrap the word code inside of a span as well.

65
00:04:02,170 --> 00:04:03,250
I'm going to say this really quick.

66
00:04:05,410 --> 00:04:06,120
Look back over.

67
00:04:07,200 --> 00:04:08,890
Yeah, now that's the styling we are looking for.

68
00:04:09,060 --> 00:04:10,260
I think that looks pretty reasonable.

69
00:04:10,690 --> 00:04:13,190
Let's repeat that same thing on our tax button as well.

70
00:04:14,680 --> 00:04:18,610
So a bunch of Taiping here or alternatively a bunch of copy paste, let's just do a copy paste.

71
00:04:18,910 --> 00:04:22,780
We're going to take the button class name from up top, paste it down to the second button.

72
00:04:23,910 --> 00:04:30,060
I'm going to take this entire icon span right here, albeit above the word text.

73
00:04:31,730 --> 00:04:36,380
I'll change the Iconoclast name from Phay Plus or excuse me, in this case, one of the icons to be

74
00:04:36,380 --> 00:04:36,800
identical.

75
00:04:36,810 --> 00:04:38,000
So still a fabulous.

76
00:04:38,960 --> 00:04:42,800
So I think the last thing we have to do is wrap that text with a span.

77
00:04:44,150 --> 00:04:44,960
And that should be at.

78
00:04:47,830 --> 00:04:49,340
OK, let's go back over.

79
00:04:49,750 --> 00:04:52,210
Yeah, that definitely looks pretty good, nice and consistent.

80
00:04:53,580 --> 00:04:57,210
All right, well, I'm pretty happy with this, but the last thing on to point out is that these buttons

81
00:04:57,210 --> 00:04:59,830
are just really large and really intrusive.

82
00:05:00,270 --> 00:05:06,120
We only really need to show these dividers when every user starts to mouse over the area between two

83
00:05:06,120 --> 00:05:06,630
cells.

84
00:05:07,010 --> 00:05:12,240
So I think once again, we should apply a very similar opacity kind of trick to what we did on our action

85
00:05:12,240 --> 00:05:12,640
buttons.

86
00:05:12,960 --> 00:05:16,470
I want to fade out the center divide, maybe even fade out all the way.

87
00:05:16,650 --> 00:05:19,890
So go to zero percent opacity until a user mouse is over it.

88
00:05:20,430 --> 00:05:25,800
So that'll just increase the amount of or D clutter the screen is what I guess I mean to say don't want

89
00:05:25,800 --> 00:05:27,630
to always show a ton of content on here.

90
00:05:28,800 --> 00:05:32,400
Let's go back over, I'm going to go and find our guests file once again.

91
00:05:33,530 --> 00:05:37,850
On the ad sell right here, I'm going to put in an opacity.

92
00:05:39,840 --> 00:05:40,190
Zero.

93
00:05:40,420 --> 00:05:45,500
So I'm going to not I'm not going to show anything about ad sell at all until a user mouse is over it.

94
00:05:46,020 --> 00:05:50,430
I'll put an ad sell, hover and then adjust its opacity to 1.0.

95
00:05:53,690 --> 00:05:58,970
Also, make sure that I transition the capacity to get that nice going to feed in effect, so again,

96
00:05:59,380 --> 00:06:03,440
that transition opacity over zero point three seconds.

97
00:06:06,530 --> 00:06:11,300
All right, let's flip back over so now we don't see any of that real big noise that all that clutter

98
00:06:11,300 --> 00:06:15,560
until we start to mouseover and then it nicely fades in and we're told, oh, yeah, if you want to

99
00:06:15,560 --> 00:06:17,390
add in some additional content, no problem.

100
00:06:17,630 --> 00:06:19,490
We can either code or plus text.

101
00:06:20,660 --> 00:06:25,430
Well, outside of some spacing issues, namely the fact that these things are being just kind of on

102
00:06:25,430 --> 00:06:28,490
top of the code, Ed, I would say overall this looks pretty good.

103
00:06:29,210 --> 00:06:34,040
But there is one very small corner case that I want you to be aware of, something that would be really

104
00:06:34,040 --> 00:06:35,090
confusing to a user.

105
00:06:36,250 --> 00:06:40,360
Let's say that a user for some reason decides to delete all of the different cells.

106
00:06:41,380 --> 00:06:45,710
Inside their notebook, they then are left with this if they wanted to.

107
00:06:45,730 --> 00:06:51,130
Now add in a cell, they would have to go up here mouseover and kind of say, oh, hey, look, this

108
00:06:51,130 --> 00:06:53,320
thing appears whenever I mouseover up here.

109
00:06:53,710 --> 00:06:55,570
Well, of course, that's super hidden away.

110
00:06:55,580 --> 00:06:59,870
And if a user ever gets to this point, they'd be looking at this page saying what is going on with

111
00:06:59,870 --> 00:07:00,610
this application?

112
00:07:01,150 --> 00:07:05,350
So I think beyond a little bit of spacing that we should probably add in between some cells, we should

113
00:07:05,350 --> 00:07:11,920
probably make sure that if we don't have any cells at all, we don't apply any opacity or apply opacity

114
00:07:11,920 --> 00:07:14,590
of zero to the ADL component.

115
00:07:14,740 --> 00:07:18,970
Instead, if we have zero cells, we should make sure that this thing is nice and bright and visible

116
00:07:19,030 --> 00:07:21,130
no matter where the user's cursor is.

117
00:07:21,820 --> 00:07:23,790
So let's take care of that little tweak in just a moment.