Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,060 --> 00:00:01,840
All right.
2
00:00:01,860 --> 00:00:10,660
So we've learned a lot about responsive design and then how material UI provides us systems to implement
3
00:00:10,660 --> 00:00:10,960
it.
4
00:00:11,140 --> 00:00:18,310
So now it's time to actually take a look at integrating that within our own application and begin the
5
00:00:18,310 --> 00:00:22,530
process of making our site responsive.
6
00:00:22,560 --> 00:00:29,370
Now the last time we took a look at this I showed you how if we start to resize the page when we start
7
00:00:29,370 --> 00:00:36,980
to shrink you see the R image gets all messed up as well as the tabs and the button so I'm going to
8
00:00:36,980 --> 00:00:39,320
put the screen back to size.
9
00:00:39,320 --> 00:00:46,400
And one of the first things that we're going to do now is to actually get rid of all of those tabs.
10
00:00:46,400 --> 00:00:55,280
If we were a small enough screen size then we're going to end up implementing a draw for our mobile
11
00:00:55,280 --> 00:01:01,890
tabs but we need a way to tell when to render the tabs and when to render the draw.
12
00:01:02,060 --> 00:01:08,430
So we're going to start working on that right now we'll start by coming up to the top of our header
13
00:01:08,430 --> 00:01:23,130
dot J.S. file and we're going to import use media query query from app material dash UI slash core slash
14
00:01:23,340 --> 00:01:32,780
use media query then we're also going to import theme but make sure you get the brackets to D structure
15
00:01:32,780 --> 00:01:49,060
that from not just theme use theme from material material dash UI slash core slash styles.
16
00:01:49,090 --> 00:01:57,220
So now we're able to come down and inside of our header function here at the top underneath classes
17
00:01:57,490 --> 00:02:04,130
let's also create our constant theme equal to use theme.
18
00:02:04,300 --> 00:02:10,680
And now that gives us access to the default theme within our component.
19
00:02:10,690 --> 00:02:17,440
Now let's scroll down and write above the return statement for our component.
20
00:02:17,510 --> 00:02:28,280
Let's add a constant of tabs and we're going to set this equal to a multi line expression and we'll
21
00:02:28,280 --> 00:02:37,040
start that with a react dot fragment so that we can have two adjacent elements without any place holder
22
00:02:37,130 --> 00:02:46,280
elements to wrap them and inside of here what I'm going to do is go and take everything from tabs all
23
00:02:46,280 --> 00:02:52,090
the way down all the way down to the Free Estimate button.
24
00:02:52,090 --> 00:02:53,000
Actually no.
25
00:02:53,030 --> 00:02:58,530
I want to continue all the way down all the way into our menu.
26
00:02:58,540 --> 00:03:05,280
So all the way down to right above the toolbar all of our tabs the button and the menu.
27
00:03:05,440 --> 00:03:14,080
We're going to cut all of that and put it inside of our tabs react fragment so let's paste that right
28
00:03:14,080 --> 00:03:15,660
inside of there.
29
00:03:15,700 --> 00:03:22,150
And now if we went ahead and saved the page we can see that there is actually a problem.
30
00:03:22,200 --> 00:03:28,250
Doug you've failed to compile and that is probably because let's see.
31
00:03:28,540 --> 00:03:38,030
Probably because we are not rendering the tabs yet so let's come up to the top and we're actually going
32
00:03:38,030 --> 00:03:48,470
to create a another constant up here a constant of matches and we will set this equal to our use media
33
00:03:48,500 --> 00:04:00,170
query hook called with our theme dot breakpoints dot down with medium passed in.
34
00:04:00,190 --> 00:04:07,330
So this is going to select anything that is medium and below to return true.
35
00:04:07,340 --> 00:04:15,100
Now we can come down and scroll down to where we cut all of our tabs and menu from.
36
00:04:15,230 --> 00:04:23,540
And so right underneath the button but inside of our toolbar create a set of brackets to inject some
37
00:04:23,540 --> 00:04:30,580
javascript and we're going to use a ternary statement to check if matches is true.
38
00:04:30,590 --> 00:04:39,650
So if we are at medium and down and if we are at a screen size of medium or smaller let's just return
39
00:04:39,680 --> 00:04:41,400
normal for now.
40
00:04:41,510 --> 00:04:42,750
And if we are not.
41
00:04:42,770 --> 00:04:46,520
So if we are at a screen above medium size.
42
00:04:46,580 --> 00:04:52,610
So on our large and extra large screens we're going to render the tabs.
43
00:04:52,610 --> 00:04:59,390
So now if we go ahead and save this and then come over to refresh our page it looks like there's still
44
00:04:59,390 --> 00:05:03,570
a problem so I must have a typo here at the top.
45
00:05:03,600 --> 00:05:04,940
Oh and that's what it is.
46
00:05:04,940 --> 00:05:10,760
I forgot the at sign in front of material UI core slash styles.
47
00:05:10,760 --> 00:05:16,610
So make sure you have the at sign at the top of there and we'll save this.
48
00:05:16,610 --> 00:05:25,100
And now we see our screen refresh and since we are at above the medium the screen size we see our tabs.
49
00:05:25,280 --> 00:05:32,540
But you'll now see that if we reset size the screen you see the tabs go away.
50
00:05:32,600 --> 00:05:34,390
So that is pretty cool.
51
00:05:34,400 --> 00:05:40,130
You can see the tabs are gone and they come back they disappear and they're back.
52
00:05:40,130 --> 00:05:49,470
And so we are now officially hiding our tabs and making our Web site responsive using the material you
53
00:05:49,470 --> 00:05:58,370
I use media query hook now that hook has done a great job at making our component responsive.
54
00:05:58,470 --> 00:06:06,680
But now I want to go ahead and make some of our styles responsive if you notice whenever we resize the
55
00:06:06,680 --> 00:06:07,640
screen.
56
00:06:07,640 --> 00:06:12,690
When are tabs disappear even if we come all the way to the bottom.
57
00:06:12,800 --> 00:06:15,940
The very smallest size I can make the screen.
58
00:06:16,040 --> 00:06:23,210
We still have quite a large header logo here that is taking up probably a lot more space than it should
59
00:06:24,250 --> 00:06:32,230
so I'm going to resize the page and what I want to do is come over to our logo style here in our sales
60
00:06:32,290 --> 00:06:33,530
object.
61
00:06:33,530 --> 00:06:41,920
And now I want to create a new style but we're going to use the syntax as shown in the material UI documentation
62
00:06:42,190 --> 00:06:57,820
to set our theme dot breakpoints dot down for medium equal to an object with a new heights of just 7
63
00:06:57,940 --> 00:07:06,860
M so if I go ahead and save this you'll see the page refresh and everything looks the same but now as
64
00:07:06,860 --> 00:07:14,410
I resize the screen as soon as the tabs go away you can see that the image actually got slightly smaller
65
00:07:14,440 --> 00:07:15,510
as well.
66
00:07:15,550 --> 00:07:22,870
So now we are actually creating a responsive style that adjusts to the screen size as well.
67
00:07:22,880 --> 00:07:24,870
That looks really nice there.
68
00:07:24,880 --> 00:07:31,550
So I want to actually add a another point where it will get smaller for our very smallest phone size.
69
00:07:31,690 --> 00:07:41,560
So let's make it bigger and we'll go ahead and we're going to add a theme dot breakpoints going down
70
00:07:41,950 --> 00:07:44,950
from extra small.
71
00:07:45,010 --> 00:07:48,340
So this is going to be the size of our phones.
72
00:07:48,370 --> 00:07:51,310
And just to give you a little context here.
73
00:07:51,310 --> 00:07:55,060
Most phones are going to be extra small.
74
00:07:55,060 --> 00:08:05,080
They're small in landscape and then tablets are usually small in portrait and medium in landscape.
75
00:08:05,080 --> 00:08:09,550
And here on my screen I can make it any of those sizes.
76
00:08:09,580 --> 00:08:18,500
So for our extra small breakpoint let's set the height here to just five and a half M..
77
00:08:18,520 --> 00:08:25,480
So now if we go ahead and we save that and the page refreshes we can come over and start to resize this
78
00:08:25,510 --> 00:08:28,260
and we'll see the first breakpoint match.
79
00:08:28,270 --> 00:08:30,820
And so now we have the seven am height.
80
00:08:31,030 --> 00:08:38,230
But as we continue to resize the screen pass this small and now into the extra small breakpoint.
81
00:08:38,260 --> 00:08:45,670
And so you could see it change again giving us a much smaller and appropriate header size for the extra
82
00:08:45,670 --> 00:08:53,180
small screen sizes one thing you will now notice though is that since we've changed the size of the
83
00:08:53,180 --> 00:09:02,060
logo and by that the size of the toolbar we now have some extra space here up above the home content
84
00:09:02,480 --> 00:09:06,800
where the toolbar margin is being set too large.
85
00:09:06,800 --> 00:09:11,650
So let's go ahead and we can size this back to normal.
86
00:09:11,810 --> 00:09:20,090
And if we come to our toolbar margin style here in these styles object this is what is setting too large
87
00:09:20,090 --> 00:09:28,700
of a value as we were scaling Dean logo size down because remember this 3M margin bottom is to offset
88
00:09:28,910 --> 00:09:33,020
the increase from an 8 m height for the logo.
89
00:09:33,020 --> 00:09:39,920
So when we then change that to 7 M and then even further to five and a half M We're still providing
90
00:09:39,920 --> 00:09:44,380
this same margin bottom which then creates that gap.
91
00:09:44,450 --> 00:09:52,040
So to fix this obviously we need to set breakpoints for the toolbar margin as well to line up with our
92
00:09:52,040 --> 00:09:54,120
logo breakpoints.
93
00:09:54,140 --> 00:10:01,700
So I'm actually going to go ahead and just copy these just copy these on over from the logo and if we
94
00:10:01,700 --> 00:10:08,630
go ahead and paste those styles onto the toolbar margin we can then go in and change this from a height
95
00:10:08,840 --> 00:10:16,450
property to the margin bottom property and a here for the medium breakpoint.
96
00:10:16,460 --> 00:10:19,520
I just want a margin bottom of 2 am.
97
00:10:20,060 --> 00:10:30,050
And then here for extra small I want a margin bottom of just one point to five m so these are obviously
98
00:10:30,050 --> 00:10:37,620
numbers that I have found through testing to be consistent in their spacing so if I go ahead and I save
99
00:10:37,650 --> 00:10:44,130
this we can now refresh the page and you'll see when we start to resize that the first breakpoint will
100
00:10:44,130 --> 00:10:44,910
hit.
101
00:10:44,910 --> 00:10:51,990
And notice here what you want to pay attention to is the space between the top of the H and the bottom
102
00:10:52,050 --> 00:10:58,470
of the logo here so you can see above you can see about what relative space that is and you can see
103
00:10:58,470 --> 00:11:02,020
that change but stay the same relative space.
104
00:11:02,130 --> 00:11:08,430
And as we shrink all the way down to our extra small break point you can see again that the home content
105
00:11:08,490 --> 00:11:09,800
now adjusts.
106
00:11:09,900 --> 00:11:17,610
Thanks to our breakpoints on the toolbar margin so you can already see how easy it is for us to really
107
00:11:17,610 --> 00:11:26,160
create a responsive design and use the system from material UI not only in our themes but in our actual
108
00:11:26,160 --> 00:11:33,090
components to render different content and to change these styles depending on which device is viewing
109
00:11:33,150 --> 00:11:34,640
the content.
110
00:11:34,800 --> 00:11:42,270
This very simple system integrated with how we already had the application styles set up makes it very
111
00:11:42,270 --> 00:11:49,800
easy and you can see the ability to cascade and change styles as well as you could add completely new
112
00:11:49,800 --> 00:11:55,110
ones for different breakpoints if you wanted to change the properties entirely for different styles
113
00:11:56,240 --> 00:12:03,140
so this really opens up a lot of flexibility and you'll start to really see different options for how
114
00:12:03,140 --> 00:12:10,790
we can set this up and use this to our advantage to really create a comprehensive production design
115
00:12:11,840 --> 00:12:19,280
but obviously we don't just want to have a blank header up here we want to still have a navigation system
116
00:12:19,280 --> 00:12:26,330
for mobile we just don't want it to be that big set of tabs across the screen so instead of using the
117
00:12:26,360 --> 00:12:33,680
tabs on the mobile we're going to use a draw and we're gonna start taking look at what that is and what
118
00:12:33,680 --> 00:12:36,680
options we have for it in the next video.
13464
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.