Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Stats slice
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
With our hero in place, the next thing
0:01
just let's work top to bottom
0:03
to focus on is this, what I'm going to call the stats slice.
0:06
And that's here we have
0:07
number of projects, number of releases, number of users.
0:10
Now what we're going to get is getting a little bit of gray
0:12
a little bit darker, and then three little segments
0:15
maybe in the middle third.
0:17
Alright, let's do that.
0:19
So here's what we're working with.
0:21
We've got a divet that is PyPI stats
0:24
and in there we have stat, stat and stat.
0:27
Let's go and put that down here.
0:29
We have the stats.
0:31
This part is still going to be the gray slice
0:34
so we'll set the padding at 10 px and 0
0:37
so up and down but not on the right.
0:40
We'll set the background color.
0:42
Now, I've already copied this, or copied it down before.
0:45
It's ec, ec is the gray, so let's see
0:49
how we're doing already.
0:53
Looking pretty good.
0:54
Color seems to match, but of course
0:57
the text pieces not so much.
1:00
Let's set a border bottom
1:04
one PX solid and then a little bit darker
1:07
is going to be d3.
1:11
How does that look?
1:12
And there's a little border coming in
1:15
some orderly on the top.
1:18
I'll have the same thing, and then
1:20
let's set everything to align center.
1:24
How's it looking now?
1:26
Better, looking better.
1:28
Of course, that stuff's not vertical.
1:30
It has new lines in it because these are divs
1:32
but we can tell them to be in-line blocks
1:34
rather than block display, which we will fix those.
1:37
So let's focus on that part now.
1:41
So those are going to be contained within here
1:43
and they have the class stat so we can set
1:46
their style right here.
1:47
The display is going to be an in-line block
1:52
which should fix that wrapping or new lines.
1:56
I set the width to the other all equal space to 170.
2:01
If you wonder how I came up with these numbers
2:02
I was just playing with it before and that's what I came up
2:05
with that seemed decent.
2:06
So now they are kind of spaced out like we were hoping.
2:11
Let's do a little bit of padding.
2:12
Font size is 16, and then the color we have set to this
2:17
Again, I just got this straight off PyPI and wrote it down
2:19
so we could use it here.
2:21
There we go. Now it's looking pretty close.
2:26
It's not exactly right because we're not using
2:29
the same fonts, so let's go ahead and fix that now.
2:32
We're going to use fonts from Google
2:35
some of Google's free web fonts, and let's go ahead
2:37
and put those right here like so.
2:40
So we're going to use Source Sans Pro
2:45
and we're also going to use Font Awesome as well.
2:47
So let's go ahead and drop those in there, and that way
2:50
we can make things look a little bit nicer.
2:52
So if we come up to the body, come up here and set the font
2:56
to be Source Sans Pro or Helvetica or Arial
2:59
and then just some kind of Sans Serif.
3:01
So now we should be a little closer.
3:03
There we go.
3:04
Now, that's the final step to make these two
3:07
look exactly the same, okay, besides the Nav bar.
3:11
That's pretty good, right?
3:12
I think that little slice is here.
3:14
Now, no data is being passed in, right?
3:17
We're not actually computing that yet.
3:19
We'll do that when we get to the SQLAlchemy section.
3:21
But for now at least the place holders are there
3:24
and then when we get here we just need to say something like
3:29
this project count, like that, something to that effect.
3:33
Maybe a little more formatting.
3:35
But we don't have those numbers yet so we're just going to leave 0 for now.
3:39
Alright, that's the first two slices.
