Cleaning Up Loose Ends 0:00Alright, here's the deal. In real life, building an application can take hundreds of hours. And we don't have that much time for a series, we have two or three. So with that in mind, I'm giving us two more videos, and then I'll pass it off to you, if you wish. Okay. So with that in mind, for this video, we're just hunting around the codebase, finding loose ends and ugly artifacts to clean up. For example, this login page is ridiculous. So that's going to be step one. Restyling the Login Page 0:25For example, this login page is ridiculous. So that's going to be step one. I'm going to go to login.blade. And this is the original bootstrap form that Laravel UI provides. So you'll notice we're applying the background color and the padding to the container itself. Why don't we instead do it to the div below it. And then I'm going to set a display of flex and justify center. That will align the width of this child to the center of the page. And we get something like that. All right, next you'll see we have a card here.And we get something like that. All right, next you'll see we have a card here. Yeah, let's just get rid of that whole thing entirely and reformat. Next we have another card body. Yeah, again, this is all Twitter bootstrap stuff. So let's get rid of all of that, like so. And now within here, we can quickly swap out each of these sections. So this one is the email address. And you'll see it's basically what we've been doing all along. A label for the email.And you'll see it's basically what we've been doing all along. A label for the email. We're setting the value to the old input. That way if validation fails, they don't lose what they typed. So let's swap that out with a form input for the email. And yeah, here you can add any extra little things like this if you want. Set the value equal to the old email address for failed validation. Okay, so now if I come back, we're swapping over to the new inputs. All right, let's do the same thing for the password. So I'll grab all of this and replace it with our new one.All right, let's do the same thing for the password. So I'll grab all of this and replace it with our new one. And yeah, once again, we could set autocomplete. What is it? Current password. I think that's the one password managers look for. Come back. There you go. All right, next, the remember me section isn't too bad, but let's go ahead and swap it over. Form checkbox for remember.All right, next, the remember me section isn't too bad, but let's go ahead and swap it over. Form checkbox for remember. Now come back. A little better. However, we do have to handle if validation fails, we need to remember whether or not you selected it. So we can do that right here. We could say, if you checked this remember input, then let's add checked, and that should do it. Okay, finally, last little piece of the puzzle, as well as a forgot password link.do it. Okay, finally, last little piece of the puzzle, as well as a forgot password link. So I'm going to select all of this and replace it with form submit. And let's take a look. There you go. And then after it, we want an anchor tag that links to that route. All right, and now we'll just manually add some of these styles. And then maybe a little margin right. And let's have a look. Yeah, that's much better.And let's have a look. Yeah, that's much better. Let's get rid of the margin there. So the final step is, let's just add a little more padding. So at the very top, why don't we increase this to, what are the options, 16 maybe, and then a little more padding on the top. Maybe too much. And yeah, you know what, I think we're going to, after I make this change, I think we're going to call it a day there. Yeah.going to call it a day there. Yeah. And actually, let's add a little border. Okay, good enough. So you'll notice the register page needs to be updated as well, but I'm not going to make you watch that. It's the exact same process. So I will take care of that part behind the scenes. All right, let's go ahead and sign in. All right, so at this point, I genuinely have no outline here. Polishing UI Layout Issues 3:44All right, let's go ahead and sign in. All right, so at this point, I genuinely have no outline here. I have no list of things to do. We're going to, together, hunt around the code base and find things that jump out at us. For example, the following section here, let's make that color match what we just did in the form. So I will go to friends list. And right up here, let's add a border. Or if you find yourself creating these panels all the time, I would recommend extractingAnd right up here, let's add a border. Or if you find yourself creating these panels all the time, I would recommend extracting a component. But for now, I only have two or three. I'm not going to worry about it. All right, next, I'm seeing some extra padding down here. I'm assuming we have some margin-bottom. Yeah, notice this list item, it looks like they all have margin-bottom. And of course, we don't want that for the very last item. I thought we had handled this, but maybe not.And of course, we don't want that for the very last item. I thought we had handled this, but maybe not. Yeah, I didn't. So every item gets a margin-bottom. I don't want that. So we'll say if it's the last item of the loop, no margin-bottom. Otherwise, margin-bottom of four. Okay, so now if I come back and refresh, we clean that up. All right, next, this section here, a couple things. One, I can submit it, and that's because we temporarily removed the required status forAll right, next, this section here, a couple things. One, I can submit it, and that's because we temporarily removed the required status for the input. So let's go ahead and return that. And now I can't submit the form. Next, the publish button, it's very quick styling there. It doesn't even respond when I hover over it. So let's clean that up a little bit. We'll scroll down. Maybe let's add a little more padding.We'll scroll down. Maybe let's add a little more padding. And then let's reduce the text size a little bit. Next, when the user hovers over it, let's change the button to a slightly darker blue. All right, so now we hover over it, and we get a little more feedback there. Now again, if you find yourself creating buttons all over the place, consider extracting this to a layer file component, something like that. And to do that, you'll take the exact same steps as when we extracted these components here. What else?here. What else? Let's go to the inspector. By the way, I hit Shift Command C to do that. And notice how they're aligned to the top. And I'd really like the publish button to be a little more centered there. See that extra white space? So what I can do is on the container, that's the footer. Let's go find it. Let's set item center.Let's go find it. Let's set item center. And you'll barely tell, but the publish button will go down ever so slightly. All right, anything else? I think it's fine, really. We can autofocus that when we load. Next, the explore page. Again, pretty quick design work there, but you can flesh it out on your own. But actually, there is one thing we could do. One of the commenters in the previous episode had the idea that for the explore controller, Refactoring to Invocable Controller 6:27But actually, there is one thing we could do. One of the commenters in the previous episode had the idea that for the explore controller, this is actually a decent candidate for an invocable controller. So let's go ahead and review that. You might reach for an invocable controller if you have a controller that will only ever have a single action. So if that's the case, check this out. I can remove this entirely. And now if I come back and give it a refresh, it's going to fail, right? Invalid route action.And now if I come back and give it a refresh, it's going to fail, right? Invalid route action. And notice, well, it's not invocable. Let's fix that. We'll go to explore controller. And I'm going to switch to the invoke magic method name. Now this will be called automatically. It's a small little tweak there, but you might like it. So I give it a refresh, and that works as well. It's an easy refactor.So I give it a refresh, and that works as well. It's an easy refactor. Okay, next we can go to profiles. Ah, yeah, this is one thing. So yeah, for the username here, or their full name, if it is extra long, we don't account for that. So notice we have an issue there. So what we should do is set a maximum width, I assume. Let's see. Yeah, let's see. Adding Pagination to Timelines 7:32Let's see. Yeah, let's see. Like 300, maybe even a little less. 270. Okay, let's go to our profiles page. And right here is that section. We'll just do it inline. All right, next, our timeline should be paginated. For brevity, if I scroll down, you'll see we're just getting that full collection. And it's okay for now, but what about when the user has 5,000 tweets?For brevity, if I scroll down, you'll see we're just getting that full collection. And it's okay for now, but what about when the user has 5,000 tweets? We don't want to load all of those. So why don't we swap this out and move it up to the controller? This will be profiles controller. Right up here. So we're going to pass through the user in question, and then the tweets will be user, tweets, and then paginate them into a high number. So real quick, if we did sets of three, now we have three at a time. And in our partial, yeah, right down here at the bottom, we could render them.So real quick, if we did sets of three, now we have three at a time. And in our partial, yeah, right down here at the bottom, we could render them. Yeah, there you go. Now it's not styled, but it will work as you see there. Page one, page three. Okay, let's see the least amount of design work we can do to make this look good. Let's set a display of flex. Okay, maybe width can be a little sloppy. Let's see. Justifying between to fill up that space.Let's see. Justifying between to fill up that space. And then we'll adopt some of that padding. Finally, let's align it. Yeah, and you know what? Keep it simple. That's good enough for me. Other than, of course, the active link. Maybe that's blue or something like that for some feedback. All right, so if we want to implement this, you'll see we don't see it anywhere here.Maybe that's blue or something like that for some feedback. All right, so if we want to implement this, you'll see we don't see it anywhere here. But what you can do is publish it. So I can say vendor publish. And it's going to ask me which provider we want. I actually want this one here, 15. Okay, so now you'll find it in a vendor pagination directory. And this allows me to be in control of it. There it is. And we want bootstrap four here.There it is. And we want bootstrap four here. Okay, so this is what's rendering it. So let's go ahead and paste in that styling. And then let's figure out where it's active. Right here. So we'll set a text color of blue and 500. Okay, give it a refresh. And now it works. As you see there.And now it works. As you see there. Okay, great. So if we come back to our profiles controller, let's bring this up to a fairly high number, like 50 tweets at a time. All right, so that looks pretty good. Go back to the homepage. But now we're assuming pagination. So we'll need to update a handful of areas, I think. So here's our tweets controller.So we'll need to update a handful of areas, I think. So here's our tweets controller. This is where we fetch the user's timeline. Let's go to that right now. Yeah, okay. Let's paginate that as well. If you don't want to duplicate this, of course, you could extract some of this. You could have a config item, whatever you want. I only think we have it in maybe two places, so I'm not too worried about it. So there's that. Simplifying Navigation and Logout 10:36I only think we have it in maybe two places, so I'm not too worried about it. So there's that. Here's profiles. We can explore. Looks pretty good to me. We need to log out. So I believe with Twitter, this is a little drop-down, but I'm trying to avoid JavaScript for this series. So with that in mind, let's go to our app components, sidebar links. And then at the bottom, more will just be log out.So with that in mind, let's go to our app components, sidebar links. And then at the bottom, more will just be log out. And this will, in fact, be a form that submits a POST request to log out. So let's actually get rid of that whole thing. But I will add that styling, text large. All right, let's have a look. So I can log out. And it works. Let's log back in. What else?Let's log back in. What else? We can create tweets. You can edit your profile. We should have a cancel link, shouldn't we? Let's go to profile slash edit. Let's go to profile slash edit. And down here, let's push this to the right a little bit or add some margin. And then we'll have a cancel link. As you see there.And then we'll have a cancel link. As you see there. So that should simply take you back to the user's profile. And in fact, we could add a class here. So if you don't want to repeat yourself, again, things like this, you could extract a new CSS class or a blade component. Even for things as simple as links or buttons or forms, you could reach for those blade components. So don't be stingy about those. But anyways, that'll take care of it.So don't be stingy about those. But anyways, that'll take care of it. Next, speaking of these links here, most of them we're not going to implement. We just don't have time. We have home, we have explore, notifications we're not going to get to, direct messages, no, bookmarks, no, list, no. So we get those instead. Your homepage, the explore, your profile, and the logout. All right, so I think for this final project, that's as much styling and layout as I'm willing to do.All right, so I think for this final project, that's as much styling and layout as I'm willing to do. In the next episode, we'll do one more thing. We want to give users the ability to like and dislike statuses. In that episode, we'll wrap up this entire series.
