1 00:00:00,950 --> 00:00:06,050 In the last section we got each video item to show what the title of the video it's representing an 2 00:00:06,110 --> 00:00:07,910 image next to it as well. 3 00:00:07,910 --> 00:00:10,490 Now this does not look too good as it stands right now. 4 00:00:10,490 --> 00:00:14,450 So in this video we're going to work on just a little bit of styling to get started. 5 00:00:14,450 --> 00:00:17,290 I'm going to pull open my semantic you eye docs. 6 00:00:17,450 --> 00:00:20,720 Remember you can get you're out semantic dash you white dot com. 7 00:00:20,840 --> 00:00:27,010 And then on the left hand menu under the elements section I'm going to find the link to list inside 8 00:00:27,080 --> 00:00:31,550 of the list documentation or then scroll down a little bit to this kind of a little get hub looking 9 00:00:31,560 --> 00:00:32,740 examplar right here. 10 00:00:32,770 --> 00:00:34,780 It We'll take a look at the source for it. 11 00:00:35,120 --> 00:00:36,590 So the wrapping div.. 12 00:00:36,590 --> 00:00:42,920 The div that contains each of these individual items needs to have a class of UI relaxed divided list 13 00:00:43,490 --> 00:00:47,520 and then each individual item has to have a class of item. 14 00:00:47,540 --> 00:00:53,750 So to translate this into our current component hierarchy we're essentially saying that our video list 15 00:00:53,750 --> 00:01:01,550 component has to have a div of UI relax divided lists and then each individual video item has to return 16 00:01:01,580 --> 00:01:06,700 an element that has a top level class name of item. 17 00:01:06,740 --> 00:01:12,630 So let's do that refactor right now and hopefully ill will fix up a little bit of styling. 18 00:01:12,630 --> 00:01:15,300 All right so I'll start at my video list right here. 19 00:01:15,330 --> 00:01:27,110 So here's the div that wraps every individual video item that needs to have a class name of UI relaxed 20 00:01:27,170 --> 00:01:35,560 divided list so relaxed invited list. 21 00:01:35,720 --> 00:01:41,360 And now I'll flip back over to my video item component and now the root div inside of here needs to 22 00:01:41,360 --> 00:01:44,810 have a class name of item. 23 00:01:44,930 --> 00:01:51,590 So I'll put on the video items div a class name of item art. 24 00:01:51,600 --> 00:01:53,720 So there's a couple of more class names we have to put in here. 25 00:01:53,760 --> 00:01:58,120 But let's at least test this as it stands and make sure that we see at least some difference inside 26 00:01:58,140 --> 00:01:59,320 of our application. 27 00:01:59,670 --> 00:02:01,320 So I'll do another search. 28 00:02:02,240 --> 00:02:05,090 And I at least see the little kind of dividing line right there. 29 00:02:05,120 --> 00:02:09,810 That tells me that we're at least on the right path but we still need to do a little bit more than this. 30 00:02:09,860 --> 00:02:15,800 So if I look at the documentation over here again on notice that I have a div inside there the first 31 00:02:15,870 --> 00:02:20,770 settlment is essentially going to be some image or icon that is going to be displayed to the left to 32 00:02:20,770 --> 00:02:21,620 on side. 33 00:02:21,650 --> 00:02:26,240 There's actually another example inside of this file where this page right here that shows us how to 34 00:02:26,240 --> 00:02:28,210 make use of an image on the left hand side. 35 00:02:28,220 --> 00:02:34,900 So let's scroll down a little bit and find that it's all go down to image right here. 36 00:02:34,960 --> 00:02:37,460 So a list item can contain an image. 37 00:02:37,510 --> 00:02:45,010 If I expand this list I'll see that the div with class of item can have an image with a class of UI 38 00:02:45,070 --> 00:02:46,590 avatar image. 39 00:02:46,600 --> 00:02:51,370 Now in this case the class name of Avatar that you see on there is to just get the image to appear as 40 00:02:51,370 --> 00:02:52,320 a circle. 41 00:02:52,330 --> 00:02:57,100 In our case we probably don't want to show these thumbnails as a circle so we are not going to use the 42 00:02:57,160 --> 00:02:59,340 Avatar class name. 43 00:02:59,430 --> 00:03:04,900 Now you'll also notice that the content inside of this list has a div wrapped around it with a class 44 00:03:04,960 --> 00:03:09,260 of content and then inside there is an element with a class of Hetter. 45 00:03:09,550 --> 00:03:14,170 So it's essentially implement all these class names into our video item and I think it's going to help 46 00:03:14,170 --> 00:03:15,870 our styling just a little bit. 47 00:03:16,670 --> 00:03:18,650 All right tobacco-free here. 48 00:03:18,810 --> 00:03:20,820 I'm going to first find my image tag. 49 00:03:21,510 --> 00:03:27,780 I'll add on a class name of UI image and remember I do not need Avatar because all that's going to do 50 00:03:27,780 --> 00:03:30,970 is turn the image into a circle. 51 00:03:31,090 --> 00:03:40,040 And now after that I'm going to add a div I'm going to put my video snippet title inside there and I 52 00:03:40,040 --> 00:03:47,410 will give that div a class name of content I'm going to wrap the title Inside of a another div inside 53 00:03:47,410 --> 00:03:47,770 of your 54 00:03:50,650 --> 00:03:54,970 and the inner div will get a class name of header like so. 55 00:03:54,970 --> 00:03:59,720 So now I've got a very similar structure here of class names to what you can see in this example. 56 00:03:59,800 --> 00:04:05,590 I've got the top level item the image a div with class content and then inside there in element with 57 00:04:05,590 --> 00:04:06,520 class name header. 58 00:04:06,520 --> 00:04:08,940 Now you will notice that they make use of an anchor tag. 59 00:04:09,040 --> 00:04:12,040 In this case we don't have anything clickable per say just yet. 60 00:04:12,040 --> 00:04:16,360 So we're going to render it simply as a div and even though we're using a different element the class 61 00:04:16,360 --> 00:04:18,840 name is what really provides the styling with semantic UI. 62 00:04:18,940 --> 00:04:24,190 So we can switch out the actual element type that we're using and just apply the same class name and 63 00:04:24,190 --> 00:04:26,620 it will still do the appropriate styling to it. 64 00:04:27,480 --> 00:04:27,730 OK. 65 00:04:27,750 --> 00:04:28,850 So here's my video item. 66 00:04:28,890 --> 00:04:35,200 I'm going to save this or then flip back over and we'll do a quick test so I'll search for buildings. 67 00:04:35,580 --> 00:04:39,540 All right so that definitely definitely looks better than what we had before. 68 00:04:39,720 --> 00:04:45,210 On the right hand side I've got my image I have the kind of nicely formatted because it's nice and bold 69 00:04:45,450 --> 00:04:46,850 header on the right hand side. 70 00:04:47,010 --> 00:04:51,600 But now the only issue is that the image is showing up to large and the text right here. 71 00:04:51,600 --> 00:04:55,890 I feel like would be a lot better if it was kind of centered next to the image. 72 00:04:55,950 --> 00:05:00,900 Now unfortunately to do those two changes to limit the size of the image and to center the text right 73 00:05:00,900 --> 00:05:03,530 here we can't use semantic UI for that. 74 00:05:03,570 --> 00:05:09,060 We're going to have to write just a little bit of custom CSSA rather than taking a pause So let's just 75 00:05:09,060 --> 00:05:13,960 get it done right now so we can have one video that contains all the styling stuff we have to do. 76 00:05:15,190 --> 00:05:15,440 All right. 77 00:05:15,470 --> 00:05:18,070 So we're going to write out a little bit of custom styling here. 78 00:05:18,080 --> 00:05:23,330 We could either add a custom style tag to the elements you display in here or we could create a separate 79 00:05:23,330 --> 00:05:24,540 CSSA file. 80 00:05:24,620 --> 00:05:30,080 In this case I'm going to decide to create a separate CSSA file so that we don't clutter up this component 81 00:05:30,080 --> 00:05:32,230 with a bunch of styling rules. 82 00:05:32,270 --> 00:05:37,920 So inside my component's directory I'm going to make a new file called Video item C Ss 83 00:05:41,430 --> 00:05:47,430 and then I'm going to flip back over to the video item and I will import that CSSA file at the very 84 00:05:47,430 --> 00:05:47,700 top. 85 00:05:47,730 --> 00:05:59,020 So I will say simply import slash video item that SS like so now I remember a rule that I like to use 86 00:05:59,050 --> 00:06:04,690 to find the root element that is returned from some component and give it a class name equal to the 87 00:06:04,690 --> 00:06:05,660 component name. 88 00:06:05,740 --> 00:06:11,590 And that just make sure that when I write some CSSA I can style just the GSX inside of your with some 89 00:06:11,590 --> 00:06:17,200 reasonable certainty rather than having some CSSA that it's going to accidentally be applied to all 90 00:06:17,200 --> 00:06:19,250 of the different elements inside my application. 91 00:06:19,330 --> 00:06:24,400 And there's definitely some rules on how effective this is especially when my component is nesting some 92 00:06:24,400 --> 00:06:27,960 other component but it's at least an approach or at least a start. 93 00:06:27,970 --> 00:06:34,800 So on my route div right here I'll add on a class name of video dash item like so it's now over inside 94 00:06:34,800 --> 00:06:40,940 of a video item that says I can target video dash item. 95 00:06:41,000 --> 00:06:41,230 All right. 96 00:06:41,240 --> 00:06:48,560 So inside of here we're going to put in just a little bit of custom CSSA to make sure that the title 97 00:06:48,560 --> 00:06:53,270 right here appears directly centered next to the image and to also make sure that the image is not too 98 00:06:53,270 --> 00:06:53,970 large. 99 00:06:54,040 --> 00:06:57,530 Now we're not going to focus too much on the actual styling that we're doing here because as I've said 100 00:06:57,530 --> 00:07:02,580 many times our focus in this course is react not quite so much the CSA side of things. 101 00:07:02,780 --> 00:07:07,150 So I can't put on a display of flex and I'm going to mark this thing as important. 102 00:07:07,340 --> 00:07:13,190 In general using an important rule is not super heavily advised but this is one case where again not 103 00:07:13,190 --> 00:07:15,940 super heavily worried about the CSSA here. 104 00:07:15,950 --> 00:07:18,570 I just want to get something that looks reasonable. 105 00:07:18,590 --> 00:07:23,380 So then after that I'll do a line items center also with important. 106 00:07:23,720 --> 00:07:27,160 And then I'll do a cursor of pointer and you'll see why we're putting that on. 107 00:07:27,170 --> 00:07:28,860 And just a second. 108 00:07:29,070 --> 00:07:34,320 Then after that I'll do a video dash item and I'm going to select the image that we are rendering inside 109 00:07:34,320 --> 00:07:35,310 of that component. 110 00:07:35,430 --> 00:07:39,990 And I'm going to give it a max width of one hundred and eighty pixels. 111 00:07:39,990 --> 00:07:42,830 So let's just get to make sure that the image doesn't appear too large. 112 00:07:43,780 --> 00:07:49,690 All right so if I now flip back over it appears that the text is correctly centered on the screen. 113 00:07:49,690 --> 00:07:56,170 And if I zoom out 200 percent I don't think that the image style was picked up correctly we might have 114 00:07:56,170 --> 00:07:59,700 to work on the selector we're using for that rule right there. 115 00:07:59,950 --> 00:08:01,370 Yeah I don't see any. 116 00:08:01,430 --> 00:08:02,850 Oh you know what do I put. 117 00:08:02,860 --> 00:08:04,640 Now I got video dash item. 118 00:08:04,780 --> 00:08:10,140 You only have to put on here is video dash item item like so let's try that out and I'll do a save. 119 00:08:10,180 --> 00:08:10,390 OK. 120 00:08:10,390 --> 00:08:11,560 That's much better. 121 00:08:11,560 --> 00:08:15,050 So the reason that was not initially working was that there was probably some other style. 122 00:08:15,050 --> 00:08:16,020 OK here it is right here. 123 00:08:16,030 --> 00:08:20,560 There's some other rule there was setting a max with property with a higher importance than the one 124 00:08:20,560 --> 00:08:21,830 that we were trying to assign. 125 00:08:21,970 --> 00:08:25,000 So by adding on a more specific selector right. 126 00:08:25,090 --> 00:08:26,320 Of item. 127 00:08:26,440 --> 00:08:29,110 Our rule was made more specific than the default one. 128 00:08:29,170 --> 00:08:32,380 And so our silent kicked in for the max width of the image. 129 00:08:32,700 --> 00:08:32,960 OK. 130 00:08:32,980 --> 00:08:37,420 So in total a little bit of styling craziness here but I think that we've now got a list that looks 131 00:08:37,450 --> 00:08:38,920 pretty darn good. 132 00:08:38,920 --> 00:08:41,930 So let's take another quick pause here and we'll continue in the next section.