1
00:00:02,350 --> 00:00:07,480
Now we added a lot of cool things to our, a little bit more complex component here,

2
00:00:07,480 --> 00:00:12,430
now let's wrap this all up by changing the styling a little bit, by making sure that we also can close

3
00:00:12,430 --> 00:00:14,310
the modal when we click the backdrop

4
00:00:14,470 --> 00:00:21,640
and by also animating the modal a little bit when it comes in and goes away. Now definitely feel free

5
00:00:21,640 --> 00:00:26,300
to do some of these things on your own, pause the video, try it on your own at this point,

6
00:00:26,380 --> 00:00:30,250
otherwise we'll do it together of course.

7
00:00:30,250 --> 00:00:31,870
So were you successful?

8
00:00:32,560 --> 00:00:33,460
Let's give this a try.

9
00:00:33,940 --> 00:00:38,870
Let's start with a click listener on the backdrop which closes the modal.

10
00:00:38,910 --> 00:00:42,810
Now this shouldn't be too hard right, in our modal component,

11
00:00:42,970 --> 00:00:46,850
the backdrop in the end is this element with the ID backdrop,

12
00:00:47,230 --> 00:00:51,790
so all we have to do is select it and then add an event listener.

13
00:00:51,790 --> 00:01:02,610
So here I will select my backdrop with this shadow root query selector and then #backdrop because

14
00:01:02,640 --> 00:01:08,950
again we have that ID backdrop on that div and now I just need to add an event listener and I'll

15
00:01:08,950 --> 00:01:11,450
do that here next to my button event listeners,

16
00:01:11,600 --> 00:01:14,200
there I'll access this my backdrop

17
00:01:14,200 --> 00:01:20,410
and add an event listener, add this click listener of course and in the end here I want to do the same which

18
00:01:20,410 --> 00:01:26,470
I do when I click the cancel button because in the end, we cancel the modal when we click the backdrop.

19
00:01:26,470 --> 00:01:31,300
So I will use this cancel method here as an event handler, bind this,

20
00:01:31,480 --> 00:01:35,670
so I will do exactly the same as I do for the cancel button.

21
00:01:35,880 --> 00:01:37,840
And with this change, it should already work,

22
00:01:37,870 --> 00:01:45,300
if I now go back, open this, click somewhere on the backdrop and it closes this, nice.

23
00:01:45,300 --> 00:01:52,100
Now I want to work a little bit on the styling, I want to decrease the amount of whitespace we have up there,

24
00:01:52,170 --> 00:01:54,540
maybe add a line below our header.

25
00:01:54,960 --> 00:01:57,250
So for that I'll go into my styling here,

26
00:01:57,420 --> 00:02:04,980
now for the line, I'll add a border bottom here on my header which wraps my header content in the

27
00:02:04,980 --> 00:02:05,640
end

28
00:02:05,790 --> 00:02:08,940
and that should be one pixel solid and #ccc.

29
00:02:08,970 --> 00:02:10,430
So this is a light gray,

30
00:02:10,470 --> 00:02:12,840
it's the same light gray I have as a border top

31
00:02:12,840 --> 00:02:22,000
on the actions and to reduce the amount of whitespace, for slotted h1 content which brings extra

32
00:02:22,000 --> 00:02:22,960
margins,

33
00:02:22,960 --> 00:02:32,210
I'll set the margins of that h1 tag to zero and now with that, if I reload, this looks much nicer.

34
00:02:32,240 --> 00:02:38,900
So this is now the look I want to have, last but not least, let's add a tiny animation, a CSS transition

35
00:02:38,900 --> 00:02:40,260
to be precise

36
00:02:40,490 --> 00:02:44,170
and for that, the modal itself should be animated when it comes in.

37
00:02:44,870 --> 00:02:54,330
So to do that, I want to have it slide in from the top and go from opacity 0 to opacity 1 over let's

38
00:02:54,330 --> 00:03:03,570
say 300 milliseconds. So I'll actually reduce the top distance here to 10vh instead of 15 which I had before,

39
00:03:03,570 --> 00:03:06,240
opacity already is set to 0 initially

40
00:03:06,630 --> 00:03:15,300
and then when we show it, which of course is the case here, I want to animate that. Now for that, I will

41
00:03:15,360 --> 00:03:23,110
actually add an extra rule here for the

42
00:03:23,160 --> 00:03:29,730
opened state or my modal, where I also set top to 15vh,

43
00:03:29,790 --> 00:03:34,290
I can't do this in this combined rule because the backdrop should not be moved down.

44
00:03:34,290 --> 00:03:38,790
So here this is basically the end state, opacity 1 pointer events all

45
00:03:38,820 --> 00:03:43,200
and then for the modal, also in addition, top set to 15vh,

46
00:03:43,200 --> 00:03:49,560
so it is pushed down further than it is initially when it is invisible and now so that we can see that

47
00:03:49,560 --> 00:03:50,400
change,

48
00:03:50,550 --> 00:03:51,000
I'll add

49
00:03:51,010 --> 00:03:56,690
the transition property to the modal and there I'll

50
00:03:56,840 --> 00:04:03,570
transition everything, so all properties should be watched and animated, over .3seconds with

51
00:04:03,570 --> 00:04:05,730
an ease out timing function

52
00:04:05,730 --> 00:04:11,910
and if CSS transitions are something you're not familiar with, attached you find some helpful resources

53
00:04:12,120 --> 00:04:17,940
and my CSS - The complete Guide here on Udemy also of course is a great resource to learn more

54
00:04:17,940 --> 00:04:18,450
about that.

55
00:04:19,470 --> 00:04:28,650
So now with that, if I reload this page, you'll see it slide in and also automatically slide out, the same

56
00:04:28,650 --> 00:04:31,360
is the case when I click these buttons.

57
00:04:31,380 --> 00:04:35,890
So now we have this nice little animation here for our modal

58
00:04:36,000 --> 00:04:42,300
and with that, we built a pretty nice component which you can of course always enhance more, you can style

59
00:04:42,300 --> 00:04:47,910
these buttons differently, whatever you want but I'm very happy with that and I think we learned a lot

60
00:04:47,910 --> 00:04:49,200
of cool things in this module.