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
platform-coop-toolkit · Feb 18, 2020 · 9af8409 · 9af8409
1 parent 4d97f6a
commit 9af8409
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 37 deletions.
diff --git 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
@@ -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
@@ -43,11 +43,14 @@
 					{% endif %}
 				</div>
 				{% endif %}
-				{% if favorite %}
-				<div class="card__favorite">
-					{% render '@svg', {svg:'favorite-filled'}, true %} Favorited
+				<div class="card__meta">
+				    <span class="card__added">Added January 1, 2020</span>
+					{% if favorite %}
+					<span class="card__favorite">
+						{% render '@svg', {svg:'favorite-filled'}, true %} Favorited
+					</span>
+					{% endif %}
 				</div>
-				{% endif %}
 			</aside>
 		</article>
 		{% if showRemoveButton %}

diff --git 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
@@ -1,38 +1,57 @@
 <article class="resource">
 	<div class="page-header resource__header">
-		<p class="resource__format">{% render '@svg', {svg: 'toolkit'}, true %} Toolkit</p>
 		<h1>{{ title }}</h1>
-		<p class="resource__meta">
-			<span class="resource__publisher">By <a rel="external" href="https://cooperativesfirst.com/what-we-do/resources/">Co-operatives First</a></span><br />
-			<span class="resource__locality">{% render '@svg', {svg: 'location'}, true %} Canada</span>
-		</p>
+		{% if byline %}
+		<div class="resource__meta resource__byline">{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}</div>
+		{% endif %}
+		<div class="resource__meta">
+			<div class="resource__meta-group">
+				<span class="resource__format"><span class="screen-reader-text">resource format: </span>{% render '@svg', {svg:formatIcon}, true %}{{ format }}</span>{% if publisher %}{% render '@separator' %}
+				<span class="resource__publisher">Published by <a rel="external" href="{{ publisherLink }}">{{ publisher | safe }}</a></span>
+				{% endif %}
+			</div>
+			{% if locality %}
+			<div class="resource__meta-group">
+				<span class="resource__locality"><span class="screen-reader-text">location of relevance: </span>{% render '@svg', {svg:'location'}, true %}{{ locality }}</span>
+			</div>
+			{% endif %}
+			{% if date or language %}
+			<div class="resource__meta-group">
+				{% render '@svg', {svg:'info'}, true %}
+				{% if language %}<span class="resource__language"><span class="screen-reader-text">language: </span>{{ language }}</span>{% endif %}{% if date and language %}{% render '@separator' %}{% endif %}
+				{% if date %}<span class="resource__date"><span class="screen-reader-text">date published: </span>{{ date }}</span>{% endif %}
+			</div>
+			{% endif %}
+		</div>
 	</div>
 	<div class="resource__abstract">
 		<h2>Summary</h2>
 		<p>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.</p>
 	</div>
-	<div class="resource__tags">
+	<div class="resource__tags stack">
 		<div class="tags">
 			{% 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 %}
 		</div>
+		<div>
 		{% render '@button--borderless', {icon: 'edit', label: 'Suggest edits', standAlone: true}, true %}
+		</div>
 	</div>
 	<div class="resource__cta">
 		{% render '@call-to-action', {label: 'View full resource', standAlone: true}, true %}
 	</div>
 	<div class="resource__actions">
 		{% 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 %}
 	</div>
+	<div class="resource__meta"><em>Added January 7, 2020</em></div>
 	<div class="resource__related">
 		<h2>Related resources</h2>
 		<ul class="cards">
-			{% 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',