- Read Tutorial
- Watch Guide Video
Before we do that I want to apply some styles to the results component to fix a bit of the styling. So let's head over to results.scss, and I want to get rid of this mixin for now. Then I want to say:
results.scss
.results {
// @include default-page-layout();
height: 100vh;
width: 66vw;
display: grid;
}
Now, in the default-page-layout, let's open up our mixins.scss and you'll see it's basically the same exact thing except for we don't align-content in there. I don't want to modify this mixin and put this in the other place for using this mixin, so we're just getting rid of it in the results.
We might add it back in and refactor it, so I'll comment it out and leave it in there. I want to fix this layout so it looks better, so let's add in:
results.scss
.results {
// @include default-page-layout();
height: 100vh;
width: 66vw;
display: grid;
margin-top: 52px;
}
Basically, nothing is going to change except for the top here. That pushes it down.
Let me sign in real quick to this app and grab the design. According to the design it is about 52px down from the bottom. I think that's what it, I'll inspect it here. See its 52px.
You might be wondering like what if I'm building an app and I don't have a design I won't be able to go to these styles here and make my app, so are you really teaching me how to do this? My answer to that is yeah, because if I didn't have this design but I had a simple idea of what I wanted to build. I would just put it down 50px.
The only reason I'm doing it exact is because that's the design specifying and I want to be pretty accurate there. If I didn't have a design where I would do is just say I want about 50px down there because I think the logo would look good there.
If you're working in a professional environment there's already going to be a design or a basic idea of the application that is going to be built out. You'll be able to go off of that. That's why you don't need to be worried about not having a design.
What I really want to do here to fix this is add a grid-row-gap. Let me see if I can find it. So the Complete Guide agreed on CSS-Tricks. If you go to grid row gap, we already talked about this, it applies a gap in between these.
In our design, we basically want the same gap between these. We have 44px, and then between the search bar and the top here we also have 44px. We have a margin-top of 52px, so I'm not going to apply space-around to the justify-content or align-content, whichever one it would require.
Basically, what I'll do is apply the margin and then apply a grid-row-gap of 44px. That way we will get that effect, so let's say:
results.scss
.results {
// @include default-page-layout();
height: 100vh;
width: 66vw;
display: grid;
margin-top: 52px;
grid-row-gap: 44px;
}
Let's head back to our app, and you'll see that it's not working immediately, but once we add in our other styles you'll see that it is working.
Let's leave it like that, and let's head to our results.scss. I'm going to type in .results-posts. This tag can be found in our **resultsPosts.js**. So all I did was add this tag, `.`results-posts and then I'm opening up resultsPosts.js.
Right in the render function, we have results-posts and we have the wrapper in the posts. We want to nest this the same way in our CSS file.
So I'm going to open up results.scss, and I'm just going to write those tags in. So I'm going to say:
results.scss
.results-posts {
.results-posts__wrapper {
.results-posts__posts {
}
}
}
I'm doing this kind of syntax, where I'm saying results-posts and then the wrapper and then posts, because it really keeps it pretty clean and easy to understand. Especially, when you're trying to copy these over.
All you have to remember is this first one, and then what each one of these are named. Then you don't have to worry about styles overwriting or anything across your app. That's why I'm doing that. I forgot the name of that convention is, but I actually learned it from a CSS course.
Let's go ahead and apply a grid to this results-posts and say:
results.scss
.results-posts {
.results-posts__wrapper {
.results-posts__posts {
display: grid;
grid-row-gap: 21px;
justify-content: stretch;
}
}
}
While we don't actually have to do this but the idea of this is to keep it stretched so you can have this but you don't have to but it works now.
Another thing I want to show you is the design here, so from Ruby on Rails right here to this one, we have 64px. You might think we want to apply a grid-row-gap of 64px, but we don't want to do that because it's really big.
Basically, the reason we don't want to do that is because we only want 64px when this is open. If I go I go back a page you'll see it's 42px. Now you might be wondering why don't we put 42px, and again, let me show you why. When it's open it's going to be a lot bigger than it needs to be.
Let's leave that there and let's move on. The next thing we want to do is we want to style the actual post. Let's say:
results.scss
.result-post {
}
Then in here, we want to nest our result-post tags. You'll see in our post.js, we have our render function and then we have topics, title, and links. So all we need to remember is is topics, title, and links, since we already have result-post on all these.
Let's go back to our results.scss, and we just have to say topics, title, and links.
results.scss
.result-post {
.result-post__topics {
}
.result-post__title {
}
.result-post__links {
}
}
We have all of our tags now, so let's style them. This is where I want to add that style, and then I'll go back to this and tell you why we are only doing 21px. I will also be applying some flex styles in here because you don't have to use flex or grid, you can use both, and I will explain that in a second. In here we want to say:
results.scss
.result-post {
display: grid;
align-content: space-around;
.result-post__topics {
}
.result-post__title {
}
.result-post__links {
}
}
Let's see what this gives us. Nothing yet, but if we apply the grid-row-gap we will get what we want. So grid-row-gap: 22px. I think it was.
Now, if we look at our design, you'll see we have a grid-row of 16px here, but when it's open it might be bigger. It's 19 now. Oh, it's 23 here. That's probably why I did it. Basically, we want to do something like that. Let's do 22.
This goes back to why we want to you only use 21 here when it's clearly, in the design, a good 64 when it's open and a good 42 when it's closed.
The reason we want to do this is if you go to our app and you inspect it, you'll see that if you hover over result-post we have that grid-gap below the title implementing the facade pattern in Rails and Tips for Auditing Rails Application. You'll see that we have that space below that.
If you go to the design screen, it's 42px right? Then we have this grid-row-gap of 22px below our link. Basically, we want to apply 20px because we were up a 42px it's going to be way too much. We have the 42 plus the 20 grid-gap.
That's probably really confusing, but basically right below that the title of the first one you'll see that there's a 20 or so pixels. 22px. What I'm doing is I'm taking the 42 that should be in between each topic or each post, and I'm minusing 20 from it because we already have 22px below it.
I only have to apply 20px because that adds up to 42 with that grid-row-gap at the bottom. So we get what we want. The next thing I want to do is change these styles. Clearly, they're being styled elsewhere in the application because of our styles here, but that's not a problem.
You can go back and make it so it doesn't ovewrwrite them. It really doesn't matter because we're going to overwrite them either way in here. Maybe it will improve efficiency. I'm not sure. I haven't done much research on optimizing SCSS.
Basically, what we want to do in topics is we want to give it the color in this design that we see. We want to give these styles to our topics. So we can't really apply it to just topics, but what we can do is select all the children of the topics using > * and then we can apply these styles to each one of the post topics children.
results.scss
.result-post {
display: grid;
align-content: space-around;
grid-row-gap: 22px
.result-post__topics > * {
}
.result-post__title {
}
.result-post__links {
}
}
Now, if we go to our post.js, in our post__topics you'll see we're rendering topics and then we're getting this span back for each one of these. If we go to our app, and I inspect the element on the topics at the top here. You'll see that we have these post-topic.
I'm saying the SCSS here in the results.scss, post__topics and then I'm saying > * to select all of these children, and apply styles to all these children. So we want to add in the styles for that. The first thing we want to say is:
results.scss
.result-post {
display: grid;
align-content: space-around;
grid-row-gap: 22px
.result-post__topics > * {
color: #0079FF;
}
.result-post__title {
}
.result-post__links {
}
}
Now we might have used this in the main.scss, so let's copy it and head over to main.scss. If we don't have it in there, let's add in a variable. So I'm going to paste it, and make sure it's the same it's the same. Now, we already have it has $color-blue-one.
In results.scss, I'm just going to get rid of this and say $color-blue-one. Now what I want to do is say:
results.scss
.result-post {
display: grid;
align-content: space-around;
grid-row-gap: 22px
.result-post__topics > * {
color: $color-blue-one;
font-size: 14px;
line-height: 17px;
font-weight: normal;
}
.result-post__title {
}
.result-post__links {
}
}
Now we need to move on to the title, because if we look here our topics are good now.
Let's get our title to look more like this right here. We already know it's an a-tag, so we don't need to worry about the underline. Basically, we just need these styles. I'm just going to say:
results.scss
.result-post__topics > * {
color: $color-blue-one;
font-size: 14px;
line-height: 17px;
font-weight: normal;
}
.result-post__title {
color: $color-gray-one;
font-size: 18px;
line-height: 22px;
}
That probably won't change much, but let's save that and check. It looks like it changed, but the color didn't change. The reason it didn't change is because on .result-post__title, if we go to our post.js, you'll see that there's an a-tag in here it's not just text.
If we were to get this text, replace a-tag in here, and go back to the browser. It would probably be the color we want now. I'm going to search rails. Well, I guess not. That's because I did it in recent so what I'm going to do is go down to the title on recent-post__title.
I'm just going to cut this out, and place it over the a-tag. Basically, it's going to be the color we want. The reason we can't do this is because obviously, we want the a-tag in here with these events onMouseEnter and onMouseLeave.
What we want to do is just reference the a-tag. So I'm going to go into results.scss, and instead of just saying title, I'm going to say: .result-post__title a to reference the a-tag. Now, if you save that, you reload the page, and search rails or whatever you want to, you'll notice it has disappeared.
Now that's interesting. I didn't think it would disappear. Oh, it's because I left the title out when I went back. So I just wanted to put this back in as {this.props.title}. Now, we will come back. It's going to reload since we changed the JavaScript.
I'm going to go back here and search rails. Now you'll notice that it's in there. We're getting the hover effect. Yeah, everything's good.
Now, when we click on it, basically, I made it an a-tag and made it so we could click on it so we can navigate to the result. In post.js, in the result category, we need this to be an a-tag instead of whatever it was before.
I may have explained it already but let's move onto the styles for the result-post__links, so these links down here. We will do that in the next guide since this one is going on very long.
Let's commit our code, so git status, git add ., and let's say git commit -m "started styling the results and result-post components". My bad for making that so long. I could have separated it into two guides. Let's go ahead and move onto the next guide where we will finish the styles for the resultsPost component. I'll see you then.