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
30. Customising sortable styles
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
Transcript
00:00
One thing that you'll probably want to do is customize any of the options for sortable JS,
00:05
but via the package that we pulled in to allow this to be sortable within our LiveWire components. Now, to do this, it's very, very simple. Let's go over to our board show and let's come down to the point where we are defining out all of our sortable stuff just inside of here. Now, the one thing that I'm going to change in this episode is the ghost class.
00:26
Now, when we move this, notice that the card behind doesn't really look like it's not there. It's sort of exactly the same styles. So we want to change the card behind this that's being moved to something with a little bit less opacity. So to do this, we go ahead and use wire sortable like we've done the majority of the time.
00:46
And we're going to just provide a bunch of options. These options are just going to be anything that sortable JS provides. So if you find an option that you need to change over or slightly customize how this works on the sortable JS documentation, you can just add in any of these options in here.
01:02
So we're going to specifically add the ghost class that we want to change. That's going to be that card or column behind. So we can use tailwind styles in here. So I'm just going to change this to an opacity of 20.
01:14
Let's see the difference that this makes now when we move a column around. And you can see that just behind here that has a lot less opacity. And it sort of helps when we're moving this across because we can actually see now where we're putting it. We can do the same thing for the cards as well.
01:28
So we just use exactly the same thing in here. And we're going to go over to our column and we're just going to change this over where we have our list of cards. So let's just go to where we're iterating through our cards and we'll do the same thing directly in here as well. The only difference here is that we need to provide this as the group.
01:46
So we're going to say sortable group options because of course we know our cards are now grouped between each column. Let's go over and try this out. And as you can see, now they have a lot less opacity and it's much easier to see. So any options that you need from sortable.js, just go ahead and pass them either into the group options or the overall options for each of the columns.
31 episodes•2 hrs 27 mins•1 year 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!