[00:00:01] Hi welcome back to the reactor course in last guy. We are about the fact that we and we also have a problem with the image saving when we did and I quickly changed that. So by the time we even go through the last guy it's going to work fine in the areas on mine. We will be there for you. So real quick I just noticed that this text is overflowing here so we can fix this pretty quickly if we inspect this and then I'm going to click on this little box here and the bottom left of my screen if I click on this all access the content and this is happening because we have fixed height on height you'll see that it automatically adjusts to whatever the exact height. You'll notice it automatically adjust the height to the text. Now if we had something like this the item or something like that well it goes right at it. But basically there is another item here. And they only had a few lines. It would be all the way up there but we don't want that. We want to generally display a minimum of about the height that was here before the year 600 pixels so let's go ahead and do that let's say let's go code and then instead of saying hey six experiments you say minimum. So it has to be that happy. Now it's really the page and you'll notice it's working now. So if there is only a little bit of text it's still going to be this high tall it's just going to be Westech so yeah that should be chill. [00:01:45][104.2]
[00:01:46] Now let's go ahead and start styling with adding the company for the info box for you and others for your request. We have INFORMA. Well we haven't really stylee so what we'll do is we'll actually throw it in here. Well throne's styles for this and then we'll move on to the archive. So it's going to wrap up here and get those click on the box here and copy code or I'm going to copy code. You want me and we have these styles so let's go to the good work out and with these so into our code here. So I want to let's create a company that we can use as well into requests or we already have a component for this so we'll just add in the same tax for the styling the styling will be the same. So what I'm going to do is I'm just going to hit command to put this to the side. Now I'm going to get rid of these styles here and then I'm going to get rid of this key. And I'm just going to say on this day of class name is equal to what's called input box. And then within here I want to have a couple things on the have the day in the year so I just if the day for defaults be easier to them for this one is going to be January 18th. Now what we can do or I guess it's 2018 let's do January 3 for the 30th 2013. [00:03:28][102.4]
[00:03:29] Now for all I guess already using what we can do is just go modifier in a box styles then and then for this say class name is equal to simple box date and then this Lunacek class is equal in both box year. And then let's just put it in some styles Courteney's all those space these items using flex box the day in the year month and year. So these two items so let's just go into our SPSS and I'm going to go let's see where should we put this. Put it in its own file and say Ambode Ash urged him from bombsites it's US and import it into our Mendes's. So let's say import does flash in a box. Can I'm going to style it so I'm going to get rid of the Eppalock styles and what this is going to do is it's going to kill or for our requests. So now get these items but it's going to kill our styles and kill ourselves for this as well. So it's going to add some new ones in our input box file and we just pretty easily we can say in full box right. And then let's change these items let's say box sizing is border box that let's just say Heidi is what is it in the design. I think it's 160 161 and it's 179. That's because it has the stuff here which we'll have later on tonight. 161 pixels with 161 as you say one pixel solid colored red I think we call it the radius 5 pixels a nice radius there. And then let's add in the colors. Real quick color color that for our text. And then once get the form of both of those are both things and then the text align is when we need the Yeah. [00:05:37][127.7]
[00:05:37] Now look at that it looks like it should solve these really nicely ooh dandy. Now with that in the FLEX so it looks nice and then light of the individual styles for these pieces of tax let's say display flaks or flex directions obviously we call columns. We don't want it to go from left to right I want to go from top to bottom. Let's see if one direction call them and say justify content center. So they will send you back in the screen because if I save that Ogar identify uncommon just for content can I go to the left or the top I guess since it's in a calm way. Now you might be wondering OK I really do much. Just put it in the middle. But it matters when we add in the big text for these because it's going to look really weird if we don't have it center directly with the big tax so all we have to do to get the text and there is reference info box. Your day it's Friday first and pillboxes days and it comes first. And then a PO box. And then let's just put in some here so the font size is an a design it's 65 pixels. OK so it's the 65 pixels and I think I saw one Hayden there was 81 and ice and I saw that these were separated. So it's eight pixels was Martian bottom is eight pixels. Now let's give the info about the years and styles that say this and look at it should be a nice thing to share. Oh yeah it's pretty much identical to this. Like these are the same. [00:07:20][103.2]
[00:07:21] Now that the styles for this so it looks like right here it's OK. It's giving us a skin because the font size of 18 pixels might have 23 pixels let's say. See what we've got going on in our app here. And yeah looks pretty nice pretty nice but this looks bigger. Maybe that's just because this is 2018. Let's go to a newsletter digest and see Jane Rame in all caps 2018 and will extract this data from her back and once we are just our object once we get around to that. So say that it's looking pretty nice it's like Dan called the sounds good or questions like yeah it's pretty nice for now if we look into our design we can see why a request looks like things as kind of the same thing. So we might as well rename these to something like the like big text let's say a prayer word e-tax or urge as we'll call like I mean let's just say text and then say some text on these and then let's just give these values and see us here because now we can just use this style globally. I mean we could with a year and stuff but it would look weird calling things Deyn year or they don't. Dean a year instead just pending the amount. So it's a tax and subtext. This way we can go to our requests he us or maybe in our main or we haven't even. This is obviously easier so we have to do is going to our requests or request box component which did we make support requests. Okay I can't see any reason to expand this case because it didn't involve box. [00:09:24][122.2]
[00:09:24] Okay so we have to do is say we have are this we are this is a buy and obviously the type pending in progress are complete. So all we can do is just cut that and it's pretty self-explanatory. All we have to do is say did did throw this in here. And then we have to give these the classrooms we have in here. So I'm just going to copy these and copy the whole things you understand from doing's. This is the whole box here and then impro box the whole box. Now that's really the. Let's have this back. So basically you're seeing the same kind of structure here except we have a tax I get rid of that it looks almost identical. So I'm sure a place January 2018 with less stop drop side time. And I'm going to get rid of this top loss. Now we still need the Enclave because if I say that we go here look nice but we won't have our plans which is good. So we want to do is just make the whole thing a buy in. So I mean you could just wrap this all in and a tag possibly the mother this thrown in. Let's say you love the page and see what we're given. Yeah it's nice. Looks like it works. And what style it a bit differently to display to select it. We could say we could quickly just say in our info box we could say we get out and some string interpellation and just say okay if see this props up time is we're going to out to use my sacred props to actually check. [00:11:17][113.5]
[00:11:18] So what we'll do is we'll just get around a lot when we get around to it because I don't want to read into too many different components and styles and go to off topic even though I've done that too much anyway. So we'll get around to that when we do because what these reacts to you to fix that. So let's just stop there for now and then we will get into some new stuff in the next guy get into the archives component here. So catching the next guy lets Kim in our coats would think that it's good game. Let's just say styled in full box component and catch the next guy. CNN. [00:11:18][0.0]
[673.3]