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
06. Fitting cards in columns

Transcript

00:00
Right.
00:00
Let's go ahead and focus on our cards. Now these might seem pretty straightforward, but of course our columns have a very limited height, depending on the viewport. What we want to happen is when we do start to iterate through our cards, we
00:14
want these to be scrollable vertically. So we've got horizontal scrolling for all of our columns and we want vertical scrolling for our cards. We don't have to scroll down the page at all.
00:25
Okay. So before we do anything, let's go ahead and create out another component here for each of our cards. Our columns and our cards will all have their own functionality.
00:35
So it's really important at this stage, we break them out into components. Okay. So let's go to our card section just down here. And once again, we're going to go ahead and do a for each on
00:45
a PHP range, just temporarily. Let's add 20 to each one and we'll call these cards. Okay. Let's end that for each and let's use our live wire card
00:57
component just inside of here. Okay. So let's open this up and start to style out our cards. These are going to be pretty straightforward.
01:05
The first thing that I'm going to do, because we're eventually going to get to a drag and drop functionality is set the cursor to a pointer for this entire thing. Of course, it's nothing that we can click, but we want to be able to show that we can actually drag this.
01:19
So that's going to be the overall wrapper. And then later we'll add our sortable functionality to this overall wrapper. Okay. So let's just say card title and let's start to style these up.
01:30
Let's create this pretty simply with a background of grey 200, set rounded to large, we'll set some padding on the Y and the X axis and inside of here, we'll set flex item center and justify between a little bit later, we're going to have the card title, but then we're going to have a little icon next to it
01:48
to show if we've got any notes. So let's wrap our card title here in a div and we can style that up however we want and we should be good. Okay.
01:57
Let's have a look and yeah, not looking great at the moment. And of course I can scroll down, but this isn't what we want. We want the columns to have a max height here, and then we want these to be scrollable.
02:10
So let's hop back over to our column and the wrapper around the cards that we have can have some styles to control this stuff. So let's set a padding of three. That's already going to look a lot better and we want a space Y on
02:24
here to separate out each of the cards. So we'll do just do that 1.5 and then we're going to set a padding on the top of zero because we don't want this to sit too far away from the column title. And then really importantly, we're going to have an overflow
02:37
on the Y axis to scroll. Let's go over and have a look. Okay. So you can see already, we've got a little bit of an issue where these
02:46
are sort of running over our columns. So we're nearly there because the columns are retaining their maximum height, but we've got an overflow issue. Now to fix this up, let's go up to the top here.
02:59
What I'm also going to do while we're here is set the font to medium on our column title, just so it looks a little bit different on the overall container that we've got here. We think about this.
03:11
We've got our title up here, our form, our cards here, and then create card, which always needs to be sat at the bottom. We can go ahead and add a flex on here. We don't want a normal flex because by default, this is row.
03:25
We want this to be flex col. Let's go over and see the difference. And you can see already because we've applied flex to this, it has not overflowed and now we have our nice scrollable cards in here.
03:37
Okay. So we've got create card at the bottom, which we'll be adding a little bit later. Just for now, let's go over to our column where we have create card. And let's just add the same padding onto that, just so it
03:48
separates out a little bit. Okay. There we go. We've got a nice set now of scrollable cards.
03:53
And if you wanted to change this up, when I originally designed this, I set this to a random integer just to make it a little bit more interesting. So I'm going to set random in here to one and 30 and over on our board, when we went through all of our columns, I'm going to do that between one and 10.
04:12
So now what you can see is you'll get a much better representation. Uh, if we bump this up again to 30, you can see, we get a much better representation of a board that we can scroll across and a bunch of cards that we can either scroll down or not have to scroll down at all.

Episode summary

In this episode, we focus on making our board columns more functional by fitting cards neatly inside each column. To get started, we split out our cards into their own component—this is a good move for later on when we want each card to have its own logic, like drag-and-drop features.

Next, we loop through a set of cards for each column (just using some dummy data for now), setting up basic styling so that the cards look decent. We give the cards a background, some rounded corners, padding, and set the cursor to a pointer to hint that they'll be draggable later.

The main challenge we tackle is keeping the cards inside the visible area of their column. Instead of the page scrolling, we want the card list itself to scroll vertically within the column—while the columns keep their own horizontal scrolling, just like a kanban board.

We fix up the column styling so that there's proper spacing and padding, and then we set overflow on the Y axis to make sure the cards become scrollable when there are too many to fit at once. We also make sure the "Create Card" button always stays at the bottom of the column, by switching our flex layout to a column direction.

Finally, to make the board feel more realistic and dynamic, we randomize the number of cards in each column. This gives the board a more natural feel, with some columns full and scrollable, and others only partly filled. The end result: a nicely styled, scrollable set of cards in each board column, setting us up for more interactivity later on!

Episode discussion

No comments, yet. Be the first!