[MUSIC] In this lecture we will discuss, styling our subjects page namely the areas. We want our areas to fill the entire display area in width as well as height. All right when we come back to the code all of our tests are looking pretty good. But of course our styling is something to be desired. Okay, let's get ready to fix that. So these black lines are just here temporarily, but what they show off is the fact that there's a gap. Both top and sides, that we would like to fill up the entire real estate. And if I inspect the Nav bar notice that theres about a 20 pixel margin at the bottom of this Nav element that we would like to get rid of. So let's go into the layout CSS and go ahead and update our stalling for the Nav bar. And we hit Refresh. And now things are starting to tighten up right towards the top. The next thing I'd like to get rid of is all this space towards the right and left. And we'll notice that this padding is coming from the container-fluid. So let's go back into layout.css and add an area for the main display to remove padding left and right. That will remove what the container fluid was adding. There's no more padding for this. Now the rest of the padding is coming from this subject page element. So we'd like to get rid of that padding. Except that's not generic layout. That is more of a subjects page. So let's go over to subjects.css and register it there. Now when we hit Refresh, we're getting pretty close to the side. Okay, the rest of the room being taken up, it's if you look down inside of areas pane, areas content, area left and right, have a padding of 15, left and right. So let's put this in layout.css, and this is generic. Let's hit Refresh and we're tied up against the sides as well as the top. All right, we're starting to fill the entire real estate. All right, now I want to get this check box. I want to get it not where it is. In the lower-left, I want to be in the upper-right. So there's two primary things I have to do, is I need to set the area pane to be position relative. And then the check box is going to be positioned absolute in its outer position relative 10px from the right, 10px from the top. So if we come back and hit Refresh. Our check boxes have now moved, awesome. All right, so you notice how these areas are scrunched up here. It's because its placeholder is only so big. And they're only taking the amount of room required for the placeholder. So now what we want to do is tell these areas go ahead and take up more room. We want there's so many of the components that we're going to put in here, namely the map is going to judge its size based upon the container around it. So let me go tell tab-content to be 44% of view height. That accounts for some of the size of the menu bar. All right, so if I hit Refresh, you see where we're taking up roughly 50% especially if I scroll up and let the menu bar be hidden, then we are taking up pretty much the full display. But you notice even though we are taking up half the display, that map does not expand to be the whole area. And if I collapse one of these, they still are only taking half the display. That's because they haven't defined anything from being in the expanded state. So I come back and say, well, if you're a normal tab content, you're going to be roughly 50%, but if you're expanded you're going to be closer to 100%. So if I hit Refresh, you notice the map is taking pretty much the whole display. And I couldn't get these quite to line up. And when I uncheck one of the left areas, the remaining area expands. Go back do the other one, you'll take that area okay, seems to be working. Now these buttons up top, they're pretty huge, taking a lot of space. Let me shrink those up a bit, and lower the font and lower the line size around the characters. All right, and that looks a little cute. Still can get a thumb on that, but that works. Okay, so we still have these debug lines, so let me take those off. They were defined in the area, I believe. Let me hit Refresh, okay so lines are gone temporarily because they're going to come back permanently, When I assign the styling to the area pane. Okay and we come back. Okay so I think this page is pretty well done. But what needs our attention now If we go to images, let me go ahead and expand this. Notice how now we've lost our margin. And we go to Things. We've lost our margin. Let's go ahead and make a page specific adjustment to this to account for the fact that we took away the default margins that were being applied. So in subjects, Let's go ahead and say that in the images area or the things area, let's go ahead and put a 15 pixel padding, left and right. Okay, it slid over a little bit and we can get our padding back on the right. Same with images, okay? All right. So one of the last things I want to do is, we have this navigation. And we can get to subjects pretty easy. But this is going to be sort of like our main display we're coming to. You notice that Brand takes us to our default web application that I'm continue to leave in here. What I'd like to do is make Subjects the default page. So we would fix that by going over to the router and making home go to the subjects page. And then I guess I really don't need this second subjects as long as I update the Nav bar so let me go ahead and delete this. Go over to the navbar real quick before I forget. And I want to go home all right. So now, if I hit Refresh. Hit Brand, go to Images. Hit Brand, come back. Things, Brand, Subjects. Authentication check, hit the Brand, okay? So now we have a good default page. All right, we now have a good canvas to begin work on the next lesson. That are going to be able to use this information in these display areas to query the API and display their view specific information of our things and images, neat. All right before we quit, I have one last minute visual change to put in place. This issue was brought to my attention by a student in class who not only submitted a trouble ticket, but also submitted a solution. Thank you. And notice that when we do the Go To the active state is sometimes highlighted. What the student noticed was when we go to Things or Images they weren't being highlighted. And the reason for that is functionally, I needed to null out the ID, so that when we navigated to an individual image, when we went to Images, it would go back to the collection state. Prior to adding the nulling out on the ID, we would have stayed in that specific image state. So what the student reported is that we could change our active to a hash. Telling it what state we want to be active. And with that simple change, we hit Refresh. Notice Images is now active. And if we pick a specific image, that state is also active. If we go to Things where now Things is active. And if we go to a specific thing. Things is still active. Okay, that's a nice improvement. Thank you, Corel. In summary, we styled the subjects page. We made it so that our areas filled the entire display area in both width, as well as expanding to the full display height. Especially on the left side when we had the chance of having either two or one display areas. And we used position absolute in order to get our checkbox into a specific position that we liked. And then customize the button sizes so they wouldn't eat up as much real estate. And then after taking away some default Bootstrap styling, we needed to go back and re-add padding to our Thing and Images pages. That seemed appropriate, we would like each page to decide for itself what kind of borders to have. What's next? Geolocate subjects. We now have the ability to express an origin and a distance criteria and a canvas in which to put our components onto. Now let's start populating our subjects page with components that can display a view specific rendering of our subjects. Nice, nice place to start.
