Locked lesson.
About this lesson
Modifying how our Pins Page looks.
Exercise files
Download this lesson’s related exercise files.
Styling The Pins Page.docx59.2 KB Styling the Pins Page - Solution.docx
59.9 KB
Quick reference
Styling the Pins Page
In this video we'll style our "Listing Pins" index.html.erb page.
When to use
It's time to make our listing pins page look a little better. We'll also show or hide links based on if the current user is the pin owner.
Instructions
First: Open your app/views/pins/index.html.erb file and remove the "Listing Pins" header tab and all of the HTML Table references
Next: Remove the "Show" page link
Next: Turn the image_tag into a link_to tag with this code:
<%= link_to (image_tag pin.image.url(:thumb)), pin %>
Next: Change the image size from thumb to medium:
<%= link_to (image_tag pin.image.url(:medium)), pin %>
Next: Move the Edit and Destroy links to their own line using a <br/> tag
Next: Use a Ruby IF Statement to only show the Edit and Destroy Links if the current user is the correct pin user.
<% if pin.user == current_user %>
<%= link_to 'Edit', edit_pin_path(pin) %>
<%= link_to 'Destroy', pin, method: :delete, data: { confirm: 'Are you sure?' } %>
<% end %>
Next: Edit our "Show" page to only show the Edit link if the current user is the correct pin user
<% if @pin.user == current_user %>
<%= link_to 'Edit', edit_pin_path(@pin) %> |
<% end %>
Next: Add the user's Name to our Listing Pins page under the Description:
<%= pin.user.name %><br/>
Hints & tips
- Have some fun styling your pins page
- Change the image to make it clickable by turning the image tag into a link tag
- Only show Show and Destroy Links if the current user is the correct pin user using a Ruby IF Statement
- 00:04 We've got most of the functionality built in.
- 00:06 Now let's come through here and work on how this looks a little bit.
- 00:09 This is our Listing Pins page and this doesn't look great, so
- 00:12 let's play around with this.
- 00:14 Let's head over to our app > views > pins > index.html.
- 00:18 And right off the bat, I'm just gonna get rid of that.
- 00:20 And look through here, all this table stuff,
- 00:23 we don't really wanna use any of that.
- 00:26 So I'm just gonna go through here and delete all the table stuff.
- 00:31 This tr, that's a table thing, so is that.
- 00:34 And then just delete all these tds.
- 00:37 That's all table stuff.
- 00:38 And the closing td tags.
- 00:41 Okay, so let's save this and
- 00:45 hit reload and see what we got.
- 00:50 Okay, well, not great, so what else can we do here?
- 00:53 Well, when we click on this Show thing, we don't really need that link.
- 00:56 I'd rather be able to click on that image itself, so how do we do that?
- 00:59 Let's go to the image tag, and we're gonna turn this into a link_to tag.
- 01:03 So we do that, remember, the link_to format is link_to,
- 01:07 the word you want to show up, and then the path.
- 01:09 So now, we're gonna do the same thing, but it's gonna be link_to.
- 01:14 Instead of text here, this whole thing is gonna be the text,
- 01:19 so we need to wrap it in parenthesis, and then the path is just pin.
- 01:25 And I'm getting that just because the show path is the same thing right there.
- 01:29 So save that, hit reload.
- 01:33 You know what I did, this needs to go like that.
- 01:38 Okay, save it, reload.
- 01:40 Okay, now if we click on this, that works.
- 01:43 Let's also change this from thumb back to medium,
- 01:45 just kinda wanted to show you thumb, but we don't wanna keep it like that.
- 01:51 Alrighty, so next, I think we need add a couple more there,
- 01:57 let's give this a line break, save that.
- 02:02 We can get rid of the show link, 'cause we don't need that any more, so
- 02:06 I'll just delete that.
- 02:08 Save and reload.
- 02:10 Next, I don't want these here unless I own this pin.
- 02:14 So just anyone that's coming to visit the site, we don't want them to even see these
- 02:18 links unless they're the one that posted this pin.
- 02:21 So if you check out our pins_controller, we had this before action,
- 02:25 this correct user.
- 02:26 And if we look at it, inside it, we had this current user thing and
- 02:30 that's a Devise thing, it's in the Devise help file.
- 02:33 You can read about it if you want.
- 02:34 But we're gonna use that current user to test against whether the person viewing
- 02:39 the pin is the current user or not.
- 02:41 We did this before in our nav bar, create a little if statement.
- 02:44 If pin.user equals current_user,
- 02:52 close our tag.
- 02:56 And I'm just gonna indent these.
- 02:58 And then we need always to end our if statement, save this.
- 03:04 So now If we hit Reload, okay that works.
- 03:07 Now if I log out and click the Listing Pins page, I'm not logged in, so
- 03:11 I'm not the pin user, and so now those links have disappeared.
- 03:14 If I log back in, okay, so that's pretty cool.
- 03:21 So now if we click on it, the edit button is still there.
- 03:25 So let's copy this, and open up our show page and
- 03:30 do the same thing for that.
- 03:39 And save it, reload.
- 03:41 You know what?
- 03:44 There is no for loop, so we need to add an incidence variable at sign.
- 03:48 So if we save that, come back, okay, now that works.
- 03:51 Well, let's log out and make sure.
- 03:53 List pins, click on it, all right, the edit thing is not there.
- 03:57 So things are starting to look a little bit better.
- 03:59 Actually, let's put the name here as well.
- 04:03 So if we go, let's see, set pin.user.name, this is the show file.
- 04:09 If we open the index file, and, let's see, where should we put this?
- 04:14 Right under the description.
- 04:15 But again, we're inside this loop, so we don't need to add the at symbol.
- 04:20 Well, let's put a line break after.
- 04:22 Save this, come back, hit reload.
- 04:24 Cool.
- 04:25 And if you want, you can put Name.
- 04:31 I think it's sort of redundant.
- 04:34 It's obviously somebody's name, but whatever you want to do.
- 04:37 Okay, so I think this is starting to look pretty good And in the next video,
- 04:41 we'll start to do some more complicated JavaScript-type styling, to get it to look
- 04:46 more like this, and to make the images move around like this when we resize.
Lesson notes are only available for subscribers.