We also want to apply it when we have this open, we need to make a couple other changes like flipping the arrow, and other things. Let's go into our code, and let's go into*requests-item.scss*. Let's go to the top here to .requests-item on line 48 or around there, and let's say:

requests-item.scss

.requests-item {
    &:hover {
        background-color: $color-gray-F8;
    }

That's about all you have to do to get that background-color animating. See that?

Now, we want it to stay when it's open. You'll see this one's not not staying when it's open, we want it to transition and animate over. Let's add in that transition. Let's say transition: all .3s ease. That should animate it in. You'll see now it kind of hovers, and it looks better. It also hovers out.

Now let's make it so that when it's open it stays that color. It should be pretty easy. All we have to do is apply it if the height is different. Let's go into requestsItem.js, and basically, we just want to check if height is set to auto or if it's not 0 then we'll apply that color.

We could just do it in here and we could get the ID. So in requestsItem.js here, let's say:

requestsItem.js

render() {
        return (
            <div id='requests-item' className='requests-item'>
                <Icon className='requests-item__icon' icon='fas fa-exclamation-triangle'/>

Then let's just do that in here, let's just say:

requestsItem.js

toggleDropdown = () => {
    var element = document.getElementById('requests-item');
    if(this.state.height == 0) {;
        this.setState({height: 'auto'})
    } else {;
        this.setState({height: 0})
    }
}

Then let's just change the background-color based on the height. We'll add a new class. Let's go into requests-item.scss and let's just say:

requests-item.scss

.bg-F8 {
    background-color: $color-gray-F8;
}

That should be pretty easy to implement. Now, all we have to do is go back into requestsItem.js and apply that class if the height is auto. Let's go in here and say:

requestsItem.js

toggleDropdown = () => {
    var element = document.getElementById('requests-item');
    if(this.state.height == 0) {
        element.classList.add('bg-F8');
        this.setState({height: 'auto'})
    } else {
        element.classList.remove('bg-F8');
        this.setState({height: 0})
    }
}

Let's check out our application now. You'll see it stays, and if you close it, you'll see it goes away. It's a really simple implementation. It works great, and it looks great.

You'll see now that it doesn't work on other items, and that's because we're trying to apply it to the same exact one every single time. The first one is the first instance with the ID requests-item. What we need to do is provide a unique ID to this div for each instance.

Now, there's no way of doing that right now, because we don't have our custom item in here, but we're going to be getting in custom data. We're going to have a name, a date, and specifically an ID, so we're going to apply an ID to this once we get that data model in here.

We did this in the last application, so it might ring a bell. For now, we're not going to be able to do that because we don't have the site up. So we'll fix that bug when we implement the actual data model.

Before we implement the data model what we have to do is implement the done feature. There's this button that will show when we hover here. You'll see in the design when we hover there's that button.

Now, let's go ahead and go into our JSX in our requestsItem.js. If you look, you'll see that we have added this already. Lets go add it to our grid by going into requests-item.scss. You'll see it's already part of our grid, but it has display: none. Let's get rid of that, and we'll see what happens.

It should be in the same spot as the date, so it might be right over it. You'll see it's right over it. Now, text-align is set to right on the date. That's why that's happening. Let's just set justify-self to right on the wrench button. So let's say:

requests-item.scss

&__move {
    grid-column: date-s/date-e;
    grid-row: s/e;
    justify-self: end;
}

You'll see it pretty much right over the date now. So what we want to do is simply push it to the right and have it disappear. Then when we hover, have it come to the left and appear.

This is really simple. All we have to do is go to move down here. By default we just want to say:

requests-item.scss

&__move {
    transition: all .3s ease;
    transform: translateX(100px);
    opacity: 0;

    &:hover {
        transform: translateX(0px);
        opacity: 1;
    }
}

Now we don't want to have it set specifically to move we don't want to hover over move. We won't even be able to because the opacity is 0. What we need to do is take these items, get rid of this, and then we need to go up to this hover and say:

requests-item.scss

.requests-item {
    &:hover {
        background-color: $color-gray-F8;

        &__move {
            transform: translateX(0px);
            opacity: 1;
    }
}

Let's take a move and let's put it back to where it belongs. Now this will work nice for the move button, but the date is still going to be there in the same place. So it doesn't work. Let's see what's going on.

Let's just set opacity to !important, and see how that affects it. What's going on is it's overwriting it. I'm going to move this &:hover down to below the move and see if that fixes it. So that doesn't fix it. My theory is that the selector is not working properly, so let's just say:

requests-item.scss

.requests-item {
    &:hover {
        background-color: $color-gray-F8;

        .requests-item__move {
            transform: translateX(0px);
            opacity: 1;
    }
}

That will apply that directly to the tag. You'll see that it works now.

Basically, what I think is happening is it's saying, if we're just using &__move, is it's saying .requests-item&:hover__move, which is clearly not our tag. That's how it compiles, so we don't want to do that.

Well, it's basically doing this, that's how it's compiling. We want it to compile more like this: .requests-item__move, so since we can't really compile it that way with how this works with the hover, we'll have to just put it in directly like this.

Now what we want to do is push the date over as well. In the design, you'll see that the date is supposed to go over with it. I would imagine that's an animation. Let's just move it over the width of the date, and that's 100px as well. Let's say:

requests-item.scss

&:hover {
    background-color: $color-gray-F8;
    .requests-item__move {
        transform: translateX(0);
        opacity: 1;
    }
    .requests-item__date {
        transform: translate(-100px);
    }
}

Now, it's not going to animate it though. You'll see. See, it just kind of throws it over automatically. We want it to animate over.

We can fix it pretty easily by going into date right here and just using a transition as well.

requests-item.scss

    &__date {
        transition: all .3s ease;
        font-size: 1.4rem;
        line-height: 1.7rem;
    }

Now, it will animate over with it. I like the way that looks. What we need to do now, is look at our console here. Let's try Chrome and instead of just printing out trying to change request status what we want to do is actually change the request status of this item.

You'll also see when we open this it changes this animation. Now, again, that goes back to the ID. We can't really fix that problem until we have a unique ID in this request. We can't really change the status for request until we actually have a data model to work with.

Right now, it's just dummy data. There's no actual logic in here. No actual data. It's just all the dummy data. It's all hard-coded in, so let's go ahead and end the video here. That concludes the styles for the requests-item.

What we need to do is finish off this feature by implementing the actual functionality by talking about the data model and all that. Let's go ahead and commit our code, and then in the next video, we'll start getting in the actual functionality with all of this and this.

Let's commit our code, let's say git status, git add ., and let's say git commit -m "added hover animation and move button animation/opacity". Something like that. We'll see you in the next video where we will start building out the actual functionality.

Resources

• Source Code