So the functionality inside of our application is in a pretty good spot right now. 2
You know we can select videos but the styling is still a little bit off. 3
You know we've got the list down here. 4
We really want to be you know have it be on the right hand side up here. 5
So I think we've still got a little bit of work to do. 6
Let's do some CSSA here just to kind of get stuff rolling. 7
The project is already set up to do some basics. 8
SS I've got a style folder in here with a style that CSSA file. 9
We go ahead and add some CSSA in here. 10
It will be automatically applied to the project. 11
So let's go ahead and add some CSSA here. 12
Unfortunately this is going to be a lot of just you know typing stuff out. 13
Just bear with me. 14
Let's get through it. 15
So first off we're at a search bar selector. 16
This will get a margin of 20 picks and we'll align it to the center. 17
Next we'll take our search bar and select the child input of it with a with 75 percent. 18
Then a video item. 19
And so this will be our thumbnail on the right hand side with a image selector. 20
We get a max width of 64 pixels you're going to cap the size of it. 21
Next we'll do a video detail with details. 22
And so these will be our individual video details on the right hand panel so you get a margin top of 23
10 picks a padding of 10 picks a border of one picks solid DDD. 24
Let's just kind of a nice gray. 25
We'll give it a board a radius of four picks as well. 26
OK. 27
Second to last. 28
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
and clear that hey when you're like you know hovering over this thing it is something you can click 30
on and to make that extra clear will say when you're hovering on it. 31
So you use a pseudo selector of hover the background color of another gray Tripoli. 32
OK. 33
Let's go ahead and refresh. 34
I'm going to pull my with out here a little bit. 35
And these look nice and rounded the top ones still. 36
OK so here is our video detail. 37
OK that looks good. 38
That's our video detail. 39
All of these now get a nice gray highlight and a cursor whenever I mouse over it. 40
Looks good. 41
The input at the top still doesn't have any styling. 42
We made use of this search spark class but I don't think we ever applied the class name search bar to 43
our search bar component. 44
So let's do that real quick as well. 45
You know open up search bar find our top level div right here and I'm going to add a name class name 46
of search dash bar in general I am a big fan of giving your top level component right here. 47
A class name that is basically the same as the component name. 48
Just you know lowercase separated by dashes really makes it easier to have one CSSA file per component 49
which makes styling a really really straightforward. 50
OK. 51
So let's try checking that input now. 52
Right. 53
This is looking good. 54
So we got this nice put up top got the video list. 55
We got the terrorists in our video detail and the video list down below. 56
Let's go ahead and fix up the rest of this in the next section.