From e42c8e77a3ebbaac5d5604743976ed3a461efcc0 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Fri, 17 Nov 2017 10:51:10 -0500
Subject: [PATCH] ISTWCMS-2286: Adding block layout for browsers that do not
support grid
---
components/_patterns/00-base/_global.scss | 36 ++++++++++++++++++-
.../_global-footer-menu.scss | 22 ++++++++++++
.../site/site-footer/_site-footer.scss | 32 +++++++++++++++--
.../site/site-header/_site-header.scss | 26 ++++++++++++++
components/_patterns/05-pages/_page.scss | 32 +++++++++++++++++
5 files changed, 144 insertions(+), 4 deletions(-)
diff --git a/components/_patterns/00-base/_global.scss b/components/_patterns/00-base/_global.scss
index 2f187881..6782e527 100644
--- a/components/_patterns/00-base/_global.scss
+++ b/components/_patterns/00-base/_global.scss
@@ -14,20 +14,42 @@ body {
}
.layout-container {
+ @supports not (display: grid) {
+ clear: both;
+ float: left;
+ width: 100%;
+ }
+
display: grid;
grid-template-columns: auto;
grid-template-rows: minmax(60px, auto) minmax(451.5px, auto) minmax(100px, auto);
}
.layout-container header {
+ @supports not (display: grid) {
+ clear: both;
+ float: left;
+ width: 100%;
+ }
+
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.layout-container main {
+ @supports not (display: grid) {
+ clear: both;
+ float: left;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ @supports (display: grid) {
+ max-width: 63.125rem;
+ }
+
grid-column: 1 / 2;
grid-row: 2 / 3;
- max-width: 63.125rem;
width: 100%;
margin-left: auto;
margin-right: auto;
@@ -35,11 +57,23 @@ body {
}
.layout-container .block-site-footer-block {
+ @supports not (display: grid) {
+ clear: both;
+ float: left;
+ width: 100%;
+ }
+
grid-column: 1 / 2;
grid-row: 3 / 4;
}
.layout-container footer {
+ @supports not (display: grid) {
+ clear: both;
+ float: left;
+ width: 100%;
+ }
+
grid-column: 1 / 2;
grid-row: 4 / 5;
}
diff --git a/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss b/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss
index 969f2ac5..d03b3505 100644
--- a/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss
+++ b/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss
@@ -8,6 +8,11 @@ ul.global-footer-menu {
}
.global-footer-menu {
+ @supports not (display: grid) {
+ clear: both;
+ width: 100%;
+ }
+
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
@@ -23,6 +28,23 @@ ul.global-footer-menu {
border-right: 1px solid grey;
}
+@supports not (display: grid) {
+ .global-footer-menu li:nth-child(1n) {
+ float: left;
+ width: 25%;
+ }
+
+ .global-footer-menu li:nth-child(2n) {
+ float: left;
+ width: 25%;
+ }
+
+ .global-footer-menu li:nth-child(3n) {
+ float: left;
+ width: 25%;
+ }
+}
+
.global-footer-menu li:nth-child(1) {
grid-column: 1;
grid-row: 1;
diff --git a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
index 5a475e67..ff9e84dc 100644
--- a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
+++ b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
@@ -7,26 +7,52 @@ footer {
}
.uw-footer-grid {
- max-width: 63.125rem;
- margin-left: auto;
- margin-right: auto;
+ @supports not (display: grid) {
+ clear: both;
+ width: 100%;
+ max-width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ @supports (display: grid) {
+ max-width: 63.125rem;
+ }
+
display: grid;
grid-template-columns: 25% auto 30%;
grid-template-rows: auto;
+ margin-left: auto;
+ margin-right: auto;
padding: 1rem;
}
.uw-footer-grid .footer-1 {
+ @supports not (display: grid) {
+ float: left;
+ width: 25%;
+ }
+
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.uw-footer-grid .footer-2 {
+ @supports not (display: grid) {
+ float: left;
+ width: 45%;
+ }
+
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.uw-footer-grid .footer-3 {
+ @supports not (display: grid) {
+ float: left;
+ width: 30%;
+ }
+
grid-column: 3 / 4;
grid-row: 1 / 2;
text-align: right;
diff --git a/components/_patterns/03-organisms/site/site-header/_site-header.scss b/components/_patterns/03-organisms/site/site-header/_site-header.scss
index 5937a953..d68142be 100644
--- a/components/_patterns/03-organisms/site/site-header/_site-header.scss
+++ b/components/_patterns/03-organisms/site/site-header/_site-header.scss
@@ -1,4 +1,10 @@
.header {
+ @supports not (display: grid) {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
width: 100%;
background-color: $uw-black;
padding-top: 0.5rem;
@@ -19,22 +25,42 @@
}
.uw-header-grid {
+ @supports not (display: grid) {
+ clear: both;
+ max-width: 80%;
+ }
+
display: grid;
grid-template-columns: 17% auto 10%;
grid-template-rows: auto;
}
.uw-header-grid .header-1 {
+ @supports not (display: grid) {
+ float: left;
+ width: 17%;
+ }
+
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.uw-header-grid .header-2 {
+ @supports not (display: grid) {
+ float: left;
+ width: 73%;
+ }
+
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.uw-header-grid .header-3 {
+ @supports not (display: grid) {
+ float: left;
+ width: 10%;
+ }
+
grid-column: 3 / 4;
grid-row: 1 / 2;
}
diff --git a/components/_patterns/05-pages/_page.scss b/components/_patterns/05-pages/_page.scss
index 02bd1d36..6ffbe939 100644
--- a/components/_patterns/05-pages/_page.scss
+++ b/components/_patterns/05-pages/_page.scss
@@ -1,21 +1,48 @@
+main.main {
+ background-color: $uw-white;
+ padding-bottom: 2rem;
+}
.main-content-wrapper {
+ @supports not (display: grid) {
+ clear: both;
+ width: 100%;
+ max-width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
display: grid;
grid-template-columns: 23% 77%;
grid-template-rows: auto;
.uw-main-navigation {
+ @supports not (display: grid) {
+ float: left;
+ width: 23%;
+ }
+
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.main-content {
+ @supports not (display: grid) {
+ float: left;
+ width: 77%;
+ }
+
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
.main-content--with-sidebar {
+ @supports not (display: grid) {
+ clear: both;
+ width: 100%;
+ }
+
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: auto auto auto;
@@ -26,6 +53,11 @@
}
.main-content--tabs {
+ @supports not (display: grid) {
+ float: left;
+ width: 77%;
+ }
+
grid-column: 1 / 3;
grid-row: 2 / 3;
}
--
GitLab