Making WordPress.org

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#84 closed defect (bug) (fixed)

Make jobs.wordpress.net fully responsive

Reported by: mercime's profile mercime Owned by: coffee2code's profile coffee2code
Milestone: Priority: low
Component: Jobs (jobs.wordpress.net) Keywords: has-patch
Cc:

Description

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.

Attachments (10)

homepage.png (36.8 KB) - added by mercime 11 years ago.
Home Page
postjob.png (33.6 KB) - added by mercime 11 years ago.
Post a Job
jobview.png (39.7 KB) - added by mercime 11 years ago.
Single Job View
meta-84.diff (1.9 KB) - added by coffee2code 11 years ago.
Patch integrating @mercime's mobile changes with additional mobile changes
84-responsive-menus.jpg (245.5 KB) - added by mercime 10 years ago.
two responsive menus
84-jquery.patch (6.5 KB) - added by mercime 10 years ago.
jobs-c2c-500px.jpg (336.7 KB) - added by coffee2code 10 years ago.
A side-by-side image of before-and-after screenshots of a main page job listing section with browser at 500px.
jobs-c2c-320px.jpg (276.1 KB) - added by coffee2code 10 years ago.
A side-by-side image of before-and-after screenshots of a main page job listing section with browser at 320px.
meta-84-responsive-job-listings.diff (5.4 KB) - added by coffee2code 10 years ago.
CSS changes to improve responsiveness for job listings
jobs-120813.png (17.7 KB) - added by mercime 10 years ago.
long non-breaking title/link

Download all attachments as: .zip

Change History (25)

#1 @mercime
11 years ago

  • Cc mercijavier@… added

#2 @mercime
11 years ago

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
11 years ago

Home Page

@mercime
11 years ago

Post a Job

@mercime
11 years ago

Single Job View

#3 @mercime
11 years ago

  • Keywords has-patch added

@coffee2code
11 years ago

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

#4 @coffee2code
11 years ago

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

#5 @mercime
11 years ago

@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 (closed and opened) 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?
Last edited 11 years ago by mercime (previous) (diff)

#6 @samuelsidler
11 years ago

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
10 years ago

two responsive menus

@mercime
10 years ago

#7 @mercime
10 years ago

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.

#8 @coffee2code
10 years ago

In 122:

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

#9 @coffee2code
10 years ago

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

#10 @coffee2code
10 years ago

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
10 years ago

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

@coffee2code
10 years ago

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

@coffee2code
10 years ago

CSS changes to improve responsiveness for job listings

#11 @coffee2code
10 years ago

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.

#12 @mercime
10 years ago

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
10 years ago

long non-breaking title/link

#13 @coffee2code
10 years ago

In 169:

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

#14 @coffee2code
10 years ago

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

In 170:

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

#15 @coffee2code
10 years ago

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.

Note: See TracTickets for help on using tickets.