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