Modern Web Apps With Angular

2.2 Designing the Basic Layout

For applications like the reader, I tend to think that having three panels is the holy grail for the layout because I think it flows very nicely. Because on the left hand side you have the list of feeds that you get to select. And then in the middle panel will be the items for that feed. And then on the right hand side will be the contents for whatever item you selected. It's really not too different than your typical code editor because on the left hand side you have your list of files and folders and then on the right hand side, you have your content. And really for our application, we will technically just have two panels because our feed list, the leftmost panel is actually going to be a drawer that's going to slide in from the left hand slide out. And that's going to be very beneficial for smaller screens. Now we will talk about working with different screen sizes later. But for now we just want to get something up and running. So, let's add a component that is going to contain our panels because we want something to contain not just our reading panel in our item list, but also the drawer that's going to contain our list of feeds. So we can do that by just generating a new component and we will call this panel container. And anytime I'm working with an environment that has a COI, I like to have two command lines open one for running the application, the other four doing well, things like generating components. And so this should automatically be added to our module, our app module, I should say. So let's make sure it is. So we're good there. Let's go to our panel containers typescript file, because I want to change the Select I don't like this app dash panel container, I just want to call it a panel-container. And that's going to be fine. And let's go ahead and add that to our markup for our app component. So right after our toolbar, we will have our panel-container. And eventually we're going to be passing data to this. But for right now, this is going to be just fine. And if we hop on over to the browser, we should see, voila, the panel-container works and that's great. However, if we inspect this, we're going to see that well, its height is just the height of this text. And that is of course, because this is In a paragraph element. But even if it wasn't, if it was a div, it would just be the height of the text. We want our panel container to fill up the rest of the screen. So, no matter what the size is, we want that panel container to fill up the height and so we need to set that to 100%. But we also need to take into account the size of our toolbars. So if we inspect the toolbar, let's see that is 64 pixels. So we want our panel container to have a height that is 100% minus the 64 pixels of our toolbar, and we can do that very easily with CSS. So let's go to our global CSS file, and let's add in a new class. I'm gonna use v100, I typically use that for an element that I want to set its height to 100%. But we also want to minus 64 pixels. So we'll simply just set the height equal to that calculation. And then we will apply that to our container. However, we aren't going to use this class on the panel-container element itself and said we're going to do this inside of the panel-container component. So let's open up that markup. We can keep this paragraph because that will give us at least something that we can see. But we're going to add a div element that has a class of v100-64. We will paste in that p element, and if we go back to the browser, we should see that our panel-container is now 100% high. So let's inspect the div and there we go. So we are good to go at least as far as the height is concerned. Now our panels are going to be defined by using the sidenav module. Let's go to Google and do a search for angular material sidenav. And this will take you to, of course, the sidenav module. And there are three components that comprise the sidenav module. And they're out of order, at least in my opinion. The first is content. That is going to be the right or the two right most panels. So that's where our items and our reading panel is gonna be. Then if you scroll on down, there is the matdrawer. That is the leftmost panel for us. That's what's gonna slide in and out and contain our feed list. And then there is the container that contains all of these things. So I would think that the container would be listed first because well it kinda has to be first. So we're going to use this drawer container. So let's go ahead and get rid of this p element and we will have mat-drawer-container. And then we will define the drawer itself, which is going to be the sidenav, this is going to be our feed list, and then we could use mat-drawer- content. However, whatever else we define here is going to automatically be considered of the content. So we don't technically have to use that selector. So we can just have a div element here that contains the reading panes. Now, let's save this, let's go to the browser. And we are going to see just the reading pane. You know, the navigation portion is off to the side, it's hidden. So what we want to do, just for the time being is to set the mode property to side because there are several different modes, there is an over mode which overlays the navigation over whatever is specified as the content, there's one that just brings it up at the side. Then there's another that kinda pushes the whole content over. And I think side it makes the most sense to me. And we can also say that this is opened so that way we can see both of these things and that will give us the ability to start styling them. Now, right off the bat, I can see that the height is not what it needs to be, this also needs to be 100%. And the drawer is also going to change the width based upon the content. I don't necessarily like that, instead, I would like to have something specific. So we are going to add a class. And we're gonna call this just feed-list-panel. And we will define this here for our component. So let's open up the CSS for this component. And here let's give this a width of 250 pixels that might be a little bit too large. But we can at least see what this is going to be. And I think that that's fine. So we've got that handled. Let's also go to the panel container and let's add a class to the container or the drawer container. And let's just call this v100. So that this would be 100% for the vertical. So let's go to our global styles once again, let's go ahead and add that because this is going to be useful in a variety of places. And all we are going to do here is set the height to 100. So, with that done, let's see what we get here. Our drawer is 100%, our content is, well what is it? It's not 100%. So let's add that v100 class to our content inside of our panel container. We'll simply add that v100 class and our reading panes then should be 100% as well. So hovering over that we can see that that is the case. So we have the beginnings of our layout, which I think is a very good start. In the next lesson, we all starts to build our feed list. Let's just take this from left to right so that we will build our feed list so that then we can build our feed item list and then we will be able to build our reading panel.