WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#25031 closed enhancement (fixed)

Twenty Fourteen: Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar.

Reported by: iamtakashi Owned by: lancewillett
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch 2nd-opinion needs-testing
Focuses: Cc:

Description

Currently the theme has some default widgets for the content sidebar so it's always there (Except the full with page template). I think it would be great if the sidebar gets removed when there is no widget specified for the sidebar in the widget admin, and the main content area expands to the right. Similar to how Twenty Twelve does.

I've seen some sites using customised Further that removed the sidebar. For example:

http://chicandgeek.com/tag/questionnaire/

http://vfxserbia.com/2013/08/12/test-simulacija-vode-bazuka-ivan/

SInce the theme has another sidebar this could be a good idea.

Attachments (7)

25031.diff (4.0 KB) - added by eherman24 5 years ago.
new resolution
25031.2.diff (4.0 KB) - added by eherman24 5 years ago.
new resolution - revised
25031.3.diff (5.6 KB) - added by eherman24 5 years ago.
revised my previous patch
25031.4.diff (12.4 KB) - added by iamtakashi 5 years ago.
Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar.
25031.5.diff (10.5 KB) - added by obenland 5 years ago.
25031.6.diff (40.3 KB) - added by iamtakashi 5 years ago.
25031.7.diff (2.0 KB) - added by iamtakashi 5 years ago.

Download all attachments as: .zip

Change History (32)

#1 @trishasalas
5 years ago

  • Cc trisha@… added

#2 @eherman24
5 years ago

  • Cc evan.m.herman@… added
  • Keywords has-patch needs-testing added; needs-patch removed
  • Version set to 3.6

If the 'content' widget is not set within the admin dashboard 'widgets' screen then the 'content' widget is not displayed and the post content stretches to full width.

#3 @obenland
5 years ago

  • Keywords has-patch needs-testing removed
  • Milestone changed from Awaiting Review to 3.8
  • Version changed from 3.6 to trunk

We should strive for a solution that separates HTML and CSS more.

#4 @eherman24
5 years ago

  • Keywords has-patch 2nd-opinion needs-testing added

Maybe this is a better route to take?

Edit: I noticed taht the content was extending full width on the homepage when the content sidebar was not set. From my understanding we only want this to extend full width on single post pages. I re-adjusted my resolution and uploaded a new patch to reflect that.

New Patch: 25031.2.diff​

Last edited 5 years ago by eherman24 (previous) (diff)

@eherman24
5 years ago

new resolution

@eherman24
5 years ago

new resolution - revised

#5 @eherman24
5 years ago

Still working on this. New patch coming soon. The previous one supplied does not work as intended.

#6 @eherman24
5 years ago

Have adjusted the patch to reflect the corrections to the bug or two that I noticed in my own patch.

@eherman24
5 years ago

revised my previous patch

@iamtakashi
5 years ago

Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar.

#7 @iamtakashi
5 years ago

I think archive page should expand if the content sidebar is not active. So I've also worked on a patch above. Here is what I did.

  • Add custom body classes to alter the layout.
  • Remove full-width class from full-width page and image attachment templates.
  • Bump up the size of featured image.
  • Remove the default widgets from the content sidebar template.

This responsive pattern is not perfect but I hope this is a good start. I'll propose a new responsive pattern in a separate ticket. (Because I'd like adjust the responsive pattern overall.)

Last edited 5 years ago by iamtakashi (previous) (diff)

#8 @obenland
5 years ago

I think we should look into reordering the content blocks and try to get rid of as many wrapper divs as possible.

Essentially we're looking at a three column layout with an optional featured content section - something that should be pretty straight forward. I wouldn't mind keeping the .full-width class around for cases where we're not on the front page and the second sidebar is not active.

#9 @RDall
5 years ago

If were going to always have the sidebar in the front page but also going to have the featured image going from left to right the image will end with white space if the sidebar doesn't flow as long as the content. eg >> http://cl.ly/image/0N3w0t2C0315

This is completely normal for most themes which have a sidebar. But if the content is going to stretch across the content area of the site then the featured image should be enlarged to the full width of the content area as well.

eg. My hacked together mockup. http://cl.ly/image/3N1x1J1S3t3O

If someone wants to have a sidebar but only has one small widget I don't think we should accommodate for that… In a sense an all or nothing scenario… 

#10 follow-up: @obenland
5 years ago

I played with it a bit today and one thing I noticed was that we need to bump the post thumbnail size to a width of 1010px for that to work.

@obenland
5 years ago

#11 in reply to: ↑ 10 @iamtakashi
5 years ago

Replying to obenland:

I played with it a bit today and one thing I noticed was that we need to bump the post thumbnail size to a width of 1010px for that to work.

Shouldn't it be 1038px? (1260px-222px)

#12 @cainm
5 years ago

  • Cc cain@… added

#13 @obenland
5 years ago

Per IRC office hours: iamtakashi will add a mockup for how to better deal with the added space.

#14 follow-up: @iamtakashi
5 years ago

This is what I imagine for the layout without the content sidebar.

http://f.cl.ly/items/3R06090S2M0D0V3K1N2c/2014-no-sidebar.jpg

I'd keep the text content width the same rather than expanding it because the text sizes and line length are core aspects of the design and the readability will suffer if we expand the size. Also we don't need to worry about varying $content_width. So, there would be extra margins both sides that allow users to move images and quotes with alignleft and alignright classes into them. I think this is better use of space in this context when a user wants to have a striking featured image rather than the sidebar.

Last edited 5 years ago by iamtakashi (previous) (diff)

#15 @RDall
5 years ago

I really like what you have done her Takashi.

Aside from the technical requirements to do this I like the style and design you implemented here.

#16 in reply to: ↑ 14 ; follow-up: @obenland
5 years ago

Replying to iamtakashi:

So, there would be extra margins both sides that allow users to move images and quotes with alignleft and alignright classes into them. I think this is better use of space in this context when a user wants to have a striking featured image rather than the sidebar.

Have you tested it with thumbnail images?

#17 in reply to: ↑ 16 @iamtakashi
5 years ago

Replying to obenland:

Have you tested it with thumbnail images?

That is a good point. What about shifting only images above medium size? What works for large images might not work for small images and I think that's OK. We can address each size differently because we have classes that allows us to do so.

@iamtakashi
5 years ago

#18 @iamtakashi
5 years ago

Here is a new patch.

Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar. Additional changes with this patch are the followings.

  • Improvement for responsive pattern.
  • Minor style adjustments and bug fixes.
  • Tone down the color of the diagonal lines.

#19 follow-up: @RDall
5 years ago

@iamtakashi I can't get my the Git Repo to apply the patch you crafted. ( Some reason Scribu tutorial is not working for when I try to apply a patch)  Is there a dev site I can see your patch?

#20 in reply to: ↑ 19 ; follow-up: @iamtakashi
5 years ago

Replying to RDall:

Is there a dev site I can see your patch?

I'm afraid no. I do changes my local install. I don't know much about the tutorial and the setup but, if it helps, the patch is made in a checkout of the develop.svn.wordpress.org repo. More info

Have you tried with svn? I've just tested to apply the patch and it works just fine with svn.

#21 in reply to: ↑ 20 @RDall
5 years ago

Replying to iamtakashi:

Have you tried with svn? I've just tested to apply the patch and it works just fine with svn.

I got it to work. I instead downloaded the patch via the browser and then applied.

Tone down the color of the diagonal lines.

The tone down of the diagonal lines in the new design is great. It is much less distracting.

#22 follow-up: @lancewillett
5 years ago

As discussed in today's office hours, two big issues with .6 patch:

  1. Featured images limited to posts -- should be removed, let's allow it on pages also
  2. Adding the wider featured image -- let's proceed without adding that image size for now (but adding a patch here to do it if we decide to come back to it)

Takashi is going to split up the changes a bit more so we can get the CSS fixes in sooner.

#23 in reply to: ↑ 22 @iamtakashi
5 years ago

Replying to lancewillett:

  1. Featured images limited to posts -- should be removed, let's allow it on pages also

A separated new ticket, #25325, has been created for this issue.

@iamtakashi
5 years ago

#24 @iamtakashi
5 years ago

The new patch above makes the content sidebar optional and alters the layout to full-width if the sidebar is not active but without adding wider featured image (for now) :)

#25 @lancewillett
5 years ago

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

In 25624:

Twenty Fourteen: make the content sidebar optional and alter the layout to full-width if the sidebar is not active, but without adding wider featured image (for now). Props iamtakashi, closes #25031.

Note: See TracTickets for help on using tickets.