From 8bda2aeeda1be3450e70817a7988a9179c48f31c Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 12 May 2021 22:22:15 -0400
Subject: [PATCH] ISTWCMS_4837: adding inverted l right layout

---
 css/styles.css                                | 38 ++++++++++++++
 css/uw-dashboards.css                         | 38 ++++++++++++++
 .../_patterns/03-layouts/layout/_layout.twig  |  9 +++-
 .../_layout--inverted-l-right.scss            | 49 +++++++++++++++++++
 .../layout--inverted-l-right.twig             | 23 +++++++++
 .../layout--inverted-l-right.yml              | 10 ++++
 6 files changed, 165 insertions(+), 2 deletions(-)
 create mode 100644 source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
 create mode 100644 source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
 create mode 100644 source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml

diff --git a/css/styles.css b/css/styles.css
index 599e4bdf..03ef3c39 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2211,6 +2211,44 @@ svg:not(:root) {
   grid-column: 1 / 3;
   grid-row: 2 / 3; }
 
+.layout--uw-inverted-l-right {
+  display: grid; }
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33% 67%; }
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 67% 33%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--left-side {
+  display: grid;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--right-side {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--third {
+  grid-column: 1 / 3;
+  grid-row: 2 / 3; }
+
+.layout--uw-inverted-l-right .layout__region--fourth {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3; }
+
 .layout__region {
   outline: 2px dashed #2f91da;
   padding: 1.5rem;
diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css
index 70209cd9..33151f11 100644
--- a/css/uw-dashboards.css
+++ b/css/uw-dashboards.css
@@ -632,6 +632,44 @@
   grid-column: 1 / 3;
   grid-row: 2 / 3; }
 
+.layout--uw-inverted-l-right {
+  display: grid; }
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33% 67%; }
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 67% 33%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--left-side {
+  display: grid;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  grid-template-columns: 50% 50%; }
+
+.layout--uw-inverted-l-right .uw-inverted-l--right-side {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 1 / 2;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--first {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2; }
+
+.layout--uw-inverted-l-right .layout__region--third {
+  grid-column: 1 / 3;
+  grid-row: 2 / 3; }
+
+.layout--uw-inverted-l-right .layout__region--fourth {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3; }
+
 .layout__region {
   outline: 2px dashed #2f91da;
   padding: 1.5rem;
diff --git a/source/_patterns/03-layouts/layout/_layout.twig b/source/_patterns/03-layouts/layout/_layout.twig
index d094e15d..c0683971 100644
--- a/source/_patterns/03-layouts/layout/_layout.twig
+++ b/source/_patterns/03-layouts/layout/_layout.twig
@@ -28,6 +28,11 @@
       {% if inverted_l_left and loop.index == 2 %}
           <div class="uw-inverted-l--right-side">
       {% endif %}
+
+      {% if inverted_l_right and loop.index == 4 %}
+        <div class="uw-inverted-l--right-side">
+      {% endif %}
+
     {% endif %}
 
     <div
@@ -47,11 +52,11 @@
     </div>
 
     {% if inverted_l_left or inverted_l_right %}
-      {% if loop.index == 1 %}
+      {% if inverted_l_left and loop.index == 1 or loop.index == 4 %}
         </div>
       {% endif %}
 
-      {% if inverted_l_left and loop.index == 4 %}
+      {% if inverted_l_right and loop.index == 3 or loop.index == 4 %}
         </div>
       {% endif %}
 
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss b/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
new file mode 100644
index 00000000..8d0e3ae6
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
@@ -0,0 +1,49 @@
+.layout--uw-inverted-l-right {
+  display: grid;
+}
+
+.layout--uw-inverted-l-right.even-split {
+  grid-template-columns: 50% 50%;
+}
+
+.layout--uw-inverted-l-right.larger-left {
+  grid-template-columns: 33% 67%;
+}
+
+.layout--uw-inverted-l-right.larger-right {
+  grid-template-columns: 67% 33%;
+}
+
+.layout--uw-inverted-l-right {
+  .uw-inverted-l--left-side {
+    display: grid;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    grid-template-columns: 50% 50%;
+  }
+
+  .uw-inverted-l--right-side {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--first {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--first {
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+  }
+
+  .layout__region--third {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+
+  .layout__region--fourth {
+    grid-column: 3 / 4;
+    grid-row: 1 / 3;
+  }
+}
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig b/source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
new file mode 100644
index 00000000..e869a26b
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
@@ -0,0 +1,23 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+      inverted_l_right: 1,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+    inverted_l_right: 1,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml b/source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
new file mode 100644
index 00000000..389432b2
--- /dev/null
+++ b/source/_patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
@@ -0,0 +1,10 @@
+column_classes:
+  -
+    name: 'Even Split (50%, 50%)'
+    classes: 'layout layout--uw-inverted-l-right even-split'
+  -
+    name: 'Larger Left (33%, 67%)'
+    classes: 'layout layout--uw-inverted-l-right larger-left'
+  -
+    name: 'Larger Right (67%, 33%)'
+    classes: 'layout layout--uw-inverted-l-right larger-right'
\ No newline at end of file
-- 
GitLab