feat: add author icon to resource card (resolves #214) (#216)

* feat: add author icon to resource card * fix: prevent separator from affecting line height
platform-coop-toolkit · Jan 31, 2020 · bb37e9a · bb37e9a
1 parent 0e5b296
commit bb37e9a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/src/assets/images/author.svg b/src/assets/images/author.svg
diff --git a/src/assets/styles/common/_todo.scss b/src/assets/styles/common/_todo.scss
@@ -13,6 +13,8 @@ input[type="file"] > input[type="button"]::-moz-focus-inner {
 }
 
 .separator {
-	padding-left: 0.325em;
-	vertical-align: super;
+	display: inline-block;
+	padding-left: 0.5ch;
+	text-indent: 0;
+	transform: translate(0, -0.5ch);
 }
diff --git a/src/components/01-atoms/01-icons/icons.config.js b/src/components/01-atoms/01-icons/icons.config.js
@@ -14,6 +14,9 @@ module.exports = {
 				{
 					svg: 'share',
 				},
+				{
+					svg: 'author'
+				},
 				{
 					svg: 'edit',
 				},

diff --git a/src/components/02-molecules/01-card/card--resource.njk b/src/components/02-molecules/01-card/card--resource.njk
@@ -8,7 +8,7 @@
 					<a href="{{ href }}">{{ title | safe }}</a>
 				</h3>
 				{% if byline %}
-					<p class="card__byline">By {{ byline | safe }}</p>
+					<p class="card__byline">{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}</p>
 				{% endif %}
 			</header>
 			<aside class="card__aside">

diff --git a/src/components/02-molecules/01-card/card.njk b/src/components/02-molecules/01-card/card.njk
@@ -13,7 +13,7 @@
 					{% if format %}<span class="card__format">{{ format }}</span><span class="screen-reader-text">: </span>{% endif %}<a {% if externalLink %}rel="external" {% endif %}href="{{ href }}">{{ title | safe }}</a>
 				</h3>
 				{% if byline %}
-					<p class="card__byline">By {{ byline | safe }}</p>
+					<p class="card__byline">{% render '@svg', {svg:'author'}, true %} By {{ byline | safe }}</p>
 				{% endif %}
 			</header>
 			<aside class="card__aside">