Skip to main content
10 Rails & Vue.js Trello Clone:

Vue.js Trello Clone in Rails - Part 5

Episode 221 · December 27, 2017

Improve the design of our Vue.js & Rails clone of Trello by making lists more visually distinct and setting up horizontal scrolling

Javascript VueJS


Transcripts

What's up guys? This episode we're going to dive into styling our trello clone to look a lot more and function more like Trello itself. Because right now we're cheating with some bootstrap columns stuff and that doesn't actually work at all like we want it to because when we create a column that goes too far it wraps around and gets displayed here at the bottom, and we can fix that really easily with a little bit of CSS from Trello, and it's actually really really simple.

What we want to do is get rid of this row from Bootstrap, and let's create one called "board", and get rid of "col-3" and replace that with list, and so those are going to be the style using our CSS, and we're going to write our CSS inside of the scoped style block inside our vue component, what this is going to do is make sure that this CSS to the right is only ever available inside of our vue component, and it would never conflict with any other board class or list class that we might have inside of it, which is kind of cool, so if you were to write this in your asset pipeline, it could apply to any of these classes, but writing it inside your scoped style block, this would only ever apply to that vue component, which is kind of neat.

This board, we actually want to have a few classes on here, and so let's take a look at how trello does this. They have a board class here and notably the important two lines that we want are 'whitespace no-wrap', which is going to tell it to not wrap automatically where we saw that with the bootstrap stuff it's wrapping, we want to have this board 'whitespace no-wrap' and then, we can refresh our page and we see that now they're all in their own colums because we don't have the column three, so we can say

.list {
  display: inline-block;
  width: 270px;
}

This is going to be a block, like normal, except it's not going to force the next element underneath it, it's actually going to allow those elements to be side by side. Here we go, now we have a scrollable (sort of) view, and what's weird is we have our header being cut off, our footer's being cut off, and yet our content is still scrollable, and what we want is the board to control the overflow overflow-x: auto, and so what that's going to do is tell it: Well, if you have overflowing content, let's just cut it off and add a scrollable thing to this area, so this is now scrollable instead of now the entire page, so that helps a lot, but we also have some weird things going on, where everything is aligned to the bottom and it seems kind of odd, right, so because they're aligned to the bottom, we need to go have vertical align to top so that they will all be moved to the top by default, which seems kind of odd but it makes more sense if you dive into actually what the vertical line stuff does. By default, it's not going to align to the top so take a look at that, and we'll need to have that, and we also probably should have like a simple margin right of like 10 px maybe 20 px just so that we have some spacing between our columns like they do in trello, we don't want these to be butted up right next to each other.

The other thing that we should do is probably add some background if we want to grab the exact same background from trello we can do that, that would be this color right here and background be that, we can do the same border radius of three pixels, and very quickly here, and we should also do padding, of course, this should go on a list, not the board, and we should do our padding, and maybe do 20 pixels, let's see what that looks like. It's a little much, let's do 10 px, and now we have our list that are all colored individually, we can move those around and they're all starting from the very top and looking like we would want.

Let's go ahead and get rid of those giant "List" up there, let's get rid of that notice, that will give us more spacing, and here we have a much better looking UI. What we can also do is going to our layout application html erb and rather than doing container, we can do container-fluid from bootstrap, which will actually make it full width UI, and our navbar is going to need the same treatment, we do container-fluid here, then that's going to move everything out to the side so we have access to all of those, so we don't really need our hr here that much anymore, and this is looking much much better, we have a significantly better looking UI here.

.dragArea {
  min-height: 20px;
}

.board {
  white-space: nowrap;
  overflow-x: auto;
  }

.list {
  background: #E2E4E6;
  border-radius: 5px;
  display: inline-block;
  margin-right: 20px;  
  padding: 10px; 
  vertical-align: top;
  width: 270px;

}

The last thing that I want to do is actually just get rid of the div for the card around the text area and stuff, and then do an mb-1 there, so that we have a UI that looks like this, it's much simpler to add a card UI like so. One of the things I want to do is also add that link in here so we can close this and open this, right now it's open all the time, but I want to make sure that that works when we add new components for each one of these lists, so I want to be able to extract out this entire section as a component, and we pass in the list into that, and then that will take care of handling all of the functionality per list, and so we'll get rid of some of this more global state inside of this current one because this will be the board, it will say the board has these many lists, go create those components, and those components will display on the cards and so on, and so what we'll do is break this up into multiple components in the next episode.

Transcript written by Miguel

Discussion


Fallback

I will try flexbox instead. It is 2018 =)
Maybe something like this https://codepen.io/jaahoo/p...

Fallback
Or you can use CSS Grid 

Login or create an account to join the conversation.