WordPress.org

Making WordPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#84 closed defect (fixed)

Make jobs.wordpress.net fully responsive

Reported by: mercime Owned by: 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 6 years ago.
Home Page
postjob.png (33.6 KB) - added by mercime 6 years ago.
Post a Job
jobview.png (39.7 KB) - added by mercime 6 years ago.
Single Job View
meta-84.diff (1.9 KB) - added by coffee2code 6 years ago.
Patch integrating @mercime's mobile changes with additional mobile changes
84-responsive-menus.jpg (245.5 KB) - added by mercime 6 years ago.
two responsive menus
84-jquery.patch (6.5 KB) - added by mercime 6 years ago.
jobs-c2c-500px.jpg (336.7 KB) - added by coffee2code 6 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 6 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 6 years ago.
CSS changes to improve responsiveness for job listings
jobs-120813.png (17.7 KB) - added by mercime 6 years ago.
long non-breaking title/link

Download all attachments as: .zip

Change History (25)

#1 @mercime
6 years ago

  • Cc mercijavier@… added

#2 @mercime
6 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
6 years ago

Home Page

@mercime
6 years ago

Post a Job

@mercime
6 years ago

Single Job View

#3 @mercime
6 years ago

  • Keywords has-patch added

@coffee2code
6 years ago

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

#4 @coffee2code
6 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
6 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 6 years ago by mercime (previous) (diff)

#6 @samuelsidler
6 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
6 years ago

two responsive menus

@mercime
6 years ago

#7 @mercime
6 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
6 years ago

In 122:

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

#9 @coffee2code
6 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
6 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
6 years ago

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

@coffee2code
6 years ago

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

@coffee2code
6 years ago

CSS changes to improve responsiveness for job listings

#11 @coffee2code
6 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
6 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
6 years ago

long non-breaking title/link

#13 @coffee2code
6 years ago

In 169:

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

#14 @coffee2code
6 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
6 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.