WordPress.org

Making WordPress.org

Opened 4 years ago

Closed 3 years ago

#270 closed defect (fixed)

MOBILE: Plugin page content is pushed below left-col sidebar, and is not responsive

Reported by: jtsternberg Owned by:
Milestone: Priority: normal
Component: Plugin Directory Keywords:
Cc:

Description

Summary is pretty self-explanatory, but basically if you visit any plugin page on mobile (or shrink your browser down), it becomes pretty disjointed, as the content of the plugin page is pushed below the left-hand sidebar column. The content is not responsive either so it brings in horizontal scaling.

Attachments (5)

Screen Shot 2014-01-08 at 9.35.44 AM.png (63.6 KB) - added by jtsternberg 4 years ago.
Broken Mobile: Top
Screen Shot 2014-01-08 at 9.36.10 AM.png (112.9 KB) - added by jtsternberg 4 years ago.
Broken Mobile: After Sidebar
wp4.css.patch (1.8 KB) - added by jtsternberg 4 years ago.
Beginnings of cleanup on the plugin page
wp4.css2.patch (2.2 KB) - added by jtsternberg 4 years ago.
css-270.diff (186 bytes) - added by g_liu 3 years ago.
FIxes the plugin authors not clearing properly

Download all attachments as: .zip

Change History (28)

@jtsternberg
4 years ago

Broken Mobile: Top

@jtsternberg
4 years ago

Broken Mobile: After Sidebar

#1 @jtsternberg
4 years ago

It seems this same issue might apply to any part of the site that contains a left-column sidebar. A short-term solution might be to remove the responsive styles for those sections until they are ready for game time.

#2 @Otto42
4 years ago

Disabling the responsive part isn't an option. Adding responsive styling to the relevant CSS to do things like remove that left hand sidebar or move it down the page would be preferable.

@jtsternberg
4 years ago

Beginnings of cleanup on the plugin page

#3 @jtsternberg
4 years ago

I couldn't find any JS files in http://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html but it would be easiest to transplant the left column sidebar to below the content using JS.

I uploaded the beginning of some styling via media queries. It's already looking better. It looks like there's another css file that's not in the repo (correct me if I'm wrong) that needs some work: http://s.wordpress.org/bb-theme/plugins/style-wp4.css

#4 follow-up: @Otto42
4 years ago

Yes, those themes are not public yet. They're a bit specific to the page and have some material that needs to be adjusted first.

Any changes you want to make to the CSS should ideally be made in the plugins/style-wp4.css. Adjusting the main wp4 will apply globally, to the whole site, and this is thus much harder to do. Try using more specific style rules in the plugins/style-wp4 file instead, to override whatever is needed to be overridden.

Any JS files we we can add, if we have the necessary JS. Or inline it, if it's small enough. Saves on an extra http request.

#5 in reply to: ↑ 4 @jtsternberg
4 years ago

Replying to Otto42:

Yes, those themes are not public yet. They're a bit specific to the page and have some material that needs to be adjusted first.

Any changes you want to make to the CSS should ideally be made in the plugins/style-wp4.css. Adjusting the main wp4 will apply globally, to the whole site, and this is thus much harder to do. Try using more specific style rules in the plugins/style-wp4 file instead, to override whatever is needed to be overridden.

So the idea is, download plugins/style-wp4.css and submit that? I did make a small change to the search box in the header that really should apply globally.

Any JS files we we can add, if we have the necessary JS. Or inline it, if it's small enough. Saves on an extra http request.

Which file should I put the inline JS?

#6 @Otto42
4 years ago

Yes, just a diff against the existing style-wp4.css file is fine.

As for the JS, you're overthinking it a bit. Just tell us what the JS needs to be. Make up your own file. I'll handle dealing with it from there.

We're looking for the changes needed here, not necessarily a complete and working patch that I can just plug and play with. But, I do need any changes submitted like this to be made to be against the correct thing. A global CSS change to effect a change on the plugin's theme only isn't a good idea, realistically.

As for the search bar change, if it's not specific to the plugin page, then you should make a separate ticket for it.

Version 0, edited 4 years ago by Otto42 (next)

#7 @iandunn
3 years ago

#279 was marked as a duplicate.

#8 @iandunn
3 years ago

#368 was marked as a duplicate.

#9 @iandunn
3 years ago

#368 was marked as a duplicate.

#10 @ocean90
3 years ago

#444 was marked as a duplicate.

#11 @Otto42
3 years ago

I applied most of jtsternberg's patch to the plugins page. Also hid the first sidebar entirely for now, since I'm not sure what to do with those links.

#12 @Otto42
3 years ago

Made additional changes to screenshots pages for having proper max-width, and fixed the description/download button a bit.

Note: Support and Reviews pages on plugins are still broken due to different CSS (they're actually views in to the support forums). Will fix this later.

#13 @brettshumaker
3 years ago

  • Cc brettshumaker@… added

Here's a bit of CSS to make the login form a bit more user friendly at smaller screen sizes. Could be improved with some modification to the html in the form (eg. input fields expanding to fill the width of the page by removing "size" attribute).

Feel free to use or ignore. :)

@media screen and (max-width:460px) {
    #headline .login {
      	width: 91.35%;
    }
    #headline .login label {
      	padding:0 0 10px;
    }
  }
  
@media screen and (max-width:400px) {
    #headline .login label {
      display:block;
    }
  }

#14 @Otto42
3 years ago

Does it even make sense for us to have a login form on small-screen mobile? I'm unsure of the use case here.

For plugins or themes, you need to login in order to:

  1. leave a support post or review
  2. do admin stuff if you're the plugin's committer

For case a, mobile isn't a great and preferred option to accept text posts, is it? If you have an iPad, sure, but a phone?

For b, does anybody actually do this? Other than @nacin, I mean.

Hiding the login form there entirely, below a certain width, makes a bit more sense to me.

#15 @Otto42
3 years ago

Idea: At low widths: hide the form entirely, but with a tab on the right under (or above) that line. When that tab is clicked/touched, scroll out the login form.

This gets rid of it and the wasted vertical space while still having a somewhat hidden ability to log in on small width browsers if you really want to.

Anything wider than about 460px doesn't need this, it'll all fit where it is now.

#16 @brettshumaker
3 years ago

I may be in the minority with @nacin, but I have a few plugins in the repo and will sometimes login on my phone to reply to someones support forum post.

I think the hidden login form with the ability to scroll it out is a good solution. Would give a bit more flexibility with the form styling as well.

#17 @Otto42
3 years ago

Support/Review pages brought into the fold as well. Size isn't as perfect on these, those tables of posts are a tad wide.

#18 @jtsternberg
3 years ago

Looking good! The support page form needs some work and if there are YouTube videos (http://wordpress.org/plugins/apppresser/), they expand out past the container. We ought to mimic what twentythirteen is doing to keep those contained.

#19 @Otto42
3 years ago

I applied a fix to adjust the width on those videos below 530px, which is the normal size of the video. Should cause them to reduce in size when the screen is too narrow as a whole.

#20 @Otto42
3 years ago

Added @brettshumaker's fixes for the login form until I can find time to make it hide the form.

#21 @Otto42
3 years ago

Reviews page looks better now, without the super long and odd blank space on the page.

#22 @nphaskins
3 years ago

This hides the form and cleans up some margins, block items, etc. Nitpicking.

	// login form you preivously metioned hiding on mobile
	.login {
		position:absolute;
		left:-10000px;  //keeps on the screen for screen readers and is a btter than display:none
	}

	// plugin description
	#plugin-description {
		padding:15px 15px 46px;
	}
		#plugin-description .shortdesc {
			margin-bottom:1rem;
		}

	// download button
	.description-right .button{
		float:none;
		clear:left;
	}

@g_liu
3 years ago

FIxes the plugin authors not clearing properly

#23 @Otto42
3 years ago

  • Resolution set to fixed
  • Status changed from new to closed

I think this is mostly done, if there's any more specific issues, let's create new tickets just for those specific problems instead of an overall overhaul.

Note: See TracTickets for help on using tickets.