It's really easy, so let's get started. In requests-item.scss what we have going on here is we're saying that this description is always 147px. Let's modify this to say minmax and we'll say the minimum it can be is 0px, and the maximum it can be 147px.

Now you might think that this will fix it immediately, but it won't. You'll see that it's still not working right. Now what we can do to change this is let's look at our requests grid, and let's actually look at our requests right here.

You'll see that it's filling up all the space based on how many items there are. As you can imagine, if there's one more item, it might squeeze these down a bit. What we need to do is just tell this grid that the items start at the top and they don't have to fill out the entire content.

Let's go to requests.scss and let's say: align-self: start.

requests.scss

.requests {
    grid-row: s/e;
    grid-column: requests-s/requests-e;
    align-self: start;

    display: grid;
    grid-row-gap: 2rem;
}

Here's what we'll need to do before we do that. Let's comment that out. Let's go to requests-item.scss, and instead of using minmax(0px, 147px), let's just do 1fr. The reason we're doing this is because the description here is going to fill up the height based on the image and the text.

If we go to our application, you'll see that it fills it up, but now we still have this arrow. What we need to do to fix this is we need to go into our requests.scss, and we need to change align-self: start. Now when we go into Chrome or Firefox, you'll see it starts at the top.

Let me just go through that one more time to make sure you understood that because I was a little quick. You'll see that in our requests.scss, we put align-self: start. So it starts at the top. It doesn't have to fill up the entire 100% height. That's how that fixes that.

Now the reason the decription is able to move to different heights in the row is because we change just to 1fr and not 147px. If we were to change just to 147px again like it was at the beginning of this video, it would make them all 147px.

Now, once we add in more items that would cause a big problem because there would be too many items. We'd have to scroll down and it just wouldn't be a good user experience. By setting it to 1fr, we're telling it that it can be whatever height, as long as it expands to whatever the content height is.

We're changing the content height in requestsItem.js with React-Animate-Height and we're getting the animation effect from that library. That works and it looks really good. What we need to do now is implement a couple of things.

First thing is, if we go to Chrome and go to the design you'll see that it's still a bit bigger in here. We need to give it this margin. Since it's 1fr, whatever margin we apply to it it's going to fit that size. So the top needs to be out about 32px and the bottom needs to be about 35px.

Let's go into into our application here. Let's go into requests-item.scss, let's go down to description in the styles, and let's just say:

requests-item.scss

&__description {
    margin-top: 3.2rem;
    margin-bottom: 3.5rem;
}

Now that looks a bit nicer, except for you'll see that it's kind of big. That's because we already have some margin on some of these or it's just the grid.

Let's just change this down to like 2rem and 2rem, and get it looking pretty close. That's looking good. Let's changed to 1rem and 1rem. That looks pretty good. I like that.

Now what we want to do is add in the background-color when we're hovering over it and selecting it. You'll see in the design there's background-color of #F8F8F8. Then you'll see that when we go into preview mode, that's where it is. You'll see when we hover over it, we also get the background-color and we get this object here.

What we need to do is add in a variable with #F8F8F8, and then we need to apply that background-color when we hover. Let's do that really quickly. It should be really easy. Let's go to requests-item.scss, and let's just say:

requests-item.scss

.requests-item {
    &:hover {
        background-color: #F8F8F8;
    }
    &__icon {
        font-size: 2.7rem;
    }

I'm going to check the variables.scss to see if we put one in. No, we didn't. We could add it in. We might as well, since we're here. So I'm going to add in $color-gray-F8: #F8F8F8. I'm going to close out of variables, and I'm going to change this to $color-gray-F8.

Let's go test it out, and you'll see we get it. It's really nice and easy already.

Let's just check one more thing. It looks like the margin might be a little bit too small. It looks like it's a bit bigger in the design. So what I want to do is click this go and into inspect, and see what that looks like. It's like 13px. I'm just going to say:

requests-item.scss

.requests-item {
    padding: 6px 0px;
    &:hover {
        background-color: #F8F8F8;
    }

Let's see what that looks like. Yeah, that's pretty good. That looks good, except you'll see that there is this all this space down here. Let's go ahead and inspect the element and see what's there. It's most likely the column, since there's nothing in there.

You'll see that column still exists for the description, even when we're not really using it. That's not good. We don't really want that there. We could just use a direct selector and change the columns. Let's do that. Right now, we have 1fr. Let's make another selector and we'll say:

requests-item.scss

.requests-item-closed {
    grid-template-rows: [s title-s] 34px [title-e tenant-s] 34px [tenant-e e];
}

That's not going to do anything. You'll see that everything is still the same because we're not using it anywhere. Now, since we're using 1fr on this description, it is possible that we don't even have to have this here. We could just have auto flow into it. So let's get rid of description.

Now there's going to be one problem and it's that we are specifying that exists on description. Let's go down there and let's just get rid of this grid-row: description-s/description-e; and let's try this out. That might work.

Here's my theory. My theory is that column is not there, but it's creating one because it still exists. What we can do is have it close, and after 0.3s we can have it set to display: none or something.

We could do that. We don't need this close selector anymore because we don't even have it in here anymore on the rows. We could just not have a padding or a bottom on the item here and then just have this column be the kind of padding or margin, but that's a big thing.

Let's look in Firefox, and see what we got. Let's select one of the items. We could just say that this row is less than it is. This is not 34px, let's try something like 15. That might be too small, but we'll try it out. There we go. That's actually perfect. That looks good.

Let's see what it looks like without the grid. Let's see what it looks like with 10px. That's actually good. Let's de-select this, and you'll see now that it looks good. Basically, we're getting rid of that margin. It looks like it's there because it's that empty column. We could even get rid of that a little bit more because they are like 5px.

Technically, at this point, this is overflowing off the grid, but it doesn't really matter because it looks good but looks really good. You'll see that this row is extremely small. We could almost get rid of it, but we want it to be there for this item.

Let's add in a little transition for this animation. Then let's throw in the done button because we need that in there. Let's do that in the next video. Let's commit our code. Let's say git status, and I want to see the difference is, so I'm going to say git diff.

We adjusted that, we added in that hover effect, and that's about it. We just made a few changes here. I'm going to say git status, git add ., and let's just say git commit -m "added hover animation color and adjusted grid".

Resources

• Source Code