From b835fb58d646299268edff913234cc6dc71a87b7 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Tue, 18 Aug 2020 14:20:16 -0400
Subject: [PATCH] Adjustments to the date-formats used in card - teaser
patterns
---
css/styles.css | 6 +++
.../02-base/date-formats/_date-format.twig | 15 +++++++
.../02-base/date-formats/_date-formats.scss | 7 +++-
.../02-base/date-formats/date-formats.md | 3 ++
.../02-base/date-formats/date-formats.twig | 8 ++++
.../02-base/date-formats/date-formats.yml | 24 ++++++++++-
.../02-base/date-formats/long-date.md | 3 --
.../02-base/date-formats/long-date.twig | 7 ----
.../02-base/date-formats/long-datetime.md | 3 --
.../02-base/date-formats/long-datetime.twig | 7 ----
.../date-formats/medium-date-short-month.md | 3 --
.../date-formats/medium-date-short-month.twig | 7 ----
.../02-base/date-formats/medium-date.md | 3 --
.../02-base/date-formats/medium-date.twig | 7 ----
.../02-base/date-formats/medium-datetime.md | 3 --
.../02-base/date-formats/medium-datetime.twig | 7 ----
.../02-base/date-formats/short-date.md | 3 --
.../02-base/date-formats/short-date.twig | 7 ----
.../02-base/date-formats/short-datetime.md | 3 --
.../02-base/date-formats/short-datetime.twig | 7 ----
.../card/card--feature/card--feature.twig | 2 +
.../card/card--feature/card--feature.yml | 3 +-
source/_patterns/04-components/card/card.twig | 41 +++----------------
source/_patterns/04-components/card/card.yml | 4 +-
.../teaser/teaser--blog/teaser--blog.twig | 2 +-
.../teaser/teaser--blog/teaser--blog.yml | 3 +-
.../teaser/teaser--event/teaser--event.twig | 1 +
.../teaser/teaser--event/teaser--event.yml | 3 +-
.../_patterns/04-components/teaser/teaser.yml | 3 +-
29 files changed, 77 insertions(+), 118 deletions(-)
create mode 100644 source/_patterns/02-base/date-formats/_date-format.twig
create mode 100644 source/_patterns/02-base/date-formats/date-formats.md
create mode 100644 source/_patterns/02-base/date-formats/date-formats.twig
delete mode 100644 source/_patterns/02-base/date-formats/long-date.md
delete mode 100644 source/_patterns/02-base/date-formats/long-date.twig
delete mode 100644 source/_patterns/02-base/date-formats/long-datetime.md
delete mode 100644 source/_patterns/02-base/date-formats/long-datetime.twig
delete mode 100644 source/_patterns/02-base/date-formats/medium-date-short-month.md
delete mode 100644 source/_patterns/02-base/date-formats/medium-date-short-month.twig
delete mode 100644 source/_patterns/02-base/date-formats/medium-date.md
delete mode 100644 source/_patterns/02-base/date-formats/medium-date.twig
delete mode 100644 source/_patterns/02-base/date-formats/medium-datetime.md
delete mode 100644 source/_patterns/02-base/date-formats/medium-datetime.twig
delete mode 100644 source/_patterns/02-base/date-formats/short-date.md
delete mode 100644 source/_patterns/02-base/date-formats/short-date.twig
delete mode 100644 source/_patterns/02-base/date-formats/short-datetime.md
delete mode 100644 source/_patterns/02-base/date-formats/short-datetime.twig
diff --git a/css/styles.css b/css/styles.css
index 160c7d74..89fc3aac 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1237,6 +1237,12 @@ svg:not(:root) {
width: 1px;
word-wrap: normal; }
+.uw-date-pl {
+ margin-bottom: 1.5rem; }
+
+.uw-date-pl h4 {
+ margin-bottom: 0.5rem; }
+
.uw-date {
background-color: #000;
clear: both;
diff --git a/source/_patterns/02-base/date-formats/_date-format.twig b/source/_patterns/02-base/date-formats/_date-format.twig
new file mode 100644
index 00000000..408b9dfb
--- /dev/null
+++ b/source/_patterns/02-base/date-formats/_date-format.twig
@@ -0,0 +1,15 @@
+{% set date_modifier_classes -%}
+ uw-date uw-date--{{ date_format|replace({'-' : '_'})}} {{ date_modifier_classes }}
+{%- endset %}
+{% if is_demo %}
+<div class='uw-date-pl'>
+ <h4> {{ date_format }}:</h4>
+{% endif %}
+
+{% if date %}
+ <span class="{{ date_modifier_classes }}" >{{ date }}</span>
+{% endif %}
+
+{% if is_demo %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/02-base/date-formats/_date-formats.scss b/source/_patterns/02-base/date-formats/_date-formats.scss
index d93e4a35..fb794fdd 100644
--- a/source/_patterns/02-base/date-formats/_date-formats.scss
+++ b/source/_patterns/02-base/date-formats/_date-formats.scss
@@ -2,7 +2,12 @@
// Styles for Date formats.
$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
-
+.uw-date-pl{
+ margin-bottom: rem(gesso-spacing(md));
+}
+.uw-date-pl h4{
+ margin-bottom: rem(gesso-spacing(xs));
+}
.uw-date{
background-color:gesso-brand(org-default,uw-black,'primary');
clear: both;
diff --git a/source/_patterns/02-base/date-formats/date-formats.md b/source/_patterns/02-base/date-formats/date-formats.md
new file mode 100644
index 00000000..97a29fed
--- /dev/null
+++ b/source/_patterns/02-base/date-formats/date-formats.md
@@ -0,0 +1,3 @@
+---
+title: Date Formats
+---
diff --git a/source/_patterns/02-base/date-formats/date-formats.twig b/source/_patterns/02-base/date-formats/date-formats.twig
new file mode 100644
index 00000000..a476da75
--- /dev/null
+++ b/source/_patterns/02-base/date-formats/date-formats.twig
@@ -0,0 +1,8 @@
+
+{% for date_format in date_formats %}
+ {% include '@base/date-formats/_date-format.twig' with {
+ 'date_format': date_format.date_format,
+ 'date': date_format.date,
+ 'is_demo': 'true'
+ }%}
+{% endfor %}
diff --git a/source/_patterns/02-base/date-formats/date-formats.yml b/source/_patterns/02-base/date-formats/date-formats.yml
index e73585af..84ada721 100644
--- a/source/_patterns/02-base/date-formats/date-formats.yml
+++ b/source/_patterns/02-base/date-formats/date-formats.yml
@@ -1,2 +1,24 @@
---
-date_modifier_classes: ''
\ No newline at end of file
+date_modifier_classes: ''
+date_formats:
+ -
+ date_format: 'long-date'
+ date: 'Friday, September 18, 2020'
+ -
+ date_format: 'long-datetime'
+ date: 'Friday, September 18, 2020 - 4:20pm'
+ -
+ date_format: 'medium-date'
+ date: 'September 18, 2018'
+ -
+ date_format: 'medium-date-short-month'
+ date: 'Sep. 18, 2020'
+ -
+ date_format: 'medium-datetime'
+ date: 'September 18, 2020 - 4:20pm'
+ -
+ date_format: 'short-date'
+ date: '09-18-2020'
+ -
+ date_format: 'short-datetime'
+ date: '09-18-2020, - 4:20pm'
diff --git a/source/_patterns/02-base/date-formats/long-date.md b/source/_patterns/02-base/date-formats/long-date.md
deleted file mode 100644
index f321c272..00000000
--- a/source/_patterns/02-base/date-formats/long-date.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Long Date
----
diff --git a/source/_patterns/02-base/date-formats/long-date.twig b/source/_patterns/02-base/date-formats/long-date.twig
deleted file mode 100644
index b51f4290..00000000
--- a/source/_patterns/02-base/date-formats/long-date.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--long_date {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" >{{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/long-datetime.md b/source/_patterns/02-base/date-formats/long-datetime.md
deleted file mode 100644
index f440f9a3..00000000
--- a/source/_patterns/02-base/date-formats/long-datetime.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Long Datetime
----
diff --git a/source/_patterns/02-base/date-formats/long-datetime.twig b/source/_patterns/02-base/date-formats/long-datetime.twig
deleted file mode 100644
index 7421c8e7..00000000
--- a/source/_patterns/02-base/date-formats/long-datetime.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--long_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }} — {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/medium-date-short-month.md b/source/_patterns/02-base/date-formats/medium-date-short-month.md
deleted file mode 100644
index 5d4ceb22..00000000
--- a/source/_patterns/02-base/date-formats/medium-date-short-month.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Medium Date Short Month
----
diff --git a/source/_patterns/02-base/date-formats/medium-date-short-month.twig b/source/_patterns/02-base/date-formats/medium-date-short-month.twig
deleted file mode 100644
index f72a89be..00000000
--- a/source/_patterns/02-base/date-formats/medium-date-short-month.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--medium-date-short-month {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.short }}. {{ day.short }}, {{ year.long }}</span>
-{% endif %}
\ No newline at end of file
diff --git a/source/_patterns/02-base/date-formats/medium-date.md b/source/_patterns/02-base/date-formats/medium-date.md
deleted file mode 100644
index da7a0e51..00000000
--- a/source/_patterns/02-base/date-formats/medium-date.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Medium Date
----
diff --git a/source/_patterns/02-base/date-formats/medium-date.twig b/source/_patterns/02-base/date-formats/medium-date.twig
deleted file mode 100644
index 101720f3..00000000
--- a/source/_patterns/02-base/date-formats/medium-date.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--medium_date {{ modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.long }} {{ day.short }}, {{ year.long }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/medium-datetime.md b/source/_patterns/02-base/date-formats/medium-datetime.md
deleted file mode 100644
index 3c2ce9da..00000000
--- a/source/_patterns/02-base/date-formats/medium-datetime.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Medium Datetime
----
diff --git a/source/_patterns/02-base/date-formats/medium-datetime.twig b/source/_patterns/02-base/date-formats/medium-datetime.twig
deleted file mode 100644
index aec41c21..00000000
--- a/source/_patterns/02-base/date-formats/medium-datetime.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--medium_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.long }} {{ day.short }}, {{ year.long }} — {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/short-date.md b/source/_patterns/02-base/date-formats/short-date.md
deleted file mode 100644
index 5a16025e..00000000
--- a/source/_patterns/02-base/date-formats/short-date.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Short Date
----
diff --git a/source/_patterns/02-base/date-formats/short-date.twig b/source/_patterns/02-base/date-formats/short-date.twig
deleted file mode 100644
index e0ce246e..00000000
--- a/source/_patterns/02-base/date-formats/short-date.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--short_date {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" >{{ month.digit }}-{{ day.long }}-{{ year.long }}</span>
-{% endif %}
diff --git a/source/_patterns/02-base/date-formats/short-datetime.md b/source/_patterns/02-base/date-formats/short-datetime.md
deleted file mode 100644
index 71101fd1..00000000
--- a/source/_patterns/02-base/date-formats/short-datetime.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-title: Short Datetime
----
diff --git a/source/_patterns/02-base/date-formats/short-datetime.twig b/source/_patterns/02-base/date-formats/short-datetime.twig
deleted file mode 100644
index 65df4930..00000000
--- a/source/_patterns/02-base/date-formats/short-datetime.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-{% set date_modifier_classes -%}
- uw-date uw-date--short_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
- <span class="{{ date_modifier_classes }}" > {{ month.digit }}-{{ day.long }}-{{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.twig b/source/_patterns/04-components/card/card--feature/card--feature.twig
index 8eb39718..85864c17 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.twig
+++ b/source/_patterns/04-components/card/card--feature/card--feature.twig
@@ -4,8 +4,10 @@
url: url,
footer: footer,
date: date,
+ date_format: date_format,
read_more: read_more,
tags: tags,
+ tag_type: tag_type,
sources: sources,
img_element: img_element,
alt: alt,
diff --git a/source/_patterns/04-components/card/card--feature/card--feature.yml b/source/_patterns/04-components/card/card--feature/card--feature.yml
index e96efa4c..f0784504 100644
--- a/source/_patterns/04-components/card/card--feature/card--feature.yml
+++ b/source/_patterns/04-components/card/card--feature/card--feature.yml
@@ -6,7 +6,8 @@ url: '#'
author_name: 'Author Lastname'
author_link: '#'
footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
-date: Thursday, September 28, 2018
+date: 'Friday, September 19, 2020 - 4:20 PM'
+date_format: 'long-datetime'
read_more: true
show_hover: true
tags:
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 64622ca1..fe11e019 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -5,41 +5,10 @@
<div class="card__header">
{% if date %}
<div class="card__date">
- {% if date_format == 'long_date' %}
- {% include "@base/date-formats/long-date.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'long_datetime' %}
- {% include "@base/date-formats/long-datetime.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'medium_date' %}
- {% include "@base/date-formats/medium-date.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'medium_date_short_month' %}
- {% include "@base/date-formats/medium-date-short-month.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'medium_datetime' %}
- {% include "@base/date-formats/medium-datetime.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'short_date' %}
- {% include "@base/date-formats/short-date.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
- {% if date_format == 'short_datetime' %}
- {% include "@base/date-formats/short-datetime.twig" with {
- modifier_classes: modifier_classes,
- }%}
- {% endif %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': date
+ }%}
</div>
{% endif %}
<h{{ header_level }} class="card__title">
@@ -69,7 +38,7 @@
sources: sources,
img_element: img_element,
alt: alt
- }%}
+ }%}
{% if url %}
</a>
{% endif %}
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index 047864fa..4598076b 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -6,8 +6,8 @@ url: '#'
author_name: 'Author Lastname'
author_link: '#'
footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
-date: 'Thursday, September 28, 2018'
-date_format: 'long_date'
+date: 'Friday, September 19, 2020'
+date_format: 'long-date'
read_more: true
show_hover: true
tags:
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
index d57e4982..f42e5e9d 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig
@@ -6,8 +6,8 @@
modifier_classes: teaser_modifier_classes,
title: title,
url: url,
- date_format: date_format,
date: date,
+ date_format: 'long-datetime',
tags: tags,
tag_type: 'simple',
sources: sources,
diff --git a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
index 3e6fd667..f15cad12 100644
--- a/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
+++ b/source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml
@@ -1,8 +1,7 @@
---
title: 'Blog Teaser title'
url: '#'
-date: 'Thursday, September 28, 2018'
-date_format: 'long_date'
+date: 'Friday, September 18, 2020'
author_name: 'Author Lastname'
author_link: '#'
tags:
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
index 06d0d57f..424373f1 100644
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.twig
@@ -7,6 +7,7 @@
title: title,
url: url,
date: date,
+ date_format: 'medium-date-short-month',
sources: sources,
img_element: img_element,
alt: alt,
diff --git a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
index 198af11b..d8697272 100644
--- a/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
+++ b/source/_patterns/04-components/teaser/teaser--event/teaser--event.yml
@@ -1,8 +1,7 @@
---
title: 'Event Teaser title'
url: '#'
-date: 'AUG 14, 2020'
-date_format: 'long_datetime'
+date: 'SEP 18, 2020'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
diff --git a/source/_patterns/04-components/teaser/teaser.yml b/source/_patterns/04-components/teaser/teaser.yml
index 439d7b56..7060f05e 100644
--- a/source/_patterns/04-components/teaser/teaser.yml
+++ b/source/_patterns/04-components/teaser/teaser.yml
@@ -3,8 +3,7 @@ title: 'This is a Teaser title using the card component'
url: '#'
author_name: 'Author Lastname'
author_link: '#'
-date: 'Thursday, September 28, 2018'
-date_format: 'long_date'
+date: 'Friday, September 18, 2020'
tags:
- url: '#'
title: 'Tag 1'
--
GitLab