From fcd97485f6646a880081d7a924e4e593326e72d7 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Tue, 26 Jan 2021 14:01:42 -0500
Subject: [PATCH] Additiona css now we have a full width class with sidebar
---
css/styles.css | 34 ++++++++------
source/_patterns/03-layouts/node/_node.scss | 50 ++++++++++++++-------
source/_patterns/03-layouts/node/node.twig | 13 +++---
3 files changed, 60 insertions(+), 37 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 2094c322..ad2c50c0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1996,24 +1996,27 @@ svg:not(:root) {
max-width: calc(75rem - 20.75rem); }
@media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__grid {
- flex-direction: row; }
- .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width {
- max-width: calc(75rem - 20.75rem); }
- .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow {
- max-width: 100%; } }
- @media (min-width: 48.06rem) and (min-width: 48.06rem) {
+ flex-direction: row; } }
+ .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width {
+ max-width: calc(75rem - 20.75rem); }
+ .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow {
+ max-width: 100%; }
+ @media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow {
+ margin: 0 auto;
max-width: 31rem; } }
- @media (min-width: 48.06rem) {
- .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide {
- margin: inherit;
- max-width: 100%; } }
- @media (min-width: 48.06rem) and (min-width: 48.06rem) {
+ .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide {
+ max-width: 100%; }
+ @media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide {
+ margin: 0 auto;
max-width: 47.0625rem; } }
- @media (min-width: 48.06rem) {
+ .uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width {
+ margin: inherit;
+ max-width: 100vw;
+ padding: 0; }
+ @media (min-width: 48.06rem) {
.uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width {
- margin: inherit;
max-width: calc(100vw - 18.75rem); } }
.uw-node.uw-node__with-sidebar .uw-node__node {
@@ -2033,6 +2036,11 @@ svg:not(:root) {
.uw-node.uw-node__with-sidebar .uw-node__sidebar .layout {
max-width: inherit; }
+@media (min-width: 48.06rem) {
+ .uw-section-has-full-width .uw-node__grid .uw-node__sidebar {
+ margin-left: 0;
+ padding-left: 1rem; } }
+
.l-section {
margin-bottom: 2.5rem; }
diff --git a/source/_patterns/03-layouts/node/_node.scss b/source/_patterns/03-layouts/node/_node.scss
index b4ffca87..bb2d611b 100644
--- a/source/_patterns/03-layouts/node/_node.scss
+++ b/source/_patterns/03-layouts/node/_node.scss
@@ -18,26 +18,32 @@ $sidebar-width: 18.75rem;
}
@include medium {
flex-direction: row;
- .uw-contained-width{
- max-width:calc(75rem - 20.75rem);
- }
- .uw-contained-width--narrow{
- max-width:100%;
- @include medium {
- max-width: 31rem;
- }
+ }
+ .uw-contained-width{
+ max-width:calc(75rem - 20.75rem);
+ }
+ .uw-contained-width--narrow{
+ max-width:100%;
+ @include medium {
+ margin:0 auto;
+ max-width: 31rem;
}
- .uw-contained-width--wide{
- margin:inherit;
- max-width:100%;
- @include medium {
- max-width: 47.0625rem;
- }
+ }
+ .uw-contained-width--wide{
+
+ max-width:100%;
+ @include medium {
+ margin:0 auto;
+ max-width: 47.0625rem;
}
- .uw-full-width{
- margin:inherit;
+ }
+ .uw-full-width{
+ margin:inherit;
+ max-width:100vw;
+ @include medium{
max-width:calc(100vw - 18.75rem);
}
+ padding:0;
}
}
.uw-node__node{
@@ -60,3 +66,15 @@ $sidebar-width: 18.75rem;
}
}
}
+// Class appears when full width content loads with sidebar on page
+.uw-section-has-full-width {
+ .uw-node__grid {
+ .uw-node__sidebar {
+ @include medium {
+ margin-left: 0;
+ padding-left:1rem;
+ }
+ }
+ }
+}
+
diff --git a/source/_patterns/03-layouts/node/node.twig b/source/_patterns/03-layouts/node/node.twig
index 2febd7b6..80e8e6e0 100644
--- a/source/_patterns/03-layouts/node/node.twig
+++ b/source/_patterns/03-layouts/node/node.twig
@@ -12,20 +12,17 @@
<div {{ attributes.addClass(classes) }}">
<div class="uw-node__grid">
-
<article class="uw-node__node">
{% block content %}
This is the node content
{% endblock %}
</article>
-
{% if has_sidebar == 'Yes' %}
- <aside class="uw-node__sidebar">
- {% block sidebar_content %}
- This is the sidebar
- {% endblock %}
- </aside>
+ <aside class="uw-node__sidebar">
+ {% block sidebar_content %}
+ This is the sidebar
+ {% endblock %}
+ </aside>
{% endif %}
-
</div>
</div>
--
GitLab