WEBVTT 00:02.470 --> 00:07.810 It's now time to create the first significant component for a single page application. 00:07.810 --> 00:13.810 We're going to create that enough bar component and we're going to place it either in the up dot view 00:13.870 --> 00:20.200 component specifically the Nevada component is going to be a single fi component that we're going to 00:20.200 --> 00:26.470 place inside the components folder and we are then going to Aditya the same way for example the router 00:26.470 --> 00:29.640 view component is being added to create our component. 00:29.650 --> 00:33.320 We're going to use bootstrap CSX the NAV Barak last year. 00:33.370 --> 00:38.980 And even though it's true that we could install bootstrap in our project using NPM we've seen how we 00:38.980 --> 00:41.650 could do that using for example view UI. 00:41.650 --> 00:49.450 What is also true is the fact that we are using Bootstrap already in the off a layout template yet we 00:49.450 --> 00:54.850 are just including a normal citizen linked to bootstrap SSL. 00:55.420 --> 01:01.410 And considering that awfully outdoors HDMI out is not part of the single page application itself. 01:01.420 --> 01:07.470 It's not strictly part of the application because it's the parent template for logging and registration 01:07.470 --> 01:07.880 form. 01:07.910 --> 01:14.620 We try to use that which are rendered by the server in fact to simplify our development process we can 01:14.650 --> 01:24.940 create a new HDMI template base dot HDL and then we can use that file as a parent HDMI file to both 01:25.100 --> 01:32.890 of the layout ne email and index dot HD demo so that we can place this link to the Sudan inside of the 01:32.890 --> 01:39.730 base dot HD email file and have access as a consequence to all the classes provided by bootstrap from 01:39.850 --> 01:41.890 everywhere in our application. 01:41.920 --> 01:51.830 So yeah in the templates folder now going to create new file base not just the email and inside of this 01:51.830 --> 01:55.400 file we can now move most of the code use there. 01:55.430 --> 02:00.460 So of course I'm also going to move the link to google fonts. 02:00.710 --> 02:01.340 So one 02:04.370 --> 02:18.550 and Dan all of these up to the head like so but this has to be moved back to it awfully out template. 02:18.610 --> 02:22.510 Now we can use template tags as always. 02:22.570 --> 02:24.500 So yeah based on HDL. 02:24.520 --> 02:37.820 First of all inside of head I'm going to define block style and block closet and also inside of body 02:39.360 --> 02:43.240 block content and then block. 02:43.280 --> 02:47.170 So now that base dot HCM L is finally genetic. 02:47.360 --> 03:02.120 Let's copy block content and block like so 1 and 2 and not so of course look looks Tyler so pure 03:05.900 --> 03:06.450 and. 03:06.810 --> 03:12.330 You can of course if you want to move all of these CSF glasses to a separate file and that's a great 03:12.330 --> 03:15.330 idea especially if you're adding a lot of style to your application. 03:15.540 --> 03:21.120 And one more thing that we need to do in this file is to change the name of this blog to author or something 03:21.120 --> 03:21.390 else. 03:21.390 --> 03:25.040 But it's important not to have two blocks with the same name. 03:25.080 --> 03:28.890 So let's move to a registration logging dotage CML. 03:28.980 --> 03:31.580 So this is going to be a block or so. 03:31.650 --> 03:40.920 And same thing for registration form a block off that's now closed these two files and let's open index 03:41.010 --> 03:42.510 dot each to instead. 03:43.170 --> 03:44.640 So Europe first of all 03:48.560 --> 04:04.800 expense base dot based e-mail and well we also need to update Pyotr and any idea we can just start simply 04:06.480 --> 04:18.180 block content 1 and 2 here and block we can also make everything. 04:18.950 --> 04:25.120 And we can also delete these h1 tag that you had no longer going to need. 04:25.220 --> 04:33.840 We can now restore it to development server just to be sure that all the changes to the HMO files are 04:33.840 --> 04:35.060 recognized. 04:35.190 --> 04:45.070 And if we now go back to Question Time and then accounts look out. 04:45.900 --> 04:46.180 Yeah. 04:46.420 --> 04:51.550 We still have you see have templates working as expected. 04:51.640 --> 04:57.130 And one more thing that we can notice is that we are now using Bootstrap you see because all the font 04:57.760 --> 04:58.450 has changed. 04:58.450 --> 05:03.900 And if we check the source code of the page just out of curiosity we see that we now have all sorted 05:03.900 --> 05:07.420 it to links to bootstrap and refunds. 05:07.870 --> 05:10.830 That's now created enough by single file components. 05:10.840 --> 05:21.560 So inside of the components folder you file Barbara dot view and here we are going to need template. 05:21.680 --> 05:24.020 Now we're going to need script. 05:24.470 --> 05:27.310 And we're going to need style. 05:27.310 --> 05:36.670 So first of all inside of script we can define name as number component y for the aged AML code. 05:36.670 --> 05:40.260 We can rely on the classes provided by bootstrap. 05:40.270 --> 05:44.510 So I'm just going to copy the code for these navigation bar. 05:44.770 --> 05:53.530 I'm going to paste it inside like so we have one route HCM element which is these never going to indent 05:54.420 --> 05:57.380 the code like so. 05:57.980 --> 06:03.640 And now that we have the component we need to imported inside our product view so that we can add it 06:04.030 --> 06:06.330 up here in the HDMI code. 06:06.400 --> 06:07.340 So we are in between. 06:07.360 --> 06:10.880 Let's define script. 06:11.160 --> 06:20.200 We've name it was output components is an object of components. 06:20.320 --> 06:22.690 I'm just going to indent using four spaces. 06:22.810 --> 06:26.280 So yeah we want to use the enough bottom component. 06:26.290 --> 06:29.320 We've just created and of course we need to import it. 06:29.350 --> 06:35.010 So yeah import enough bar component components 06:37.620 --> 06:38.800 slash enough bottom 06:41.700 --> 06:42.310 view. 06:42.550 --> 06:49.270 And by the way to change that indentation level for V2 in the extension we can go to file preferences 06:49.480 --> 06:54.010 settings and any workspace settings and just check for that. 06:54.790 --> 06:56.130 Sighs Yeah. 06:57.980 --> 07:03.760 Set for and now that the component is registered we can use it. 07:03.820 --> 07:07.410 So yeah inside of the DB we've I.D. apple. 07:07.630 --> 07:12.430 I'm just going to use nav bar component as a self closing tag. 07:12.490 --> 07:14.050 Let's also change the indentation 07:17.990 --> 07:24.500 so having enough bar component to appear before a router view that once again allows us to see the content 07:24.500 --> 07:30.500 of the different components based on the page with the visiting will let us see that enough bar component 07:30.500 --> 07:32.930 of from everywhere in that application. 07:32.930 --> 07:38.750 And therefore if we now go back to Chrome in a single page application we see that we finally have the 07:38.750 --> 07:39.830 navigation bar on top. 07:40.130 --> 07:41.170 Awesome. 07:41.360 --> 07:42.460 Let's not personalize it. 07:42.500 --> 07:44.400 According to our needs. 07:44.570 --> 07:49.940 So win back to NAV but that view first of all let's add a container. 07:50.930 --> 08:02.360 So div class Container going to move these down here. 08:02.510 --> 08:06.280 So if you take a look much better than before. 08:06.280 --> 08:11.860 Let's also add a bit of border you are below on the bottom part of the navigation bar so I'm going to 08:11.860 --> 08:15.500 define a new CSF class my bottom 08:18.230 --> 08:33.300 here in the style tag you may not bother with but the bottom one pixel solid and we can make it Grey. 08:33.380 --> 08:34.990 Let's have a look. 08:35.030 --> 08:43.410 It looks perfectly fine and well actually we can also move a bit of the CSF code out from the awfully 08:43.460 --> 08:47.200 out dot HDMI template or well more than movie. 08:47.210 --> 08:53.640 We can just copy it and then we can pass it yet in the app door to view component. 08:53.660 --> 08:55.200 Let's remove all of these. 08:55.370 --> 08:56.740 We no longer need it. 08:56.820 --> 09:03.380 And so considering that now this style is not scoped missile style as you can see is applied everywhere. 09:03.440 --> 09:08.000 Let's also define a container class for the home component. 09:08.120 --> 09:15.620 So home due view your leave plus container. 09:18.570 --> 09:24.690 To let's see how it looks like and as you can see it already looks much better. 09:24.870 --> 09:28.790 There are four elements that we want to add to our navigation bar. 09:28.800 --> 09:35.940 First of all you are on the left the brand of an application question time and then three buttons are 09:36.150 --> 09:37.270 on the right side. 09:37.290 --> 09:43.300 So going back to NAV bar that view let's make these nav bar there where we want it. 09:43.320 --> 09:45.520 We can't just delete the form. 09:45.720 --> 09:53.610 We don't need it and we can change the unordered at least Glasser to managing left out all this way 09:53.850 --> 10:00.660 we can also remove the idea we don't need and turn is linked so we are going to have home add new question 10:00.720 --> 10:02.460 and then look out at the moment. 10:02.460 --> 10:08.010 However we can add the link to about instead of other question we're going to modify it later on in 10:08.010 --> 10:12.240 order to connect ohm and about we're going to use router links. 10:12.240 --> 10:15.630 So let's just delete these anchor tag. 10:16.010 --> 10:16.350 Yeah. 10:16.350 --> 10:22.380 Instead I'm going to define a router Linker 1 and the closing one 10:26.140 --> 10:26.610 like so. 10:27.040 --> 10:34.570 So these can be home then we need to pass that through proper. 10:34.870 --> 10:41.680 And similarly to the way we use the reverse function in Django we can use the names we've given to the 10:41.680 --> 10:46.990 different parts such as for example home to get the proper link automatically. 10:47.170 --> 10:49.260 So yeah you can do. 10:49.720 --> 10:57.210 Name is ohm this way we're tailing router link and we want to create a link to the path which has a 10:57.310 --> 10:58.870 home as a name. 10:58.870 --> 11:08.620 Let us also add the classic classic equals matter button small button success and if we now take a look 11:08.620 --> 11:12.040 at Chrome that is our home button let's add the other two. 11:12.670 --> 11:23.840 So I'm just going to copy and paste to code like so this is going to be a link to about so yeah name 11:24.350 --> 11:25.220 equals about. 11:25.310 --> 11:30.440 We can change the class we can make it a button thread by using the danger class and the name of course 11:30.440 --> 11:33.890 is meant to be different about. 11:33.950 --> 11:40.220 We can't however use a router link for the third link because these as we said is going to be a link 11:40.250 --> 11:42.280 to that logout. 11:42.380 --> 11:51.020 You have up which as you probably remember is simply slash accounts fleshed out. 11:51.020 --> 12:01.380 And so yeah we can anyway define the class so as Button Button small button outline secondary. 12:01.460 --> 12:02.750 Let's have a look at Chrome. 12:02.960 --> 12:08.430 And yeah yeah let's also add a bit of margin on both sides of the about button. 12:08.720 --> 12:19.130 So yeah we can simply add an x 1 much better let's not change the number brand to question time and 12:19.220 --> 12:23.490 let let's also style it so that over in it with the mouse we change its color. 12:23.850 --> 12:30.510 So yeah I'm just going to delete all of these because in fact we're going to need to use a router link 12:30.870 --> 12:33.520 one more time so this way. 12:35.530 --> 12:39.790 So this is going to be question time. 12:39.790 --> 12:41.350 The prob is perfectly fine. 12:41.350 --> 12:47.440 We can go back to the one page while clicking on the brand but we need to change the class. 12:47.440 --> 12:51.820 So this is going to be simply no brand. 12:51.820 --> 12:58.520 Let us also add a bit of style below so no brand. 12:58.950 --> 13:06.150 We can make it bold so the font weight bold font size. 13:06.150 --> 13:08.010 Hundred and thirty percent. 13:09.040 --> 13:12.890 And as we said we also wanted to be red. 13:12.890 --> 13:14.160 We love it. 13:14.810 --> 13:23.250 So we had a over color and we can use it bootstrap like red. 13:24.300 --> 13:25.530 With important. 13:25.560 --> 13:27.790 Let's now go back to Chrome it it easier. 13:28.120 --> 13:30.990 And if we are with the mouse it changed to red. 13:30.990 --> 13:31.880 Perfect. 13:31.890 --> 13:37.500 Let's also test the deleting system so first of all log out and get locked out successfully. 13:37.500 --> 13:42.240 So let's log Burkina let's test about it works. 13:42.240 --> 13:44.430 This isn't about page home. 13:44.430 --> 13:45.240 It works as well. 13:45.240 --> 13:46.000 Perfect. 13:46.080 --> 13:49.110 And then of course also the number brand. 13:49.230 --> 13:51.720 So the links themself work as expected. 13:51.750 --> 13:57.390 However the buttons don't you see that when clicking on about 2 need in fact stays pressed the same 13:57.390 --> 13:58.920 thing happens with home. 13:58.920 --> 14:02.190 This happens of course because this is a single page application. 14:02.190 --> 14:08.670 Therefore there is not a flash and so we need to change the style of the buttons to make the NBA the 14:08.670 --> 14:09.690 way we want. 14:09.690 --> 14:15.150 And considering that we're going to use several battles throughout the whole application not just in 14:15.150 --> 14:21.570 the enough power component we better define the new style here in the app dota view component. 14:21.690 --> 14:31.680 So much focus in the property that we want to change is called The Box shadow and the value we want 14:31.680 --> 14:34.450 is non important. 14:35.660 --> 14:36.710 Let's see how it works. 14:37.160 --> 14:41.260 So going back here about how perfect. 14:41.300 --> 14:45.980 And by the way that is no need to change the styling of this about the component because of course we 14:45.980 --> 14:47.500 are not going to use it. 14:47.540 --> 14:53.020 One last thing that I can said before finishing is to change back that tab size to 2. 14:53.150 --> 14:55.760 You can of course keep you dead for space if you prefer. 14:55.940 --> 14:59.140 However in my case I think it's probably the best decision. 14:59.140 --> 15:05.570 Also considering that I'm using 18 as font size in order for you to read everything properly from the 15:05.570 --> 15:15.450 video so I'm going back to file Preferences Settings workspace size here too to and Danny Haddock is 15:15.450 --> 15:22.690 simply to the right click the format document and same thing for the other components of the application. 15:22.860 --> 15:29.680 So home and also of course opposite view.