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