fix: new resource layout (resolves #238)

platform-coop-toolkit · Feb 14, 2020 · b78d917 · b78d917
1 parent 55d6b32
commit b78d917
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 30 deletions.
diff --git a/src/assets/styles/layouts/_resource.scss b/src/assets/styles/layouts/_resource.scss
@@ -2,27 +2,27 @@
 	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-group {
+	padding-left: 1.5em;
+	text-indent: -1.5em;
+}
+
+.resource__meta-group a {
+	display: inline;
+}
+
 .resource__abstract h2 + * {
 	margin-top: rem(24);
 }
@@ -63,13 +63,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 +80,10 @@ h1 + .resource__meta {
 		}
 	}
 
+	.resource__meta-group + .resource__meta-group {
+		margin-left: rem(20);
+	}
+
 	.resource__cta {
 		margin-top: rem(52);
 	}
@@ -95,6 +98,12 @@ h1 + .resource__meta {
 	}
 }
 
+@include breakpoint-up(md) {
+	.resource__meta-group {
+		display: inline-block;
+	}
+}
+
 @include breakpoint-up(lg) {
 	.single-lc_resource {
 		main {

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,13 @@ 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
 	}
 };
diff --git a/src/components/03-layouts/03-resource/resource.njk b/src/components/03-layouts/03-resource/resource.njk
@@ -1,38 +1,53 @@
 <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>
+		<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__related">
 		<h2>Related resources</h2>
 		<ul class="cards">
-			{% render '@card', {
-			modifier: 'resource',
+			{% render '@card--resource', {
 			id: 1,
 			format: 'Article',
 			formatIcon: 'article',
@@ -46,8 +61,7 @@
 			language: 'English',
 			standAlone: true
 			} %}
-			{% render '@card', {
-			modifier: 'resource',
+			{% render '@card--resource', {
 			id: 2,
 			format: 'Article',
 			formatIcon: 'article',