Commit 5184e99d authored by lauriii's avatar lauriii

Issue #2852608 by Manuel Garcia, DyanneNova, markconroy, tim.plunkett,...

Issue #2852608 by Manuel Garcia, DyanneNova, markconroy, tim.plunkett, joelpittet, DickJohnson, Scorpid: Review layout CSS and markup
parent fece3919
......@@ -50,7 +50,7 @@ public function testNodeView() {
// By default, the one-column layout is used.
$this->drupalGet('node/1');
$this->assertSession()->elementExists('css', '.layout--onecol');
$this->assertSession()->elementExists('css', '.layout-region--content .field--name-body');
$this->assertSession()->elementExists('css', '.layout__region--content .field--name-body');
$this->drupalGet('admin/structure/types/manage/article/display');
$this->assertEquals(['Content', 'Disabled'], $this->getRegionTitles());
......
......@@ -47,9 +47,9 @@ protected function setUp() {
public function testEntityViewModes() {
// By default, the field is not visible.
$this->drupalGet('entity_test/1/test');
$this->assertSession()->elementNotExists('css', '.layout-region--content .field--name-field-test-text');
$this->assertSession()->elementNotExists('css', '.layout__region--content .field--name-field-test-text');
$this->drupalGet('entity_test/1');
$this->assertSession()->elementNotExists('css', '.layout-region--content .field--name-field-test-text');
$this->assertSession()->elementNotExists('css', '.layout__region--content .field--name-field-test-text');
// Change the layout for the "test" view mode. See
// core.entity_view_mode.entity_test.test.yml.
......@@ -65,9 +65,9 @@ public function testEntityViewModes() {
// Each view mode has a different layout.
$this->drupalGet('entity_test/1/test');
$this->assertSession()->elementExists('css', '.layout-region--content .field--name-field-test-text');
$this->assertSession()->elementExists('css', '.layout__region--content .field--name-field-test-text');
$this->drupalGet('entity_test/1');
$this->assertSession()->elementNotExists('css', '.layout-region--content .field--name-field-test-text');
$this->assertSession()->elementNotExists('css', '.layout__region--content .field--name-field-test-text');
}
/**
......@@ -90,46 +90,46 @@ public function testEntityForm() {
// The field is moved to the default region for the new layout.
$this->assertSession()->pageTextContains('Your settings have been saved.');
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->drupalGet('entity_test/manage/1/edit');
// No fields are visible, and the regions don't display when empty.
$this->assertFieldInRegion('field_test_text[0][value]', 'left');
$this->assertSession()->elementExists('css', '.layout-region--left .field--name-field-test-text');
$this->assertFieldInRegion('field_test_text[0][value]', 'first');
$this->assertSession()->elementExists('css', '.layout__region--first .field--name-field-test-text');
// After a refresh the new regions are still there.
$this->drupalGet('entity_test/structure/entity_test/form-display');
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
// Drag the field to the right region.
// Drag the field to the second region.
$field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
$right_region_row = $this->getSession()->getPage()->find('css', '.region-right-message');
$field_test_text_row->find('css', '.handle')->dragTo($right_region_row);
$second_region_row = $this->getSession()->getPage()->find('css', '.region-second-message');
$field_test_text_row->find('css', '.handle')->dragTo($second_region_row);
$this->assertSession()->assertWaitOnAjaxRequest();
$this->submitForm([], 'Save');
$this->assertSession()->pageTextContains('Your settings have been saved.');
// The new layout is used.
$this->drupalGet('entity_test/manage/1/edit');
$this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
$this->assertFieldInRegion('field_test_text[0][value]', 'right');
$this->assertSession()->elementExists('css', '.layout__region--second .field--name-field-test-text');
$this->assertFieldInRegion('field_test_text[0][value]', 'second');
// Move the field to the right region without tabledrag.
// Move the field to the second region without tabledrag.
$this->drupalGet('entity_test/structure/entity_test/form-display');
$this->getSession()->getPage()->pressButton('Show row weights');
$this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'right');
$this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'second');
$this->assertSession()->assertWaitOnAjaxRequest();
$this->submitForm([], 'Save');
$this->assertSession()->pageTextContains('Your settings have been saved.');
// The updated region is used.
$this->drupalGet('entity_test/manage/1/edit');
$this->assertFieldInRegion('field_test_text[0][value]', 'right');
$this->assertFieldInRegion('field_test_text[0][value]', 'second');
// The layout is still in use without Field UI.
$this->container->get('module_installer')->uninstall(['field_ui']);
$this->drupalGet('entity_test/manage/1/edit');
$this->assertFieldInRegion('field_test_text[0][value]', 'right');
$this->assertFieldInRegion('field_test_text[0][value]', 'second');
}
/**
......@@ -147,23 +147,23 @@ public function testEntityView() {
$this->submitForm([], 'Save');
$this->assertSession()->pageTextContains('Your settings have been saved.');
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->drupalGet('entity_test/1');
// No fields are visible, and the regions don't display when empty.
$this->assertSession()->elementNotExists('css', '.layout--twocol');
$this->assertSession()->elementNotExists('css', '.layout-region');
$this->assertSession()->elementNotExists('css', '.layout__region');
$this->assertSession()->elementNotExists('css', '.field--name-field-test-text');
// After a refresh the new regions are still there.
$this->drupalGet('entity_test/structure/entity_test/display');
$this->assertEquals(['Top', 'Left', 'Right', 'Bottom', 'Disabled'], $this->getRegionTitles());
$this->assertEquals(['Top', 'First', 'Second', 'Bottom', 'Disabled'], $this->getRegionTitles());
// Drag the field to the left region.
// Drag the field to the first region.
$this->assertTrue($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
$field_test_text_row = $this->getSession()->getPage()->find('css', '#field-test-text');
$left_region_row = $this->getSession()->getPage()->find('css', '.region-left-message');
$field_test_text_row->find('css', '.handle')->dragTo($left_region_row);
$first_region_row = $this->getSession()->getPage()->find('css', '.region-first-message');
$field_test_text_row->find('css', '.handle')->dragTo($first_region_row);
$this->assertSession()->assertWaitOnAjaxRequest();
$this->assertFalse($this->assertSession()->optionExists('fields[field_test_text][region]', 'hidden')->isSelected());
$this->submitForm([], 'Save');
......@@ -172,25 +172,25 @@ public function testEntityView() {
// The new layout is used.
$this->drupalGet('entity_test/1');
$this->assertSession()->elementExists('css', '.layout--twocol');
$this->assertSession()->elementExists('css', '.layout-region--left .field--name-field-test-text');
$this->assertSession()->elementExists('css', '.layout__region--first .field--name-field-test-text');
// Move the field to the right region without tabledrag.
// Move the field to the second region without tabledrag.
$this->drupalGet('entity_test/structure/entity_test/display');
$this->getSession()->getPage()->pressButton('Show row weights');
$this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'right');
$this->getSession()->getPage()->selectFieldOption('fields[field_test_text][region]', 'second');
$this->assertSession()->assertWaitOnAjaxRequest();
$this->submitForm([], 'Save');
$this->assertSession()->pageTextContains('Your settings have been saved.');
// The updated region is used.
$this->drupalGet('entity_test/1');
$this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
$this->assertSession()->elementExists('css', '.layout__region--second .field--name-field-test-text');
// The layout is still in use without Field UI.
$this->container->get('module_installer')->uninstall(['field_ui']);
$this->drupalGet('entity_test/1');
$this->assertSession()->elementExists('css', '.layout--twocol');
$this->assertSession()->elementExists('css', '.layout-region--right .field--name-field-test-text');
$this->assertSession()->elementExists('css', '.layout__region--second .field--name-field-test-text');
}
/**
......@@ -258,7 +258,7 @@ protected function getRegionTitles() {
* The machine name of the region.
*/
protected function assertFieldInRegion($field_selector, $region_name) {
$region_element = $this->getSession()->getPage()->find('css', ".layout-region--$region_name");
$region_element = $this->getSession()->getPage()->find('css', ".layout__region--$region_name");
$this->assertNotNull($region_element);
$this->assertSession()->fieldExists($field_selector, $region_element);
}
......
......@@ -15,14 +15,14 @@ layout_twocol:
template: layout--twocol
library: layout_discovery/twocol
category: 'Columns: 2'
default_region: left
default_region: first
regions:
top:
label: Top
left:
label: Left
right:
label: Right
first:
label: First
second:
label: Second
bottom:
label: Bottom
......@@ -36,16 +36,16 @@ layout_twocol_bricks:
regions:
top:
label: Top
left_above:
label: 'Left above'
right_above:
label: 'Right above'
first_above:
label: 'First above'
second_above:
label: 'Second above'
middle:
label: Middle
left_below:
label: 'Left below'
right_below:
label: 'Right below'
first_below:
label: 'First below'
second_below:
label: 'Second below'
bottom:
label: Bottom
......@@ -55,16 +55,16 @@ layout_threecol_25_50_25:
template: layout--threecol-25-50-25
library: layout_discovery/threecol_25_50_25
category: 'Columns: 3'
default_region: left
default_region: second
regions:
top:
label: Top
left:
label: Left
middle:
label: Middle
right:
label: Right
first:
label: First
second:
label: Second
third:
label: Third
bottom:
label: Bottom
......@@ -74,15 +74,15 @@ layout_threecol_33_34_33:
template: layout--threecol-33-34-33
library: layout_discovery/threecol_33_34_33
category: 'Columns: 3'
default_region: left
default_region: first
regions:
top:
label: Top
left:
label: Left
middle:
label: Middle
right:
label: Right
first:
label: First
second:
label: Second
third:
label: Third
bottom:
label: Bottom
......@@ -11,14 +11,15 @@
*/
#}
{%
set classes = [
'layout--onecol',
]
set classes = [
'layout',
'layout--onecol',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
<div class="layout-region layout-region--content">
{{ content.content }}
<div{{ attributes.addClass(classes) }}>
<div class="layout__region layout__region--content">
{{ content.content }}
</div>
</div>
</div>
{% endif %}
.layout--onecol .layout-region {
/*
* @file
* Provides the layout styles for layout_onecol.
*/
.layout--onecol .layout__region {
width: 100%;
}
......@@ -14,34 +14,41 @@
*/
#}
{%
set classes = [
'layout--threecol',
]
set classes = [
'layout',
'layout--threecol-25-50-25',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
{% endif %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout__region layout__region--top">
{{ content.top }}
</div>
{% endif %}
<div class="layout-region layout-region--side">
{{ content.left }}
</div>
{% if content.first %}
<div class="layout__region layout__region--first">
{{ content.first }}
</div>
{% endif %}
<div class="layout-region layout-region--middle">
{{ content.middle }}
</div>
{% if content.second %}
<div class="layout__region layout__region--second">
{{ content.second }}
</div>
{% endif %}
<div class="layout-region layout-region--side">
{{ content.right }}
</div>
{% if content.third %}
<div class="layout__region layout__region--third">
{{ content.third }}
</div>
{% endif %}
{% if content.bottom %}
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
</div>
{% endif %}
</div>
{% if content.bottom %}
<div class="layout__region layout__region--bottom">
{{ content.bottom }}
</div>
{% endif %}
</div>
{% endif %}
.layout--threecol {
/*
* @file
* Provides the layout styles for layout_threecol_25_50_25.
*
* @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
* in before this can be marked as stable.
*/
.layout--threecol-25-50-25 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--threecol > .layout-region {
flex: 0 1 25%;
}
.layout--threecol > .layout-region--fullwidth {
.layout--threecol-25-50-25 > .layout__region,
.layout--threecol-25-50-25 > .layout__region--second {
flex: 0 1 100%;
}
.layout--threecol > .layout-region--middle {
flex: 0 1 50%;
@media screen and (min-width: 40em) {
.layout--threecol-25-50-25 > .layout__region--first,
.layout--threecol-25-50-25 > .layout__region--third {
flex: 0 1 25%;
}
.layout--threecol-25-50-25 > .layout__region--second {
flex: 0 1 50%;
}
}
......@@ -14,34 +14,41 @@
*/
#}
{%
set classes = [
'layout--threecol-33',
]
set classes = [
'layout',
'layout--threecol-33-34-33',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
{% endif %}
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout__region layout__region--top">
{{ content.top }}
</div>
{% endif %}
<div class="layout-region">
{{ content.left }}
</div>
{% if content.first %}
<div class="layout__region layout__region--first">
{{ content.first }}
</div>
{% endif %}
<div class="layout-region">
{{ content.middle }}
</div>
{% if content.second %}
<div class="layout__region layout__region--second">
{{ content.second }}
</div>
{% endif %}
<div class="layout-region">
{{ content.right }}
</div>
{% if content.third %}
<div class="layout__region layout__region--third">
{{ content.third }}
</div>
{% endif %}
{% if content.bottom %}
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
{% if content.bottom %}
<div class="layout__region layout__region--bottom">
{{ content.bottom }}
</div>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
.layout--threecol-33 {
/*
* @file
* Provides the layout styles for layout_threecol_33_34_33.
*
* @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
* in before this can be marked as stable.
*/
.layout--threecol-33-34-33 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--threecol-33 > .layout-region {
flex: 0 1 33%;
.layout--threecol-33-34-33 > .layout__region {
flex: 0 1 100%;
}
.layout--threecol-33 > .layout-region--fullwidth {
flex: 0 1 100%;
@media screen and (min-width: 40em) {
.layout--threecol-33-34-33 > .layout__region--first,
.layout--threecol-33-34-33 > .layout__region--second,
.layout--threecol-33-34-33 > .layout__region--third {
flex: 0 1 33%;
}
}
......@@ -11,26 +11,35 @@
*/
#}
{%
set classes = [
'layout--twocol',
]
set classes = [
'layout',
'layout--twocol',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
{% if content.top %}
<div class="layout__region layout__region--top">
{{ content.top }}
</div>
{% endif %}
<div class="layout-region layout-region--left">
{{ content.left }}
</div>
{% if content.first %}
<div class="layout__region layout__region--first">
{{ content.first }}
</div>
{% endif %}
<div class="layout-region layout-region--right">
{{ content.right }}
</div>
{% if content.second %}
<div class="layout__region layout__region--second">
{{ content.second }}
</div>
{% endif %}
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
</div>
{% if content.bottom %}
<div class="layout__region layout__region--bottom">
{{ content.bottom }}
</div>
{% endif %}
</div>
{% endif %}
/*
* @file
* Provides the layout styles for layout_twocol.
*
* @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
* in before this can be marked as stable.
*/
.layout--twocol {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--twocol > .layout-region {
flex: 0 1 50%;
.layout--twocol > .layout__region {
flex: 0 1 100%;
}
.layout--twocol > .layout-region--fullwidth {
flex: 0 1 100%;
@media screen and (min-width: 40em) {
.layout--twocol > .layout__region--first,
.layout--twocol > .layout__region--second {
flex: 0 1 50%;
}
}
......@@ -14,38 +14,53 @@
*/
#}
{%
set classes = [
'layout--twocol-bricks',
]
set classes = [
'layout',
'layout--twocol-bricks',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
<div class="layout-region layout-region--fullwidth">
{{ content.top }}
</div>
<div{{ attributes.addClass(classes) }}>
{% if content.top %}
<div class="layout__region layout__region--top">
{{ content.top }}
</div>
{% endif %}
<div class="layout-region layout-region--left_above">
{{ content.left_above }}
</div>
{% if content.first_above %}
<div class="layout__region layout__region--first-above">
{{ content.first_above }}
</div>
{% endif %}
<div class="layout-region layout-region--right_above">
{{ content.right_above }}
</div>
{% if content.second_above %}
<div class="layout__region layout__region--second-above">
{{ content.second_above }}
</div>
{% endif %}
<div class="layout-region layout-region--middle">
{{ content.middle }}
</div>
{% if content.middle %}
<div class="layout__region layout__region--middle">
{{ content.middle }}
</div>
{% endif %}
<div class="layout-region layout-region--left_below">
{{ content.left_below }}
</div>
{% if content.first_below %}
<div class="layout__region layout__region--first-below">
{{ content.first_below }}
</div>
{% endif %}
<div class="layout-region layout-region--right_below">
{{ content.right_below }}
</div>
{% if content.second_below %}
<div class="layout__region layout__region--second-below">
{{ content.second_below }}
</div>
{% endif %}
<div class="layout-region layout-region--fullwidth">
{{ content.bottom }}
{% if content.bottom %}
<div class="layout__region layout__region--bottom">
{{ content.bottom }}
</div>
{% endif %}
</div>
</div>
{% endif %}
/*
* @file
* Provides the layout styles for layout_twocol_bricks.
*
* @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
* in before this can be marked as stable.
*/
.layout--twocol-bricks {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.layout--twocol-bricks > .layout-region {
flex: 0 1 50%;
.layout--twocol-bricks > .layout__region {
flex: 0 1 100%;
}
.layout--twocol-bricks > .layout-region--fullwidth {
flex: 0 1 100%;
@media screen and (min-width: 40em) {
.layout--twocol-bricks > .layout__region--first-above,
.layout--twocol-bricks > .layout__region--second-above,
.layout--twocol-bricks > .layout__region--first-below,
.layout--twocol-bricks > .layout__region--second-below {
flex: 0 1 50%;
}
}
......@@ -4,15 +4,20 @@
* Template for a generic layout.
*/
#}
{% set classes = [
'layout--' ~ layout.id|clean_class,
] %}
{%
set classes = [