diff --git a/css/styles.css b/css/styles.css
index c3168e82acdc3b52532477d21db49ad400528fe0..8320b4dc9337229023d41a94a5c19fba12083694 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2048,6 +2048,10 @@ svg:not(:root) {
margin-bottom: 2.5rem;
margin-top: 1.5rem;
position: relative; }
+ .uw-term--layout .uw-content-grid-list__style_controls {
+ order: 1;
+ padding: 0;
+ width: 100%; }
.uw-term--layout .l-section {
margin: 0 !important;
width: 100%; }
@@ -2059,7 +2063,7 @@ svg:not(:root) {
width: 100%; }
.uw-term--layout .uw-term--filters .uw-input {
width: 100%; }
- @media (min-width: 48.06rem) {
+ @media (min-width: 40.06rem) {
.uw-term--layout {
flex-direction: row;
gap: 1.5rem; }
@@ -3455,11 +3459,19 @@ button {
.card--show-hover:hover, .card--show-hover:focus-within {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
+.card__header {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 1rem;
+ width: 100%; }
+
.card__date {
- font-size: 1rem; }
+ font-size: 1rem;
+ margin-bottom: 1rem; }
.card__author {
- font-size: 1rem; }
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
+ font-size: 14.22224px; }
.card__author a {
color: #000;
text-decoration: underline; }
@@ -3471,16 +3483,19 @@ button {
.card__author a:active {
color: #757575; }
-.card__title a {
- color: #000;
- text-decoration: underline; }
- .card__title a:visited {
- color: #000; }
- .card__title a:hover, .card__title a:focus {
- color: #757575;
+.card__title {
+ margin: 0.5rem 0;
+ padding: 0; }
+ .card__title a {
+ color: #000;
text-decoration: none; }
- .card__title a:active {
- color: #757575; }
+ .card__title a:visited {
+ color: #000; }
+ .card__title a:hover, .card__title a:focus {
+ color: #757575;
+ text-decoration: underline; }
+ .card__title a:active {
+ color: #757575; }
.card__body {
display: flex;
@@ -3701,30 +3716,50 @@ button {
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
- gap: 1.25rem !important; }
- .uw-flex-grid .card {
- -webkit-box: 1;
- -moz-box: 1;
- -webkit-flex: 1 0 auto;
- -ms-flex: 1 0 auto;
- flex: 1 0 auto;
- -webkit-box-align: start;
- -moz-box-align: start;
- -ms-flex-align: start;
- -webkit-align-items: flex-start;
- align-items: flex-start;
- width: 100%; }
- @media (min-width: 40.06rem) {
- .uw-flex-grid .card {
+ gap: 1.25rem !important;
+ max-width: 75rem; }
+ .uw-flex-grid .uw-content-grid-list__style_controls {
+ width: 100%;
+ -webkit-align-content: flex-end;
+ -ms-flex-line-pack: end;
+ align-content: flex-end;
+ order: 1;
+ width: 100% !important; }
+ .uw-flex-grid .uw-content-grid-list__style_controls .uw-layout--controls {
+ padding: 1rem 0;
+ text-align: right; }
+ @media (min-width: 63.1875rem) {
+ .uw-flex-grid .uw-content-grid-list__style_controls {
+ -webkit-box: 1;
+ -moz-box: 1;
+ -webkit-flex: 1 1 auto 0 auto;
+ -ms-flex: 1 1 auto 0 auto;
+ flex: 1 1 auto 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
width: 45%; } }
+ .uw-flex-grid .card {
+ width: 100%;
+ order: 3; }
@media (min-width: 63.1875rem) {
.uw-flex-grid .card {
- width: 30%; } }
+ -webkit-box: 1;
+ -moz-box: 1;
+ -webkit-flex: 1 1 auto 0 auto;
+ -ms-flex: 1 1 auto 0 auto;
+ flex: 1 1 auto 0 auto;
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ -ms-flex: 1;
+ -webkit-flex-grow: 1;
+ flex-grow: 1;
+ width: 45%; } }
+ .uw-flex-grid .card:first-child {
+ order: 2;
+ width: 100% !important; }
.uw-copy-text__wrapper.uw-contained-width {
margin-left: auto;
diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css
index ed39eb681f252df57e445d8a37f097dc368120b4..da8b493a628a1f2f2730b9b6473725814dc9757d 100644
--- a/css/uw-dashboards.css
+++ b/css/uw-dashboards.css
@@ -469,6 +469,10 @@
margin-bottom: 2.5rem;
margin-top: 1.5rem;
position: relative; }
+ .uw-term--layout .uw-content-grid-list__style_controls {
+ order: 1;
+ padding: 0;
+ width: 100%; }
.uw-term--layout .l-section {
margin: 0 !important;
width: 100%; }
@@ -480,7 +484,7 @@
width: 100%; }
.uw-term--layout .uw-term--filters .uw-input {
width: 100%; }
- @media (min-width: 48.06rem) {
+ @media (min-width: 40.06rem) {
.uw-term--layout {
flex-direction: row;
gap: 1.5rem; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index 77e7464fefc8452ad6392001101f336f7808ad63..c787838a8501809a50f5b907b34e235cc4af8b11 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -1,20 +1,3 @@
-/**
- * @file
- * Ckeditor Modal.
- */
-
-(function ($, Drupal) {
- if ($.ui && $.ui.dialog) {
- orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
- $.ui.dialog.prototype._allowInteraction = function (event) {
- if ($(event.target).closest('.cke_dialog').length) {
- return true;
- }
- return orig_allowInteraction.apply(this, arguments);
- };
- }
-})(jQuery, Drupal);
-
(function ($, Drupal) {
Drupal.behaviors.cardbanner = {
attach: function (context, settings) {
@@ -342,6 +325,23 @@ else {
};
})(jQuery);
+/**
+ * @file
+ * Ckeditor Modal.
+ */
+
+(function ($, Drupal) {
+ if ($.ui && $.ui.dialog) {
+ orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
+ $.ui.dialog.prototype._allowInteraction = function (event) {
+ if ($(event.target).closest('.cke_dialog').length) {
+ return true;
+ }
+ return orig_allowInteraction.apply(this, arguments);
+ };
+ }
+})(jQuery, Drupal);
+
/**
* @file
*/
diff --git a/source/_patterns/00-config/01-mixins/_mixins.uw.scss b/source/_patterns/00-config/01-mixins/_mixins.uw.scss
index beee7625373d96ccd8d7092183a8177cedc23678..e53928024b777feb07e6be7555f30dcf7ddd0514 100644
--- a/source/_patterns/00-config/01-mixins/_mixins.uw.scss
+++ b/source/_patterns/00-config/01-mixins/_mixins.uw.scss
@@ -238,10 +238,15 @@
@mixin uw-flex-grid($value: flexbox){
@if $value == inline-flex {
@include inline-flex();
- }@else{
+ @include flex-flow(row wrap);
+ }@else if $value == term{
@include flexbox();
- }
+ @include flex-wrap(wrap);
+ }@else{
+ @include flexbox();
@include flex-flow(row wrap);
+}
+
gap:1.25rem !important;
}
// Display of grid item.
@@ -250,6 +255,7 @@
@include align-items(flex-start);
width:100%;
@include small{
+ @include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
@@ -261,7 +267,15 @@
//}
}
-
+// Display of list item.
+@mixin uw-flex-term-item(){
+ width:100%;
+ @include large{
+ @include flex(1 1 auto);
+ @include flex-grow(1);
+ width: 45%;
+ }
+}
// Display of elements in list style.
@mixin uw-flex-list(){
@@ -273,8 +287,6 @@
}
-
-
// Display of elements in mosaic style.
@mixin uw-flex-mosaic(){
//
@@ -285,7 +297,6 @@
}
-
// Display of elements gallery style.
@mixin uw-flex-gallery(){
diff --git a/source/_patterns/02-base/02-html-elements/25-forms/forms.twig b/source/_patterns/02-base/02-html-elements/25-forms/forms.twig
index 0c76486a956a218d798dd6232f381b3c10b44848..9a7147f0d7805da84c0f67cff045858ddeeeffa3 100644
--- a/source/_patterns/02-base/02-html-elements/25-forms/forms.twig
+++ b/source/_patterns/02-base/02-html-elements/25-forms/forms.twig
@@ -56,6 +56,7 @@
'is_button_tag': true,
'text': form_item.text,
'type': form_item.type,
+ 'button_modifer_classes': item.button_modifer_classes,
'classes': form_item.classes,
'formaction': form_item.formaction,
'form': form_item.form,
@@ -125,4 +126,4 @@
{% endif %}
-</form>
\ No newline at end of file
+</form>
diff --git a/source/_patterns/03-layouts/footer/footer.twig b/source/_patterns/03-layouts/footer/footer.twig
index 3e8a9ab35864f2458fe422d21475650998246fd8..0c5448944ac6a275d8e739f7917c8d6a2b0c6d01 100644
--- a/source/_patterns/03-layouts/footer/footer.twig
+++ b/source/_patterns/03-layouts/footer/footer.twig
@@ -37,6 +37,3 @@
</div>
</div>
</footer>
-{% if is_demo_footer %}
- {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}
-{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/layout/_layout.scss b/source/_patterns/03-layouts/layout/_layout.scss
index c73046b0ff85792390c71ac3103a4e93f4405358..e36053b32b225049847607be4aa7be90b5ac22c9 100644
--- a/source/_patterns/03-layouts/layout/_layout.scss
+++ b/source/_patterns/03-layouts/layout/_layout.scss
@@ -54,25 +54,36 @@ $sidebar-width: 18.75rem;
margin-bottom:2.5rem;
margin-top:1.5rem;
position:relative;
-
+ .uw-content-grid-list{
+ &__style_controls{
+ //background: #d75a5a;
+ order:1;
+ padding:0;
+ width:100%;
+ }
+ }
.l-section{
margin:0 !important;
width:100%;
}
.uw-term--header{
+ //background: #94d75a;
width:100%;
}
.uw-term--results{
+ //background: #d26a2f;
width:100%;
+ .uw-term--results{}
}
.uw-term--filters{
+ //background: rgba(43, 131, 186, 0.5);
width:100%;
.uw-input{
width:100%;
}
}
- @include medium {
+ @include small {
flex-direction: row;
gap: 1.5rem;
.uw-term--header{
diff --git a/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss b/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
index ba10c2c43183c3019cfd060104b80d09bda71dca..ae3f338f5242cc6b02aeb7ddd58ad05cd1d64e51 100644
--- a/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
@@ -6,5 +6,3 @@
.layout--uw-1-col .layout__region--first {
grid-column: 1 / 2;
}
-
-
diff --git a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
index e7833ebc39488404159455d5f2faa4228533828b..f1fe4f914bdf65b605ddb29f083bf81437492bd1 100644
--- a/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -59,4 +59,3 @@
}
}
}
-
diff --git a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
index 2cd42a8cf53fd993a7c0f79d1923952fac641ce9..9c5d83ca420265efb75fea3d447c3adfd1fa45e1 100644
--- a/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
+++ b/source/_patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -62,5 +62,3 @@
}
}
}
-
-
diff --git a/source/_patterns/03-layouts/sidebar/_sidebar.scss b/source/_patterns/03-layouts/sidebar/_sidebar.scss
index 6083d170ac395165e65eefdf395a29c518ca037d..b2d517a23e13f33b015c8c062474d7ed9fed2dfd 100644
--- a/source/_patterns/03-layouts/sidebar/_sidebar.scss
+++ b/source/_patterns/03-layouts/sidebar/_sidebar.scss
@@ -47,6 +47,9 @@ $l-sidebar-gutter: rem(gesso-spacing(sm));
}
}
+.l-sidebar-offcanvas{
+
+}
.l-sidebar--multi-2 {
@include breakpoint($l-sidebar-bp) {
diff --git a/source/_patterns/03-layouts/site-container/site-container.twig b/source/_patterns/03-layouts/site-container/site-container.twig
index 2368a97813e8e920aca723024fab1e712f2a517d..65af0137d6e787a73ea5963ee4826c025a26fe2b 100644
--- a/source/_patterns/03-layouts/site-container/site-container.twig
+++ b/source/_patterns/03-layouts/site-container/site-container.twig
@@ -20,5 +20,8 @@
'menu_name': footer_menu_name,
'items': footer_menu
}%}
+ {% if pattern_lab %}
+ {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}
+ {% endif %}
{% endblock %}
</div>
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 0ced2d10ff404af6e10b0e8e37346d61f4f48605..a76faf00e9f414a5e92d98bc7d8e190d4bb13ae1 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -22,27 +22,34 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
}
.card__header{
-
+ display:flex;
+ flex-direction: column;
+ margin-bottom: rem(gesso-spacing(sm));
+ width:100%;
}
.card__date {
font-size: rem(gesso-font-size(0));
+ margin-bottom: rem(gesso-spacing(sm));
}
.card__author{
- font-size: rem(gesso-font-size(0));
+ font-family: gesso-font-family(systemmedium);
+ font-size: gesso-font-size(-1);
a {
@include link(
- $card-link-color,
- $card-link-color-hover
+ $card-link-color,
+ $card-link-color-hover
);
}
}
.card__title {
+ margin:rem(gesso-spacing(xs)) 0;
+ padding:0;
a {
- @include link(
- $card-link-color,
- $card-link-color-hover
+ @include link-reverse(
+ $card-link-color,
+ $card-link-color-hover
);
}
}
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 66d07abecba87810547fcd449aa0a217cb5184fb..b90ee927d24e482e71a1b6f7243c570912bf0798 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -28,11 +28,11 @@
{% if title %}
<h{{ header_level }} class="card__title">
{% if url %}
- <a href="{{ url }}">
- {% endif %}
- {{ title }}
- {% if url %}
- </a>
+ <a href="{{ url }}">
+ {% endif %}
+ {{ title }}
+ {% if url %}
+ </a>
{% endif %}
</h{{ header_level }}>
{% endif %}
@@ -46,14 +46,14 @@
{% if author_name %}
<div class="card__author">
{% if author_link %}
- by
- <a href="{{ author_link }}">
- {% endif %}
+ by
+ <a href="{{ author_link }}">
+ {% endif %}
- {{ author_name }}
+ {{ author_name }}
- {% if author_link %}
- </a>
+ {% if author_link %}
+ </a>
{% endif %}
</div>
{% endif %}
@@ -65,17 +65,17 @@
{% if sources or img_element %}
<div class="card__media">
{% if url %}
- <a href="{{ url }}">
- {% endif %}
+ <a href="{{ url }}">
+ {% endif %}
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: sources,
- img_element: img_element,
- alt: alt
- } %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: sources,
+ img_element: img_element,
+ alt: alt
+ } %}
- {% if url %}
- </a>
+ {% if url %}
+ </a>
{% endif %}
</div>
{% endif %}
diff --git a/source/_patterns/04-components/content-grid-list/_content-grid-list.scss b/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
index c8b4d686f33c1c46ab65750c58aceb6ce59ed1f4..9e0b1371b8552149e09f1bd9acca77996ddaa312 100644
--- a/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
+++ b/source/_patterns/04-components/content-grid-list/_content-grid-list.scss
@@ -1,6 +1,25 @@
.uw-flex-grid{
@include uw-flex-grid();
+ max-width:$max-width;
+ .uw-content-grid-list{
+ &__style_controls{
+ .uw-layout--controls{
+ padding:1rem 0;
+ text-align:right;
+
+ }
+ @include uw-flex-term-item();
+ @include align-content(flex-end);
+ order:1;
+ width:100% !important;
+ }
+ }
.card{
- @include uw-flex-grid-item();
+ @include uw-flex-term-item();
+ &:first-child{
+ order:2;
+ width:100% !important;
+ }
+ order:3;
}
}
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.twig b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
index 7f00a510af39b4663c076538f4e908bebd6028c3..dbea78178058d9b75094a4259338e8d65787e30a 100644
--- a/source/_patterns/04-components/content-grid-list/content-grid-list.twig
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
@@ -1,20 +1,42 @@
-{% set grid_modifier_classes = 'l-grid--1col' %}
-
-{% embed '@layouts/grid/grid.twig' with {
- 'modifier_classes': grid_modifier_classes
-} %}
-
{% block content %}
+ {% include '@global/06-break-hints/break-hints.twig' %}
{% if flex_modifier_classes %}
- <div class="{{ flex_modifier_classes }}">
+ <div class="{{ flex_modifier_classes }} {{ layout_style }}">
{% endif %}
+ {% if layout_style or use_offcanvas %}
+
+ <div class="uw-content-grid-list__style_controls">
+ {% set button_modifier_classes -%}
+ button button--small {{ button_modifier_classes }}
+ {%- endset %}
+
+ {% if layout_style %}
+ {% set button_modifier_classes -%}
+ button button--small button--toggle_layout {{ modifier_classes }}
+ {%- endset %}
+ {% endif %}
+ {% if use_offcanvas %}
+ {% set button_modifier_classes -%}
+ button button--small button--offcanvas {{ modifier_classes }}
+ {%- endset %}
+ {% endif %}
+
+ {% include '@base/02-html-elements/25-forms/forms.twig' with {
+ 'form_items': form_items,
+ 'modifier_classes': button_modifier_classes
+ } %}
+
+ </div>
+
+ {% endif %}
{% for item in lists %}
{% include "@components/card/card.twig" with {
modifier_classes: item.modifier_classes,
title: item.title,
+ header_level: '2',
url: item.url,
footer: item.footer,
date: item.date,
@@ -26,7 +48,9 @@
img_element: item.img_element,
alt: item.alt,
content: item.content,
- show_hover: 'true'
+ show_hover: 'true',
+ author_name: item.author_name,
+ author_link: item.author_link
} %}
{% endfor %}
{% if content %}
@@ -37,4 +61,3 @@
{% endif %}
{% endblock %}
-{% endembed %}
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.yml b/source/_patterns/04-components/content-grid-list/content-grid-list.yml
index c9c744c45e7c3afb351406615fa2883a9459c618..e0b8551dd570a13700f76495904660473109b28b 100644
--- a/source/_patterns/04-components/content-grid-list/content-grid-list.yml
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.yml
@@ -3,6 +3,7 @@ flex_modifier_classes: 'uw-flex-grid'
lists:
-
title: 'Blog Teaser title 1'
+ header_level: '2'
url: '#'
date:
- 'Friday, September 18, 2020'
@@ -41,6 +42,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Blog Teaser title 2'
+ header_level: '2'
url: '#'
date:
- 'Friday, September 18, 2020'
@@ -79,6 +81,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Blog Teaser title 3'
+ header_level: '2'
url: '#'
date:
- 'Friday, September 18, 2020'
@@ -117,6 +120,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 1'
+ header_level: '2'
url: '#'
date:
- 'Sep. 18, 2020'
@@ -144,6 +148,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 2'
+ header_level: '2'
url: '#'
date:
- 'Sep. 18, 2020'
@@ -171,6 +176,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'News Teaser title 3'
+ header_level: '2'
url: '#'
date:
- 'Sep. 18, 2020'
@@ -198,6 +204,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Event Teaser title 1'
+ header_level: '2'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
@@ -225,6 +232,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Event Teaser title 2'
+ header_level: '2'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
@@ -250,6 +258,7 @@ lists:
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
-
title: 'Event Teaser title 3'
+ header_level: '2'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
@@ -275,3 +284,39 @@ lists:
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+form_classes: 'uw-layout--controls'
+layout_style: 'grid'
+use_offcanvas: true
+form_items:
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: ''
+ name: ''
+ formenctype: ''
+ value: ''
+ formmethod: ''
+ formtarget: ''
+ text: 'toggle-layout'
+ btnclick: |
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: ''
+ name: ''
+ formenctype: ''
+ value: ''
+ formmethod: ''
+ formtarget: ''
+ text: 'off-canvas'
+ btnclick: |
diff --git a/source/_patterns/05-templates/termpage.twig b/source/_patterns/05-templates/termpage.twig
index 10412082a988df4816fdbd3adb90c4c891d9102f..7f505a0dce28ec8c074d07fc581d7f12a7e5040d 100644
--- a/source/_patterns/05-templates/termpage.twig
+++ b/source/_patterns/05-templates/termpage.twig
@@ -35,7 +35,7 @@
'section_title': false,
'section_content': termpage_title,
'has_constrain' : true,
- 'constrain_modifier_classes': 'l-constrain--no-padding'
+ 'constrain_modifier_classes': 'l-term-title l-constrain--no-padding'
} %}
{% include '@layouts/section/section.twig' with {
@@ -43,7 +43,7 @@
'section_title': false,
'section_content': termpage_results,
'has_constrain' : true,
- 'constrain_modifier_classes': 'l-constrain--no-padding'
+ 'constrain_modifier_classes': 'l-term-results l-constrain--no-padding'
} %}
{% include '@layouts/section/section.twig' with {
@@ -51,7 +51,7 @@
'section_title': false,
'section_content': termpage_filters,
'has_constrain' : false,
- 'constrain_modifier_classes': 'l-constrain--no-padding'
+ 'constrain_modifier_classes': 'l-term-filters l-constrain--no-padding'
} %}
{% endblock %}
{% endembed %}
diff --git a/source/_patterns/05-templates/termpage.yml b/source/_patterns/05-templates/termpage.yml
index d9b6fb6bc1f20bcb9867305a81238378b8979034..c6beafef161001629169d7123d56ae9f5f967743 100644
--- a/source/_patterns/05-templates/termpage.yml
+++ b/source/_patterns/05-templates/termpage.yml
@@ -1,7 +1,7 @@
---
cookie:
text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'
-termpage_title: 'News'
+termpage_title: 'Blog'
termpage_image:
termpage_content: |-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis mattis ipsum, non hendrerit justo. Pellentesque libero dui, varius ut ex quis, interdum aliquet est. Integer iaculis sapien libero, ut ullamcorper est tristique et. Vivamus orci nunc, commodo at vulputate gravida, tempus id nisi. Praesent feugiat elit at nunc dignissim consequat. Cras posuere venenatis augue, quis ultricies mauris sagittis quis. Proin blandit arcu est, ac pulvinar ante tristique non. Suspendisse eu maximus erat. Vestibulum hendrerit arcu id ex ullamcorper, id ultrices magna euismod. Maecenas id elit ultrices purus elementum sollicitudin. Sed id magna id metus pretium vulputate id a risus. Curabitur tellus quam, congue tristique rutrum in, sagittis vel nibh. Mauris aliquet purus vel faucibus faucibus. Nullam lacinia diam ante, nec consequat sem pulvinar non. Mauris et dolor quis metus cursus fermentum nec vitae risus.</p>
@@ -84,15 +84,12 @@ filter_items:
name: ''
type: 'text'
placeholder: '10text'
-
-
-
modifier_classes: ''
grid_modifier_classes: 'uw-term--layout'
flex_modifier_classes: 'uw-flex-grid'
lists:
-
- title: 'Blog Teaser title 1'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Friday, September 18, 2020'
@@ -130,7 +127,7 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'Blog Teaser title 2'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Friday, September 18, 2020'
@@ -168,7 +165,7 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'Blog Teaser title 3'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Friday, September 18, 2020'
@@ -206,10 +203,12 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'News Teaser title 1'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Sep. 18, 2020'
+ author_name: 'Author Lastname'
+ author_link: '#'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -233,10 +232,12 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'News Teaser title 2'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Sep. 18, 2020'
+ author_name: 'Author Lastname'
+ author_link: '#'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -260,10 +261,12 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'News Teaser title 3'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Sep. 18, 2020'
+ author_name: 'Author Lastname'
+ author_link: '#'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -287,10 +290,12 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'Event Teaser title 1'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
+ author_name: 'Author Lastname'
+ author_link: '#'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -314,10 +319,40 @@ lists:
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'Event Teaser title 2'
+ title: 'Blog Teaser title goes here'
+ url: '#'
+ date:
+ - 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
+
+ author_name: 'Author Lastname'
+ author_link: '#'
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text for blog teaser photo'
+ content: |-
+ <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+ -
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
+ author_name: 'Author Lastname'
+ author_link: '#'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -336,13 +371,17 @@ lists:
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
+ read_more: false
+ show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
-
- title: 'Event Teaser title 3'
+ title: 'Blog Teaser title goes here'
url: '#'
date:
- 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
+ author_name: 'Author Lastname'
+ author_link: '#'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -365,6 +404,7 @@ lists:
show_hover: true
content: |-
<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be short summary of the content and contain a few lines of useful descriptive text .</p>
+
site_name: 'Psychology'
is_demo_site_container: true
is_demo_footer: true
@@ -1275,23 +1315,10 @@ secondary_items:
class: ''
active_trail: false
menu_items_count: 0
-form_action: 'https://uwaterloo.ca/search'
-form_autocomplete: 'off'
-form_classes: 'uw-search--form'
-form_id: '12345'
-form_method: 'get'
-form_target: ''
-form_accept-charset : 'UTF-8'
-form_role: 'search'
+form_classes: 'uw-layout--controls'
+layout_style: 'grid'
+use_offcanvas: true
form_items:
- - classes: 'uw-input--search'
- id: '1text'
- name: 'search-input'
- type: 'text'
- placeholder: 'Search'
- label:
- text: 'Search'
- class: 'uw-search--label hidden'
- is_button_tag: true
form_item_wrapper: false
is_demo: false
@@ -1300,17 +1327,28 @@ form_items:
classes: button_modifier_classes
modifier_classes: button_modifier_classes
formaction: ''
- form: 'uw-search'
+ form: ''
+ name: ''
+ formenctype: ''
+ value: ''
+ formmethod: ''
+ formtarget: ''
+ text: 'toggle-layout'
+ btnclick: |
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: ''
name: ''
formenctype: ''
- value: 'submit'
+ value: ''
formmethod: ''
formtarget: ''
- text: ''
+ text: 'off-canvas'
btnclick: |
- # alert('Hello World!');
-# - classes: 'uw-input--submit'
-# id: 'submit'
-# name: 'Search'
-# type: 'submit'