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
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
31 episodes•2 hrs 27 mins•11 months ago
Overview
Get ready to master drag and drop sorting in Livewire, by building a Trello clone.
We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.
Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!