Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve card semantics (resolves #190) #209

Merged
merged 12 commits into from
Jan 30, 2020
Merged

feat: improve card semantics (resolves #190) #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
090e8a4
feat: improve resource card semantics [WIP]
greatislander Jan 28, 2020
26d4663
fix: pagination indicator regression
greatislander Jan 28, 2020
f8e6ce7
feat: overhaul resource card semantics
greatislander Jan 28, 2020
badecb3
feat: apply new card layout to resource list
greatislander Jan 28, 2020
136989b
fix: adjust spacing below locality
greatislander Jan 28, 2020
7c7108a
feat: improve semantics of other card variants
greatislander Jan 28, 2020
3e4ecef
fix: align filled favorite icon with unfilled favorite icon
greatislander Jan 29, 2020
bfca2f4
fix: address SVG padding issue in buttons
greatislander Jan 29, 2020
6514a97
fix: include overflow text in topic list
greatislander Jan 29, 2020
f0d4c7d
feat: add screen reader labels to metadata
greatislander Jan 29, 2020
2120c96
feat: add separator component, use period instead of middot
greatislander Jan 30, 2020
d958e44
fix: adjust separator spacing for NVDA
greatislander Jan 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/assets/images/favorite-filled.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/styles/common/_todo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,8 @@ input[type="file"] > input[type="button"]::-moz-focus-inner {
.spacer {
height: rem(24);
}

.separator {
padding-left: 0.325em;
vertical-align: super;
}
4 changes: 2 additions & 2 deletions src/assets/styles/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,11 +173,11 @@
padding: 0 rem(8);

svg + * {
margin-right: 0.25em;
margin-left: 0.25em;
}

svg + .screen-reader-text {
margin-right: 0.25em;
margin-right: 0;
}

* + svg {
Expand Down
93 changes: 51 additions & 42 deletions src/assets/styles/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
background-color: $white;
border-top: rem(3) solid $blue-500;
box-shadow: 0 0 rem(5) rgba(0, 0, 0, 0.16);
height: 100%;
padding: rem(22);
position: relative;
transition: box-shadow 0.1s;
Expand All @@ -30,11 +31,9 @@
box-shadow: 0 0 rem(25) transparentize($blue-500, 0.75);
padding: rem(22) rem(19) rem(19);
}

@include card($blue-500, $white, true);
}

.card + .card {
.cards .card__wrapper + .card__wrapper {
margin-top: rem(30);
}

Expand Down Expand Up @@ -63,36 +62,18 @@
margin-top: rem(22);
}

.card__format {
background: $blue-500;
color: $white;
font-family: $font-family-sans;
font-size: rem(14);
font-weight: $font-weight-semibold;
padding: rem(2) rem(6);

svg {
color: $red-400;
margin-right: rem(4);
width: 1.25em;
}
}

.card__sep,
.card__language {
font-family: $font-family-sans;
font-size: rem(14);
}

.card header {
position: relative;
}

.card__title {
align-items: flex-start;
display: flex;
flex-direction: column;
font-size: rem(20);
font-weight: $font-weight-bold;
line-height: (30 / 20);
margin-top: rem(12);
margin-top: 0;

a {
color: $black;
Expand Down Expand Up @@ -120,46 +101,74 @@
}
}

.card__date,
.card header + * {
margin-top: rem(9);
}

.card__byline,
.card__locality,
.card__meta,
.card__description,
.card__tags {
.card__favorite {
color: $grey-600;
font-size: rem(14);
margin-top: rem(2);
margin-top: rem(9);
}

.card__date,
.card__locality {
.card__byline,
.card__meta {
svg {
height: 1.125em;
margin-bottom: rem(-2);
margin-right: 0;
}
}

.card__meta {
padding-left: 1.5em;
text-indent: -1.5em;
}

.card__format {
background: $blue-500;
color: $white;
display: inline-block;
font-family: $font-family-sans;
font-size: rem(14);
font-weight: $font-weight-semibold;
margin-bottom: rem(12);
padding: rem(2) rem(6);
}

.card__tags {
margin-top: rem(2);
margin-top: rem(6);

.badges {
display: inline-flex;
}

p {
display: inline;
margin-left: rem(8);
.overflow {
color: $grey-600;
font-size: rem(14);
margin-left: rem(4);
}
}

.card header + * {
margin-top: rem(6);
.card__favorite {
color: $black;
font-weight: $font-weight-bold;
text-align: right;

svg {
color: $red-500;
}
}

.card--resource {
@include card($red-400, $black, false);

.card__format {
color: inherit;
display: inline;
font-family: inherit;
font-weight: inherit;
padding: 0;
}
}
Expand Down Expand Up @@ -201,7 +210,7 @@
}
}

.card {
.cards .card__wrapper {
margin-bottom: rem(30);
width: calc(50% - #{rem(30)} / 2);

Expand All @@ -219,7 +228,7 @@
}
}

.card + .card {
.cards .card__wrapper + .card__wrapper {
margin-top: 0;
}
}
Expand Down Expand Up @@ -247,7 +256,7 @@
}
}

.card {
.cards .card__wrapper {
margin-bottom: rem(30);
margin-left: rem(30);
width: calc((100% - (#{rem(30)} * 2)) / 3);
Expand Down
4 changes: 2 additions & 2 deletions src/assets/styles/components/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
nav {
[role="banner"] nav {
align-items: center;
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -202,7 +202,7 @@ nav {
}

@include breakpoint-up(md) {
nav {
[role="banner"] nav {
height: rem(80);
margin-left: auto;
}
Expand Down
1 change: 1 addition & 0 deletions src/components/01-atoms/_separator/separator.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<span class="separator">.</span>
58 changes: 58 additions & 0 deletions src/components/02-molecules/01-card/card--resource.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
{% if not standAlone %}
<ul class="cards">
{% endif %}
<li class="card__wrapper">
<article class="card card--resource">
<header>
<h3 class="card__title" >
<a href="{{ href }}">{{ title | safe }}</a>
</h3>
{% if byline %}
<p class="card__byline">By {{ byline | safe }}</p>
{% endif %}
</header>
<aside class="card__aside">
<div class="card__meta">
<span class="card__format"><span class="screen-reader-text">resource format: </span>{% render '@svg', {svg:formatIcon}, true %}{{ format }}</span>{% if publisher %}{% render '@separator' %}
<span class="card__publisher"><span class="screen-reader-text">publisher: </span>{{ publisher | safe }}</span>
{% endif %}
</div>
{% if locality %}
<div class="card__meta">
<span class="card__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="card__meta">
{% render '@svg', {svg:'info'}, true %}
{% if language %}<span class="card__language"><span class="screen-reader-text">language: </span>{{ language }}</span>{% endif %}{% if date and language %}{% render '@separator' %}{% endif %}
{% if date %}<span class="card__date"><span class="screen-reader-text">date published: </span>{{ date }}</span>{% endif %}
</div>
{% endif %}
{% if topics %}
<div class="card__tags">
<ul class="badges" >
{% for tag in topics %}
<li class="badge">
<span class="screen-reader-text">Topic: </span>{{ tag | replace('-', ' ') }}
</li>
{% endfor %}
{% if topicCount > 2 %}
<li class="overflow">
+{{ topicCount - 2 }} more
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% if favorite %}
<div class="card__favorite">
{% render '@svg', {svg:'favorite-filled'}, true %} Favorited
</div>
{% endif %}
</aside>
</article>
</li>
{% if not standAlone %}
</ul>
{% endif %}
5 changes: 4 additions & 1 deletion src/components/02-molecules/01-card/card.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,14 @@ module.exports = {
formatIcon: 'article',
name: 'Resource',
title: 'Data as a common in the sharing economy',
byline: 'Centre d&rsquo;économie Paris Nord',
byline: 'Carballa Smichowski Bruno',
publisher: 'Centre d&rsquo;économie Paris Nord',
locality: 'France',
date: 2016,
topics: ['Commons', 'Policy'],
topicCount: 4,
href: 'resource',
favorite: true,
language: 'English'
}
},
Expand Down
85 changes: 34 additions & 51 deletions src/components/02-molecules/01-card/card.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,44 @@
{% if not standAlone %}
<ul class="cards">
{% endif %}
<li class="card{% if modifier %} card--{{ modifier }}{% endif %}" data-format="{{ format | slugify }}">
{% if image %}
<li class="card__wrapper">
<article class="card{% if modifier %} card--{{ modifier }}{% endif %}">
{% if image %}
<figure class="card__image">
<img src="{{ image }}" alt="Image for this {{ modifier }}."/>
</figure>
{% endif %}
<header>
{% if format %}
<span class="card__format">
{% if modifier === 'resource' %}
{% render '@svg', {svg:formatIcon}, true %}
{% endif %}{{ format }}</span>{% endif %}
{% if language %}
<span class="card__sep"> &middot; </span>
<span class="card__language">{{ language }}</span>
{% endif %}
{% if href %}
<h2 class="card__title" >
<a {% if externalLink %}rel="external" {% endif %}href="{{ href }}">{{ title | safe }}</a>
</h2>
{% endif %}
</header>
{% if date %}
<p class="card__date">
{% if modifier === 'event' %}
{% render '@svg', {svg:'calendar'}, true %}{{ date }}
{% else %}
{{ date }}
<header>
<h3 class="card__title" >
{% 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>
{% endif %}
</p>
{% endif %}
{% if byline %}
<p class="card__byline">By {{ byline | safe }}</p>
{% endif %}
{% if description %}
<p class="card__description">{{ description }}</p>{% endif %}
{% if locality %}
<p class="card__locality">
{% render '@svg', {svg:'location'}, true %}{{ locality }}</p>
{% endif %}
{% if topics %}
<div class="card__tags">
<ul class="badges" >
{% for tag in topics %}
<li class="badge">
<span class="screen-reader-text">Topic: </span>{{ tag | replace('-', ' ') }}
</li>
{% endfor %}
</ul>
{% if topicCount > 2 %}
<p>+{{ topicCount - 2 }} more</p>
</header>
<aside class="card__aside">
{% if date %}
<div class="card__meta">
<span class="card__date">
{% if modifier === 'event' %}
<span class="screen-reader-text">event date: </span>{% render '@svg', {svg:'calendar'}, true %}{{ date }}
{% else %}
<span class="screen-reader-text">date published: </span>{{ date }}
{% endif %}
</span>
</div>
{% endif %}
</li>
{% if not standAlone %}
</ul>
{% endif %}
{% endif %}
{% if locality %}
<div class="card__meta">
<span class="card__locality"><span class="screen-reader-text">location: </span>{% render '@svg', {svg:'location'}, true %}{{ locality }}</span>
</div>
{% endif %}
{% if description %}
<div class="card__description">{{ description }}</div>
{% endif %}
</aside>
</article>
</li>
{% if not standAlone %}
</ul>
{% endif %}
Loading