- Read Tutorial
- Watch Guide Video
All right. So we have the styles in there but we have one more thing to do to complete this component, and it's adding in this arrow here. OK. So it can be kind of a unique challenge but we'll be able to do it.
The idea here is to put a box and then give it a border on the top and the right or the left and rotate it. So two of the sides won't have borders but the side that does we'll translate at 50 percent. It's kind of weird but it gets the job done and that's probably the cleanest way of doing it right now.
So let's go ahead and go into our component here and let's go to newsletterBox.js and add another div.
Now this is going to throw off the grid quite a bit but not yet since there's nothing there. Let's see if it is thrown off though once we get the box styles in because we're not really explicitly saying where we want to put these items on the grid. We're just saying it's display grid.
So let's go ahead and let's try and put some styles into this box and see what it does point. And then let's just say the hype is going to be 40 pixels and the wind is going to be 40 pixels. And then let's say the background color is white.
newsletter-box.scss
&__point {
height: 4rem;
width: 4rem;
background-color: white;
}
Now the reason this is so it will when it when we put it on the side it will overlap over the side of the box and it will hide what's there. And you'll see that everything went up a bit and it did ruin our grid.
So what we need to do is take it off the grid or put the JSX somewhere else or explicitly declare some rows and columns in our grid. Let's do that.
newsletter-box.scss
.newsletter-box {
align-content: center;
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA;
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
grid-template-rows: 8.1rem 2.3rem;
We based the rows off of our line heights. It's still going to be a bit jacked up but let's see what it looks like.
So let's go into Firefox and see where the grid is looking like. Now it's selected. You'll see that it's creating a whole another row. So we have to do is just say OK we want the we want the box to go from 1 to negative 1 to fill up the whole content Okay and then is going to be kind of in the middle and then it's going to throw the rest off and then we'll just explicitly say where we want those.
So let's say on the point grid row is one negative one that will put it from basically the start to the finish. Another way of writing this is saying start and end and then just going down and saying start.
newsletter-box.scss
.newsletter-box {
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA;
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
grid-template-rows: [s] 8.1rem [m] 2.3rem [e];
grid-template-columns: [s] 1fr [e];
&__day {
align-self: end;
font-size: 7rem;
line-height: 8.1rem;
margin-bottom: 1rem;
grid-row: s/m;
grid-column: s/e;
}
&__month-year {
align-self: start;
font-size: 2rem;
line-height: 2.3rem;
grid-row: m/e;
grid-column: s/e;
}
&__point {
height: 4rem;
width: 4rem;
background-color: white;
grid-row: s/e;
grid-column: s/e;
}
}
Let's go back to Firefox and you'll see it looks a bit better except for our items are too high up still for some reason.
There's a couple fixes I've come up with. Basically, the reason this is happening is because we're declaring the rows explicitly, and it only adds up to 104 pixels. Wow. Our entire box is 160 pixels so we can either change what we used to fractional units or calculate the percentages, but we can just say align-content: center;.
newsletter-box.scss
.newsletter-box {
align-content: center;
height: 16rem;
width: 16rem;
border: .1rem solid $color-red-BA;
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
grid-template-rows: [s] 8.1rem [m] 2.3rem [e];
grid-template-columns: [s] 1fr [e];
Let's go ahead and get our box over in the middle now. So the first step is to work on the point.
newsletter-box.scss
&__point {
height: 4rem;
width: 4rem;
background-color: white;
grid-row: s/e;
grid-column: s/e;
align-self: center;
}
And that will place the box directly in the middle, so now we need to move the box over to the right and then let's translate it 50% to the right so it's over the side.
newsletter-box.scss
&__point {
height: 4rem;
width: 4rem;
background-color: white;
grid-row: s/e;
grid-column: s/e;
justify-self: end;
align-self: center;
transform: translateX(50%);
}
Ok now the box is halfway over the edge.
Now when we need to do is rotate it 45 degrees and give it a corner.
newsletter-box.scss
&__point {
height: 4rem;
width: 4rem;
background-color: white;
grid-row: s/e;
grid-column: s/e;
justify-self: end;
align-self: center;
transform: translateX(50%) rotate(45deg);
}
So that looks awesome. So what we need to do now is basically just give it a border so let's go ahead and add in the same border, which is border: .1 solid $color-red-BA;.
Now that's just a start. We're going to get rid of two sides
newsletter-box.scss
&__point {
height: 4rem;
width: 4rem;
background-color: white;
grid-row: s/e;
grid-column: s/e;
justify-self: end;
align-self: center;
transform: translateX(50%) rotate(45deg);
border: .1 solid $color-red-BA;
border-bottom: none;
border-left: none;
}
That gives us our point but there is a slight gap in the point. So what we want to do is just translate it like another pixel to the right, transform: translateX(52%) rotate(45deg);. We're probably going to be accurate once we get around her requests because there's another way I'm going to show you how to do this. And it's very similar to how we build the drop down arrows in the last application. So this isn't final. But it gets us a good point that shows us another way of kind of styling things so I want to show you more boys are styling things.
This isn't really the way I would want to approach it just because we can't scale it because you'll scale it that way or that way because we've rotated it so it's going to be the same kind of point out we want it to dip in a bit but will solve that when we get around to the request boxes. I'm going to give you multiple approaches.
So that's the first approach and we'll handle a few more when you get around over here OK. And it's going to be something we've already done before which is the dropdown arrows, which we've done this before. It's with borders as well. So that should be good.
Let's go ahead and check our application here. Let's just make the border a bit bigger.
newsletter-box.scss
.newsletter-box {
align-content: center;
height: 16rem;
width: 16rem;
border: .15rem solid $color-red-BA;
border-radius: .5rem;
color: $color-red-BA;
display: grid;
justify-items: center;
grid-template-rows: [s] 8.1rem [m] 2.3rem [e];
grid-template-columns: [s] 1fr [e];
&__day {
align-self: end;
font-size: 7rem;
line-height: 8.1rem;
margin-bottom: 1rem;
grid-row: s/m;
grid-column: s/e;
}
&__month-year {
align-self: start;
font-size: 2rem;
line-height: 2.3rem;
grid-row: m/e;
grid-column: s/e;
}
&__point {
height: 4rem;
width: 4rem;
background-color: white;
grid-row: s/e;
grid-column: s/e;
justify-self: end;
align-self: center;
transform: translateX(52%) rotate(45deg);
border: .15rem solid $color-red-BA;
border-bottom: none;
border-left: none;
}
}
OK that's good for now. Let's go ahead and look at the grid more time, and you'll see that in Firefox it's right where it belongs.
So let's go ahead and move on to the next video where we will build out the arcade component and get it functional and prep it the same way we did with our box where we can just input data have a calculate it automatically. So that's what we want to really do with the rest of these components is how we can just plug stuff in. So when we fetch data from the server it will just throw it in automatically and now be really easy to implement.
So let's move onto the archive by committing our code and ending the video here.
git status git add . git commit -m "built and styled point for newsletter box component"