From c44e14ded4b1616f69167c9fcd9adaec99187cf5 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 12 May 2021 22:12:54 -0400
Subject: [PATCH] ISTWCMS-4837: convert 5 column and inverted l left layout to
pattern-lab
---
layouts/layout--uw-4-col.html.twig | 23 ++-----
layouts/layout--uw-5-col.html.twig | 12 ++++
layouts/layout--uw-inverted-l-left.html.twig | 12 ++++
layouts/uw-5-col/layout--uw-5-col.html.twig | 31 ----------
layouts/uw-5-col/uw-layout-5-col.css | 62 -------------------
.../layout--uw-inverted-l-left.html.twig | 27 --------
.../uw-layout-inverted-l-left.css | 46 --------------
uw_cfg_common.layouts.yml | 7 +--
uw_cfg_common.libraries.yml | 10 ---
9 files changed, 30 insertions(+), 200 deletions(-)
create mode 100644 layouts/layout--uw-5-col.html.twig
create mode 100644 layouts/layout--uw-inverted-l-left.html.twig
delete mode 100644 layouts/uw-5-col/layout--uw-5-col.html.twig
delete mode 100644 layouts/uw-5-col/uw-layout-5-col.css
delete mode 100644 layouts/uw-inverted-l-left/layout--uw-inverted-l-left.html.twig
delete mode 100644 layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css
diff --git a/layouts/layout--uw-4-col.html.twig b/layouts/layout--uw-4-col.html.twig
index d98de7c1..d099378c 100644
--- a/layouts/layout--uw-4-col.html.twig
+++ b/layouts/layout--uw-4-col.html.twig
@@ -6,22 +6,7 @@
]
%}
-<section{{ attributes.addClass(classes) }}>
-
- <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
- {{ content.first }}
- </div>
-
- <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
- {{ content.second }}
- </div>
-
- <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
- {{ content.third }}
- </div>
-
- <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
- {{ content.fourth }}
- </div>
-
-</section>
+{% include '@layouts/layout/layout--4-col/layout--4-col.twig' with {
+ 'classes': classes,
+ 'content': content,
+} %}
diff --git a/layouts/layout--uw-5-col.html.twig b/layouts/layout--uw-5-col.html.twig
new file mode 100644
index 00000000..15bee1a9
--- /dev/null
+++ b/layouts/layout--uw-5-col.html.twig
@@ -0,0 +1,12 @@
+{%
+ set classes = [
+ 'layout',
+ 'layout--uw-5-col',
+ settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--5-col/layout--5-col.twig' with {
+ 'classes': classes,
+ 'content': content,
+} %}
diff --git a/layouts/layout--uw-inverted-l-left.html.twig b/layouts/layout--uw-inverted-l-left.html.twig
new file mode 100644
index 00000000..c833aea5
--- /dev/null
+++ b/layouts/layout--uw-inverted-l-left.html.twig
@@ -0,0 +1,12 @@
+{%
+ set classes = [
+ 'layout',
+ 'layout--uw-inverted-l-left',
+ settings.column_class,
+]
+%}
+
+{% include '@layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig' with {
+ 'classes': classes,
+ 'content': content,
+} %}
diff --git a/layouts/uw-5-col/layout--uw-5-col.html.twig b/layouts/uw-5-col/layout--uw-5-col.html.twig
deleted file mode 100644
index 13f0fadf..00000000
--- a/layouts/uw-5-col/layout--uw-5-col.html.twig
+++ /dev/null
@@ -1,31 +0,0 @@
-{%
- set classes = [
- 'layout',
- 'layout--uw-5-col',
- settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
- <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
- {{ content.first }}
- </div>
-
- <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
- {{ content.second }}
- </div>
-
- <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
- {{ content.third }}
- </div>
-
- <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
- {{ content.first }}
- </div>
-
- <div {{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
- {{ content.fifth }}
- </div>
-
-</section>
diff --git a/layouts/uw-5-col/uw-layout-5-col.css b/layouts/uw-5-col/uw-layout-5-col.css
deleted file mode 100644
index 6d07129d..00000000
--- a/layouts/uw-5-col/uw-layout-5-col.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.layout--uw-5-col {
- display: grid;
-}
-
-.layout--uw-5-col.even-split {
- grid-template-columns: 20% 20% 20% 20% 20%;
-}
-
-.layout--uw-5-col.larger-left {
- grid-template-columns: 40% 15% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-second {
- grid-template-columns: 15% 40% 15% 15% 15%;
-}
-
-.layout--uw-5-col.larger-third {
- grid-template-columns: 15% 15% 40% 15% 15%;
-}
-
-.layout--uw-5-col.larger-fourth {
- grid-template-columns: 15% 15% 15% 40% 15%;
-}
-
-.layout--uw-5-col.larger-right {
- grid-template-columns: 15% 15% 15% 15% 40%;
-}
-
-.layout--uw-5-col.legacy-23-19-19-19-20 {
- grid-template-columns: 23% 19% 19% 19% 20%;
-}
-
-.layout--uw-5-col .layout__region--first {
- grid-column: 1 / 2;
-}
-
-.layout--uw-5-col .layout__region--second {
- grid-column: 2 / 3;
-}
-
-.layout--uw-5-col .layout__region--third {
- grid-column: 3 / 4;
-}
-
-.layout--uw-5-col .layout__region--fourth {
- grid-column: 4 / 5;
-}
-
-.layout--uw-5-col.layout__region--fifth {
- grid-column: 5 / 6;
-}
-
-.path-dashboard .layout__region {
- margin-right: 1rem;
- margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
- box-shadow: none;
- border: 1px solid #bfbfba;
- padding: 1rem;
-}
diff --git a/layouts/uw-inverted-l-left/layout--uw-inverted-l-left.html.twig b/layouts/uw-inverted-l-left/layout--uw-inverted-l-left.html.twig
deleted file mode 100644
index b6cc5fca..00000000
--- a/layouts/uw-inverted-l-left/layout--uw-inverted-l-left.html.twig
+++ /dev/null
@@ -1,27 +0,0 @@
-{%
- set classes = [
- 'layout',
- 'layout--uw-inverted-l-left',
- settings.column_class,
-]
-%}
-
-<section{{ attributes.addClass(classes) }}>
-
- <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
- {{ content.first }}
- </div>
-
- <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
- {{ content.second }}
- </div>
-
- <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
- {{ content.third }}
- </div>
-
- <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
- {{ content.fourth }}
- </div>
-
-</section>
diff --git a/layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css b/layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css
deleted file mode 100644
index 79a278b0..00000000
--- a/layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.layout--uw-inverted-l-left {
- display: grid;
-}
-
-.layout--uw-inverted-l-left.even-split {
- grid-template-columns: 50% 25% 25%;
-}
-
-.layout--uw-inverted-l-left.larger-left {
- grid-template-columns: 50% 33.5% 16.5%;
-}
-
-.layout--uw-inverted-l-left.larger-right {
- grid-template-columns: 50% 16.5% 33.5%;
-}
-
-.layout--uw-inverted-l-left .layout__region--first {
- grid-column: 1 / 2;
- grid-row: 1 / 3;
-}
-
-.layout--uw-inverted-l-left .layout__region--second {
- grid-column: 2 / 3;
- grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-left .layout__region--third {
- grid-column: 3 / 4;
- grid-row: 1 / 2;
-}
-
-.layout--uw-inverted-l-left .layout__region--fourth {
- grid-column: 2 / 4;
- grid-row: 2 / 3;
-}
-
-.path-dashboard .layout__region {
- margin-right: 1rem;
- margin-bottom: 1rem;
-}
-
-.path-dashboard .layout__region--wrapper {
- box-shadow: none;
- border: 1px solid #bfbfba;
- padding: 1rem;
-}
diff --git a/uw_cfg_common.layouts.yml b/uw_cfg_common.layouts.yml
index c536deca..a133569a 100644
--- a/uw_cfg_common.layouts.yml
+++ b/uw_cfg_common.layouts.yml
@@ -81,8 +81,7 @@ uw_5_column:
label: 'Five columns'
category: 'UW layouts'
class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
- library: uw_cfg_common/uw_layout_5_col
- template: layouts/uw-5-col/layout--uw-5-col
+ template: layouts/layout--uw-5-col
default_region: first
regions:
first:
@@ -111,7 +110,6 @@ uw_inverted_l_right:
label: 'Inverted "L" - right'
category: 'UW layouts'
class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
- library: uw_cfg_common/uw_layout_inverted_l_right
template: layouts/uw-inverted-l-right/layout--uw-inverted-l-right
default_region: first
regions:
@@ -136,8 +134,7 @@ uw_inverted_l_left:
label: 'Inverted "L" - left'
category: 'UW layouts'
class: '\Drupal\uw_cfg_common\Plugin\Layout\UwColumnLayoutBase'
- library: uw_cfg_common/uw_layout_inverted_l_left
- template: layouts/uw-inverted-l-left/layout--uw-inverted-l-left
+ template: layouts/layout--uw-inverted-l-left
default_region: first
regions:
first:
diff --git a/uw_cfg_common.libraries.yml b/uw_cfg_common.libraries.yml
index 97d211eb..016ec61c 100644
--- a/uw_cfg_common.libraries.yml
+++ b/uw_cfg_common.libraries.yml
@@ -1,18 +1,8 @@
-uw_layout_5_col:
- version: 1.0
- css:
- theme:
- layouts/uw-5-col/uw-layout-5-col.css: {}
uw_layout_inverted_l_right:
version: 1.0
css:
theme:
layouts/uw-inverted-l-right/uw-layout-inverted-l-right.css: {}
-uw_layout_inverted_l_left:
- version: 1.0
- css:
- theme:
- layouts/uw-inverted-l-left/uw-layout-inverted-l-left.css: {}
uw_mathjax:
js:
https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML: { type: external, minified: true }
--
GitLab