Vue & Firebase Real-time Chat (Preview) #7 - Chat Window

so we have our welcome screen here now directing us to this chat component with the name so this is the component which will actually show the chat window and the messages inside it so let's start to create the template for this component so we'll go over to our chat dot view component over here and we'll create the template inside the container now I want to get rid of what's currently inside this h2 right here because we don't just want to output the name up there that makes no sense instead we'll call this ninja chat and what I'll do is give this a class as well and the class is going to be equal to center to essentially align this X to text and also teal - text so make it that blue green color okay so the next thing we need to do is a div with a class of card like so and then inside this we need some card content so again another div with a class of card - contents then inside this div what I'd like to do is output the messages now since there's going to be a series of different messages it makes sense to create a ul and loads of different Li tags inside of it one for each message so we'll do that will create a ul and this is going to have a class of messages and inside that we'll do an li tag and by the way this class right here this is nothing to do with materialized this is our own class we might use to style these things up later on so each message will be an li tag and eventually we will use v4 to output a different Li tag for each different message but since we don't have those messages yet we'll just create some dummy HTML for each different message so inside this Li tag we're going to have three things we're going to have the name of the person that sends the message we're also going to have the message content and then final it will have the time the time that the message was created so for each one of these different things I'm going to do a span tag so first of all we'll do a spun for the name and this is going to have a class of teal - text and we'll just place name there to begin with since we have no dynamic data yet and the second one will be a span with a class of gray - text and will say text - darken - three so that's going to take that gray text color and darken it by three steps okay and inside this will be the actual message content again we don't have dynamic data so we'll just place message there for now and finally spun with a class of gray - text again and also it's going to have a class of time because we'll starless up slightly differently later on and we'll use that class to do that and in here we'll just say time but we will output the timestamp there format it in some way shape or form later as well okay so that's the kind of HTML I want output for each different message we have and later on like I said we will use V - 4 on this Li Tech to cycle through each message and output this stuff for each different message we have in the database alright then so now underneath the card content over here I'd like to do another div with a class of card - action again this is a utility class provided by materialised and this is just going to separate a little bottom part of the whole car for us and this is where our form will be for a user to add a new message now for now I'm just gonna do an input box with a type of text and leave it at that and we'll come back to this shortly alright so that's the basic template done over there the next thing I'd like to do well first of all we'll preview it in a browser so this is what it looks like at the minute and this looks okay but we still need to style this up a little bit to begin with these three things are sitting next to each other and they shouldn't really do that they should probably sit on top of each other or at least the time should be done there so we'll sort that out and a couple of other things as well so let's go down to the style tags and inside here first of all we'll say chat which is the div at the top we gave that a class of chat and then we want the h2 inside of that and the font size of this H 2 will be 2.6 m/s okay and the margin bottom just to separate you from the chat window itself will be about 40 pixels alright then so we also want to grab each of the span tags inside those allies so these things right here and since they're the only span tags in the chat over here we can just say chat spun and for each of these I'd like to give a font - size of 1.4 m/s alright and then finally like one more rule will say chat time so that's that third span tag where we output the time itself we want to display this as block because we want it to go on to the next line and block level elements do them so display it as block and the font size will also be about 1.2 m/s so let's save this and view this in a browser okay I think that looks a bit better now we have the ninja chat separated from the window and also now the time is going to be displayed below these two things right here where the name and the message is plus it's also a little smaller which I think works well as well cool so that is our chat window created right there now we also have this input field right here and we did that or right here ultimately in the next lesson what we'll do is separate this section this little farm into its own component just to keep everything modular because this component right here this will be all about receiving data from firebase whereas this component right here the new message component that will be all about taking data from a user and pushing it over to firebase so they have two different roles really which is why it's nice to keep them a little separated from each other to avoid any kind of data confusion so we'll look at that in the next video