Tracklist CSS

[00:00:00]
>> Now we're getting into some of the exciting features of our difficult design. And one of the first things that we're going to work on is the track list. And the track list is the list of songs that we have down here at the bottom. These are tracks that we laid out in the medium version of the website.

[00:00:17]
And what we are going to do with these now is we'd like to hide them behind a big button. And if you take a look at the course website, which is practical.css.education, we're in Chapter 5, Part E, the track list on mobile. You will see how this is going to look when we're done.

[00:00:36]
So basically, we will have a track list button here that when clicked will open up the full track list. And the button will say tracklist here, and it's going to say close once that button has been clicked. Now, thinking about an approach for this, I'm sure JavaScript comes immediately to mind for you and that's totally fine.

[00:01:00]
We are definitely going to need some JavaScript for this because we have a toggle state here. We need to make something appear and disappear on click. And as we know, CSS does not have a click state inside of it, so we're gonna have to go to JavaScript for that.

[00:01:14]
But it doesn't have to be difficult JavaScript, we don't need a library for this. We don't need it anything except for plain, simple vanilla JavaScript. And literally just a few lines of code that will swap some classes for us that are going to control exactly how this will work.

[00:01:31]
So basically on click, the class is going to switch and we can just set up two sets of styling, the open set of styling and the closed set of styling. So that is going to be our overall approach to putting this together. If you open up the code pen starting with this, fork it to your account, we can get started with this.

[00:01:51]
As always, the first thing we're gonna start with is our HTML, and if you take a look at the HTML we have here I have continued on with the HTML we've been working with in the difficult design. So we have our cover section of this page that contains the album cover, it contains the icons and it contains our audio player.

[00:02:14]
And then after that we have a section that contains our table. And the table of course contains all of the information of the tracks that are on this album. So in order to get this style, the first thing I'm going to do is give this section a class and I'm going to call it tracklist because I'm very creative.

[00:02:34]
And then we can also, here in our layers, we have a layer called playlist. And I've started to call this the track list. So I'm gonna just rename this layer to track list I think it's gonna help us keep track of everything. So track list is the name of my new layer.

[00:02:53]
And if we open that up, you'll see that right now we have all of the CSS that's here for our table styling and there's not a lot, it's just a little bit of styling that applies to that particular track list. So the first thing that we need to include here is something to click in order to make this thing appear and disappear, and so we'll do that with a button.

[00:03:17]
Why a button instead of a link? Well in this case this is not going anywhere the button is triggering an action in JavaScript and so therefore we'll use a button for this not a a link the anchor tag. So we're gonna call this button and we'll give it an ID, which we'll refer to in the JavaScript eventually, called track list.

[00:03:39]
Again, very, very creative of us. And the text we'll put on that button will be track list. Slash button. So this will show up here at the top of our table. There's our button. It does nothing right now, but we have the start of our tracklist button here.

[00:04:05]
Now as for this button, we should give it some better styling than what we see here. So, let's set that up as well. And I'm just gonna use the ID to style that, we'll call it track list. The ID of track list, first of all, will display block.

[00:04:24]
By default buttons are a either inline or inline block. We want it to have the ability to stretch across the page to have margin and padding on all of the sides. So we'll set it to display block. We'll set its border to none. Once again, the default button that comes from your web browser has a border on it.

[00:04:45]
We are just gonna turn it off. We'll give it a font. Family of Var serif, which is what's called for in the design. Text-transform uppercase again called for in the design. And the width to 100%. So we've start to have the outlines of a reasonable looking button there.

[00:05:20]
And now, we'll set our color to var-, Magenta. We'll set our background color to transparent. There it is. It's just the word TRACKLIST that's there right now, OK? And then finally, we can make that text a little bit bigger. Font size, bar, h5, and our padding of one rem.

[00:06:00]
So it doesn't look like a super attractive button there at this moment in time. And that is because we need to put a border around the entire layout here. So you see here in our design, we have the word track list and we have this border out here that border expands to encompass the entire track list on click.

[00:06:24]
So we don't want the border to be on the button we want that border to actually be on our table. So we'll continue on with our styling here let's set up a quick hover state for our button. So track list colon hover, and we'll set that to a color of VaR cyan kind of been doing that throughout our document.

[00:06:47]
So we'll have a cyan hover state on it and that is working just fine. OK, so now we have a button that is styled up. It doesn't do anything yet. We'll have to add some JavaScript in order for it to do anything. But for right now, let's move on to styling up the table.

[00:07:05]
So for the table, we have our section with a class of track list. We have the table inside of it. It is the only table in our document, so we can continue to style with some of these generic selectors that we have here for the table. But the first thing I wanna work on is the section that surrounds that table, the section with the class of track list.

[00:07:27]
So we'll add a class of track list. And we can set this to margin 0 auto, to make sure it's always centered on the page. Padding 0, 1.5rem. Not a lot of change going on down here just yet. That's really completely obvious, but it will add up here in just a moment.

[00:08:01]
And then we'll put our border on this. So our border of 2pixels solid var(= =magenta). So now we have that nice border all the way around the page here. We have a little bit of separation between the table and the edges of that border so it looks nice.

[00:08:29]
Now on hover, notice that my button is changing color. Why shouldn't my border change color as well? When that'd be great. So we could add that also, we could say our class of track list on hover,the border color should change to var cyan. So now down here in our tracklist when we roll our mouse over it both the button and the border change color when you hover over the button.

[00:09:06]
Otherwise just generally in the track list, it will change the color of the border here, but not the button. All right, now for our table, as we see from our diagram here, we have somehow gotten rid of those headers that we have in that table. We still want those headers there for accessibility reasons.

[00:09:27]
But for our visual viewers of this page, we don't necessarily need to have those showing on the page. So what we'll do for that is, up here where we have caption, remember, we have a caption for this table that you can't see because we collapsed it. We can do the same thing for our table headings.

[00:09:47]
So we can say caption, comma, th. And that will collapse our table headings and then we can turn off the styling here for our table headings. That'll get rid of that underline there and of course we don't need to have, it doesn't matter what the font family is or the text alignment, we're not gonna look at it anymore anyway.

[00:10:09]
So we can just get rid of that style. And we can get rid of the padding on the cells as well. So that will just apply to the TD now. So there's our track list and there's our styles here underneath. One of the last things that I wanna do here is these timestamps that are over here on the right-hand side.

[00:10:30]
See how it looks a little bit crooked there? That looks like those timestamps are are pushed in. We can always put a border on things. So if I put a border one pixel solid white on my Td's, you'll see that our timestamps here are shoved to the left side of the cell.

[00:10:50]
That's what's causing that sort of awkward look that's going on there. So our track numbers are here at the left side of their cell. Looks like it has a nice even padding over there on the side, but our eye adds together that same padding over here on the side of our table and our number.

[00:11:09]
So what we'll wanna do is we'll wanna push those timestamps to the right side of the table and that will make our padding look a little bit more even. So, to do that, we'll just simply add to td last of type, we can say text align right. And once we have that in place, you see that our timestamps are pushed over there to the side, we can get rid of that border.

[00:11:42]
And now things look a little bit more even there in that particular box.