WordPress.org

Making WordPress.org

Opened 4 years ago

Last modified 8 hours ago

#974 assigned enhancement

Make WordPress.tv theme responsive

Reported by: BrashRebel Owned by:
Milestone: Priority: normal
Component: WordPress.tv Keywords: good-first-bug has-patch ui-feedback
Cc:

Description

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

Attachments (3)

974.diff (1.5 MB) - added by BrashRebel 4 years ago.
Theme adjustments to make wordpress.tv responsive
974.2.diff (15.5 KB) - added by iandunn 4 years ago.
974.3.patch (12.2 KB) - added by BrashRebel 3 years ago.
Fixed some CSS issues in the header, sidebar, upload page and featured video section.

Download all attachments as: .zip

Change History (21)

#1 @iandunn
4 years ago

  • Keywords needs-patch good-first-bug added
  • Owner set to iandunn
  • Status changed from new to accepted

+1

This ticket was mentioned in Slack in #wptv by brashrebel. View the logs.


4 years ago

@BrashRebel
4 years ago

Theme adjustments to make wordpress.tv responsive

#3 @BrashRebel
4 years ago

  • Cc kyle@… added
  • Keywords has-patch dev-feedback added; needs-patch removed

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.

This ticket was mentioned in Slack in #wptv by brashrebel. View the logs.


4 years ago

#5 @iandunn
4 years ago

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.

#6 @iandunn
4 years ago

In 1556:

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

See #974
Props BrashRebel

#7 @iandunn
4 years ago

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:

  • 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.

@iandunn
4 years ago

This ticket was mentioned in Slack in #wptv by brashrebel. View the logs.


4 years ago

#9 @iandunn
4 years ago

  • Keywords needs-patch added; has-patch dev-feedback removed

@BrashRebel
3 years ago

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

#10 @melchoyce
2 years ago

  • Keywords has-patch ui-feedback added; needs-patch removed

#11 @iandunn
20 months ago

  • Owner iandunn deleted
  • Status changed from accepted to assigned

This ticket was mentioned in Slack in #meta-wordcamp by sergey. View the logs.


20 months ago

This ticket was mentioned in Slack in #meta by obenland. View the logs.


17 months ago

This ticket was mentioned in Slack in #meta by sergey. View the logs.


14 months ago

#15 @obenland
6 months ago

#3980 was marked as a duplicate.

#16 @obenland
6 months ago

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.

#17 @BrashRebel
13 hours ago

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.

This ticket was mentioned in Slack in #meta by sergey. View the logs.


8 hours ago

Note: See TracTickets for help on using tickets.