diff --git a/core/modules/layout_discovery/layout_discovery.layouts.yml b/core/modules/layout_discovery/layout_discovery.layouts.yml new file mode 100644 index 0000000..d01921c --- /dev/null +++ b/core/modules/layout_discovery/layout_discovery.layouts.yml @@ -0,0 +1,123 @@ +layout_discovery_onecol: + label: 'Single column' + category: 'Columns: 1' + path: layouts/onecol + library: layout_discovery/onecol + template: layout-discovery-onecol + regions: + middle: + label: 'Middle column' + +layout_discovery_twocol: + label: 'Two column' + category: 'Columns: 2' + path: layouts/twocol + library: layout_discovery/twocol + template: layout-discovery-twocol + regions: + left: + label: 'Left side' + right: + label: 'Right side' + +layout_discovery_twocol_bricks: + label: 'Two column bricks' + category: 'Columns: 2' + path: layouts/twocol_bricks + library: layout_discovery/twocol_bricks + template: layout-discovery-twocol-bricks + regions: + top: + label: Top + left_above: + label: 'Left above' + right_above: + label: 'Right above' + middle: + label: Middle + left_below: + label: 'Left below' + right_below: + label: 'Right below' + bottom: + label: Bottom + +layout_discovery_twocol_stacked: + label: 'Two column stacked' + category: 'Columns: 2' + path: layouts/twocol_stacked + library: layout_discovery/twocol_stacked + template: layout-discovery-twocol-stacked + regions: + top: + label: Top + left: + label: 'Left side' + right: + label: 'Right side' + bottom: + label: Bottom + +layout_discovery_threecol_25_50_25: + label: 'Three column 25/50/25' + category: 'Columns: 3' + path: layouts/threecol_25_50_25 + library: layout_discovery/threecol_25_50_25 + template: layout-discovery-threecol-25-50-25 + regions: + left: + label: 'Left side' + middle: + label: 'Middle column' + right: + label: 'Right side' + +layout_discovery_threecol_25_50_25_stacked: + label: 'Three column 25/50/25 stacked' + category: 'Columns: 3' + path: layouts/threecol_25_50_25_stacked + library: layout_discovery/threecol_25_50_25_stacked + template: layout-discovery-threecol-25-50-25-stacked + regions: + top: + label: Top + left: + label: 'Left side' + middle: + label: 'Middle column' + right: + label: 'Right side' + bottom: + label: Bottom + +layout_discovery_threecol_33_34_33: + label: 'Three column 33/34/33' + category: 'Columns: 3' + path: layouts/threecol_33_34_33 + library: layout_discovery/threecol_33_34_33 + template: layout-discovery-threecol-33-34-33 + regions: + left: + label: 'Left side' + middle: + label: 'Middle column' + right: + label: 'Right side' + +layout_discovery_threecol_33_34_33_stacked: + label: 'Three column 33/34/33 stacked' + category: 'Columns: 3' + path: layouts/threecol_33_34_33_stacked + library: layout_discovery/threecol_33_34_33_stacked + template: layout-discovery-threecol-33-34-33-stacked + regions: + top: + label: Top + left: + label: 'Left side' + middle: + label: 'Middle column' + right: + label: 'Right side' + bottom: + label: Bottom diff --git a/core/modules/layout_discovery/layout_discovery.libraries.yml b/core/modules/layout_discovery/layout_discovery.libraries.yml new file mode 100644 index 0000000..45cde3d --- /dev/null +++ b/core/modules/layout_discovery/layout_discovery.libraries.yml @@ -0,0 +1,35 @@ +onecol: + version: VERSION + css: + theme: + layouts/onecol/onecol.css: {} +twocol_bricks: + version: VERSION + css: + theme: + layouts/twocol_bricks/twocol_bricks.css: {} +twocol_stacked: + version: VERSION + css: + theme: + layouts/twocol_stacked/twocol_stacked.css: {} +threecol_25_50_25: + version: VERSION + css: + theme: + layouts/threecol_25_50_25/threecol_25_50_25.css: {} +threecol_25_50_25_stacked: + version: VERSION + css: + theme: + layouts/threecol_25_50_25_stacked/threecol_25_50_25_stacked.css: {} +threecol_33_34_33: + version: VERSION + css: + theme: + layouts/threecol_33_34_33/threecol_33_34_33.css: {} +threecol_33_34_33_stacked: + version: VERSION + css: + theme: + layouts/threecol_33_34_33_stacked/threecol_33_34_33_stacked.css: {} diff --git a/core/modules/layout_discovery/layouts/onecol/layout-discovery-onecol.html.twig b/core/modules/layout_discovery/layouts/onecol/layout-discovery-onecol.html.twig new file mode 100644 index 0000000..0e898ef --- /dev/null +++ b/core/modules/layout_discovery/layouts/onecol/layout-discovery-onecol.html.twig @@ -0,0 +1,19 @@ +{# +/** + * @file + * Template for a one column panel layout. + * + * This template provides a very simple "one column" panel display layout. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.middle: The only panel in the layout. + */ +#} +
+
+ {{ content.middle }} +
+
diff --git a/core/modules/layout_discovery/layouts/onecol/onecol.css b/core/modules/layout_discovery/layouts/onecol/onecol.css new file mode 100644 index 0000000..743f22f --- /dev/null +++ b/core/modules/layout_discovery/layouts/onecol/onecol.css @@ -0,0 +1,3 @@ +.panel-1col .panel-panel{ + width: 100%; +} diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout-discovery-threecol-25-50-25.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout-discovery-threecol-25-50-25.html.twig new file mode 100644 index 0000000..d3c9e2c --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout-discovery-threecol-25-50-25.html.twig @@ -0,0 +1,29 @@ +{# +/** + * @file + * Template for a 3 column panel layout. + * + * This template provides a three column 25%-50%-25% panel display layout. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.left: Content in the left column. + * - content.middle: Content in the middle column. + * - content.right: Content in the right column. + */ +#} +
+
+ {{ content.left }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.right }} +
+
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 new file mode 100644 index 0000000..5da1dfc --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css @@ -0,0 +1,12 @@ +.panel-3col { + display: flex; + justify-content: space-between; +} + +.panel-3col > .panel-panel { + flex: 0 1 25%; +} + +.panel-3col > .panel-col-middle { + flex: 0 1 50%; +} diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25_stacked/layout-discovery-threecol-25-50-25-stacked.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25_stacked/layout-discovery-threecol-25-50-25-stacked.html.twig new file mode 100644 index 0000000..8f77316 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_25_50_25_stacked/layout-discovery-threecol-25-50-25-stacked.html.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Template for a 3 column panel layout. + * + * This template provides a three column 25%-50%-25% panel display layout, with + * additional areas for the top and the bottom. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.top: Content in the top row. + * - content.left: Content in the left column. + * - content.middle: Content in the middle column. + * - content.right: Content in the right column. + * - content.bottom: Content in the bottom row. + */ +#} +
+ {% if content.top %} +
+ {{ content.top }} +
+ {% endif %} + +
+ {{ content.left }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.right }} +
+ + {% if content.bottom %} +
+ {{ content.bottom }} +
+ {% endif %} +
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25_stacked/threecol_25_50_25_stacked.css b/core/modules/layout_discovery/layouts/threecol_25_50_25_stacked/threecol_25_50_25_stacked.css new file mode 100644 index 0000000..ff0bcd7 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_25_50_25_stacked/threecol_25_50_25_stacked.css @@ -0,0 +1,17 @@ +.panel-3col-stacked { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.panel-3col-stacked > .panel-panel { + flex: 0 1 25%; +} + +.panel-3col-stacked > .panel-full-width { + flex: 0 1 100%; +} + +.panel-3col-stacked > .panel-col-middle { + flex: 0 1 50%; +} diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout-discovery-threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout-discovery-threecol-33-34-33.html.twig new file mode 100644 index 0000000..e54ad03 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout-discovery-threecol-33-34-33.html.twig @@ -0,0 +1,29 @@ +{# +/** + * @file + * Template for a 3 column panel layout. + * + * This template provides a three column 33%-34%-33% panel display layout. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.left: Content in the left column. + * - content.middle: Content in the middle column. + * - content.right: Content in the right column. + */ +#} +
+
+ {{ content.left }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.right }} +
+
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 new file mode 100644 index 0000000..898c9ec --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css @@ -0,0 +1,9 @@ +.panel-3col-33 { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.panel-3col-33 > .panel-panel { + flex: 1 33%; +} diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33_stacked/layout-discovery-threecol-33-34-33-stacked.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33_stacked/layout-discovery-threecol-33-34-33-stacked.html.twig new file mode 100644 index 0000000..2848756 --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_33_34_33_stacked/layout-discovery-threecol-33-34-33-stacked.html.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Template for a 3 column panel layout. + * + * This template provides a three column 33%-34%-33% panel display layout, with + * additional areas for the top and the bottom. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.top: Content in the top row. + * - content.left: Content in the left column. + * - content.middle: Content in the middle column. + * - content.right: Content in the right column. + * - content.bottom: Content in the bottom row. + */ +#} +
+ {% if content.top %} +
+ {{ content.top }} +
+ {% endif %} + +
+ {{ content.left }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.right }} +
+ + {% if content.bottom %} +
+ {{ content.bottom }} +
+ {% endif %} +
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33_stacked/threecol_33_34_33_stacked.css b/core/modules/layout_discovery/layouts/threecol_33_34_33_stacked/threecol_33_34_33_stacked.css new file mode 100644 index 0000000..04b1ebe --- /dev/null +++ b/core/modules/layout_discovery/layouts/threecol_33_34_33_stacked/threecol_33_34_33_stacked.css @@ -0,0 +1,13 @@ +.panel-3col-33-stacked { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.panel-3col-33-stacked > .panel-panel { + flex: 0 1 33%; +} + +.panel-3col-33-stacked > .panel-full-width { + flex: 0 1 100%; +} diff --git a/core/modules/layout_discovery/layouts/twocol/layout-discovery-twocol.html.twig b/core/modules/layout_discovery/layouts/twocol/layout-discovery-twocol.html.twig new file mode 100644 index 0000000..776c865 --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol/layout-discovery-twocol.html.twig @@ -0,0 +1,25 @@ +{# +/** + * @file + * Template for a 2 column panel layout. + * + * This template provides a two column panel display layout, with + * each column roughly equal in width. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - $content['left']: Content in the left column. + * - $content['right']: Content in the right column. + */ +#} +
+
+ {{ content.left }} +
+ +
+ {{ content.right }} +
+
diff --git a/core/modules/layout_discovery/layouts/twocol/twocol.css b/core/modules/layout_discovery/layouts/twocol/twocol.css new file mode 100644 index 0000000..13fef2c --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol/twocol.css @@ -0,0 +1,9 @@ +.panel-2col { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.panel-2col > .panel-panel { + flex: 0 1 50%; +} diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout-discovery-twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout-discovery-twocol-bricks.html.twig new file mode 100644 index 0000000..3b1d634 --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout-discovery-twocol-bricks.html.twig @@ -0,0 +1,50 @@ +{# +/** + * @file + * Template for a 2 column panel layout. + * + * This template provides a two column panel display layout with full width + * areas at the top, bottom and in the middle. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.top: Content in the top row. + * - content.left_above: Content in the top left column. + * - content.right_above: Content in the top right column. + * - content.middle: Content in the middle column. + * - content.left_below: Content in the bottom left column. + * - content.right_below: Content in the bottom right column. + * - content.bottom: Content in the bottom row. + */ +#} +
+
+ {{ content.top }} +
+ +
+ {{ content.left_above }} +
+ +
+ {{ content.right_above }} +
+ +
+ {{ content.middle }} +
+ +
+ {{ content.left_below }} +
+ +
+ {{ content.right_below }} +
+ +
+ {{ content.bottom }} +
+
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css new file mode 100644 index 0000000..0954aed --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css @@ -0,0 +1,13 @@ +.panel-2col-bricks { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.panel-2col-bricks > .panel-panel { + flex: 0 1 50%; +} + +.panel-2col-bricks > .panel-full-width { + flex: 0 1 100%; +} diff --git a/core/modules/layout_discovery/layouts/twocol_stacked/layout-discovery-twocol-stacked.html.twig b/core/modules/layout_discovery/layouts/twocol_stacked/layout-discovery-twocol-stacked.html.twig new file mode 100644 index 0000000..75e9514 --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol_stacked/layout-discovery-twocol-stacked.html.twig @@ -0,0 +1,36 @@ +{# +/** + * @file + * Template for a 2 column panel layout. + * + * This template provides a two column panel display layout, with + * additional areas for the top and the bottom. + * + * Variables: + * - $id: An optional CSS id to use for the layout. + * - $content: An array of content, each item in the array is keyed to one + * panel of the layout. This layout supports the following sections: + * - content.top: Content in the top row. + * - content.left: Content in the left column. + * - content.middle: Content in the middle column. + * - content.right: Content in the right column. + * - content.bottom: Content in the bottom row. + */ +#} +
+
+ {{ content.top }} +
+ +
+ {{ content.left }} +
+ +
+ {{ content.right }} +
+ +
+ {{ content.bottom }} +
+
diff --git a/core/modules/layout_discovery/layouts/twocol_stacked/twocol_stacked.css b/core/modules/layout_discovery/layouts/twocol_stacked/twocol_stacked.css new file mode 100644 index 0000000..8e66476 --- /dev/null +++ b/core/modules/layout_discovery/layouts/twocol_stacked/twocol_stacked.css @@ -0,0 +1,13 @@ +.panel-2col-stacked { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.panel-2col-stacked > .panel-panel { + flex: 0 1 50%; +} + +.panel-2col-stacked > .panel-full-width { + flex: 0 1 100%; +}