Build a Trello Clone With Livewire
This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
05. Columns and headings

Episodes

0%
Your progress
  • Total: 2h 27m
  • Played: 0m
  • Remaining: 2h 27m
Join or sign in to track your progress

Transcript

00:00
Now that we have our board layout set up, let's go and style out each of the individual columns. Before we do that, let's extract everything that we've got here to a separate component. So let's cut this out and go ahead and make out a new Livewire component specifically for our columns. Okay, now that's done, let's go ahead and pull in that Livewire
00:20
column component just inside of here. And if we head over to the column template, let's paste in what we had before. So we shouldn't see any difference at all here. Okay, now that we've got this in its own component, let's start to focus on what we want to see. Okay, we're going to keep a fixed width for each of these columns.
00:38
But of course, we're going to style these up to look a bit different. So we'll have a background of white. We'll set shrink to zero because we don't want this to shrink if anything gets in the way. And we'll add some other visual elements like a shadow and we'll say rounded large. We'll also set the max height here to full so it doesn't fall over our container. And for now,
00:58
we should be good. So you can see here that we've got nice columns. Okay, now the only problem is we want these columns not to be by default the full height of the page. So to do this, because we are using flex just over here, we can go ahead and set these columns to have a self start. That's going to go ahead and pull them up to the very top. And of course,
01:19
as we add more cards and add stuff in here, that's going to increase their height, but only up to a maximum of the bottom of our container. Okay, I think we can get rid of this background here now. So let's get rid of this. And there we go. We've got a bunch of columns. Okay, so back over to our column. Let's think about the elements that we want in here. The first one is going to be a title.
01:40
Then we're going to have a section for each of our cards. And then down here, we're going to have an create card form, a button which reveals a form. Let's work on the title first of all. Now, if we think about this, and we saw from the demo, when I click one of the titles, I want this to change over to a text input so we can modify it. So let's go and just start to create our title.
02:05
And we'll see what else we need to do. So for this overall container, we want the title on left, but we also want a button on the right hand side that we can click to archive a card or perform any other actions. So we're going to set this to flex with an item to the center again. And we're going to say justify between that means that we can have a title here. And then we can have a button
02:29
over here. And it looks something like this. So title on the left button on the right hand side for the title itself, let's constrain this down. So it always maintains the same height. And then when we switch this out for our form, we want the form to be in exactly the same place as the title so it doesn't shift around. So for this, we're going to set a fixed height. And we'll need to
02:51
fiddle around with these values. We'll set a width of full, and we'll set flex with item center. And we'll set some padding on the x axis to four. We don't want this to hit the other side. So we're going to get the set of padding on the right to zero. And we're going to set a minimum width here of zero. So let's go ahead and pull in our title. But we're going to put this inside of a button
03:13
because when we click on the title of the column, we want this to trigger an action to show the form. So let's reset the stars on our button to text left. And we'll set a width of full on this as well. Okay, once again, I'm going to set a background color to this just so we can see what we're doing. So let's set that to red. And there we go, you can see that now this is pulled
03:35
away from the edge. And the button is on this side as well. For the button itself. Let's go ahead and style this up as well and give this some padding so it's easily clickable. So let's set the padding to 3.5 on the x axis, and three on the y axis. And in here, we're going to introduce a drop down. Now when we work with Laravel breeze, if we head over to resources and views and components,
03:59
we actually already have a drop down component with a drop down link, we're not going to be using drop down link, but we are going to be using the drop down component that's used just over here. So you can see it's exactly the same way. But we're going to slightly style up the individual items. So let's go ahead and pull this component into here and give it an icon. So we're going to
04:19
say x drop down. And inside of here, we have a slot which contains the trigger. So this slot in here is going to have a name or trigger. And then this is going to be the button to trigger it. If we just open up this component, so let's open up our drop down, you can see that if we have a look here, we've got a trigger slot here, which when it's clicked, we'll open it. And then we've
04:45
got our main content just down here, which is our default slot. For the button itself, let's go over to hero icons. And let's go and pull in an ellipsis icon. And we'll just copy and paste this once we're done. So we're only going to need to create this drop down once. Let's paste this SVG directly into here and let's change up some of the styles. So let's set this to a size five, which will give it
05:05
a width and a height of five. And if we come over, we've got an error without undefined variable content, which just means that we haven't included any content here. So let's say x slot and content. Let's call this content. And we'll just put drop down content in here so we know what to do. Okay, there we go. Great. So now when I click on this, you can see that we get that drop down and
05:28
we can add any of the links inside of there that we need to archive. We'll come back to that in a bit, but I want to be able to click on this button now to change this over to a text input. And really crucially, we want everything to line up really nicely as well. To achieve this, we'll go ahead and make this component here for the button itself that houses this button an alpine component.
05:52
And we'll go and add in an editing state by default. Of course, that's going to be false when we click on this button. So X on click. We, of course, want this to change to truth. So we're going to set editing back to true here. Now for the button itself, we don't want to show this if we are not editing anything. Let's pull these down. So it's a little bit easier to read.
06:15
And let's say that we only want to show this button, which is the title when we are not editing. So just by doing that, when I click on this now, you can see it disappears. So just underneath our button, and let's pull this down again, just as a little bit more readable. We're going to go ahead and create out a template with an if statement within Alpine. So let's say X if
06:38
editing, then this is going to be the editing state, which needs to be wrapped within a container. So let's say editing state. Okay. So now when I click on this, we moved the editing state. Now we want the input here to line up exactly with the text. So it doesn't shift around. Let's just go ahead and add in an input here and see what happens. So I'm going to switch this over
06:58
to a form, which we're eventually going to submit when we get to updating this column. And we're going to reuse one of the other components that comes with Laravel Breeze, which is the X text input. Okay. Let's just have a look at this for now. And I'm going to give this a default value of column title, which of course is going to be the same as the current title of the column.
07:19
And let's click that and see what happens. So as you can see, it just looks a little bit jarring. The text moves over here and we want this to line up nicely. So remember we set the height of this to eight up here. Well, we're going to match this up with the style of the input. So we're going to say we want this to be a height of eight. We want the padding on the X axis to be 1.5. And we want
07:40
this to be a width of full. So we have the full input to be able to style. Okay. Let's try this out and see what happens. And as you can see, that's a little bit better, but as you can see, the text still doesn't quite line up. It moves over a little bit. What we can do is either shift the entire form or the input over a little bit. So we're going to go ahead and say that we want
08:01
a minus margin left. And once again, we're going to bring in the calc function and we're going to grab from our theme, the margin of 1.5. That is what we gave the padding on the X axis. So we're going to minus off 1.5 from that. And let's see the difference. Let's click it. And you can see, sure enough, that looks a lot better now because we've got a one pixel border on here, but we also
08:26
want to do inside of calc is just minus off one pixel. And again, you could pull that from the config if you wanted. Okay. When I click on this now, you can see, yeah, sure enough, it is still coming over a little bit. I think if we add one pixel, that makes a lot more sense. Let's click it. And there we go. So as you can see, the text just does not move. Now it just converts this
08:49
directly over to an input. Now, the other issue is that this input doesn't grow. So the container around this, this form, we want this to grow with flex. So it is full width. So if I click on that now, you can see that that just perfectly swaps over. Great. Okay. Let's get rid of this background of red 500 on the button because we know that everything is nicely pulled up now. And we now
09:13
have a nice title and a button here where we have some dropdown content. Now, because we don't have this as a traditional form, when we click outside of this, we want to get rid of the state of this being edited. We can do that really easily with Alpine as well. So just underneath here, let's say that when we click on this, but outside of this component, so let's say outside, then we want to
09:36
go ahead and hide it. And let's set editing back to false in this case. Okay. So now when I click on this, I can click outside and that cancels off that editing state for us. And of course, when we update this and hit enter, that's going to go ahead and actually submit that form, which we'll handle with Livewire.

Episode summary

In this episode, we focus on setting up and styling the individual columns on our Kanban-like board. We kick things off by extracting our existing column markup into its own Livewire component, which tidies up our main board and preps us for more focused work. Once it's isolated, we start styling the columns: white background, fixed width, no shrinking, nice shadow, rounded corners—basically making each column look clean and consistent.

Next, we tackle the layout issues relating to column height and flex alignment, making sure the columns don't awkwardly take up the full page height and stay nicely positioned at the top. With that sorted, we move on to the core content of each column: the title, the card section, and a spot for a create-card form or button at the bottom.

We then focus on making the title interactive. By default, it's just text, but when you click on it, it swaps to a text input for editing—without everything jumping around due to size changes. We walk through the necessary Alpine.js state logic and some CSS trickery (with negative margins and the calc() function) to get the input perfectly aligned with the title. There's also a dropdown menu for column options, leveraging Laravel Breeze's existing component and adding a nice ellipsis icon from Heroicons.

Finally, we make sure UX feels right: when you click outside the input, it exits editing mode, and hitting enter on the input will (eventually) save it via Livewire. All in all, you end up with a neat, editable column header with a handy dropdown menu, all sitting comfortably in a styled column as part of your overall board.

Episode discussion

No comments, yet. Be the first!