Python for Entrepreneurs Transcripts
Chapter: Build web apps with Pyramid: Applied web development
Lecture: Styling the list views of data
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Maybe a little CSS will have to work, so how do we style this? Let's go look at the page source - look how nice and clean this is, first of all,
0:09
so this little block that we were working with that has the class, the whole thing got duplicated each time
0:16
so we can just style album and class image in CSS, let's go do that. So here is our style, we can come over here and let's start by going down,
0:31
we'll figure out some other stuff to put in there in a minute but we want to style the image
0:35
and let's say the height is always going to be 1.50 px regardless how wide it is, maybe it would be better to match the width
0:43
but let's see what we get - that looks pretty nice, and here we have that and maybe we want to actually have this thing
0:53
float left and of course we've got to reset it, remember, we come here, so clear both should set that across and the padding,
1:08
padding doesn't look so amazing to me, what do you think? How about we add some padding on a margin rather, here set that at 10 px.
1:17
Here we go, alright, and finally, square, squares may be good squares may be bad,
1:22
let's do one more thing, import a radius 5 px, just to little round it off bit there. Ok, so I kind of like this, so we're going to stick with this,
1:31
with the Year of the Snake maybe we also want to show the tracks here, so we could go do that, and down here we'll just do something like
1:44
UL and we want some LIs in here so we can come down here and say tal, again "repeat", "t in a.tracks", and then the text,
1:55
I'll just make this "t.title", they both have titles. Oops, I always do this, I always say "in", and "in" is not the syntax,
2:03
it's just variable and then the set. So there we go, we've got this, I am starting to not like the float thing so much here
2:10
but that's OK, let's change this form an H2 to a div with a class="album-title" and do a little style on that.
2:21
And we'll just set the font size to like 18 pixels or something there is a lot of padding that goes on with those pieces,
2:27
with the headers, OK, that's alright, and while we're at it, let's do one more thing, let's put this free, this preview over by the title.
2:37
Here we go, and I think that looks not great, but I don't want to spend too much time doing design,
2:43
let's go over here and just put a little spacing on those things, and let's go and add margin right, a little bit bigger
2:50
so our bullet points stand out a little bit more. OK, so you can see that we've done a little bit of work with our templates,
2:57
we've gotten the title, we've done some looping, now we've obviously done some styles, there is nothing about the template there
3:03
but the way it nicely carries on with the classes and so on, that definitely works well. So, let's look at this preview, now if we look at our data,
3:12
the first one has the preview, the second one has no preview, so how do we know,
3:18
how do we control the templating to say "only show this if that thing is True or False"? So this is really easy in tal, err... in Chameleon,
3:27
so we come over and say tal:condition, and we just set the value, so we are looping over albums for each album we want to know
3:33
whether it has the preview, we do it like this. Notice, the preview went away on the one that does not have the preview,
3:40
how cool is that? Alright, so things are looking pretty good over here,
3:43
we've got our data passed in, it's flowing down here, we're rendering it really well, granted we are not going to do much styling yet,
3:51
I am going to wait until we get to the front-end framework parts before we really go all in on making this beautiful and whatnot.
3:57
So let's consider this temporarily good enough.