This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
04. Figuring out the forum layout
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
Transcript
00:00
So one more bit of setup I promised before we dive into some more interesting stuff, and that is figuring out the forum layout. At the moment, if we head over to the forum index, we're pretty much just using what the dashboard used. And this just contains one container here with a white background. What we want, as we saw from the introduction, is a sidebar and a main
00:21
panel. And this will be shared between the forum index and the discussion page. And of course, any other pages that you create as well. So what we're actually going to do is create an entirely new layout here. So if we head over to the layout section, let's create a new file here and call this forum layout. That kind of makes sense. So if we go ahead and build out our
00:40
template in here, how do we want this to look? Well, we actually want this to kind of extend the base authenticated layout. So let's go ahead and create our script section in here, and we'll go ahead and import the authenticated layout from our authenticated layout just here. And let's go ahead and just use this directly inside of here, like so. And we can just start
01:03
to add stuff in here like we normally would. So let's really basically scaffold this out. And for this, we're going to have an outer container, which pretty much looks like this. So we're going to keep that padding on the y-axis as 12, just so it sits away from the top bar here. But what we're going to do with this is go ahead and set a max width to this of 7xl.
01:26
We're pretty much doing here everything that we see in here, just combining it into one thing. So for this, we're going to have a margin on the x-axis of auto, so it sits in the center. We'll set a space y of 6 between any components we add in here. And on a medium viewport art, we're going to set the space y to 0 just because, and we'll go through this in a second,
01:48
we're going to have a grid here. So when we go down to a smaller viewport, we want these things to kind of sit underneath each other. We're not going to fully make this responsive, but we're at least going to work on the containers. So we have a good start. So on a medium viewport, meaning on a viewport like I have at the moment,
02:05
we want that to be a grid layout. And with Intel Wind, we can set how many columns we want within that grid. And that will be vertical columns going all the way across just here. So now that we've got that, let's go ahead and just create out two containers in here, left and right. And let's choose the width of each of these containers within that grid.
02:28
So for this, we're going to set a colspan of 2. So that's going to take up 2 out of 7 of the grid columns that we have. And on the right hand side, of course, this needs to add up to 7. So it's going to be 6 or 5, sorry. So what we're going to now do is use this new authenticated layout
02:46
with a main slot inside of the right section just to check this is working. So to do this, we're going to head over to the index page. And let's go and just get rid or change this over to the forum layout. And we should be good. Let's change this end tag as well.
03:02
That should have auto imported that as well, which it has for us. We can get rid of the authenticated layout here now. And if we just head over, you can see we've now got left and right. So you can see that the right hand side is a little bit bigger than the left hand side.
03:15
Still got a couple of things to do, but we should be good. So over in the forum layout, let's have a look at what else we might need to do here. Let's go ahead and set a background color on these actually just to check that these are working background black.
03:30
And yeah, so we can add a gap in here. So the gap of six that will just set the spacing between each of these. And you can see at the moment, it's just taking out basically the full width of the page. Let's set some padding on the X axis to six that will be on a small viewport.
03:47
And as we get bigger, maybe on a large viewport, we'll set the padding on the X axis to eight. That pretty much matches this up to what we already had with that main container. It just, of course, is a completely different container. Now we've just added this all into one rather than having these all split up.
04:06
OK, great. So now that we've got that, we can get rid of these backgrounds. We know exactly what's going on here. And now we can just start to slot content in.
04:14
Now, if we look on the index page here, we've used this forum layout. This is our main slot content. So we can just add that into the template using slot. And if we head over now, you can see that that container has now been added in there,
04:29
which is great. Now we can get rid of the padding on the Y of 12, because that's already added to here. And we can get rid of the max width 7XL as well. And we should see something that resembles what we saw in the introduction,
04:44
where we're going to add our search bar and our list of topics. Now, on the left hand side here, as you know, we're going to have this different between different pages, but we need to figure out how to slot in this content specifically.
04:57
So we're going to use a named slot here and we're going to call this side. Now, nothing's going to happen at the moment because we're not choosing any content to add into here. We can either do this down here or above.
05:09
And we just want to create a template here with hash and side. And then any content inside of here will be placed over in this sidebar. So what we'll do just for now, so it doesn't look too odd, we will grab out from the index this container
05:26
and we will put that in there with side in there, just so we have something to at least work with. OK, so there's a couple of more issues here with the spacing of this. So let's just have a look.
05:38
We've got padding on the X of 6. So, yeah, I think we can actually get rid of all of that. Because we already have that gap in there. Yeah, that looks a lot better.
05:48
And yeah, that's fine. So there we go. We've got our side, our main panel at the top here. And then, of course, below here are going to be all of our discussions.
62 episodes•6 hrs 54 mins•2 years ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!