So there's nothing in the design to tell us to do that. So let's just kind of wing it and see what we can get, and this is a good example of not using a design. So we're in the post, so that's what we need to do. And let's throw it in there by us going to our post links, let's see so it says render links. So all we have to do really, we can just say if links is equal to zero let's just return a div and in here let's just say no post links.

So let's see how this looks, so let's reload our page and let's search for rails, and you'll see it has no post links.

I think that's pretty nice looking. Let's just apply, well yeah let's just give it this gray color. So let's just say className equals no post or let's say no content because we might need to use it somewhere else in the future. Let's just call it no content. And let's go to main.scss and right under your ul let's say .no-content and let's just say color is color gray.... what was the color of the other corresponding links? I'm just going to inspect the element here on this title.

It looks like it is #666666 so I'm going to cut this, and put it right about here and say color-gray-one so we can use variables, if we were to declare it up there we wouldn't be able to use the variables. So now we hit safe and we might as well use the same font size as this link here. So now let's say font size, we could just give it a font size of huh okay yeah give it a font size of 14 pixels, and a line height of 17 pixels.

main.scss

.no-content {
    color: $color-gray-one;
    font-size: 14px;
    line-height: 17px;
}

Okay that looks chill, let's go and try it out here. No Post Links, that looks fantastic, it's beautiful, so we can move on.

So one thing I forgot that we need to fix is the multiple link problem. So if you type in results you'll see that on operations that we inspect the element, obviously it's hidden. But if we open this up, this one right here, result post links you'll see there are three links and they're not displaying. So we can fix this pretty easily with some grid styles.

So on results posts links I'm just going to, let's see what we can do. We can apply display grid and then let's just say, well we can say flex, let's say flex and it should display. Let's just go to our code and do it, let's go to results.scss, I believe we put it in here. We have our post link, we have our post links. So yeah that's where we want to be, let's apply some styles in our post links.

Let's just say display is flex and height is 70 pixels, let's try that.

results.scss

.result-post-links {
    display: flex;
    height: 70px;
}

Oh yeah and it's displaying great. I don't even think it reloaded, I think it just picked up the styles we added in the console.

I'm going to get rid of the height and if it goes away then it was our code not the console. So that works, let's give it a margin because we want that margin in there, we don't want it to be touching. We only want it to be 280 pixel as well.

So what we can do is on the post link sense this is flex, on the post link we can just say flex basis is 205px and we can also say the margin right on each one of these links is 37 pixels.

results.scss

.post-link {
    min-height: 70px;
    display: flex;
    flex-basis: 205px;
    margin-right: 37px;
}

So now that will give us the width we want and then it will also push it over a bit, see how that's looking really clean? the link titles are looking relatively clean, we could obviously fix it up a bit. We probably will in later guides but that finishes off our application.

In the next few guides we are going to learn how we can push this up to heroku and to actually deploy this on the Internet. So let's commit our code and do that.

Terminal

git status
git add .
git commit -m "added no-content to post links when post links are empty for post"

and I'm going to get amend it because we also need to clarify that we know we fixed the grid the post link and applied flex styles to post links. Okay I'm going to hit escape and :wq for write quit and I'm going to say git push origin master and that finishes off our app let's get it on the Internet using heroku in the next guide for free, I'll see you then.

Resources

Source code