-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* feat: improve resource card semantics [WIP] * fix: pagination indicator regression * feat: overhaul resource card semantics * feat: apply new card layout to resource list * fix: adjust spacing below locality * feat: improve semantics of other card variants * fix: align filled favorite icon with unfilled favorite icon * fix: address SVG padding issue in buttons * fix: include overflow text in topic list * feat: add screen reader labels to metadata * feat: add separator component, use period instead of middot * fix: adjust separator spacing for NVDA
- Loading branch information
Ned Zimmerman
committed
Jan 30, 2020
1 parent
908e450
commit cb4e94f
Showing
10 changed files
with
160 additions
and
100 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <span class="separator">.</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"> · </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 %} |
Oops, something went wrong.