So let's start by putting the shipping component on a grid. So if you remember we've done this with all of our little container components. You said grid column is start to end and grid row is content start to content end, okay save that and let's head over to our app and it should go over here, okay let's reloaded it, okay let's see... so we have a problem.

So content start to content end, I'm just going to check this one more time, and it looks like it's still not working properly. Let's go ahead and look at something here... okay, let's look at signup for example, see how the grid row is content start to content end, and the grid column is s/e? It should work just like that, but it's not. So let's go ahead and just make sure that our shipping.js as has the right classNames. Okay, the problem is we're saying shipping form in our shipping.js, so let's change that to shipping okay, once you change those to shipping it should align up and you'll see that it did.

So just let me go over that one more time. In our shipping.js file we have shipping as the className then we have shipping_page-title and shipping_form, alright. In shipping.scss we are aligning that on our layout grid, remember our layout.js we're laying it out here so that exists right here. So the next step is making the grid for our form, so let's look at our design and think about it. Okay, we have this use this address button, we have this order summary over here right.

So mainly we have two sections here, but we don't really want to worry about that, so what we'll do is say okay we've got one here, and we've got one here. So what we'll do is go into our app and we'll go to shipping.scss which we're in obviously and right here in form we want to do something similar to what we're doing in signup, so let's referenced signup.scss and let's copy this grid here under &__form okay. And just notice the similarity of how we are structuring this throughout our app, it's the exact same.

Okay, let's go into shipping.scss and let's paste it. And we have page title in here too, but we don't need to do that again, we don't need to reference that pretty much in any of our components. Alright next thing we need to do is we need to fill in these columns here for 64 pixels, these rows. So the first one is name, the next one we need rename to address okay, and then let's look at our design one more time, we have a space after name.

I'm not sure if that's intentional or not because it seems like there's random spaces but I guess it seems intentional because street address and all these kind of fit together where as name should be a little bit out of that. Alright so we've got name, address, and then we'll move this 35 pixel space, I'm going to remove it entirely. And let's not even name it, let's just know that it comes after the name.

So what we'll do is we'll put this right in here, so say 35 pixels between name and address that's going to be our space. Okay, now what we can do is say okay address, we need a city now. So let's say that password, let's rename that to city, and then confirm we need to rename that to state-zip because the state and zip code exist on the same row. So get these in okay.

Now after the state and zip code we have this space here okay, and then we have a line, then we have back, and use this address. Okay, so over here we have this MinMax 20 pixels 81 pixels that's our space okay, then we have the line, then we have the buttons.

grid-template-rows: [name-s] 64px [name-e] 35px [address-s] 64px [address-e city-s] 64px [city-e state-zip-s] 64px [state-zip-e] minmax(20px, 81px) [line-s] 26px [line-e buttons-s] 38px [buttons-e];

So this is all set up already okay, and then for the columns this is what we need. We have the back start to back end, space start to space end, create start to create end okay. So let's go ahead and start laying things out and see if we need to adjust columns as the layout on the way, because we may need to okay.

So for name we're going to say grid row and we're just going to put name start to name end. Now we're going to do this for basically all of these, so I'm going to paste this all the way to our buttons okay, and then let's rename them accordingly. So we've got address, we've got city, we have state, we have zip code, we have line, and we have back, while we actually have buttons start to buttons end so be careful on these ones, buttons start to buttons end, because they exist on the same place.

And real quick we need to change this to state zip okay, on state and zip code they both need to be state zip because they're also on the same row okay. So go ahead and get these in here, pause the video if you have to, and we have all of these right here for our rows.

shipping.scss

.shipping-form {
    &__name {
        grid-row: name-s/name-e;
    }
    &__address {
        grid-row: address-s/address-e;
    }
    &__city {
        grid-row: city-s/city-e;
    }
    &__state {
        grid-row: state-s/state-e;
    }
    &__zipcode {
        grid-row: zipcode-s/zipcode-e;
    }
    &__line {
        grid-row: line-s/line-e;
    }
    &__back {
        grid-row: buttons-s/buttons-e;
    }
    &__use-this-address {
        grid-row: buttons-s/buttons-e;
    }
}

So the next thing we need to do is first look at our browser and see what's happening, and it looks like things are looking decent, but it's a little messed up.

It looks like back may not have lined up, or used this address my not have lined up, and the problem is we removed our space, I'm pretty sure... okay, it's still there. The problem is we never changed the name of create, so we're not actually aligning use this address. And okay here's the deal, we never put the columns, we put the rows right, we need to do both. Let's change create here to use-this-address-star.

shipping.scss

grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e uste-this-address-s] 1fr [use-this-address-e] 1fr;

I know it's long but we've got to be somewhat clear here, and it can be confusing with buttons so we're just going to say use-this-address okay. Back is going to be the same, so let's go ahead and align those. Okay, so this is going to be column and this is going to be back start to back end, let's copy that and paste it right here and say use-this-address-s/use-this-address-e okay. So I just put the columns in, and I renamed some of the columns and again I said we'd adjust the columns as we go, we most likely would, I forgot to rename it anyway. Okay, let's check chrome and things are looking really clean already okay.

It looks like we're missing our line though for some reason, and obviously our state and zip code need to be reduced in size and placed appropriately. So let's go to our application and let's say on the state and zip code, let's say that input needs to be a width of how ever big it is, I think it's 220 pixels. We'll see how that looks, if it looks off we'll go check the design.

Now since these are so much the same we're going to take zip code and we're going to leave it there. We're going to get rid of the row right and then we're going to go to state here put a comma and put zip code in there with it. And I'll show you why we're leaving zip code in a second but just know that we need to put the row and the input width on there.

Let's go to Chrome,

and you'll see now that things are looking a lot better. We just need to move the zip code a bit for some reason things are looking off right. Okay, here's what we've got to do, we need to say that they both exist at the very start alright. So we need to say that they exist at back start and then we'll just leave it at that, we won't put an end because we don't want to mess with the width.

Let's look at Chrome, and you'll see they're on top each other now.

Now what I'm going to do is I'm going to translate it over. The reason we don't use justify end is because these are a little longer, we tried that before and it kind of worked but as soon as we expanded this it messed it up, it would expand with it right. So let's go ahead and try this now, let's say that we need to take the zip code here and let's say transform translate, let's translate on the x axis and let's say 220 pixels plus the space right, the space is something like 20 pixels, so let's say 240 pixels and see what that looks like.

shipping.scss

&__zipcode {
    transform: translateX(240px);
}

Okay, let's check the browser and you'll see it almost where it belongs alright.

What we need to do is check the design and just check these units specifically to see what they are. So zip code and state the inputs are both 200 pixels and the space is about 26 pixels okay. So what I'm going to do is, we're going to change this to 200 pixels and the space to 26 pixels.

Let's go to our application, alright, it looks good.

We've got to translate it now, not 26 pixels. We need to translate it 200 plus 26 pixels so 226 pixels to the right. Alright, let's go check our application now, and everything looks really nice, it looks great and resizes properly, it'll be really easy to make mobile responsive. Literally all we have to do to make this mobile responsive is change the widths of the inputs because they're a little too big for a mobile screen, or just scale everything down, just put a media query and scale everything down.

I want to show you that just because it will be so easy right. So type in media query css, and what we're going to do is take something like this.

Let's copy this right here and look how it says, if the browser window is 600px or smaller the background color will be light blue, let's try it. Alright watch, it'll change if it gets too small see. And this is the window right, it's counting for this not this whole window. Okay so let's try that, let's say that down here in shipping form when we have a media only screen max width 600 pixels, we will make all the inputs scaled down. So we'll say transform scale, and we'll say 0.75 and see what happens.

shipping.scss

.shipping-form {
    @media only screen and (max-width: 600px) {
        input {
            transform: scale(0.75);
        }
    }
}

And I'm thinking of just applying it to the shipping form and seeing if that would look better. But let's just type that in and see what happens. Alright, so we don't want to do it just to the inputs, we want to do it straight to the shipping forms. So, let's take this out and put it right here. So media only screen and max width 600 pixels shipping form transform scale .75. Now I'm not going to go off about media queries in this, it's just a really good example and a quick one I could show you. So check this out, write that in and let's try this out.

Okay, you see how big it is, then we can go down and it gets smaller. So the ideal thing to do would actually be to apply it to the form or the shipping right. So let's say shipping and then as a matter of fact let's put in shipping, so right here let's just say shipping say we'll say transition all .3s ease so it will animate down okay.

shipping.scss

.shipping {
    transition: all .3s ease;
}

@media only screen and (max-width: 600px) {
    .shipping {
        transform: scale(0.75);
    }
}

So literally just these lines of code and look what we'll get. See it looks better already. Now obviously this is a really shady kind of implementation but it at least makes it small so you can view it, right. We could even go as far to say something like... alright let's take this and then when it is less than 300 pixels let's scale it down to .6 right, let's scale it down even further. So you might have a file full of media queries that does stuff like this. So a way to simulate this would be to open up our app and hit this button toggle device toolbar.

And then you can change it from responsive to whatever you want like iPad, you change to pixel, you can change to iPhone okay.

So this is an iPhone x right, whereas if we didn't have these media queries this is what it would look like without those like 20 lines of code.

Oh I guess it's perfect. But basically the point is you can adjust it really easy, see this the iPhone 6 7 and 8 it's too big, if we put that in it's going to be a decent size on those devices. So that's how that works, it's really off topic, I'm just going to comment it out so feel free to use it if you want, but I'm not going to go off about that because clearly you need to put at least a tiny bit of thinking into it to make it work effectively. But I just want to show you how easy it was to add in a media query and scale things down like that.

So what we want to do is add in one more thing... two more things into our grid okay. We need to add in this line, which for some reason is gone, and then we need to add in the summary. Let's go out and get the line in there and then in the next video we'll handle the order summary including calculation okay. So let's go into our code, we have the line... oh, it's because we don't have columns set. Let's say grid column is 1/-1 and then let's go into our app and you'll see that we have it now... maybe not, we should but we don't.

I'm going to reload our app. Alright, it looks like it's gone, so I'm going to inspect that and then I'm going to hover over... I'm going to open up the form and I'm going to find the line and hover over it. Where is it? The line, okay there it is. So the line for some reason is just not appearing, but you'll see that it's where it belongs. So what we need to do is give it a border.

So let's reference or signup.js because it has the exact... it might be the top, it might be the bottom, I can't remember what we did yep border top okay. So you can either copy this or you can write it out again in the line here, basically all you need to do is say border top is one pixel solid #CCC and the margin bottom is 24 pixels, so pretty simple.

That'll put our line in there now and there it is. okay so it actually adds a lot of nice effect there, it looks good, it really separates things pretty nicely. Okay, so the one thing we need to add in here is that information okay, but look how nice it resizes too, the line. Anyway, what we need to do is add in the order summary, and that will be pretty quick. We need to put in some redux though to fetch the cart products to calculate our data again.

So let's go ahead and the code and do that in the next video.

Terminal

git status
git add .
git commit -m "layed out shipping form fields"

Okay I'll see in the next video.

Resources

Source code