Make WordPress.tv theme responsive

[BrashRebel]

Seems to me there's no reason why this awesome site shouldn't have an awesome mobile experience.

[iandunn]

+1

[BrashRebel]

Theme adjustments to make wordpress.tv responsive

[BrashRebel]

I just uploaded a huge patch. Includes lots of theme changes but all are 100% focused on making the existing theme adapt to smaller screen sizes (other than one deprecated function which I replaced).

I'm not 100% certain that this 974.diff file includes everything and was created properly. Sorry. Still not very experienced at generating diffs. If there are issues with the diff just let me know and I'll try and generate it again some other way.

[iandunn]

It looks like the patch contains full copies of the files, rather than just the deltas, and it has Git style prefixes, so applying it created a second folder, but I was able to get it working by diff'ing that folder against the canonical one.

I think using git-svn to clone the repo, and then generating the diff with --no-prefix would result in a more workable patch. e.g.,

git svn clone https://meta.svn.wordpress.org/sites/trunk/wordpress.tv/public_html/wp-content/
git diff --no-prefix > ticket.diff

​http://scribu.net/wordpress/contributing-to-wordpress-using-github.html might have some more tips (although we don't have a Git mirror for meta.svn like we do for core.svn, hence using git-svn to clone the actual SVN repo).

I've already got this one working, though, so no need to do that for this ticket.

[iandunn]

In 1556:

WordPress.tv: Replace deprecated like_escape with wpdb::esc_like.

See #974
Props BrashRebel

[iandunn]

974.diff is a really good first step, it solves most of the problems, but I think there's some more work to do before it's finished.

I made some changes to get us a little closer:

• Moved media queries to the bottom, to comply with ​the coding standards.

• Replaced the accordion menu with the _s equivalent. The accordion wasn't working for me in Firefox, and it duplicates the markup and doesn't have the accessibility features that the _s one does. I also styled the menu a bit, but it could definitely be improved further.

• Centered the list items at smaller resolutions, to make them easier to read.

• Made the widgets use more of the empty space at tablet-sized resolutions.

I also left some todo notes with a few things that I noticed aren't working, but didn't have time to fix.

• The video player is collapsing when the video starts to play, because of messing w/ the container height. I think some of my changes may have made this worse :) It may be better to stick with a fixed width and just center the player, instead of trying to make it grow/shrink w/ the viewport.
• Secondary videos are overflowing their containers on small screens, because of the janky way they were originally setup w/ absolutely positioned thumbnails and padding to push the title over.
• I think there'll be a few more things that come up in testing, but nothing major.

I committed a few small things, and then generated a new patch with my changes.

[BrashRebel]

Fixed some CSS issues in the header, sidebar, upload page and featured video section.

[obenland]

#3980 was marked as a duplicate.

[obenland]

Reported by @rmarks
Slack: ​https://wordpress.slack.com/archives/C037W5MBT/p1544191445096800
The browser is not showing the videos of an event (e.g. ​https://wordpress.tv/event/wordcamp-europe-2017/) if the screensize is too small (like iPhone), it only shows the latest uploaded videos because of the mobile theme kicking in.

[BrashRebel]

As far as I know, here's what else has been going on relative to this ticket:

At some point, I believe in 2017, someone enabled the Jetpack mobile theme. Because of that, the urgency for this ticket's resolution went down a bit because that feature made the mobile theme load for small screens instead of the current theme.

The latest patch, 974.3, I believe, is pretty complete and has not received feedback or been committed. I do believe it is a major improvement and worth committing.

At this time, the Jetpack mobile theme is no longer enabled on WordPress.tv so the current non-responsive theme still loads for mobile.

Also, @obenland I think the problem you reported 6 months ago may have been related to the Jetpack mobile theme and thus, no longer an issue.

[casiepa]

Related: #4304
The theme suddenly got activated again.

[nvwd]

styles to make wptv responsive

[nvwd]

after so many years......

[nvwd]

here's a second attempt at a patch file

[nvwd]

this includes all changes not already in master

[iandunn]

In 9262:

WordPress.tv: Add responsive styles to improve UX.

Props nvwd, BrashRebel, iandunn
Fixes #974

[iandunn]

Phew, this is finally done. Thanks so much for your patience and tireless work @BrashRebel and @nvwd !

[BrashRebel]

Replying to iandunn:

Phew, this is finally done. Thanks so much for your patience and tireless work @BrashRebel and @nvwd !

Thanks Ian!! Woohoo!