Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Adding the navigation

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 The next major design element
0:01 has got to be the navigation.
0:03 Up here, we just have home, except for here
0:05 we have a whole nice little navigation.
0:08 This was the home that I left into the nav
0:10 and it works, but it's not this.
0:13 So, we're actually going to need a couple of these graphics.
0:15 And, I'm just going to copy them over right there.
0:18 So, we've got these cubes and whatnot.
0:23 So, that's going to give us that little cube
0:24 and then some others that are used elsewhere.
0:27 I want to put the nav up here
0:29 and this is going to come from Bootstrap.
0:30 And, just let me tell you, the Bootstrap nav is not obvious
0:34 how it's put together and it's super touchy
0:37 in terms of styles and IDs and things like that.
0:40 So, I'm just going to copy this over.
0:42 But, the way I got it was I went
0:44 to the Bootstrap documentation and I just said
0:47 I've got a little example.
0:48 There's even a button to say, Click to copy this
0:50 and paste it into your site.
0:52 So, I'm going to paste it in and then talk about it real quick.
0:55 So, over here, we have this little nav
0:56 and we are using the HTLM5 nav and that was fun
0:58 but here's the Bootstrap one.
1:00 Boom, so you can see that there is a bunch
1:03 of stuff going on.
1:04 Let me tell PyCharm that's spelled correctly.
1:07 So, we have a toggleable
1:11 darkened nav bar
1:13 that is expanded up to the medium size
1:16 and then it collapses.
1:18 And, we have a brand section.
1:19 This is our little picture I talked about.
1:21 And then, here's the thing that is going
1:23 to let us expand us expand it again when it collapses.
1:27 This, actually I had to add these in.
1:28 There's some weird thing going on
1:29 where I can't get this to appear.
1:31 It's supposed to have an icon
1:32 and maybe there's some missing include I'm doing somewhere.
1:34 But, I didn't think I missed anything.
1:36 And then, here, we get to the real content of the menu.
1:39 We have a link item for donate, one for help
1:41 one for log in, and one for register.
1:43 Log in, register don't exist really yet
1:46 in any meaningful way
1:48 but at least we'll have them there to play with.
1:51 So, let's see what effect this had
1:53 and it won't be perfect, but it'll be close.
1:55 Decent, we got that up there.
1:57 Those are technically there.
1:59 Their size is weird and so on.
2:01 So, we're going to need some styles.
2:03 We're going to need some styles to fix that.
2:10 So, we have our nav up here and I dropped in some styles
2:13 and it's going to make it a lot nicer.
2:16 There's actually a bunch of styles here.
2:17 I'll just scroll through them real quick.
2:19 I put them into their own nav stylesheet.
2:21 It's not really worth going through here
2:23 and talking about all the details here.
2:25 You can adapt it to yours or you
2:27 can just restyle it from scratch.
2:29 But, I want to make it look exactly as close
2:32 as I thought was reasonable to what was on pypi.org
2:34 and not what Bootstrap wanted to suggest for it
2:36 so I had to tweak it a little bit.
2:39 If we go over here, you can see as I cycle back and forth
2:42 those are pretty darn good.
2:44 The font size on this part maybe is a little bit off
2:48 but neither of them perfectly match PyPI, so it's okay.
2:52 I think our nav bar is pretty much perfect.
2:56 One other thing we do have to do here.
2:59 It's perfect in this form, but if I shrink it, watch this.
3:04 Notice we have this little bit of weirdness going on
3:06 where that icon doesn't show up.
3:09 I'm not really sure why that is.
3:11 But, we need to include one more style here
3:14 and this is to style those little Expando elements
3:17 I added in.
3:18 Now, if we go back and refresh it, ah, there we go.
3:22 And now, we get our expanding menu.
3:24 I guess we got to set the background color as well
3:26 on that, probably, but it's pretty much working.
3:30 So, just because of that transparent background weirdness
3:33 I decided to throw in a little style here.
3:35 Let's have a quick look.
3:38 So, we go click on this.
3:39 Now, it has a background color.
3:41 So, that's a little bit nicer.
3:43 We don't have our log in page yet
3:44 but, like I said, we're getting there.
3:46 So, our navigation though, is working really nicely.