1
00:00:00,310 --> 00:00:04,590
Welcome come back in this lesson we're going to focus on styling the show page.

2
00:00:04,620 --> 00:00:07,080
So right now our show page looks like this.

3
00:00:07,230 --> 00:00:10,710
We have a little naff bar up here with the buttons that don't do anything.

4
00:00:10,710 --> 00:00:12,910
We have an H-1 with the name of the campground.

5
00:00:13,190 --> 00:00:18,060
And we have an image and a description and we have a button to add a new comment and then all of the

6
00:00:18,060 --> 00:00:19,290
comments are displayed.

7
00:00:19,410 --> 00:00:21,900
Each one a little paragraph.

8
00:00:21,900 --> 00:00:25,230
So our goal here is to make it look a little bit more like this.

9
00:00:25,230 --> 00:00:27,190
So I have a sidebar over here.

10
00:00:27,270 --> 00:00:31,950
We're not going to have the map just yet but we'll make room for the map and then we'll have our main

11
00:00:31,950 --> 00:00:34,250
content with the description.

12
00:00:34,380 --> 00:00:40,020
Some text the title we're not going to do the ratings yet but then we'll also have a list of reviews

13
00:00:40,020 --> 00:00:41,350
that will look like this.

14
00:00:41,430 --> 00:00:45,360
Their own little container down there I'll have a little button to lever a few.

15
00:00:45,360 --> 00:00:47,240
Generally it's a little bit more styled.

16
00:00:47,310 --> 00:00:50,210
We can add this and that says how many reviews been left.

17
00:00:50,280 --> 00:00:51,540
So that's what we're aiming for.

18
00:00:51,720 --> 00:00:55,170
And to start we're going to just focus on the bootstrap grid.

19
00:00:55,350 --> 00:00:58,500
Remember that the bootstrap grid is 12 units across.

20
00:00:58,560 --> 00:01:03,540
We're going to designate three out of those 12 for this little side bar and then we're going to add

21
00:01:03,540 --> 00:01:05,500
nine in for the main content.

22
00:01:05,760 --> 00:01:10,200
Before we get started on actually changing anything I want to point out that I'm working in v 5 now

23
00:01:10,200 --> 00:01:10,550
.

24
00:01:10,680 --> 00:01:13,710
So if you want to follow along all these changes will be in V 5.

25
00:01:13,800 --> 00:01:17,280
And the reason I'm doing that is that we're going to have to make a custom stylesheet.

26
00:01:17,340 --> 00:01:21,780
We're going to have to serve the public directory and a few other things that are substantial changes

27
00:01:21,790 --> 00:01:21,910
.

28
00:01:22,020 --> 00:01:24,020
So I wanted to make a separate version.

29
00:01:24,270 --> 00:01:29,070
But before we do that the first thing we're going to do is add a container around all of this bootstrap

30
00:01:29,070 --> 00:01:30,020
container.

31
00:01:30,150 --> 00:01:38,850
So in show that E.J. is going to add a div with class the container just like that and we'll be putting

32
00:01:38,850 --> 00:01:40,290
everything inside of that.

33
00:01:40,290 --> 00:01:44,850
And I'll start by adding the sidebar in and we'll just fill it with some dummy data like we have here

34
00:01:44,890 --> 00:01:45,270
.

35
00:01:45,660 --> 00:01:55,120
So DIVX and this needs to be class equals pro and in that row we're going to have another div where

36
00:01:55,120 --> 00:02:00,920
a class is column medium three just like that.

37
00:02:01,080 --> 00:02:06,790
And then inside of here we're going to add a paragraph and we're going to get this text that says Joachim

38
00:02:06,910 --> 00:02:07,670
.

39
00:02:08,460 --> 00:02:15,960
So that's a paragraph where the class is lead and then we're just going to put you up camp for now we

40
00:02:15,960 --> 00:02:17,640
will be changing this eventually.

41
00:02:17,640 --> 00:02:24,870
But yeah camp and then to add those little list items we'll do a div with the class is list dash group

42
00:02:25,950 --> 00:02:34,670
and then in here we're going to add a bunch of allies in each ally has a class of list group item.

43
00:02:35,610 --> 00:02:41,490
And inside we'll just add some dummy data and we'll just call it info 1 and then I'm going to duplicate

44
00:02:41,490 --> 00:02:44,530
this info to info 3.

45
00:02:44,610 --> 00:02:46,340
And then let's see what that looks like for now.

46
00:02:46,500 --> 00:02:52,480
So for refresh the page we have a sidebar here and I'll make one of these items selected to start.

47
00:02:52,830 --> 00:02:55,480
And all we have to do is add an active right there.

48
00:02:55,650 --> 00:02:58,900
If we are fresh We now see that one of them is active.

49
00:02:59,460 --> 00:03:03,900
And this is really just a placeholder to have something there so we don't have a lot of whitespace but

50
00:03:03,900 --> 00:03:07,680
again we will be adding real data there and a map eventually.

51
00:03:07,770 --> 00:03:13,710
And just to point it out the map will go right here inside of this medium three column eventually but

52
00:03:13,710 --> 00:03:14,590
not just yet.

53
00:03:14,940 --> 00:03:16,560
OK so that's a side bar.

54
00:03:16,560 --> 00:03:19,050
Now we're going to add in the main content.

55
00:03:19,290 --> 00:03:28,670
So we need another column and this one is the class column medium 9.

56
00:03:29,130 --> 00:03:36,120
And instead of there we need to have the H-1 we need to have the image but before all of that you'll

57
00:03:36,120 --> 00:03:41,820
notice it's actually all in one of these thumbnails just like we have on the homepage.

58
00:03:41,940 --> 00:03:44,150
Each one of these is a thumbnail.

59
00:03:44,190 --> 00:03:49,560
We're going to do the same thing around the entire image in the title and the comments and all of that

60
00:03:49,560 --> 00:03:50,160
.

61
00:03:50,220 --> 00:03:56,930
So we're going to add a div and that div will have class equals thumbnail.

62
00:03:58,110 --> 00:04:04,620
And then inside that we're going to add the image and I'll still the image we've already written and

63
00:04:04,620 --> 00:04:06,140
just place it right in there.

64
00:04:06,180 --> 00:04:08,260
So that's going to be our campground image.

65
00:04:08,490 --> 00:04:17,250
And then we also want to add a class to that that bootstrapped gives us which is image Dasch responsive

66
00:04:17,250 --> 00:04:19,500
.

67
00:04:19,560 --> 00:04:20,420
There we go.

68
00:04:20,490 --> 00:04:23,270
Save that.

69
00:04:23,400 --> 00:04:28,470
And if we take a look at what we have now and refresh we at least have the image and the content in

70
00:04:28,470 --> 00:04:29,570
the right place.

71
00:04:29,610 --> 00:04:33,280
We have a problem where this isn't taking up though with that we want it to.

72
00:04:33,320 --> 00:04:37,950
I want that to go all the way across and we'll have to handle that with some custom C Ss at the end

73
00:04:37,950 --> 00:04:38,660
.

74
00:04:38,970 --> 00:04:44,040
And now we'll go back and add this in here where we have the name of the camp ground and then the price

75
00:04:44,040 --> 00:04:46,360
per night which we don't actually have in the database.

76
00:04:46,440 --> 00:04:47,830
So we'll just hardcoded.

77
00:04:48,150 --> 00:04:49,400
So let's do that now.

78
00:04:49,860 --> 00:04:57,250
And that's another div and this one has a class of caption dash full.

79
00:04:57,570 --> 00:05:01,190
And then inside of there we're going to add an H for.

80
00:05:01,620 --> 00:05:07,980
And we're going to pull this over to the right and we do class equals pull dash right and then whatever

81
00:05:07,980 --> 00:05:09,540
we put in here will be the price.

82
00:05:09,750 --> 00:05:15,300
And I'll just start with $9 a night again this will be coming from the database eventually.

83
00:05:15,540 --> 00:05:22,080
If we are fresh Now we get $9 a night on the right side and then we want to get the name of the campground

84
00:05:22,260 --> 00:05:25,610
which I'll just copy over here on the left hand side.

85
00:05:25,650 --> 00:05:30,870
So we'll put it right below and if we don't add pull right it will automatically go over to the left

86
00:05:31,080 --> 00:05:38,400
although that's bigger than what I had in mind and I'll turn that into a smaller H for and I'm going

87
00:05:38,400 --> 00:05:44,490
to add an anchor tag inside of there just like that and put the campground name inside the anchor tag

88
00:05:44,500 --> 00:05:45,460
.

89
00:05:46,500 --> 00:05:50,370
And the idea behind that is that eventually I go back.

90
00:05:50,380 --> 00:05:55,740
This should be a link to the actual campground or the Park Service page where we can go to book something

91
00:05:55,750 --> 00:05:56,040
.

92
00:05:56,130 --> 00:05:58,050
For now it's just the link to nowhere.

93
00:05:58,410 --> 00:05:59,020
OK.

94
00:05:59,160 --> 00:06:00,350
So we have that in.

95
00:06:00,360 --> 00:06:01,370
We have a price.

96
00:06:01,470 --> 00:06:03,660
Now let's add the description back in.

97
00:06:04,230 --> 00:06:10,950
So that will just be a paragraph tag and then we'll add in our description which is campground description

98
00:06:13,050 --> 00:06:14,060
right there.

99
00:06:14,640 --> 00:06:20,190
And it's going to be a little bit underwhelming because we don't have a large subscription right now

100
00:06:20,790 --> 00:06:26,100
so we might want to do is go and see the database with some Lorem Ipsum and I'm just going to steal

101
00:06:26,100 --> 00:06:29,750
this and I'll copy that and go back to the seed file.

102
00:06:29,940 --> 00:06:34,700
And then instead of our seed's file and I'll change the description on all three of them.

103
00:06:34,720 --> 00:06:37,990
Just make it the same thing rather than blah blah blah.

104
00:06:38,130 --> 00:06:42,380
We now have a longer bit of Lorem Ipsum and we'll save.

105
00:06:42,660 --> 00:06:48,070
And then to make this go into effect we have to restart the server because that will receive the database

106
00:06:48,060 --> 00:06:48,430
.

107
00:06:48,720 --> 00:06:52,340
And then let's go back and turn to the campgrounds page.

108
00:06:52,440 --> 00:06:54,090
We have three campgrounds.

109
00:06:54,090 --> 00:06:58,330
However they now have a more legitimate description some text.

110
00:06:58,680 --> 00:07:00,050
Okay great.

111
00:07:00,060 --> 00:07:02,240
So let's take a look now what we need to work on.

112
00:07:02,250 --> 00:07:03,730
There's a few minor things.

113
00:07:03,880 --> 00:07:08,580
We'll leave the stars in the review count alone for now and we'll move on down to the comments.

114
00:07:08,970 --> 00:07:15,150
Let's go back to the show that E.J. Yes file we can close out of seeds for now what we're going to do

115
00:07:15,150 --> 00:07:21,660
is add in a well give class well inside of the column medium nine because we want it to be in the same

116
00:07:21,900 --> 00:07:22,630
column here.

117
00:07:22,680 --> 00:07:24,350
Taking up the same amount of space.

118
00:07:24,750 --> 00:07:31,440
So to do that just go right here after the thumbnail so this and caption right here this is the thumbnail

119
00:07:31,440 --> 00:07:31,800
.

120
00:07:31,880 --> 00:07:34,770
So right they're going to add div class.

121
00:07:34,870 --> 00:07:37,060
Equals well.

122
00:07:37,410 --> 00:07:42,870
And then inside of that going to open it up and this is where it will do the looping through to add

123
00:07:42,880 --> 00:07:43,560
the comments.

124
00:07:43,680 --> 00:07:49,600
But I'm going to start by adding in the button the lever of you button and we'll just do a simple div

125
00:07:50,750 --> 00:07:55,150
and this div will have a class of text dash right.

126
00:07:55,320 --> 00:08:01,760
And then inside of there we're going to add our anchor tag here that we already have to create a new

127
00:08:01,770 --> 00:08:02,940
comment.

128
00:08:03,300 --> 00:08:05,090
Just put that here.

129
00:08:05,820 --> 00:08:11,520
It's a long one but remember it's an anchor tag that has a class of Button button success that makes

130
00:08:11,520 --> 00:08:12,350
it green.

131
00:08:12,490 --> 00:08:14,620
But the ref is a really long part.

132
00:08:14,790 --> 00:08:22,290
It's going to campgrounds slash the campground ID slash comments slash new but save and refresh.

133
00:08:22,680 --> 00:08:23,030
OK.

134
00:08:23,040 --> 00:08:27,750
So you can see we now have the well that gives us the nice gray background in the border.

135
00:08:27,750 --> 00:08:29,960
This is where we're going to add in the comments.

136
00:08:30,120 --> 00:08:34,170
So we need to do next is loop through the comments and we already have that done.

137
00:08:34,170 --> 00:08:38,500
But rather than just making a paragraph for each one we're actually going to make a separate row.

138
00:08:38,760 --> 00:08:42,880
So I'll show you what that looks like when it copy this or cut it.

139
00:08:43,020 --> 00:08:49,140
And we can delete this extra paragraph and we're going to put that right after the text right.

140
00:08:49,440 --> 00:08:51,850
And let's do this properly.

141
00:08:52,090 --> 00:08:57,280
So we have our loop and then we're going to loop through each comment and we're going to add inside

142
00:08:57,270 --> 00:09:03,830
of here a div class row for each one div class equals row.

143
00:09:04,750 --> 00:09:14,040
And then inside of each We're going to add another div class equals column medium 12 and save that.

144
00:09:14,110 --> 00:09:20,820
And if we take a look at what we have here we end up with the user name email slash username which we

145
00:09:20,830 --> 00:09:21,850
call the author.

146
00:09:22,090 --> 00:09:29,070
And then on the right there's this time 10 days ago which will just hard code for now and then the actual

147
00:09:29,080 --> 00:09:30,760
comment comes next.

148
00:09:30,750 --> 00:09:36,790
So to make that work we need to do some text and then do something on the right pull right text right

149
00:09:37,120 --> 00:09:41,350
and then we need to add a paragraph in for the actual comment itself.

150
00:09:41,350 --> 00:09:43,890
So let's try that and go in here.

151
00:09:43,950 --> 00:09:45,900
We have our column medium 12.

152
00:09:46,290 --> 00:09:49,800
And inside of that we're going to start with just adding the comment author.

153
00:09:50,130 --> 00:09:51,770
So let's just add that right there.

154
00:09:52,200 --> 00:09:57,520
And then below that we're going to add in a span and this will be on the right.

155
00:09:57,580 --> 00:09:59,770
So we'll add classical pull right.

156
00:09:59,970 --> 00:10:03,340
And then in here we'll just add ten days ago for now.

157
00:10:03,510 --> 00:10:05,300
Well just hard code that in.

158
00:10:05,400 --> 00:10:09,520
And then the last thing they want to do is actually show the comment text.

159
00:10:09,680 --> 00:10:15,000
So I'm going to get this comment text here and we'll put that inside its own paragraph which we already

160
00:10:15,000 --> 00:10:21,340
have here just like that except we want to move it inside the column here just like we have the author

161
00:10:21,660 --> 00:10:22,770
and the 10 days go.

162
00:10:22,770 --> 00:10:29,680
We want them to be in the same column together and now but save and go back.

163
00:10:29,700 --> 00:10:31,340
See what we get.

164
00:10:31,360 --> 00:10:31,980
All right.

165
00:10:31,980 --> 00:10:33,050
So we have one comment.

166
00:10:33,070 --> 00:10:33,930
That's it.

167
00:10:33,930 --> 00:10:36,580
But you can see that we have a button add a new comment.

168
00:10:36,580 --> 00:10:37,980
Make sure it works.

169
00:10:38,770 --> 00:10:40,450
And the comments are displayed here.

170
00:10:40,470 --> 00:10:41,600
We're missing the rating.

171
00:10:41,670 --> 00:10:44,460
So it looks a little bit weird but that's fine for now.

172
00:10:44,700 --> 00:10:48,460
What we might want to do is go add one or two more comments.

173
00:10:48,450 --> 00:10:52,600
So go back here and let's just use some more lorem ipsum.

174
00:10:52,600 --> 00:10:57,100
So I'm just going to copy parts of this and add them in as comments.

175
00:10:57,270 --> 00:11:02,440
Just use some of that and the author here will be camping.

176
00:11:02,520 --> 00:11:03,600
Grandpa.

177
00:11:03,820 --> 00:11:05,000
Submit.

178
00:11:05,720 --> 00:11:06,090
OK.

179
00:11:06,100 --> 00:11:08,420
So we're now getting our comments here just fine.

180
00:11:08,430 --> 00:11:09,550
That's working.

181
00:11:09,540 --> 00:11:11,610
I do have some space that we want to add.

182
00:11:11,610 --> 00:11:16,560
If you take a look at what we have here there is a really faint line I don't know if you'll show up

183
00:11:16,570 --> 00:11:17,520
on the screen cast.

184
00:11:17,520 --> 00:11:22,500
There's a really faint line that add some spacing in and all we need to do to make that work is add

185
00:11:22,530 --> 00:11:23,890
an h r.

186
00:11:24,370 --> 00:11:31,260
So right after this text right which is the button we just add in a horizontal rule and if we refresh

187
00:11:31,770 --> 00:11:33,210
we now have some space there.

188
00:11:33,260 --> 00:11:38,680
You have a button and we have all our comments being displayed in the short term.

189
00:11:38,730 --> 00:11:40,310
Why don't we build the user name.

190
00:11:40,620 --> 00:11:46,770
So we'll go back here and we already had this and they got rid of it but we'll go back and added again

191
00:11:46,890 --> 00:11:52,950
a strong tag with the author and they'll make it a little easier to see.

192
00:11:52,950 --> 00:11:53,770
There we go.

193
00:11:53,830 --> 00:11:57,470
Still not great but good enough for now.

194
00:11:57,540 --> 00:12:00,060
So that's actually all the bootstrap that we need to do for now.

195
00:12:00,240 --> 00:12:01,390
But we're still not done.

196
00:12:01,470 --> 00:12:07,680
If we go back and take a look at the finished ish version you'll see that the image takes up the entire

197
00:12:07,680 --> 00:12:09,900
thumbnail and are just not doing that.

198
00:12:10,050 --> 00:12:15,000
Even though I made a point to use the exact same image it's not about the actual image itself.

199
00:12:15,120 --> 00:12:16,820
The problem comes down to our styling.

200
00:12:17,080 --> 00:12:22,890
And what we want to do is go in and tell this image to take up 100 percent with the container.

201
00:12:23,160 --> 00:12:29,150
So I'll show you we can just inspect it and this is a great use for the inspector here.

202
00:12:29,350 --> 00:12:36,260
We can select it here and then over here we can add in a style with 100 percent.

203
00:12:36,270 --> 00:12:37,060
And there we go.

204
00:12:37,120 --> 00:12:39,540
So that's one thing that we'll want to do.

205
00:12:39,610 --> 00:12:44,400
There's still a very slight difference which is there's a little space right there that we don't have

206
00:12:44,400 --> 00:12:45,320
on this one.

207
00:12:45,470 --> 00:12:50,980
And to get rid of that all we want to do is go into the actual thumbnail and select the thumbnail which

208
00:12:50,970 --> 00:12:56,670
is right here and we're going to give that padding zero.

209
00:12:57,580 --> 00:13:02,230
And now if we take a look it looks the way that we want it to look or almost looks that way when to

210
00:13:02,220 --> 00:13:02,700
look.

211
00:13:02,730 --> 00:13:05,350
We're going to add some spacing here as well.

212
00:13:05,350 --> 00:13:09,740
You can see there's some spacing done here and we can fix that right now.

213
00:13:09,820 --> 00:13:15,180
Also by inspecting it and remember we're not actually fixing it we're just testing it out in the browser

214
00:13:15,390 --> 00:13:19,560
and then we'll go back and actually make these changes in our own style sheet.

215
00:13:19,570 --> 00:13:24,760
So what we want to do is add in a little bit of padding on the caption foal which is this box here.

216
00:13:24,990 --> 00:13:31,220
And the Padam we want is on left right top and bottom and it's going to be nine or 10 pixels.

217
00:13:31,230 --> 00:13:35,370
So we'll just do padding nine x.

218
00:13:35,760 --> 00:13:36,510
And there we go.

219
00:13:36,540 --> 00:13:38,240
We end up with a nice spacing there.

220
00:13:38,520 --> 00:13:43,090
It's not what we want to do is take that styling and actually added into a stylesheet that we're going

221
00:13:43,090 --> 00:13:43,450
to write