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
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.