We have Social Base theme with no First or Second Sidebar and Complemantary Top and Complementary Bottom regions

If you create new content f.e. a basic page, where nothing is displayed in the Complementary area the page looks like:

wrong

The Content Area only takes 2/3 of the available width.

Modifying the content_classes in page.html.twig and adding a new css class can solve this issue:

correct

Comments

slowflyer created an issue. See original summary.

slowflyer’s picture

StatusFileSize
new1.98 KB
maikelkoopman’s picture

Category: Bug report » Feature request

This is actually by design. In your example you can see the body text will stretch if there is no sidebar. Some people might argue the text becomes less readable. Also media size like images and videos could grow both in width and height with all kinds of unpredictable behaviour. I am not saying there aren't solutions for that. But for now it is safer to have a fixed with for content / streams / overviews and not be depending on block placement.

I think it would be a good idea to add a feature to force a 1-column layout. But I am not sure yet what or where should trigger this. It should not only work for a developer but easy to maintain for site manager roles as well.

For now if you want to use your approach you can use the patch.

slowflyer’s picture

StatusFileSize
new119.56 KB

I understand your concerns regarding media elements embedded in the content. To eliminate this, I would prefer to fix the content-area to max-width (like the with the content area has by a 2-column layout) and center content with margin: 0 auto like this:
suggestion

This eliminates the "ugly" empty Complemenary Region as shown in first screenshot.
In this case, it does not need to be configurable.

If I cant convince you, I would prefer to use your suggestion made here: https://www.drupal.org/node/2900117#comment-12231647
instead of patching page.html.twig each time I update the code. But I can't get it work.

slowflyer’s picture

StatusFileSize
new888 bytes

Here's a patch for solution above.

slowflyer’s picture

Both patches are neccessary to achive this result.

#2 first then #5

One more argument from my point of view:

Social Base as a basetheme should take more care about general layout options and a clean display, than the question how images or videos are displayed. This is a responsibility of the subtheme inheriting social base.

maikelkoopman’s picture

Status: Active » Postponed

I have tested with your patches. I think we should cater for such an one column layout indeed, but this change will now change too much for existing installs and I don't feel confident making this change now without any settings for a SM. I want to take a bit more time and see what is good for forms (can be full width) and compare it to a page display (which should be centered and get a maximum width). Also give some control via the UI.

slowflyer’s picture

@maikelkoopman: I tested once more with a subtheme and the extend mentioned in #4 and https://www.drupal.org/node/2900117#comment-12252744

The problem is, I can't remove the classes set in socialbase page.html.twig.

To make it work, I need to be able to overwrite this line completly:

<section{{ content_attributes.addClass(content_classes) }}>

This would be possible when this line is wrapped in a block like:

  {% block content_classes %}
  <section{{ content_attributes.addClass(content_classes) }}>
  {% endblock %}

This change to SocialBase has no impact on existing sites and gives subthemes the opportunity to extend / overwrite CSS classses.

kedramon’s picture

StatusFileSize
new3.89 KB

Hi guys,
my idea is to move all classes to preprocess function,
user will be able to change classes in own theme like this:

use Drupal\Core\Template\Attribute;

function THEME_preprocess_page(&$variables){

  if ($variables['content_attributes'] instanceof Attribute) {
    if (SOME_CONDITION) {
      $variables['content_attributes']->removeClass('layout--with-complementary')
    }
  }
}

will it work?

kedramon’s picture

StatusFileSize
new6.2 KB

Patch updated, now <section> is in twig block.

maikelkoopman’s picture

This change has been merged in develop and will be part of release 1.7.
There are two methods present:

- You can extend the template and override the section twig block
- You can manipulate the classes via theme_preprocess_page function (preferred method is to extend the Page class)

maikelkoopman’s picture

Status: Postponed » Fixed
slowflyer’s picture

Status: Fixed » Needs work

From my point of view, the logic is not correct:

First:

Original:
page.complementary_top or page.complementary_bottom ? 'layout--with-complementary',
New:
if ($variables['page']['complementary_top'] && $variables['page']['complementary_bottom']) {

The original is correct. As soon as one region exists we need 2column layout 'layout--with-complementary'

Second:

      if (!empty($variables['page']['sidebar_second']) || !empty($variables['page']['sidebar_first'])) {
        $attributes->addClass('layout--with-two-columns');
      }

If both regions are not empty we need 3column layout 'layout--with-three-columns'. But will end up with 2 columns.

Original code is:
page.complementary_top is empty and page.complementary_bottom is empty and page.sidebar_second is empty and page.sidebar_first ? 'layout--with-two-columns',
page.complementary_top is empty and page.complementary_bottom is empty and page.sidebar_first is empty and page.sidebar_second ? 'layout--with-two-columns',

Simply replace "||" by "xor".

maikelkoopman’s picture

Thanks for the heads up. Volodymyr has created a new commit with the changes. Now all logic is tested and works. Just waiting for the automated tests to pass and then I will merge and close the issue.

maikelkoopman’s picture

Status: Needs work » Fixed

  • maikelkoopman committed a573186 on 8.x-1.x
    #2907221 by maikelkoopman: display page titles
    
  • maikelkoopman committed 0ba9424 on 8.x-1.x
    #2907221 by maikelkoopman: correct quotes for escaping regex
    
  • maikelkoopman committed 5891a99 on 8.x-1.x
    #2907221 by maikelkoopman: update behat test to match existing titles
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Yuri’s picture

The code in socialbase/src/Plugin/Preprocess/Page.php is still not working correctly.

I have tested with a basic page without blocks in the complementary regions and not in the sidebars.

The following code does not work:

if (empty($variables['page']['complementary_top']) && empty($variables['page']['complementary_bottom'])) {
      if ($variables['page']['sidebar_first'] && $variables['page']['sidebar_second']) {
        $attributes->addClass('layout--with-three-columns');
      }
      if (!empty($variables['page']['sidebar_second']) xor !empty($variables['page']['sidebar_first'])) {
        $attributes->addClass('layout--with-two-columns');
      }
    }

i did some testing and it appears that the complementary_top and complementary_bottom variables are never seen as empty, even if there are not blocks in those regions.

slowflyer’s picture

@Yuri: disable this block: "Primary admin actions" in Complementary Top region, or move it where ever you like to, if you think you need it ...

then complementary_top and complementary_bottom vairables are empty

delacosta456’s picture

hi
On my own side i hidden "Primary admin actions" block the region looks to not be displayed anymore but the content region doesn't automatically set to full width.

what should i do please ?