diff --git a/config/sync/page_manager.page_variant.homepage-layout_builder-0.yml b/config/sync/page_manager.page_variant.homepage-layout_builder-0.yml
index 77d6bd0b32ee8c2504c1fcdc8a30863761c788b9..05726dcbd8638bbf8dbe3f67372f2ac6776b0533 100644
--- a/config/sync/page_manager.page_variant.homepage-layout_builder-0.yml
+++ b/config/sync/page_manager.page_variant.homepage-layout_builder-0.yml
@@ -127,7 +127,7 @@ variant_settings:
additional: { }
third_party_settings: { }
-
- layout_id: joinup_layout_twocolfooter_onecol_67_33
+ layout_id: joinup_layout_twocolfooter_onecol_50_50
layout_settings:
label: About
components:
@@ -220,36 +220,6 @@ variant_settings:
class: ''
style: ''
data: ''
- 6ab0ceea-4541-4153-8b64-227e02369d30:
- uuid: 6ab0ceea-4541-4153-8b64-227e02369d30
- region: third
- configuration:
- id: custom_markup
- label: 'New Interoperable Europe Portal video'
- label_display: '0'
- provider: custom_markup_block
- context_mapping: { }
- markup:
- value: '<drupal-media data-entity-type="media" data-entity-uuid="b03799ea-2116-4d21-965f-3556002d8a00"> </drupal-media>'
- format: content_editor
- weight: 0
- additional:
- component_attributes:
- block_attributes:
- id: ''
- class: about-video
- style: ''
- data: ''
- block_title_attributes:
- id: ''
- class: ''
- style: ''
- data: ''
- block_content_attributes:
- id: ''
- class: ''
- style: ''
- data: ''
third_party_settings: { }
page: homepage
selection_criteria:
diff --git a/resources/runner/drupal.yml b/resources/runner/drupal.yml
index 5b2bba4ddad92053f1ff39b876892c614ed7f34b..6a528145f73867b268234eeeb5c7aa0f801e2af0 100644
--- a/resources/runner/drupal.yml
+++ b/resources/runner/drupal.yml
@@ -256,9 +256,6 @@ drupal:
// Enable test_mode.
$config['joinup_test.settings']['test_mode'] = TRUE;
- // The video from the home page interacts with Selenium tests.
- $config['page_manager.page_variant.homepage-layout_builder-0']['variant_settings']['sections'][4]['components']['6ab0ceea-4541-4153-8b64-227e02369d30']['configuration']['text'] = 'Some joinup video';
-
// In order to ensure that tests assert dates correctly even in edge cases, we
// set the website default timezone to UTC and the same in tests too so that
// even edge cases produce expected results.
diff --git a/web/modules/custom/joinup_layout/joinup_layout.layouts.yml b/web/modules/custom/joinup_layout/joinup_layout.layouts.yml
index 7bb17bdf9a645877d6ce446e9318495615a744e8..b1160a3d12d009240a421443490cb98e0e3542bc 100644
--- a/web/modules/custom/joinup_layout/joinup_layout.layouts.yml
+++ b/web/modules/custom/joinup_layout/joinup_layout.layouts.yml
@@ -57,6 +57,24 @@ joinup_layout_twocolfooter_onecol_67_33:
two_col_footer:
label: Two column footer
+joinup_layout_twocolfooter_onecol_50_50:
+ label: 'Joinup two columns, two with common footer'
+ path: layouts/twocolfooter-onecol-50-50
+ template: joinup-layout--twocolfooter-onecol-50-50
+ library: joinup_layout/twocolfooter_onecol_50_50
+ category: 'Columns: 2'
+ default_region: first
+ icon_map:
+ - [first, second]
+ - [two_col_footer]
+ regions:
+ first:
+ label: First
+ second:
+ label: Second
+ two_col_footer:
+ label: Two column footer
+
joinup_layout_oss_heading:
label: 'Joinup OSS heading'
path: layouts/oss-heading
diff --git a/web/modules/custom/joinup_layout/joinup_layout.libraries.yml b/web/modules/custom/joinup_layout/joinup_layout.libraries.yml
index 174348db8ab6c25cef84ef0ca366543a7493d2f7..2907f316e5a73d2c09a64c94beff3c2d157bbdeb 100644
--- a/web/modules/custom/joinup_layout/joinup_layout.libraries.yml
+++ b/web/modules/custom/joinup_layout/joinup_layout.libraries.yml
@@ -10,6 +10,12 @@ twocolfooter_onecol_67_33:
theme:
layouts/twocolfooter-onecol-67-33/twocolfooter_onecol_67_33.css: {}
+twocolfooter_onecol_50_50:
+ version: VERSION
+ css:
+ theme:
+ layouts/twocolfooter-onecol-50-50/twocolfooter_onecol_50_50.css: {}
+
oss_heading:
css:
layout:
diff --git a/web/modules/custom/joinup_layout/layouts/twocolfooter-onecol-50-50/joinup-layout--twocolfooter-onecol-50-50.html.twig b/web/modules/custom/joinup_layout/layouts/twocolfooter-onecol-50-50/joinup-layout--twocolfooter-onecol-50-50.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..36f5a34805a9107733e9c32346fe48fd0aa5f3ba
--- /dev/null
+++ b/web/modules/custom/joinup_layout/layouts/twocolfooter-onecol-50-50/joinup-layout--twocolfooter-onecol-50-50.html.twig
@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a two column layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+ set classes = [
+ 'joinup-layout',
+ 'joinup-layout--twocolfooter-onecol-50-50',
+ ]
+%}
+{% if content %}
+ <div{{ attributes.addClass(classes) }}>
+ <div class="inline-column-top">
+ {% if content.first %}
+ <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+ {{ content.first }}
+ </div>
+ {% endif %}
+ {% if content.second %}
+ <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+ {{ content.second }}
+ </div>
+ {% endif %}
+ </div>
+ <div class="inline-column-bottom">
+ {% if content.two_col_footer %}
+ <div {{ region_attributes.two_col_footer.addClass('layout__region', 'layout__region--two_col_footer') }}>
+ {{ content.two_col_footer }}
+ </div>
+ {% endif %}
+ </div>
+ </div>
+{% endif %}
diff --git a/web/modules/custom/joinup_layout/layouts/twocolfooter-onecol-50-50/twocolfooter_onecol_50_50.css b/web/modules/custom/joinup_layout/layouts/twocolfooter-onecol-50-50/twocolfooter_onecol_50_50.css
new file mode 100644
index 0000000000000000000000000000000000000000..14f820b82e52bb3597d215c7ff9148e523a1d074
--- /dev/null
+++ b/web/modules/custom/joinup_layout/layouts/twocolfooter-onecol-50-50/twocolfooter_onecol_50_50.css
@@ -0,0 +1,36 @@
+/*
+ * @file
+ * Provides the layout styles for layout twocolfooter_onecol_67_33.
+ */
+
+.joinup-layout--twocolfooter-onecol-50-50 > .inline-column-top {
+ display: flex;
+ flex: 0 1 100%;
+ flex-wrap: wrap;
+}
+
+.joinup-layout--twocolfooter-onecol-50-50 > .inline-column-bottom {
+ display: flex;
+ flex: 0 1 100%;
+ flex-wrap: wrap;
+}
+
+.joinup-layout--twocolfooter-onecol-50-50
+ > .inline-column-top
+ > .layout__region,
+.joinup-layout--twocolfooter-onecol-50-50
+ > .inline-column-right
+ > .layout__region {
+ flex: 0 1 100%;
+}
+
+@media screen and (min-width: 40em) {
+ .joinup-layout--twocolfooter-onecol-50-50
+ > .inline-column-top
+ > .layout__region--first,
+ .joinup-layout--twocolfooter-onecol-50-50
+ > .inline-column-top
+ > .layout__region--second {
+ flex: 0 1 50%;
+ }
+}