Welcome come back in this lesson we're going to focus on styling the show page.
So right now our show page looks like this.
We have a little naff bar up here with the buttons that don't do anything.
We have an H-1 with the name of the campground.
And we have an image and a description and we have a button to add a new comment and then all of the
comments are displayed.
Each one a little paragraph.
So our goal here is to make it look a little bit more like this.
So I have a sidebar over here.
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
content with the description.
Some text the title we're not going to do the ratings yet but then we'll also have a list of reviews
that will look like this.
Their own little container down there I'll have a little button to lever a few.
Generally it's a little bit more styled.
We can add this and that says how many reviews been left.
So that's what we're aiming for.
And to start we're going to just focus on the bootstrap grid.
Remember that the bootstrap grid is 12 units across.
We're going to designate three out of those 12 for this little side bar and then we're going to add
nine in for the main content.
Before we get started on actually changing anything I want to point out that I'm working in v 5 now
.
So if you want to follow along all these changes will be in V 5.
And the reason I'm doing that is that we're going to have to make a custom stylesheet.
We're going to have to serve the public directory and a few other things that are substantial changes
.
So I wanted to make a separate version.
But before we do that the first thing we're going to do is add a container around all of this bootstrap
container.
So in show that E.J. is going to add a div with class the container just like that and we'll be putting
everything inside of that.
And I'll start by adding the sidebar in and we'll just fill it with some dummy data like we have here
.
So DIVX and this needs to be class equals pro and in that row we're going to have another div where
a class is column medium three just like that.
And then inside of here we're going to add a paragraph and we're going to get this text that says Joachim
.
So that's a paragraph where the class is lead and then we're just going to put you up camp for now we
will be changing this eventually.
But yeah camp and then to add those little list items we'll do a div with the class is list dash group
and then in here we're going to add a bunch of allies in each ally has a class of list group item.
And inside we'll just add some dummy data and we'll just call it info 1 and then I'm going to duplicate
this info to info 3.
And then let's see what that looks like for now.
So for refresh the page we have a sidebar here and I'll make one of these items selected to start.
And all we have to do is add an active right there.
If we are fresh We now see that one of them is active.
And this is really just a placeholder to have something there so we don't have a lot of whitespace but
again we will be adding real data there and a map eventually.
And just to point it out the map will go right here inside of this medium three column eventually but
not just yet.
OK so that's a side bar.
Now we're going to add in the main content.
So we need another column and this one is the class column medium 9.
And instead of there we need to have the H-1 we need to have the image but before all of that you'll
notice it's actually all in one of these thumbnails just like we have on the homepage.
Each one of these is a thumbnail.
We're going to do the same thing around the entire image in the title and the comments and all of that
.
So we're going to add a div and that div will have class equals thumbnail.
And then inside that we're going to add the image and I'll still the image we've already written and
just place it right in there.
So that's going to be our campground image.
And then we also want to add a class to that that bootstrapped gives us which is image Dasch responsive
.
There we go.
Save that.
And if we take a look at what we have now and refresh we at least have the image and the content in
the right place.
We have a problem where this isn't taking up though with that we want it to.
I want that to go all the way across and we'll have to handle that with some custom C Ss at the end
.
And now we'll go back and add this in here where we have the name of the camp ground and then the price
per night which we don't actually have in the database.
So we'll just hardcoded.
So let's do that now.
And that's another div and this one has a class of caption dash full.
And then inside of there we're going to add an H for.
And we're going to pull this over to the right and we do class equals pull dash right and then whatever
we put in here will be the price.
And I'll just start with $9 a night again this will be coming from the database eventually.
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
which I'll just copy over here on the left hand side.
So we'll put it right below and if we don't add pull right it will automatically go over to the left
although that's bigger than what I had in mind and I'll turn that into a smaller H for and I'm going
to add an anchor tag inside of there just like that and put the campground name inside the anchor tag
.
And the idea behind that is that eventually I go back.
This should be a link to the actual campground or the Park Service page where we can go to book something
.
For now it's just the link to nowhere.
OK.
So we have that in.
We have a price.
Now let's add the description back in.
So that will just be a paragraph tag and then we'll add in our description which is campground description
right there.
And it's going to be a little bit underwhelming because we don't have a large subscription right now
so we might want to do is go and see the database with some Lorem Ipsum and I'm just going to steal
this and I'll copy that and go back to the seed file.
And then instead of our seed's file and I'll change the description on all three of them.
Just make it the same thing rather than blah blah blah.
We now have a longer bit of Lorem Ipsum and we'll save.
And then to make this go into effect we have to restart the server because that will receive the database
.
And then let's go back and turn to the campgrounds page.
We have three campgrounds.
However they now have a more legitimate description some text.
Okay great.
So let's take a look now what we need to work on.
There's a few minor things.
We'll leave the stars in the review count alone for now and we'll move on down to the comments.
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
is add in a well give class well inside of the column medium nine because we want it to be in the same
column here.
Taking up the same amount of space.
So to do that just go right here after the thumbnail so this and caption right here this is the thumbnail
.
So right they're going to add div class.
Equals well.
And then inside of that going to open it up and this is where it will do the looping through to add
the comments.
But I'm going to start by adding in the button the lever of you button and we'll just do a simple div
and this div will have a class of text dash right.
And then inside of there we're going to add our anchor tag here that we already have to create a new
comment.
Just put that here.
It's a long one but remember it's an anchor tag that has a class of Button button success that makes
it green.
But the ref is a really long part.
It's going to campgrounds slash the campground ID slash comments slash new but save and refresh.
OK.
So you can see we now have the well that gives us the nice gray background in the border.
This is where we're going to add in the comments.
So we need to do next is loop through the comments and we already have that done.
But rather than just making a paragraph for each one we're actually going to make a separate row.
So I'll show you what that looks like when it copy this or cut it.
And we can delete this extra paragraph and we're going to put that right after the text right.
And let's do this properly.
So we have our loop and then we're going to loop through each comment and we're going to add inside
of here a div class row for each one div class equals row.
And then inside of each We're going to add another div class equals column medium 12 and save that.
And if we take a look at what we have here we end up with the user name email slash username which we
call the author.
And then on the right there's this time 10 days ago which will just hard code for now and then the actual
comment comes next.
So to make that work we need to do some text and then do something on the right pull right text right
and then we need to add a paragraph in for the actual comment itself.
So let's try that and go in here.
We have our column medium 12.
And inside of that we're going to start with just adding the comment author.
So let's just add that right there.
And then below that we're going to add in a span and this will be on the right.
So we'll add classical pull right.
And then in here we'll just add ten days ago for now.
Well just hard code that in.
And then the last thing they want to do is actually show the comment text.
So I'm going to get this comment text here and we'll put that inside its own paragraph which we already
have here just like that except we want to move it inside the column here just like we have the author
and the 10 days go.
We want them to be in the same column together and now but save and go back.
See what we get.
All right.
So we have one comment.
That's it.
But you can see that we have a button add a new comment.
Make sure it works.
And the comments are displayed here.
We're missing the rating.
So it looks a little bit weird but that's fine for now.
What we might want to do is go add one or two more comments.
So go back here and let's just use some more lorem ipsum.
So I'm just going to copy parts of this and add them in as comments.
Just use some of that and the author here will be camping.
Grandpa.
Submit.
OK.
So we're now getting our comments here just fine.
That's working.
I do have some space that we want to add.
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
on the screen cast.
There's a really faint line that add some spacing in and all we need to do to make that work is add
an h r.
So right after this text right which is the button we just add in a horizontal rule and if we refresh
we now have some space there.
You have a button and we have all our comments being displayed in the short term.
Why don't we build the user name.
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
a strong tag with the author and they'll make it a little easier to see.
There we go.
Still not great but good enough for now.
So that's actually all the bootstrap that we need to do for now.
But we're still not done.
If we go back and take a look at the finished ish version you'll see that the image takes up the entire
thumbnail and are just not doing that.
Even though I made a point to use the exact same image it's not about the actual image itself.
The problem comes down to our styling.
And what we want to do is go in and tell this image to take up 100 percent with the container.
So I'll show you we can just inspect it and this is a great use for the inspector here.
We can select it here and then over here we can add in a style with 100 percent.
And there we go.
So that's one thing that we'll want to do.
There's still a very slight difference which is there's a little space right there that we don't have
on this one.
And to get rid of that all we want to do is go into the actual thumbnail and select the thumbnail which
is right here and we're going to give that padding zero.
And now if we take a look it looks the way that we want it to look or almost looks that way when to
look.
We're going to add some spacing here as well.
You can see there's some spacing done here and we can fix that right now.
Also by inspecting it and remember we're not actually fixing it we're just testing it out in the browser
and then we'll go back and actually make these changes in our own style sheet.
So what we want to do is add in a little bit of padding on the caption foal which is this box here.
And the Padam we want is on left right top and bottom and it's going to be nine or 10 pixels.
So we'll just do padding nine x.
And there we go.
We end up with a nice spacing there.
It's not what we want to do is take that styling and actually added into a stylesheet that we're going
to write