going to be fixing up this part, the title and the checkmark you'll see that they don't line up its really subtle but if you inspect the element and go to layout then you select grid and then you select the first course you'll see that they line up at the top and not the middle like these.

Now, the reason being is because we have used a label here and by default there's a margin bottom on the label. So let's just head over to our libraryCourse.js and this label not the description label we are leaving the description label and were leaving the styles for that label.

For this label for the library-course__title we're going to change it to a div. Now when you go to the app its going to line up a little bit better. Alright so it lines up better and it looks good to me. But let's just go ahead and triple-check to make sure its lining up. And yeah you'll see if you hover over the title-check you'll see that the top and bottom have equal like margins, so we're good to go there.

Now, what we need to do is basically put that line down within the description its not showing because we don't have it open but if we click this we want to put the line inside of this course description.

So it's pretty simple to do that and what I actually want to do is get rid of it completely and then just put the border on the description. So let's go ahead and delete the line from our courseLibrary.js and we are removing the . Then head over to libraryCourse.scss and scroll up and get rid of this entire &__line here with the grid options.

And then make sure you get rid of this line-s line-e and 20 pixels on line 4. And then we'll have to change the row on our description back to 2/3 on about line 24 since we no longer have a third row. Now what we want to do is basically go down here go to the &line and grab this border bottom and cut and copy it and then get rid of the whole &line.

But make sure to keep the border bottom and lets paste in the &__description and instead of saying bottom lets say top. Okay cool, let's go ahead and see what that looks like, you might need to add in some margins. Okay so far everything's looking really clean now cuz we don't have that in there.

Now, when we click on this drop down it animates it open and it looks really nice. And it looks like to me at least im not seeing the line and it looks like we are just covering it up with the grid so lets unselect that and there is the line so good.

Although, you'll see that it's way too close and it's missing that 19px margin. So let's go in here(libraryCourse.js) and say on the &__description and say margin-top 19px and lets go check that out, and you will see its looking a lot better although now it's cutting off our description.

So let's go ahead and fix that. The first thing I want to try is going into libraryCourse.js and going up to where we are setting the height and I want to just change this to auto and then put apostrophes around it.

libraryCourse.js

let height = this.state.height == 0 ? 'auto' : 0;

Now I'm going to try clicking the drop down and I don't expect that to work and it does okay that's really awesome actually.

Now it will accommodate to what ever hight we need. So if we have a big long thing of text it won't cut it off. So lets this this out by going into index.js in actions and basically just duplication the description on this first one of up and running with redis lets copy it and paste it so it's about three times the length.

Now lets go into our application and open this up and you will see that it fits it automatically.

So what I want to do is just get rid of those duplications and I want to go over to the internet and search lorem ipsum and lets select this second link and let's just copy one of these huge things of text. As matter fact let's copy both of these paragraphs here.

I'm going to close out of this webpage now and go back to our index.js and scroll down to the bottom and I'm just going to create a new object and put a comma and say id is 10 title is this is an example of a large description and then I'm going to put in a description and then lets paste that lorem ipsum text we copied.

Now if you run into any text with an apostrophe such as the word don't a quick way to fix that is by escaping that ' character, the way you would do that is by putting a forward slash like so don\'t thus making 'I don/'t think so' valid.

Let's go ahead and add in the enrolled property right here so we are going to need to put a comma after the description hit return and say enrolled is false.

index.js

id: 10,
title: 'This is an Example of a Large Description',
description: 'Lorem ipsum dolor sit amet, cu dicant nostrud mediocritatem sit, graeci everti nusquam eu vix. Ut oporteat antiopam convenire sea, omittam reformidans eos an. An graeci commodo nec. Perpetua aliquando ius ad, id vis consul propriae. Ea fierent assentior vel, invidunt facilisi sit an, eu quo sumo omnis. Mei te semper principes, an mei invidunt repudiare, summo voluptatum cu eos. In vis dolor ignota, mea erat prompta intellegebat et. Vis ne duis altera dissentiet, id tale fierent mandamus duo, ut suas oportere pri. Cu graeci insolens explicari has. Ad pri doctus feugiat, dicant nostro facilis usu ad.',
enrolled: false

Now the ideal way of handling these enrolls would be to put this enrolled property on the user object but sense this isn't a logged in application we are not going to do that. I just wanted to point that out to you sense we are in the data module here.

Okay, so you'll see now that this works really well. Let's go ahead and try the big description at the very bottom, and you will see it adjusts to it which is really awesome.

One thing I want to double-check is this grid cap you will see it looks really nice but I just want to really ensure that the grid wrap is correct. So I'm going to go to my Chrome tab here and see what the grid gap is in here. It looks like it's 22 pixels between each object so I'm going to go and I'm going to go into my code and I'm going to close out of index.js and I'm going to open up library.scss and here we have that grid gap so I think we are good here.

Okay so we have this functionality in but this plus button is there we don't want that there. So let's quickly go into our code and make sure that plus button isn't rendering when it isn't hovered over or open. So lets go into libraryCourse.js and what I want to do is close this side window so we have more room. And let's find that action and basically all we want to do is check to see if we are hovering it.

So the ideal thing to do would be to go into our library.scss and say okay we're hovering it then we want to say `&__action opacity is 1.

libraryCourse.scss

&:hover {
    @include solid-course();
    &__action {
        opacity: 1;
    }
}

Now by default we want this opacity to be 0 so lets go up to action and say opacity 0 and then let's add a transition of all .3s ease.

libraryCourse.scss

&__action {
    opacity: 0;
    transition: all .3s ease;
    grid-row: 1/2;
    grid-column: 3/4;
    justify-self: center;
}

Let's check it out in the browser, and it looks like we are not getting the add button at all any more. So one quick change to make it work let's just take the &__action from the &:hover.

And let's just say

libraryCourse.scss

&:hover {
    @include solid-course();
    .library-course__action {
        opacity: 1;
    }
}

And you will see the add button on appears on the hover and it transitions in.

So there's a little problem with this though and its that we can't click the button anymore it disappears, it's like we're not even on it. Now with out the opacity it would still be doing this we would still not be able to click it. So we need to figure out a way we can fix this problem and we will do that in the next video.

Now this part is completely option, this part I'm about to go over and its this plus button that goes away when we still have it open but navigate away, if you want to change that and have it still be there even when its open all you have to do is basically go into libraryCourse.js and take the status and render it based on the status.

So something like cutting this Action out and call a function like {this.renderAction() } and then put a function here that says render action is equal to a function bind this and then just say something like if this.state.status and then make sure to put the not in front of it.

libraryCourse.js

renderAction = funtion() {
    if(!this.state.status)
}

Okay so now when its open now it will render. Now that generates a problem that it doesn't show when its hovered over, okay so we could hook that up to state and render that but what I want to do is just not hook that up because it's unnecessary and its just going to distract us so I'm going to hit command + z until I get back to where we were at.

Okay cool, so we just have the action in there when we hover. Okay lets commit our code and in the next video we will solve this problem

terminal

git status
git add .
git commit -m "fixed up grid and animations"

Okay I will see you then.

Resources

Source code