From 681a642706276c3d9c69d63589fc5b110ece8f75 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Fri, 25 Sep 2020 12:17:56 -0400
Subject: [PATCH] additional css for layout of the blog,news,events term page
and pattern updates for blockquote base pattern
---
css/styles.css | 10 ++++++---
.../16-blockquote/blockquote.twig | 22 ++++++++++++-------
.../16-blockquote/blockquote.yml | 8 +++----
.../layout-builder/_layout-builder.scss | 1 +
.../04-components/form-item/_form-item.scss | 1 -
.../_patterns/04-components/view/_view.scss | 7 ++++--
6 files changed, 30 insertions(+), 19 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 31e547b3..ebb0a46e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1889,6 +1889,7 @@ svg:not(:root) {
.js-media-library-view,
.messages,
.message,
+.contextual-region.profile,
form {
margin-left: auto;
margin-right: auto;
@@ -1905,6 +1906,7 @@ form {
.js-media-library-view,
.messages,
.message,
+ .contextual-region.profile,
form {
padding-left: 0;
padding-right: 0; } }
@@ -1918,6 +1920,7 @@ form {
.js-media-library-view,
.messages,
.message,
+ .contextual-region.profile,
form {
padding: 1rem 0; } }
@@ -4925,15 +4928,16 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
display: inline-flex;
flex-flow: row wrap; }
-.view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+.view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+ align-items: flex-start;
margin: 1rem;
width: 100%; }
@media (min-width: 40.06rem) {
- .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+ .view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
flex-grow: 1;
width: 45%; } }
@media (min-width: 63.1875rem) {
- .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
+ .view.view-taxonomy-term .views-row, .view.view-uw-view-blogs .views-row, .view.view-uw-view-events .views-row, .view.view-uw-view-news-items .views-row {
width: 30%; } }
.view__filters {
diff --git a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig
index 5329f010..b3e8c6c8 100644
--- a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig
+++ b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.twig
@@ -1,8 +1,14 @@
-<blockquote>
- {{ text }}
- {% if cite %}
- <cite>
- {{cite}}
- </cite>
- {% endif %}
-</blockquote>
+<blockquote class="uw-blockquote">
+ <div class="uw-blockquote__wrapper">
+ <div class="uw-blockquote__text">
+ {{ blockquote.text }}
+ </div>
+ <footer class="uw-blockquote__attribution">
+ <div class="uw-blockquote__attribution--wrapper">
+ <cite>
+ {{ blockquote.attribution }}
+ </cite>
+ </div>
+ </footer>
+ </div>
+</blockquote>
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml
index 1a2d235c..53327053 100644
--- a/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml
+++ b/source/_patterns/02-base/02-html-elements/16-blockquote/blockquote.yml
@@ -1,5 +1,3 @@
----
-text: |-
- <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
-cite: |-
- Jane Doe <em>President and CEO</em>
+blockquote:
+ text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p style="text-align: center">This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+ attribution: 'This is the attribution'
diff --git a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 201cd588..1fe8717c 100644
--- a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -12,6 +12,7 @@
.js-media-library-view,
.messages,
.message,
+.contextual-region.profile,
form {
@include uw-contained-width;
padding: rem(gesso-spacing(sm));
diff --git a/source/_patterns/04-components/form-item/_form-item.scss b/source/_patterns/04-components/form-item/_form-item.scss
index 47697dc5..38c86d3c 100644
--- a/source/_patterns/04-components/form-item/_form-item.scss
+++ b/source/_patterns/04-components/form-item/_form-item.scss
@@ -13,7 +13,6 @@ $form-text-size: gesso-base-font-size() !default;
margin: 0 0 rem(gesso-spacing(sm));
}
-
.form-item__label {
display: block;
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index 374a220a..a1a60d74 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -17,15 +17,18 @@
display:inline-flex;
flex-flow: row wrap;
}
-
+ // View container for taxonomy terms.
+ &.view-taxonomy-term,
//View container for blog landing page.
&.view-uw-view-blogs,
// View container for events landing page.
&.view-uw-view-events,
// View container for newslanding page.
&.view-uw-view-news-items{
- // Universal row for views
+
+ // Universal row for views
.views-row{
+ align-items:flex-start;
margin: rem(gesso-spacing(sm));
width:100%;
@include small{
--
GitLab