So what we need to do is basically add in the gray box here, and I also want to make it so, right before we start styling that I want to make it so you don't have to hover on the link here. It's just if you hover on the item because you'll notice as soon as you go to the link it goes away. So let's get that handled and then let's finish the box here.

In the design, the box I'm talking about is this right here.

Basically we want to add in these styles and immediately we want to make it so whenever you hover on the item these things show. So let's head over to our app and let's go into post.js. What we want to do is basically move these onMouseEnter and onMouseLeave events, we want to move these. So I'm going to hit command + x on these or control + x if you are on a Windows.

I'm going to move the arrow tag or the arrow right here, the right arrow, and then I'm going to paste these just on the list tag here. So I'm going to hit return next to result-post className a couple times, tab once and paste it. Now I'm going to select it all and hit tab again, just so it's a little bit cleaner.

Now if you go back to the app you'll notice when it reloads that when you search up some items, all you have to do is hover on the one item. You don't have to hover on the link you just have to hover on the one item and it will show. So let's go ahead and get into the styles for the rest of the component.

So we want to modify our style. If we go to our results.scss we want to style these links, so we can do this pretty simply using flex box. So that's another thing when using grid, css grid, you don't have to use only css grid you can use flexbox if you want to as well.

So let's go ahead and add this, let's say display flex. Now you'll notice that immediately we will or I guess not since we don't have the boxes, so let's get rid of the display flex and we'll add this in after we put in the box style so I can show you how this works.

So what we want to do is modify the post link directories so in our code, in our post.js we have this class in here at the top under render links we have post-link, post-link_box, and post-link_link, so let's add these into our results.scss and I'm going to put them outside of this so we don't have so many nested tags.

Let's say .post-link and because we might put it in its own component later on, so let's say .post-link__box and .post-link__link. Now immediately I want to reference the link__link a because if we go to post.js you'll notice there's an a tag in this link class. So let's go back to results.scss and let's apply the styles to the box.

So what I want to do is say minimum width 70 pixels and background color, let's give it a color of $color-gray-two.

results.scss

.post-link {
    .post-link__box {
        min-width: 70px;
        background-color: $color-gray-two;
    }

    .post-link__link a {

    }
}

I think this is the wrong color but we'll see. Okay so the first thing you'll notice is that we can't really see and that's because our post link probably doesn't have the right height so let's say min-height on this is 70 pixels, and let's see if that works, okay it doesn't.

Now this is where I think flex box can come in and help us, so in .post-link I want to say the display is flex.

results.scss

.post-link {
    min-height: 70px;
    display: flex;

    .post-link_box {
        min-width: 70px;
        background-color: $color-gray-two;
    }

    .post-link__link a {

    }
}

Let's go back to our app and you'll notice it appears.

So basically what was happening was if we set this min-height to 140 maybe this will help me explain what I was trying to say. And then change this to not display flex. Okay, I guess not. But basically what's happening is without flex our items are basically stacked on top of each other, so we can't really see the box, it's basically somewhere else. It's either below or on top, probably on top in this case.

But basically it's hidden and adding in flex gives us this row because by default if you remember with display flex we have a, I think it's a flex direction. We have it set to row automatically when we say display flex. Now if we say column. My bet is that it will disappear or it will stack on each other, so it disappears.

Now that's because we have a column so it's on top of each other. Now if we add 140 pixels instead of 70 to our post link it will probably I guess not, I'm trying to think of how we can do this. Possibly we added styles that would conflict with this early on, maybe not, I don't know.

But basically we need this to be row and by default it's row, so let's get rid of that. Let's change it back to 70 pixels and change this to 70 pixels as well. So we have our box in here, now we need a margin on the right of this and that margin according to the design is 16 pixels, so we have to do on the margin box or we could just do it on the link.

Well, we'll have to do that too, but on the box let's just say margin right 16 pixels. Now with flex box you want to use margin's because we don't really have grid gaps, so now we have that and it's looking really nice.

Let's go ahead and get the same styles for the link in there, so I'm going to go to .post-link__link a. I'm just going to say color $color-gray-one and that reminds me of the color will come back to the box here and then I want to say font size 14 pixels and. If we want 17 pixels.

results.scss

.post-link__link a {
    color: $color-gray-one;
    font-size: 14px;
    line-height: 17px;
}

So back in our app lets see if this is working. Yeah, it's looking good, it's looking very similar to our design right here. Now back in our app you'll see that this gray is actually pretty different from this gray. The one in the design is much lighter, so let's inspect that and look at the color, looks like it's #D8D8D8. Now I'm pretty positive we don't have this in our main.scss. So what I'm going to do, is I'm going to remember that and I'm going to call this color on the .post-link__box.

I'm going to call it color-gray-three, now we can go to our main.scss and add this in. Now let's say color-gray-3 is #D8D8D8 so it's a slightly lighter gray and that's what we need in there. So let's head back to results.scss. And let's go back to our app in the browser and let's search something so rails. Now you'll see that the box is correctly colored.

So that's what we want and that's looking pretty clean. Now let's see what we want next, I think that's it for the styles on this one, it looks really clean. I think that's all we need for the results.scss, we may need to apply some styles elsewhere.

Let's check our search bar, I don't think we need anything in search-bar, so that's it for our posts component, it looks like it's pretty clean. Now, one thing I want to do, the next thing I want to do rather, is instead of saying useful link we need to display it as the actual link like what it says here now.

Basically in our response here we can do this by, okay postman opened up a couple hundred times, minus 97. Okay, so all of that will load, I'll just close it and explain it in the next guide. But basically we need to provide our links with a proper name so it doesn't just a useful link, because that's not very helpful.

So the way we do this is in JavaScript we have to actually write a tiny little algorithm to get this to work. So that's what we'll do in the next guide, let's commit our code.

Terminal

git status
git add .
git commit -m "finished styling the result post component"
git push origin master

Then in the next guide will figure out how we can write some javascript to basically take our links and give them a useful name. So I'll see you in the next guide.

Resources

Source code