website

website copied to clipboard

Hey guys! Great podcast. I just started listening to Syntax about 2 weeks ago and have been making my way through the episodes from the beginning. After listening I often find myself going to the Syntax.fm website to look at the show notes.

The older shows are at the bottom of the page (on desktop) and when clicking it does load the new show notes, but you are still stuck at the bottom of the page. I thought it would be helpful to scroll the user up (on desktop) or down (on mobile) to the show notes when clicking on a show title. Below is a gif the experience.

example gif

I used window.scroll({ behavior: "smooth" }); to achieve the scroll and added the smoothscroll polyfill to work with non-supported browsers

@legarland Hey Logan 👋🏼 Could you take a look at my notes on https://github.com/wesbos/Syntax/pull/175 and see if you can implement it that way? Then let @nathangathright know so that we're not doing duplicate work 👍🏼

@legarland Hey Logan 👋🏼 Could you take a look at my notes on #175 and see if you can implement it that way? Then let @nathangathright know so that we're not doing duplicate work 👍🏼

You meant to mention @nathanejbrown instead of me.

@nathangathright my bad!!!! 😅

@416serg comment from #184

@jameygleason love the idea. However, I think the wording might be a little confusing to viewers. "Back to" could suggest returning to a previous episode but since it's not the previous episode, it might be confusing.

👆 "Scroll to" ?

How do you feel about introducing overflow-y on the show list on desktop? I think the show list made sense when there were a dozen shows but now that there are 80+, a scroll might make more sense, that way, when you click an episode, it doesn't get lost in the long list. and when they go 100+, i don't think having a long page like that makes sense.

Thoughts?

This feature is a tricky proposition. I think being able to scroll from the top of the show notes and then back to the place in the episode list, without starting the show is a good start.

I'm almost tempted to think about some kind of pagination instead?

@416serg I implemented the scrollIntoView API as you suggested and it was much cleaner! There is still an issue with the position: sticky of the player which causes the top portion of the .showNotes to be hidden. Any ideas on how to account for this?

I think the suggestion of either pagination or having the overflow-y enabled for desktop is something that should probably be considered.

@legarland let's get some feedback from @wesbos or @stolinski around this one.

Guys: Since the show list is growing and it's going to keep growing, what do you think would be a good solution to eliminate the long list of shows on desktop? On mobile it's already set to overflow with a fixed height, would that be a good idea to implement on desktop as well? Is pagination a better idea? Can this be tied in with some sort of search functionality?

Thanks everyone!

I was thinking something as simple as adding position: sticky; top: 100px; to a div inside of .showNotes would be nice. That way the scroll position is maintained but the show notes could slide down.

yea @NukaPunk it should probably be done that way. Check out my comment on #284