1 00:00:00,830 --> 00:00:04,450 So the functionality inside of our application is in a pretty good spot right now. 2 00:00:04,500 --> 00:00:08,600 You know we can select videos but the styling is still a little bit off. 3 00:00:08,610 --> 00:00:10,550 You know we've got the list down here. 4 00:00:10,620 --> 00:00:13,490 We really want to be you know have it be on the right hand side up here. 5 00:00:13,590 --> 00:00:15,690 So I think we've still got a little bit of work to do. 6 00:00:15,690 --> 00:00:21,400 Let's do some CSSA here just to kind of get stuff rolling. 7 00:00:21,540 --> 00:00:23,830 The project is already set up to do some basics. 8 00:00:23,830 --> 00:00:29,000 SS I've got a style folder in here with a style that CSSA file. 9 00:00:29,040 --> 00:00:30,910 We go ahead and add some CSSA in here. 10 00:00:30,930 --> 00:00:33,610 It will be automatically applied to the project. 11 00:00:33,630 --> 00:00:36,070 So let's go ahead and add some CSSA here. 12 00:00:36,090 --> 00:00:39,750 Unfortunately this is going to be a lot of just you know typing stuff out. 13 00:00:39,780 --> 00:00:40,710 Just bear with me. 14 00:00:40,740 --> 00:00:41,990 Let's get through it. 15 00:00:42,510 --> 00:00:47,580 So first off we're at a search bar selector. 16 00:00:47,790 --> 00:00:56,400 This will get a margin of 20 picks and we'll align it to the center. 17 00:00:56,460 --> 00:01:06,670 Next we'll take our search bar and select the child input of it with a with 75 percent. 18 00:01:07,440 --> 00:01:10,140 Then a video item. 19 00:01:10,380 --> 00:01:15,020 And so this will be our thumbnail on the right hand side with a image selector. 20 00:01:15,270 --> 00:01:22,770 We get a max width of 64 pixels you're going to cap the size of it. 21 00:01:22,890 --> 00:01:27,640 Next we'll do a video detail with details. 22 00:01:27,900 --> 00:01:33,970 And so these will be our individual video details on the right hand panel so you get a margin top of 23 00:01:34,080 --> 00:01:42,990 10 picks a padding of 10 picks a border of one picks solid DDD. 24 00:01:43,080 --> 00:01:45,920 Let's just kind of a nice gray. 25 00:01:46,800 --> 00:01:51,030 We'll give it a board a radius of four picks as well. 26 00:01:51,900 --> 00:01:53,050 OK. 27 00:01:53,910 --> 00:01:54,860 Second to last. 28 00:01:54,900 --> 00:02:01,770 We have a list group item and we'll make sure that the cursor shows up as a pointer just so it's nice 29 00:02:01,770 --> 00:02:05,700 and clear that hey when you're like you know hovering over this thing it is something you can click 30 00:02:05,700 --> 00:02:10,930 on and to make that extra clear will say when you're hovering on it. 31 00:02:11,010 --> 00:02:20,030 So you use a pseudo selector of hover the background color of another gray Tripoli. 32 00:02:20,490 --> 00:02:21,140 OK. 33 00:02:21,600 --> 00:02:24,220 Let's go ahead and refresh. 34 00:02:25,200 --> 00:02:27,580 I'm going to pull my with out here a little bit. 35 00:02:27,960 --> 00:02:31,030 And these look nice and rounded the top ones still. 36 00:02:31,110 --> 00:02:32,700 OK so here is our video detail. 37 00:02:32,790 --> 00:02:33,530 OK that looks good. 38 00:02:33,530 --> 00:02:35,060 That's our video detail. 39 00:02:35,610 --> 00:02:42,130 All of these now get a nice gray highlight and a cursor whenever I mouse over it. 40 00:02:42,390 --> 00:02:43,500 Looks good. 41 00:02:43,500 --> 00:02:46,830 The input at the top still doesn't have any styling. 42 00:02:47,490 --> 00:02:52,500 We made use of this search spark class but I don't think we ever applied the class name search bar to 43 00:02:52,500 --> 00:02:53,780 our search bar component. 44 00:02:53,940 --> 00:02:56,240 So let's do that real quick as well. 45 00:02:56,260 --> 00:03:03,570 You know open up search bar find our top level div right here and I'm going to add a name class name 46 00:03:04,020 --> 00:03:13,000 of search dash bar in general I am a big fan of giving your top level component right here. 47 00:03:13,110 --> 00:03:16,860 A class name that is basically the same as the component name. 48 00:03:16,860 --> 00:03:24,060 Just you know lowercase separated by dashes really makes it easier to have one CSSA file per component 49 00:03:24,300 --> 00:03:27,650 which makes styling a really really straightforward. 50 00:03:28,560 --> 00:03:29,060 OK. 51 00:03:29,220 --> 00:03:31,020 So let's try checking that input now. 52 00:03:31,070 --> 00:03:31,360 Right. 53 00:03:31,470 --> 00:03:32,430 This is looking good. 54 00:03:32,460 --> 00:03:35,630 So we got this nice put up top got the video list. 55 00:03:35,660 --> 00:03:39,640 We got the terrorists in our video detail and the video list down below. 56 00:03:40,050 --> 00:03:43,320 Let's go ahead and fix up the rest of this in the next section.