Python for Entrepreneurs Transcripts
Chapter: Build web apps with Pyramid: Applied web development
Lecture: Styling the list views of data
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.