summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLauri Eskola2017-05-17 06:20:57 (GMT)
committerLauri Eskola2017-05-17 06:20:57 (GMT)
commit5184e99d3f69f853fce0e539d1923d5494713857 (patch)
tree74b1d68210e07934da84fd4d63ed41d03b675084
parentfece3919a394c4b66bfaa3e42cf68b0e1a545e52 (diff)
Issue #2852608 by Manuel Garcia, DyanneNova, markconroy, tim.plunkett, joelpittet, DickJohnson, Scorpid: Review layout CSS and markup
-rw-r--r--core/modules/field_layout/tests/src/Functional/FieldLayoutTest.php2
-rw-r--r--core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php58
-rw-r--r--core/modules/layout_discovery/layout_discovery.layouts.yml54
-rw-r--r--core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig15
-rw-r--r--core/modules/layout_discovery/layouts/onecol/onecol.css6
-rw-r--r--core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig55
-rw-r--r--core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css27
-rw-r--r--core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig53
-rw-r--r--core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css23
-rw-r--r--core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig39
-rw-r--r--core/modules/layout_discovery/layouts/twocol/twocol.css20
-rw-r--r--core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig65
-rw-r--r--core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css22
-rw-r--r--core/modules/layout_discovery/templates/layout.html.twig23
-rw-r--r--core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php154
15 files changed, 360 insertions, 256 deletions
diff --git a/core/modules/field_layout/tests/src/Functional/FieldLayoutTest.php b/core/modules/field_layout/tests/src/Functional/FieldLayoutTest.php
index a12ae18..058e6c3 100644
--- a/core/modules/field_layout/tests/src/Functional/FieldLayoutTest.php
+++ b/core/modules/field_layout/tests/src/Functional/FieldLayoutTest.php
@@ -50,7 +50,7 @@ class FieldLayoutTest extends BrowserTestBase {
// 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());
diff --git a/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php b/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php
index a0fd13c..8ddbeaf 100644
--- a/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php
+++ b/core/modules/field_layout/tests/src/FunctionalJavascript/FieldLayoutTest.php
@@ -47,9 +47,9 @@ class FieldLayoutTest extends JavascriptTestBase {
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 @@ class FieldLayoutTest extends JavascriptTestBase {
// 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 @@ class FieldLayoutTest extends JavascriptTestBase {
// 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 @@ class FieldLayoutTest extends JavascriptTestBase {
$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 @@ class FieldLayoutTest extends JavascriptTestBase {
// 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 @@ class FieldLayoutTest extends JavascriptTestBase {
* 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);
}
diff --git a/core/modules/layout_discovery/layout_discovery.layouts.yml b/core/modules/layout_discovery/layout_discovery.layouts.yml
index 98b1ed6..d1b0e5a 100644
--- a/core/modules/layout_discovery/layout_discovery.layouts.yml
+++ b/core/modules/layout_discovery/layout_discovery.layouts.yml
@@ -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
diff --git a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
index eb553cd..64b9b4e 100644
--- a/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
+++ b/core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig
@@ -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 %}
diff --git a/core/modules/layout_discovery/layouts/onecol/onecol.css b/core/modules/layout_discovery/layouts/onecol/onecol.css
index 040b7f1..e2283c5 100644
--- a/core/modules/layout_discovery/layouts/onecol/onecol.css
+++ b/core/modules/layout_discovery/layouts/onecol/onecol.css
@@ -1,3 +1,7 @@
-.layout--onecol .layout-region {
+/*
+ * @file
+ * Provides the layout styles for layout_onecol.
+ */
+.layout--onecol .layout__region {
width: 100%;
}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
index 78db2b4..8525525 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
@@ -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 %}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
index 7472d55..1f41f46 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
@@ -1,17 +1,26 @@
-.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%;
+ }
}
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
index 59461f4..5eabb04 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
@@ -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 %}
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
index 7091416..29a816f 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
@@ -1,13 +1,24 @@
-.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%;
+ }
}
diff --git a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
index efebf0f..b416cbd 100644
--- a/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig
@@ -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 %}
diff --git a/core/modules/layout_discovery/layouts/twocol/twocol.css b/core/modules/layout_discovery/layouts/twocol/twocol.css
index 41e8883..be9b59b 100644
--- a/core/modules/layout_discovery/layouts/twocol/twocol.css
+++ b/core/modules/layout_discovery/layouts/twocol/twocol.css
@@ -1,13 +1,23 @@
+/*
+ * @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%;
+ }
}
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
index 9c6231b..1099577 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
@@ -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 %}
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
index aef887a..c8466af 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
@@ -1,13 +1,25 @@
+/*
+ * @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%;
+ }
}
diff --git a/core/modules/layout_discovery/templates/layout.html.twig b/core/modules/layout_discovery/templates/layout.html.twig
index 88ea745..6ba96d5 100644
--- a/core/modules/layout_discovery/templates/layout.html.twig
+++ b/core/modules/layout_discovery/templates/layout.html.twig
@@ -4,15 +4,20 @@
* Template for a generic layout.
*/
#}
-{% set classes = [
- 'layout--' ~ layout.id|clean_class,
-] %}
+{%
+ set classes = [
+ 'layout',
+ 'layout--' ~ layout.id|clean_class,
+ ]
+%}
{% if content %}
-<div{{ attributes.addClass(classes) }}>
-{% for region in layout.getRegionNames %}
- <div class="{{ 'region--' ~ region|clean_class }}">
- {{ content[region] }}
+ <div{{ attributes.addClass(classes) }}>
+ {% for region in layout.getRegionNames %}
+ {% if content[region] %}
+ <div class="{{ 'layout__region layout__region--' ~ region|clean_class }}">
+ {{ content[region] }}
+ </div>
+ {% endif %}
+ {% endfor %}
</div>
-{% endfor %}
-</div>
{% endif %}
diff --git a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
index 9d4c446..fa8fdd6 100644
--- a/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
+++ b/core/modules/layout_discovery/tests/src/Kernel/LayoutTest.php
@@ -38,12 +38,11 @@ class LayoutTest extends KernelTestBase {
*
* @dataProvider renderLayoutData
*/
- public function testRenderLayout($layout_id, $config, $regions, $html) {
+ public function testRenderLayout($layout_id, $config, $regions, array $html) {
$layout = $this->layoutPluginManager->createInstance($layout_id, $config);
$built['layout'] = $layout->build($regions);
- $built['layout']['#prefix'] = 'Test prefix';
- $built['layout']['#suffix'] = 'Test suffix';
- $html = 'Test prefix' . $html . "\n" . 'Test suffix';
+ $built['layout']['#prefix'] = 'Test prefix' . "\n";
+ $built['layout']['#suffix'] = 'Test suffix' . "\n";
// Assume each layout is contained by a form, in order to ensure the
// building of the layout does not interfere with form processing.
@@ -53,14 +52,40 @@ class LayoutTest extends KernelTestBase {
$form_builder->processForm('the_form_id', $built, $form_state);
$this->render($built);
- $this->assertRaw($html);
- $this->assertRaw('<input data-drupal-selector="edit-the-form-id" type="hidden" name="form_id" value="the_form_id" />');
+
+ // Add in the wrapping form elements and prefix/suffix.
+ array_unshift($html, 'Test prefix');
+ array_unshift($html, '<form data-drupal-selector="the-form-id" action="/" method="post" id="the-form-id" accept-charset="UTF-8">');
+ // Retrieve the build ID from the rendered HTML since the string is random.
+ $build_id_input = $this->cssSelect('input[name="form_build_id"]')[0]->asXML();
+ $form_id_input = '<input data-drupal-selector="edit-the-form-id" type="hidden" name="form_id" value="the_form_id"/>';
+ $html[] = 'Test suffix';
+ $html[] = $build_id_input . $form_id_input . '</form>';
+
+ // Match the HTML to the full form element.
+ $this->assertSame(implode("\n", $html), $this->cssSelect('#the-form-id')[0]->asXML());
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function render(array &$elements) {
+ $content = parent::render($elements);
+ // Strip leading whitespace from every line.
+ $this->content = preg_replace('/^\s+/m', '', $content);
+ return $this->content;
}
/**
* Data provider for testRenderLayout().
*/
public function renderLayoutData() {
+ $html = [];
+ $html[] = '<div data-drupal-selector="edit-layout" class="layout layout--onecol">';
+ $html[] = '<div class="layout__region layout__region--content">';
+ $html[] = 'This is the content';
+ $html[] = '</div>';
+ $html[] = '</div>';
$data['layout_onecol'] = [
'layout_onecol',
[],
@@ -69,7 +94,18 @@ class LayoutTest extends KernelTestBase {
'#markup' => 'This is the content',
],
],
+ $html,
];
+
+ $html = [];
+ $html[] = '<div class="layout-example-1col clearfix">';
+ $html[] = '<div class="region-top">';
+ $html[] = 'This string added by #process.';
+ $html[] = '</div>';
+ $html[] = '<div class="region-bottom">';
+ $html[] = 'This is the bottom';
+ $html[] = '</div>';
+ $html[] = '</div>';
$data['layout_test_1col_with_form'] = [
'layout_test_1col',
[],
@@ -81,8 +117,18 @@ class LayoutTest extends KernelTestBase {
'#markup' => 'This is the bottom',
],
],
+ $html,
];
+ $html = [];
+ $html[] = '<div class="layout-example-1col clearfix">';
+ $html[] = '<div class="region-top">';
+ $html[] = 'This is the top';
+ $html[] = '</div>';
+ $html[] = '<div class="region-bottom">';
+ $html[] = 'This is the bottom';
+ $html[] = '</div>';
+ $html[] = '</div>';
$data['layout_test_1col'] = [
'layout_test_1col',
[],
@@ -94,8 +140,18 @@ class LayoutTest extends KernelTestBase {
'#markup' => 'This is the bottom',
],
],
+ $html,
];
+ $html = [];
+ $html[] = '<div data-drupal-selector="edit-layout" class="layout layout--layout-test-1col-no-template">';
+ $html[] = '<div class="layout__region layout__region--top">';
+ $html[] = 'This is the top';
+ $html[] = '</div>';
+ $html[] = '<div class="layout__region layout__region--bottom">';
+ $html[] = 'This is the bottom';
+ $html[] = '</div>';
+ $html[] = '</div>';
$data['layout_test_1col_no_template'] = [
'layout_test_1col_no_template',
[],
@@ -107,8 +163,18 @@ class LayoutTest extends KernelTestBase {
'#markup' => 'This is the bottom',
],
],
+ $html,
];
+ $html = [];
+ $html[] = '<div class="layout-example-2col clearfix">';
+ $html[] = '<div class="region-left">';
+ $html[] = 'This is the left';
+ $html[] = '</div>';
+ $html[] = '<div class="region-right">';
+ $html[] = 'This is the right';
+ $html[] = '</div>';
+ $html[] = '</div>';
$data['layout_test_2col'] = [
'layout_test_2col',
[],
@@ -120,8 +186,19 @@ class LayoutTest extends KernelTestBase {
'#markup' => 'This is the right',
],
],
+ $html,
];
+ $html = [];
+ $html[] = '<div class="layout-test-plugin clearfix">';
+ $html[] = '<div>';
+ $html[] = '<span class="setting-1-label">Blah: </span>';
+ $html[] = 'Config value';
+ $html[] = '</div>';
+ $html[] = '<div class="region-main">';
+ $html[] = 'Main region';
+ $html[] = '</div>';
+ $html[] = '</div>';
$data['layout_test_plugin'] = [
'layout_test_plugin',
[
@@ -132,72 +209,9 @@ class LayoutTest extends KernelTestBase {
'#markup' => 'Main region',
],
],
+ $html,
];
- $data['layout_onecol'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--onecol">
- <div class="layout-region layout-region--content">
- This is the content
- </div>
-</div>
-EOD;
-
- $data['layout_test_1col_with_form'][] = <<<'EOD'
-<div class="layout-example-1col clearfix">
- <div class="region-top">
- This string added by #process.
- </div>
- <div class="region-bottom">
- This is the bottom
- </div>
-</div>
-EOD;
-
- $data['layout_test_1col'][] = <<<'EOD'
-<div class="layout-example-1col clearfix">
- <div class="region-top">
- This is the top
- </div>
- <div class="region-bottom">
- This is the bottom
- </div>
-</div>
-EOD;
-
- $data['layout_test_1col_no_template'][] = <<<'EOD'
-<div data-drupal-selector="edit-layout" class="layout--layout-test-1col-no-template">
- <div class="region--top">
- This is the top
- </div>
- <div class="region--bottom">
- This is the bottom
- </div>
-</div>
-EOD;
-
- $data['layout_test_2col'][] = <<<'EOD'
-<div class="layout-example-2col clearfix">
- <div class="region-left">
- This is the left
- </div>
- <div class="region-right">
- This is the right
- </div>
-</div>
-EOD;
-
- $data['layout_test_plugin'][] = <<<'EOD'
-<div class="layout-test-plugin clearfix">
- <div>
- <span class="setting-1-label">Blah: </span>
- Config value
- </div>
- <div class="region-main">
- Main region
- </div>
-</div>
-EOD;
-
return $data;
}