Making WordPress.org

Opened 10 years ago

Closed 10 years ago

#270 closed defect (bug) (fixed)

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

Reported by: jtsternberg's profile 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 10 years ago.
Broken Mobile: Top
Screen Shot 2014-01-08 at 9.36.10 AM.png (112.9 KB) - added by jtsternberg 10 years ago.
Broken Mobile: After Sidebar
wp4.css.patch (1.8 KB) - added by jtsternberg 10 years ago.
Beginnings of cleanup on the plugin page
wp4.css2.patch (2.2 KB) - added by jtsternberg 10 years ago.
css-270.diff (186 bytes) - added by g_liu 10 years ago.
FIxes the plugin authors not clearing properly

Download all attachments as: .zip

Change History (28)

@jtsternberg
10 years ago

Broken Mobile: Top

@jtsternberg
10 years ago

Broken Mobile: After Sidebar

#1 @jtsternberg
10 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
10 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
10 years ago

Beginnings of cleanup on the plugin page

#3 @jtsternberg
10 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
10 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
10 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
10 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 10 years ago by Otto42 (next)

#7 @iandunn
10 years ago

#279 was marked as a duplicate.

#8 @iandunn
10 years ago

#368 was marked as a duplicate.

#9 @iandunn
10 years ago

#368 was marked as a duplicate.

#10 @ocean90
10 years ago

#444 was marked as a duplicate.

#11 @Otto42
10 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
10 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
10 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
10 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
10 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
10 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
10 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
10 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
10 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
10 years ago

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

#21 @Otto42
10 years ago

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

#22 @nphaskins
10 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
10 years ago

FIxes the plugin authors not clearing properly

#23 @Otto42
10 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.