From 9af84092d4420b0875a966f79e8b9212a9e90376 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Tue, 18 Feb 2020 10:33:54 -0700 Subject: [PATCH] fix: new resource layout (resolves #238) (#248) * fix: new resource layout (resolves #238) * fix: add byline and date added * fix: simplify meta styling * feat: add date added to resource cards * fix: italicize date added on cards * fix: adjust card text color --- src/assets/styles/components/_card.scss | 21 ++++++-- src/assets/styles/layouts/_resource.scss | 53 ++++++++++++------- .../02-molecules/01-card/card--resource.njk | 11 ++-- .../03-layouts/03-resource/resource.config.js | 10 +++- .../03-layouts/03-resource/resource.njk | 40 ++++++++++---- 5 files changed, 98 insertions(+), 37 deletions(-) diff --git a/src/assets/styles/components/_card.scss b/src/assets/styles/components/_card.scss index 2646837b..11d24b4b 100644 --- a/src/assets/styles/components/_card.scss +++ b/src/assets/styles/components/_card.scss @@ -111,13 +111,18 @@ margin-top: rem(9); } +.card__byline, +.card__meta, +.card__description { + margin-top: rem(9); +} + .card__byline, .card__meta, .card__description, .card__favorite { - color: var(--grey-600); + color: var(--dark-mint-500); font-size: rem(14); - margin-top: rem(9); } .card__byline, @@ -156,10 +161,20 @@ } } +.card__tags + .card__meta { + margin-top: rem(14); +} + +.card__added { + color: var(--grey-600); + font-style: italic; +} + .card__favorite { color: var(--dark-mint-500); + display: inline-block; + float: right; font-weight: $font-weight-bold; - text-align: right; svg { color: var(--red-500); diff --git a/src/assets/styles/layouts/_resource.scss b/src/assets/styles/layouts/_resource.scss index 7fc21f32..e7341074 100644 --- a/src/assets/styles/layouts/_resource.scss +++ b/src/assets/styles/layouts/_resource.scss @@ -2,27 +2,31 @@ padding-bottom: rem(48); } -.resource__format::after { - background-color: var(--red-400); - content: ""; - display: block; - height: rem(3); - margin-top: rem(14); - width: rem(45); +.resource__meta { + font-size: rem(14); } -.resource__format svg { - color: var(--red-400); -} - -.resource__format + h1 { - margin-top: rem(32); +.resource__meta svg { + color: var(--grey-500); } h1 + .resource__meta { margin-top: rem(24); } +.resource__meta + .resource__meta { + margin-top: rem(12); +} + +.resource__meta-group { + padding-left: 1.5em; + text-indent: -1.5em; +} + +.resource__meta-group a { + display: inline; +} + .resource__abstract h2 + * { margin-top: rem(24); } @@ -63,13 +67,12 @@ h1 + .resource__meta { @include breakpoint-down(xs) { .resource__cta { - background: var(--off-white); + background: var(--white); bottom: 0; - box-shadow: 0 0 rem(10) rgba(0, 0, 0, 0.16); left: 0; - padding: rem(12) $gutter; - position: fixed; - width: 100vw; + padding: rem(12) 0; + position: sticky; + width: 100%; z-index: 1; } } @@ -81,6 +84,10 @@ h1 + .resource__meta { } } + .resource__meta-group + .resource__meta-group { + margin-left: rem(20); + } + .resource__cta { margin-top: rem(52); } @@ -95,6 +102,12 @@ h1 + .resource__meta { } } +@include breakpoint-up(md) { + .resource__meta-group { + display: inline-block; + } +} + @include breakpoint-up(lg) { .single-lc_resource { main { @@ -111,6 +124,10 @@ h1 + .resource__meta { margin-top: rem(28); } + .resource__actions + .resource__meta { + margin-bottom: rem(24); + } + .resource__related { padding-bottom: rem(130); padding-top: rem(80); diff --git a/src/components/02-molecules/01-card/card--resource.njk b/src/components/02-molecules/01-card/card--resource.njk index 63dc4242..353e1a33 100644 --- a/src/components/02-molecules/01-card/card--resource.njk +++ b/src/components/02-molecules/01-card/card--resource.njk @@ -43,11 +43,14 @@ {% endif %} {% endif %} - {% if favorite %} -
- {% render '@svg', {svg:'favorite-filled'}, true %} Favorited +
+ Added January 1, 2020 + {% if favorite %} + + {% render '@svg', {svg:'favorite-filled'}, true %} Favorited + + {% endif %}
- {% endif %} {% if showRemoveButton %} diff --git a/src/components/03-layouts/03-resource/resource.config.js b/src/components/03-layouts/03-resource/resource.config.js index 00d3fab5..a4f2abc6 100644 --- a/src/components/03-layouts/03-resource/resource.config.js +++ b/src/components/03-layouts/03-resource/resource.config.js @@ -5,6 +5,14 @@ module.exports = { bodyClass: 'single-lc_resource', hasMenu: true, hasFooter: true, - title: 'Co-op Creator' + title: 'Co-op Creator', + format: 'Toolkit', + formatIcon: 'toolkit', + publisher: 'Cooperatives First', + publisherLink: 'https://cooperativesfirst.ca', + locality: 'Canada', + language: 'English', + date: 2019, + byline: 'Some Co-operator' } }; diff --git a/src/components/03-layouts/03-resource/resource.njk b/src/components/03-layouts/03-resource/resource.njk index 74bc9936..99042fdf 100644 --- a/src/components/03-layouts/03-resource/resource.njk +++ b/src/components/03-layouts/03-resource/resource.njk @@ -1,23 +1,42 @@
-

{% render '@svg', {svg: 'toolkit'}, true %} Toolkit

{{ title }}

-

- By Co-operatives First
- {% render '@svg', {svg: 'location'}, true %} Canada -

+ {% if byline %} +
{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}
+ {% endif %} +
+
+ resource format: {% render '@svg', {svg:formatIcon}, true %}{{ format }}{% if publisher %}{% render '@separator' %} + Published by {{ publisher | safe }} + {% endif %} +
+ {% if locality %} +
+ location of relevance: {% render '@svg', {svg:'location'}, true %}{{ locality }} +
+ {% endif %} + {% if date or language %} +
+ {% render '@svg', {svg:'info'}, true %} + {% if language %}language: {{ language }}{% endif %}{% if date and language %}{% render '@separator' %}{% endif %} + {% if date %}date published: {{ date }}{% endif %} +
+ {% endif %} +

Summary

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
+
{% render '@tag', {label: 'Growing a co-op', standAlone: true}, true %} {% render '@tag', {label: 'Starting a co-op', standAlone: true}, true %} {% render '@tag', {label: 'Governance', standAlone: true}, true %}
+
{% render '@button--borderless', {icon: 'edit', label: 'Suggest edits', standAlone: true}, true %} +
{% render '@call-to-action', {label: 'View full resource', standAlone: true}, true %} @@ -25,14 +44,14 @@
{% render '@button--borderless', {standAlone: true, icon: 'favorite', label: 'Favorite'}, true %} {% render '@menu-button', {standAlone: true, icon: 'share', label: 'Share', items: [{label: 'Twitter'}, {label: 'Facebook'}, {label: 'LinkedIn'}, {label: 'Email'}]}, true %} - {% render '@button--borderless', {standAlone: true, icon: false, label: 'Report broken link'}, true %} + {% render '@button--borderless', {standAlone: true, icon: 'broken-link', label: 'Report broken link'}, true %} {% render '@menu-button', {standAlone: true, icon: false, label: 'View alternate links', items: [{label: 'View on Perma.cc'}, {label: 'View on the Wayback Machine'}]}, true %}
+
Added January 7, 2020

Related resources

    - {% render '@card', { - modifier: 'resource', + {% render '@card--resource', { id: 1, format: 'Article', formatIcon: 'article', @@ -46,8 +65,7 @@ language: 'English', standAlone: true } %} - {% render '@card', { - modifier: 'resource', + {% render '@card--resource', { id: 2, format: 'Article', formatIcon: 'article',