Locked lesson.
About this lesson
Change the way Pins are displayed on the site.
Exercise files
Download this lesson’s related exercise files.
Styling Pins Views and Links.docx58.9 KB Styling Pins Views and Links - Solution.docx
59.2 KB
Quick reference
Styling Pins Views and Links
In this video we'll add pin links to our Navbar and style our Pins pages.
When to use
Now that we have new pins pages, we need to add links to them in our Navbar and style the actual pages with Bootstrap.
Instructions
To add a link to our "New pins" and "List Pins" pages, add these two links to your Navbar:
<li><%= link_to "List Pins", pins_path %></li>
<li><%= link_to "New Pin", new_pin_path %></li>
Next: Notice how the flash messages are posting twice. We need to remove the flash reference on several of our pin pages (show.html.erb and index.html.erb)
Remove this line of code where ever you find it on those pins pages:
<p id="notice"><%= notice %></p>
Hints & tips
- Add links to your new pins pages in your navbar
- Remember to remove <p id="notice"><%= notice %></p> from your show and index pins pages
- 00:04 In this video we're gonna add some links to our navbar for our new pin pages.
- 00:09 And we're also gonna go ahead and edit these pages to make them look a little bit
- 00:12 nicer and to make them look just like all of these pages.
- 00:15 So let's rake our routes.
- 00:18 And we're looking at these new pages we just created,
- 00:22 our pin pages, and the first one is this pins, this lists the pins.
- 00:27 So we want this to show up, open our navbar, and let's create a new link.
- 00:33 Use our embedded Ruby,
- 00:36 link_to "List Pin", pins_path.
- 00:43 Then close our tag, save this, hit reload and okay,
- 00:47 now we wanna add the new pins as well.
- 00:51 So that would be this new pin, and let's put that only if we're logged in.
- 00:56 So if we're logged in, li, embedded ruby,
- 01:01 link_to "New Pin" let's call it, and
- 01:05 that's new_pin_path, and then close our ruby tag,
- 01:11 save it, hit reload and we've got our New Pin.
- 01:16 Okay, so now we need to edit these and
- 01:18 make them look like the other forms that we have.
- 01:21 So just go to apps > views > and our pins folder.
- 01:26 Now actually, we're gonna go back to our devise folder and
- 01:28 just pick any of the files that you edited.
- 01:30 And we're just gonna copy this stuff from before and then go back to our pins.
- 01:36 Now, this is a little bit different.
- 01:38 If you check it out here, for instance, let's look at the new one.
- 01:41 To create a new pin they've rendered a partial.
- 01:43 The form itself is right here, see this underscore?
- 01:47 So to do that we.
- 01:51 Add that New Pin, and then close our div.
- 01:59 And we wanna put a footer on there too, so let's come back here and get our,
- 02:05 Our footer code, and let's put that right there.
- 02:13 Copy this and replace that.
- 02:18 Okay, so let's save this and take a look.
- 02:22 Close.
- 02:26 We need this closing div tag here.
- 02:31 So let's save that, hit Reload.
- 02:34 Okay, so looking good.
- 02:34 So now we need to just change the form itself.
- 02:37 So then we can come back to the forms partial,
- 02:40 and remember we changed all these fields to form-group.
- 02:45 And for all the actual input fields,
- 02:50 we added a class of form-control.
- 02:55 Save that.
- 02:57 Okay, now let's change the button.
- 03:00 Submit and give it a class
- 03:05 of btn btn-primary.
- 03:10 And this is just the same bootstrap code that we use earlier for a devise.
- 03:14 Okay, so that's good.
- 03:16 This is our new pin, we're gonna leave this the same for now.
- 03:20 If we create a pin, we're gonna keep this the same.
- 03:26 We will notice here this pin was created successful,
- 03:29 it's flashing up our flash message twice.
- 03:31 So let's take a quick look and see why that is.
- 03:33 We look through our pin's things, here is the show file.
- 03:37 And we see this notice here, now let's go ahead and delete that and save it.
- 03:43 Now let's go back and create a new pin, Submit.
- 03:49 Okay, so now that's gone and we're good to go.
- 03:54 Okay, so I'm gonna go ahead delete these two pins because we don't need them.
- 03:58 So the Listing Pins page has the same problem, so that would be the index page.
- 04:03 And yeah, there it is, right there at the top.
- 04:05 So go ahead and delete that, save it and let's try this again.
- 04:09 Okay, so now we're good to go.
- 04:11 So we've got links at the top to add new pins and show pins.
- 04:15 And we've fiddled around with this a little bit to make it look nicer.
- 04:19 And I think that's all for this video.
Lesson notes are only available for subscribers.