So let's start off by closing this terminal window, and let's look at the classic name which is review form, and let's head down here, and let's go to our order folder and create a new file called reviewForm.scss.

Let's import it into our main.scss so let's go down here, let's go to review and let's say @import 'order/orderForm';. Okay cool, let's go into that file now reviewForm.scss and let's say .review-form. And we'll say &page-title, &products, and then I'll say it &back, and above &back what we want to do is say &line, and we'll say below &back we'll say &__proceed. Okay, so those are our items we don't have products in there yet but we'll be adding it alright so don't worry about that.

Now we don't have a page title in there okay, because page title is part of review okay it straight in here. So if you want to put that in here you can, but we're not going to be modifying it at all so I'm just going to leave that as a comment.

Okay, so back in reviewForm.scss let's get rid of page title, so we have products, line, back, and proceed. Now let's go ahead and say display is grid and then let's go borrow the grid template rows from signupForm.scss okay, you see on this form we have grid template columns and grid template rows? We want to do the same thing except for modified a bit.

So let's copy this all and what I want to do is actually structure our form like this as well, see how it says and form. So let's go to reviewForm.scss and we don't want to say display grid in here, we'll say it in review.scss. So in review.scss let's say &__form and we'll paste that in.

Okay so in review.scss we have display grid and then we have the same rows columns and gap from signin.scss. Okay, so first things first, we don't want the name, email, space, password, or any of that junk okay, we just want the line and the buttons for now. So let's get rid of all that junk so that all we have in the rows is align start to button start, we have these right here that you can see on the screen.

review.scss

.review {
    grid-row: content-s/content-e;
    grid-column: s/e;

    // &__page-title {

    // }

    &__form {
        display: grid;
        grid-template-rows: [line-s] 26px [line-e buttons-s] 38px [button-e];
        grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e create-s] 1fr [create-e] 1fr;
        grid-row-gap: 15px;
    }
}

This is exactly what we want, we have back start to back end, then we have space start to space end, then we have create start to create end, then we have the rest of the content here, this is exactly what we want. Okay so let's go ahead and lets align these here by going into reviewForm.scss and going into the line and saying exactly what we have in signup.scss actually so let's go to signup.scss and you see this is what we want except for we're going to remove a lot.

So let me just copy all of this signupForm in signup.scss right, copy all that junk, let's go into reviewForm and let's pasted it right here at the bottom and we're not going to overwrite this because we're just going to take certain things out of it, because I want to keep this in here the way we wrote it, so I can show you how I structure things as I go about them.

First let's take this & > * and put them all on the same column right. Now that seems a little bit wrong, but the thing is we override it, okay this seems wrong or it's okay it's because we're overwriting them right, so just do that so we can align everything from one to -1. Because in all reality the only other thing we are going to be aligning from 1 to -1 is the products but we're also going to be taking the line from 1 to -1.

So this is really just the products and the lines, so what we can do is take this column here and we can put it on products and line, because back and proceed are obviously not going to have it and there's no other components in here that are going to be on the grid, there's only four, there's the products, line, back, and proceed.

Okay I'm going to get rid of all these because we don't want to see them. Now the line is something we want. So let's take all these styles out of the line and let's put it in our line here, because we want it on the row there we want the border and the margin to give it that space between the line and the buttons. Okay, now obviously this is pretty straightforward okay, we've got the login and what that is the proceed button okay.

So put it here and let's do this okay, so create start to create end this is going to be called something else because we need to rename it because in review.scss we have it as create let's change it in our review.scss so that this is proceed, okay so proceed start to proceed end. Okay, so again this is review.scss, this is the code we've written.

review.scss

.review {
    grid-row: content-s/content-e;
    grid-column: s/e;

    // &__page-title {

    // }

    &__form {
        display: grid;
        grid-template-rows: [line-s] 26px [line-e button-s] 38px [buttons-e];
        grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e proceed-s] 1fr;
        grid-row-gap: 15px;
    }
}

Let's head over to our reviewForm.scss and in proceed here we'll call this proceed.

reviewForm.scss

&__proceed {
    grid-row: buttons-s/buttons-e;
    grid-column: proceed-s/proceed-e;
}

Okay pretty straightforward, pretty clear. Alright, the next thing we want to do is take these two lines on around my 31 on my screen here, and we want to place these in back because we want it to be from button start to button end with proceed on them on the same row at the bottom there. But then we want it on back start to back end so it's a little bit before the proceed button, and then we have that space okay so you see how it says back start to back end and that's the back button then proceed has proceed start to proceed end. Let's go to our view.scss and you'll see that we have back start to back end then we have the 40 pixel space then we have proceed and that's going to give us what we want.

Okay so save that, let's cut all this out and save it again and that's what we're left with.

reviewForm.scss

.review-form {
    &__products {
        grid-column: 1/-1;
    }
    &__line {
        grid-column: 1/-1;
        grid-row: line-s/line-e;
        border-top: 1px solid #ccc;
        margin-bottom: 24px;
    }
    &__back {
        grid-row: buttons-s/buttons-e;
        grid-column: back-s/back-e;
    }
    &__proceed {
        grid-row: buttons-s/buttons-e;
        grid-column: proceed-s/proceed-e;
    }
}

So copy that all in and hopefully this explanation made sense, this is what we need okay. And then in review.scss this is what we have. And we can get rid of that, I really don't want that comment in there.

review.scss

.review {
    grid-row: content-s/content-e;
    grid-column: s/e;

    &__form {
        display: grid;
        grid-template-rows: [line-s] 26px [line-e button-s] 38px [buttons-e];
        grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e proceed-s] 1fr [proceed-e] 1fr;
        grid-row-gap: 15px;
    }
}

All right so that should be pretty good, that should give you some understanding and if it didn't make sense go through it again or pause that and look at the code and copy it down. Okay so let's go to Chrome and see what we're looking like. Okay, you'll see that everything is where it should be and now all we need to do is basically fill up this component with the content we need okay.

We need two specific things in here okay, we need our products and we need our details right here okay, or our check checkout details or something right. So what we need to do is we need to create 3 specific components remaining okay. We have a product product right, we have order review products, that's gonna act like a container for our products. And then in there we're going to basically print out or display out a product component however many times we have a product in there okay.

So again look at this we have a container component right, and in that container component we have a name, quantity, price, and then a set of products okay. And then we have one more component after that and that's these details, these checkout details. So there's three more components in this application, in all reality we can make the products one, one component but we'll make it two different components okay just to make it that much more modular and understandable.

Okay so let's go ahead and finish one thing, let's change our proceed to checkout button so it actually navigates us to a different place okay. So let's go into our application, and let's go to reviewForm.scss and instead of pushing us to sign in. What we want to do is have this... or instead of pushing our proceed button to account let's have it pushed to our signin. Because that's the initial place we want to push it so they can sign in.

Okay, also on back we want to push them back to the shop all right, not back to the signin they want to go back to the shop. Okay, so if we go to Chrome and we go to our application if we hit back it takes us to, well it should take us to the shop, let's try that again. Okay, checkout if we hit back it takes us to the shop right, it has all of our items here.

If we hit proceed to check out it will take us to the login okay, just like our design. So that's about it for now, in the next video we will continue on building our application and I want to make sure this is working, looks like for some reason it might not be working... there we go it's just not totaling up.

So really we need to fix that at some point, but we'll fix that later when we put it in the backdrop here. Okay, I'll see in the next video let's commit our code.

Terminal

git status
git add .
git commit -m "review form grid"

Okay, I'll see you in the next guide.

Resources

Source code