Make jobs.wordpress.net fully responsive

[mercime]

The custom theme is built on _s. Needs some more tweaks to make it fully responsive down to 240px. Can take this on when files are available in SVN.

[mercime]

Patch posted below is a quick fix to make site responsive on small screens based on the current 996 grid CSS used in theme. Images - before and after - are attached for reference.

@media only screen and (max-width: 767px) {
	.container .hentry .grid_3,
	.container .hentry .grid_4,
	.container .hentry .grid_5,
	.container .hentry .grid_6,
	.container .jobs-group .grid_1,
	.container .jobs-group .grid_2,
	.container .jobs-group .grid_4,
	.container .jobs-group .grid_7,
	.post-job-job-info {
		width: 100%;
	}
	.container .jobs-group .grid_1,
	.container .jobs-group .grid_2,
	.container .jobs-group .grid_4,
	.container .hentry .grid_3 {
		padding-left: 20px;
		padding-right: 20px;
	}
	.container .post-job-job-info .grid_3 {
		padding-left: 0;	
	}
	.post-job-input input[type="text"],
	.post-job-input textarea {
		width: 95%;
	}
	.container .grid_5.post-job-contact-info {
		border: none;
	}
	.container .hentry {
		word-wrap: break-word;
	}
	.items-required  {
 		position: relative;
		top: 0;
		right: 0;
	}
	span.edit-link {
	 	margin-left: 20px; 
	}
}

[mercime]

Home Page

[mercime]

Post a Job

[mercime]

Single Job View

[coffee2code]

Patch integrating @mercime's mobile changes with additional mobile changes

[coffee2code]

Attached and applied meta-84.diff​ to the site. It incorporates @mercime's mobile changes, as well as some additional fixes geared at the header and the footer.

It looks to be almost there. Still remaining:

• The main menu when collapsed into "Menu" at the smallest size isn't functional
• At the smallest size, the "Position Types" sidebar should get replaced with a dropdown menu for selecting a specific position type

[mercime]

@coffee2code I can work on both.

• Would help a lot if @melchoyce has designs for the main nav menu and the position types sidebar/menu for small screens so we can try resolve this in one go.
• Do you require CSS-only solution for the sidebar nav which turns to dropdown menu in small screens?

[samuelsidler]

Meant to comment before...

• I don't think @melchoyce has designs for them.
• Doesn't have to be CSS-only. Things should be open sourced soon.

[mercime]

two responsive menus

[mercime]

Attached patch is first pass for two mobile menus in theme and other enhancements:

• style.css - Added mobile styles, fixed color and padding of main navigation menu-toggle element, added icons to the two mobile menus, and fixed padding for job category row without any entry.
• wporg-footer.php - Removed closing body and html tags which duplicated tags already in the footer.php file.
• sidebar.php - Added hooks to enable mobile menu set up of Position Type categories
• navigation.js - Replaced navigation.js which handled one menu with jQuery to handle both mobile menus: the Position Type menu at 767px breakpoint when main container becomes one-column and then the Main Navigation menu at 600px per breakpoint already set in theme for that menu
• functions.php - Moved other enqueued stylesheets above the theme's main stylesheet and added jQuery dependency for revised navigation.js

Attached image: shows comparison between the two responsive menus at Jobs site and Demo site at 600px and 767px breakpoints per info posted above.

[coffee2code]

In 122:

jobs.wordpress.net: Remove superfluous closing 'body' and 'html' tags. props mercime. see #84

[coffee2code]

In 123:

jobs.wordpress.net: Properly implement mobile menus. props mercime. see #84

• style.css:
  • Add mobile styles
  • Fix color and padding of main navigation menu-toggle element
  • Add icons to the two mobile menus
  • Fix padding for job category row without any entry
• sidebar.php: Add hooks to enable mobile menu set up of Position Type categories
• navigation.js: Replace navigation.js which handled one menu with jQuery to handle both mobile menus (Position Type and Main Navigation menus)
• functions.php: Move other enqueued stylesheets above the theme's main stylesheet and add jQuery dependency for revised navigation.js

[coffee2code]

Thanks @mercime!

The changes have been committed and are now live on the site.

The main issue I have with the site currently are the actual job listings at smaller widths. I've been working on improving that part and am just about done with it. Gotta try some cross-browser testing and tidy things up. In the meantime, I'm attaching screenshots of how things will be changed.

[coffee2code]

A side-by-side image of before-and-after screenshots of a main page job listing section with browser at 500px.

[coffee2code]

A side-by-side image of before-and-after screenshots of a main page job listing section with browser at 320px.

[coffee2code]

CSS changes to improve responsiveness for job listings

[coffee2code]

Added the aforementioned patch for job listing responsiveness improvements. Should make the listing appear as in my previously posted screenshots.

I'll probably make the changes live later this week unless there any objections.

[mercime]

Kudos @coffee2code :) Noticed that you have implemented the patch at jobs.wordpress.net

Just noticed one entry ->
Dec. 6 WordPress Thesis Site Moved into a Free Responsive Theme and Customizing/Troubleshooting

The last word, Troubleshooting, shows up as Troubleshoot per image attached (disregard "need space" in image, you have fixed it already :) ).

So at @media only screen and (max-width: 479px), recommend adding:
.jobs-group a {
word-wrap: break-word;
}

Thanks.

[mercime]

long non-breaking title/link

[coffee2code]

In 169:

jobs.wordpress.net: improve responsiveness for the job listings. see #84

[coffee2code]

In 170:

jobs.wordpress.net: fix hidden overflow of long titles in job listings at smallest width. props mercime. Fixes #84

[coffee2code]

Thanks for that last tweak, @mercime! With it, I believe we've completed the task of making the site fully responsive.

Any issues or changes going forward should be opened as new tickets.