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

[jtsternberg]

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.

[jtsternberg]

Broken Mobile: Top

[jtsternberg]

Broken Mobile: After Sidebar

[jtsternberg]

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.

[Otto42]

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]

Beginnings of cleanup on the plugin page

[jtsternberg]

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

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

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.

[jtsternberg]

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?

[Otto42]

Yes, just a diff against the existing plugins/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.

[iandunn]

#279 was marked as a duplicate.

[iandunn]

#368 was marked as a duplicate.

[iandunn]

#368 was marked as a duplicate.

[ocean90]

#444 was marked as a duplicate.

[Otto42]

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.

[Otto42]

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.

[brettshumaker]

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;
    }
  }

[Otto42]

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.

[Otto42]

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.

[brettshumaker]

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.

[Otto42]

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

[jtsternberg]

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.

[Otto42]

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.

[Otto42]

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

[Otto42]

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

[nphaskins]

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]

FIxes the plugin authors not clearing properly

[Otto42]

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.