Tracklist Grid for Tablet & Desktop

[00:00:01]
>> Now that we have our tracklist working on mobile, now it's time to get it working for our tablet and desktop. What we would like to have happen here is we are going to take the tracklist which is currently located underneath the audio player here on mobile devices and we're going to move it to the left of the album cover.

[00:00:23]
When clicked, the tracklist is going to fly out to the left, and the close button, we're gonna take our button. We remember we've toggled the name of it from tracklist to close, that will fly up to the top, and we will have a list of tracks that will appear underneath.

[00:00:42]
And we'll style a scroll bars and all of that kind of thing as well. So my approach to this is as follows, first of all, we just wanna get the tracklist to show up on the left side of the album cover. It doesn't matter what it looks like, we just wanna move it and make sure that it works.

[00:00:58]
Then the next thing we're gonna do is format the button. So we need to make sure we turn it on its side and maybe change it, some of the colors, and so forth associated with it. We need to fix the formatting of the area where the tracklist will appear.

[00:01:13]
We want it grow on click because we're gonna have a narrow area for the button before it's clicked, we want it to have a larger area to display the tracklist after it's clicked. And then of course, we need to add some fun stuff. We need to add some animations and some scroll bar style and other kinds of things to give it that last little bit of sizzle.

[00:01:33]
So let's start with that first problem, which is how do we get the tracklist to the left-hand side. And that, as you've seen throughout this course, always starts with the HTML. So if you take a look at the HTML here in our starting state, you'll see that we have a div with the class of main-grid.

[00:01:55]
Inside of that, it has two children, it has a main with a class of cover, that includes the cover art that you see there, its icons and the audio player, and it includes the tracklist which is underneath the audio player. All of that is inside of the main-grid right now.

[00:02:12]
So it's actually really easy to move that tracklist button from the bottom over to the left-hand side. Very, very straightforward to do. Because all we have to do is leverage those parents and children in some kind of layout. And we can do that with grid. So inside of our CSS, let's scroll on down here to the bottom of our tracklist layer, and I'm going to add a media query, at media, min-width, 800 pixels.

[00:02:50]
Then I'm going to leverage that main-grid class here, and set that up with our grid-based layout. So our main-grid will display grid And I'm going to have grid-template-columns, l have two of those, one will be 100 pixels and one will be 500 pixels. The album cover is 500 pixels wide.

[00:03:23]
The button column will be 100 pixels wide actually don't want these to have any flex associated with them. Normally we'd use something like an FR unit, or something flexible, here I wanna have a very stiff kind of layout because I have a very demanding set of specs for this particular part of this.

[00:03:43]
I'm gonna set my max width to 600 pixels. Why 600 pixels? Because that's 100 plus 500 makes 600. We'll also have no gap, And we'll have a margin of 0 auto to center this particular element on the page. When I make my display window a little bit bigger, you'll see that the tracklist shows up there.

[00:04:15]
It's showing up in the 500 pixel area. The cover is showing up in the 100 pixel area of the grid. And when I click on the tracklist, it still works just fine. Looks terrible, works just fine. So let's swap these two so that the tracklist is over on the left side.

[00:04:33]
We can do that pretty easily just by saying our cover, which is the main class of cover here, so our .cover class is going to have an order of 2. And that will swap those two. Immediately, it starts to look better. Tracklist is still working. When we click it, of course, it's behind the album cover.

[00:05:00]
And it stretches all the way down the page, which we don't want but it's still at least in the right place, so one step at a time. The next thing to do is to fix this tracklist itself. So the tracklist is too long as you can see, we want that tracklist to be only as high as the album cover.

[00:05:21]
So we can write a new style for that. And we will say art, a class of tracklist, in other words, our section there. I'm going to give it a fixed height of 500 pixels. That matches the album cover so that the tracklist and the album are now the same height.

[00:05:46]
I'm going to say justify self and we don't want any gap in between the album cover and our tracklist, so by pushing that, sell the tracklist, sell over to the album cover, and we make sure that they are absolutely touching each other. We can turn off any padding and margin associated with that section because once again we don't want any gaps in between those two.

[00:06:15]
And then the last part here has to do with the tracklist itself. When I click the tracklist, it shows up very happily. There it is. We can just scroll down the page and read the whole thing. But that's not the behavior that we want. What we want to do is get a scroll bar here, so when we click the tracklist button, we see that content, but we also get a scroll bar that appears automatically.

[00:06:40]
And we can do that with the overflow property. And I'm specifically gonna say overflow y, auto. So the value of auto says to the browser, if the scroll bar is required, display it. Otherwise, don't display it. So when I click on tracklist now, I wind up with a scroll bar, and I can scroll very nicely there within that area.

[00:07:05]
And we can apply some styling to that scroll bar later to make it look a little bit more attractive. We're just getting the default styling that comes with our web browser for that scroll bar for the moment. If I had said, over flow y of scroll, Notice that you'll have a space for scrollbar all the time, whether or not it's required.

[00:07:30]
So by using auto, it only shows up when it's needed. Now as for the x direction, I do not want that to show up ever. So I'm going to say overflow-x and hidden. And that means just cut off any extra content that happens to show up in the direction, and it'll just turn that off completely.

[00:07:51]
So, fundamentally it's working, it's ugly, but it's working, and that was our first goal. Get it on the left side, make sure that it works because if it's not working, there's no point in making it pretty. The next thing to do is to format this button. So, in our comp here, we see that the tracklist button is turned on its side, and it shows up in the middle of that tracklist area.

[00:08:18]
And when clicked, it should fly up to the top of our tracklist and show up there, where it says close. So let's see if we can make that happen as well. I'm gonna start by, Opening up in my HTML my button here. And right now my button has an ID of tracklist.

[00:08:46]
That ID is there specifically for some JavaScript purposes we're using it to swap the the text that's on the button and we've actually used it as a trigger to swap classes for that table, from hidden to showing. I'm gonna add to this now a class, and I am gonna call it button-tracklist.

[00:09:10]
Why? Because this button is gonna have two states to it as well. We're going to have its default display, which is pretty much kind of like it is right now, with a couple of additions, like turning it on its side. When clicked, we're going to use JavaScript to swap a class again and it'll turn into our closed version of the button and it will have completely different styling.

[00:09:34]
If we leave one as an ID and one as a class, we're going to have specificity issues here dealing with this. So what we wanna do is have a class in both situations so that these styles easily override each other rather than relying on that ID. All right, so let's go down to our JavaScript And if you scroll down to the bottom of our JavaScript you'll find in our little function here that is hiding and revealing our tracklist.

[00:10:09]
So remember that first line there and that JavaScript is when that add that button with the ID of tracklist is clicked, stuff is gonna happen. We swap our table class from hidden to showing. We're also now going to do something else. We can swap that new class that we just created.

[00:10:32]
So we're gonna swap our button-tracklist class. And we're going to swap it for a class called button-close. So that will allow us to apply some new styling to our close button that isn't necessarily present otherwise. So let's head back into our CSS and now let's style our button in its two different states.

[00:10:57]
We're gonna style the tracklist version of this, in other words, the default unclick version of the button, and then we will style the close button, which is the clicked version of this button. So let's start with our button-tracklist. This is of course, the version of the button here in this state.

[00:11:21]
We're going to set this to transform rotate, 90 degrees. So that will turn it on its side exactly as we wish for it to look. And when we do that, it will just turn right on the center axis of the word tracklist. So it's actually cut off there off the top of that particular section at the moment in time, but don't worry, we will fix it.

[00:11:50]
We'll say display block, we already said this and earlier in the mobile version of this button, but I'll say it again just to make the code a little bit easier to read. We'll turn off any margin. And padding associated with this button. And then I'll override that, actually, I'll say margin-top of 225 pixels.

[00:12:17]
And that will push that tracklist down to roughly the center. Remember that our album cover is 500 pixels wide. So 225 with the word tracklist looked about right to me in terms of being there in the center. So now when we click this we get our tracklist and our close button is sitting right in the middle exactly where our tracklist button was, and it's turned sideways like this.

[00:12:43]
So what we want to have happen is, we want our close button to turn back around to where it was originally. And we want it to go up to the top of our tracklist. So we can write a class to do that. So, this is button-close. After clicking, of course, this is the class that's available.

[00:13:09]
We'll say transform. Rotate 0 degrees. So that will allow our close button to rotate back to its original position. And we can give it a little padding, 1ram 0 and we'll set its position to sticky. And we want that to be at the top. So if you just turn it now, it is sticky.

[00:13:42]
It'll scroll up to the top here, actually just continues to scroll off the page. But if we say top, 0, Then our close button will scroll up to the top here and stay put, see that? As we scroll this on by. Okay? So what's going on? Why didn't that close button?

[00:14:12]
Why does it stay right here in the middle? Why didn't it show up here at the top if we said top 0? Well, the answer is that our button tracklist, we have a margin top of 225 pixels. And that's exactly what's happening here. We have this margin. Position, sticky says it's gonna get up to the top and then it's gonna stay put.

[00:14:33]
And if that's an effect you like, you can keep it. But I want mine to go up to the top immediately. So we can turn off that margin. So margin top of 0 will turn that off. So when I click it, now my close button shows up at the top of the list.

[00:14:51]
And then we can add some styling to this. Because, of course, right now it's transparent, it looks like our tracklist is going underneath that close button, which, in fact, it is. Let's give that close button a little bit more styling. So let's say a background color of var, cyan and a color of var, black.

[00:15:21]
So we'll have a little bit of text there. So now when I click on the tracklist button, it should show up here with the styling in place. All right, so why didn't that styling work here on this close button? See we called for a background color of cyan we called for a color of black, why is it still displaying the way that it is?

[00:15:47]
Great question. Well, if we scroll back on up to our original styling here, we originally used our ID to style this. So way up here at the top of our layer, we have an ID of tracklist with a background color of transparent and a color of magenta. So what's happening is a specificity problem, we're having a class trying to override an ID, and of course that doesn't work.

[00:16:13]
So one solution to this would be to change our ID of tracklist. We could change that now to their new class. So let's call it button-tracklist. Our original styling is still safe here, but now our closed styling will apply. Looks like we need to fix a hover state here too.

[00:16:35]
As you see when we roll over, it looks like the text disappears. That's because the text is set to be cyan on hover by default. So while we're here, let's change our ID of tracklist hover to button-tracklist:hover. That will be fixed that same particular problem. There we go.

[00:16:57]
All right, so then when we scroll back down into our media query and we go to our close button now we can say, button-close:hover, and we can say our color, Can be whatever you want. There are a lot of different colors we can change our background color or something.

[00:17:22]
So maybe we say our background color Goes to var magenta. And our color goes to var white. So now click our close button, looks like that, might be better with black, maybe we want it lime instead. Maybe something like that, so you can continue to play around with it until you find something that you like.